Ensuring responsive design of web applications requires their user interfaces to be able to adapt according to different contexts of use, which subsume the end users, the devices and platforms used to carry out the interactive tasks, and also the environment in which they occur. To address the challenges posed by responsive design, aiming to simplify their development by factoring out the common parts from the specific ones, this paper presents Quill, a web-based development environment that enables various stakeholders of a web application to collaboratively adopt a model-based design of the user interface for cross-platform deployment. The paper establishes a series of requirements for collaborative model-based design of cross-platform web user interfaces motivated by the literature, observational and situational design. It then elaborates on potential solutions that satisfy these requirements and explains the solution selected for Quill. A user survey has been conducted to determine how stakeholders appreciate model-based design user interface and how they estimate the importance of the requirements that lead to Quill

1. {
Quill
Simplifying the Development of
Cross-Platform Web User Interfaces by
Collaborative Model-based Design

2. {
Vivian Genaro Motti, Sascha Van Cauwelaert, , Jean Vanderdonckt
LILab - Université catholique de Louvain (Belgium)
Dave Raggett
ERCIM W3C (France)

3.  Several contexts of use
 Multiple users’ profile
 Fragmented device market
 Heterogeneous environments
Motivations

6.  Users expect
 Plastic UIs through a responsive design
 Stakeholders
 Find only partial support for design
Motivations

7. SotA
Models and Diagrams UI Sketching and
Prototyping
ArgoUML Balsamiq
DIA JustInMind
Visio MAQETTA
Visual Paradigm SketchFlow

8.  33 participants
 I.T. practitioners of different profiles
 Context
 Adaptation
 Models
Survey

9. Adoption
Platform Environment
User
Context

10.  …models are relevant and useful but the lack of
"easy to use" applications, "easy to draw models"
puts resistance for developers to use these tools
 ... if the model-based approach is directly
responsible for the generated code and any
changes in the code automatically reflects in the
model then it would be extremely relevant to
have this kind of approach during the
development…
Remarks

11. Model-based Approach

12.  A Design Assistant for model-based design of
web application UIs
 Collaborative
 Cross-platform
 Web-based
 Open source
 HTML5 based
Quill

13.  Flexible design decisions
 Cross-platform consistency
 Context-awareness
 Usability guidance
 Scalability
 Rules and views
 Compatibility
 Persistency
 Collaboration
Requirements

14. Architecture

15. Case Study

16. Project

17. Task Models

18. Abstract UI

19. Concrete UI

20. Final UI

21.  Models held in the cloud
 Graphic UI
 Forced directed layout
 Drag-and-drop of model components
 Constraint propagation
 Abductive Reasoning
Design Decisions

22.  Quill benefits
 Web-based application
 Models hosted on the cloud
 Flexible approaches to work
 Collaboration among stakeholders of different
expertise levels and domains
 Compliant with CRF
Final Remarks

23. Acknowledgments
 The authors gratefully acknowledge the
support of the FP7 Serenoa project, funded
by the European Union through under
reference FP7-ICT-258030.

24. Q&A
@vivianmotti

25.  EU FP7 Serenoa project
 Context aware model-based user interfaces
 http://www.serenoa-fp7.eu/
 W3C Model-Based UI Working Group
 Standardizing task models and abstract UI
 http://www.w3.org/2011/mbui/
 Responsive Design, e.g.
 http://www.w3.org/2013/Talks/responsive-design.pdf
 About Quill
 http://www.w3.org/2013/Talks/quill-slides-www2013.pdf
 http://www.w3.org/2013/Talks/quill-paper-www2013.pdf
References