Quill SigDoc 2013

33
{ Quill Simplifying the Development of CrossPlatform Web User Interfaces by Collaborative Modelbased Design

description

Paper presented at SigDoc'2013 Serenoa project

Transcript of Quill SigDoc 2013

Page 1: Quill SigDoc 2013

{ Quill

Simplifying  the  Development  of   Cross-­‐‑Platform  Web  User  Interfaces  by  Collaborative  Model-­‐‑based  Design

Page 2: Quill SigDoc 2013

{ Vivian  Genaro  Mo,i,  Sascha  Van  Cauwelaert,  ,  Jean  Vanderdonckt LILab  -­‐‑  Université  catholique  de  Louvain  (Belgium) Dave  Ragge, ERCIM  W3C  (France)

Page 3: Quill SigDoc 2013

Ñ  Several  contexts  of  use Ó  Multiple  users’  profile Ó  Fragmented  device  market Ó  Heterogeneous  environments

Motivations

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 3

Page 4: Quill SigDoc 2013

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 4

[Serenoa,  2012]

Page 5: Quill SigDoc 2013

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 5

[HaptiMap,  2012]

Page 6: Quill SigDoc 2013

Ñ  Users  expect Ó  Plastic  UIs  through  a  responsive  design

Ñ  Stakeholders Ó  Find  only  partial  support  for  design

Motivations

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 6

Page 7: Quill SigDoc 2013

SotA

Models and Diagrams UI Sketching and Prototyping

ArgoUML Balsamiq

DIA JustInMind

Visio MAQETTA

Visual Paradigm SketchFlow

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 7

Page 8: Quill SigDoc 2013

Ñ Models  are  an  abstract  and  simplified  representation  of  a  system

Ñ  MDA  aims  at  alleviating  the  cost  of  code  production  while  improving  its  qualities

Ñ  Context-­‐‑awareness  is  a  capability  to  identify  and  consider  contextual  information

Ñ  Adaptation  aims  at  providing  users  an  application  that  is  more  suitable  according  to  the  context  of  use

Key  concepts

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 8

Page 9: Quill SigDoc 2013

Ñ  H1)  Stakeholders  are  aware  of  the  importance  and  the  benefits  of  considering:  context-­‐‑awareness,  model-­‐‑based  approaches  and  adaptation.  

Ñ  H2)  Stakeholders  do  not  fully  incorporate  into  their  daily  work  practices:  context-­‐‑gathering,  model-­‐‑based  approaches  and  adaptation.  

Survey

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 9

Page 10: Quill SigDoc 2013

Ñ  33  participants Ó  I.T.  practitioners  of  different  profiles

Ñ  Context Ñ  Adaptation Ñ  Models

Survey

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 10

Page 11: Quill SigDoc 2013

Results Ñ Profile

Ó  I.T.  practitioners

Ó  n=33

11

Page 12: Quill SigDoc 2013

Results Ñ Profile

Ó  I.T.  practitioners

Ó  n=33

12

Page 13: Quill SigDoc 2013

Results Ñ  Context  Dimensions  considered

13

Page 14: Quill SigDoc 2013

Results

14

         Context-­‐‑relevance                        Context-­‐‑usage

Page 15: Quill SigDoc 2013

Results Ñ Contextual  dimensions

15  15

         Context-­‐‑relevance Context-­‐‑usage

Page 16: Quill SigDoc 2013

Adoption

Platform Environment

User Context

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 16

Page 17: Quill SigDoc 2013

Ñ  …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

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 17

Page 18: Quill SigDoc 2013

Model-­‐‑based  Approach

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 18

Page 19: Quill SigDoc 2013

Ñ  A  Design  Assistant  for  model-­‐‑based  design  of  web  application  UIs Ó  Collaborative Ó  Cross-­‐‑platform Ó  Web-­‐‑based Ó  Open  source Ó  HTML5  based

Quill

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 19

Page 20: Quill SigDoc 2013

Ñ  Flexible  design  decisions Ñ  Cross-­‐‑platform  consistency Ñ  Context-­‐‑awareness Ñ  Usability  guidance Ñ  Scalability

Ó  Rules  and  views Ñ  Compatibility Ñ  Persistency Ñ  Collaboration

Requirements

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 20

Page 21: Quill SigDoc 2013

Architecture

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 21

Page 22: Quill SigDoc 2013

Case  Study

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 22

Page 23: Quill SigDoc 2013

Project

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 23

Page 24: Quill SigDoc 2013

Task  Models

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 24

Page 25: Quill SigDoc 2013

Abstract  UI

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 25

Page 26: Quill SigDoc 2013

Concrete  UI

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 26

Page 27: Quill SigDoc 2013

Final  UI

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 27

Page 28: Quill SigDoc 2013

Ñ  Models  held  in  the  cloud Ñ  Graphic  UI

Ó  Forced  directed  layout Ó  Drag-­‐‑and-­‐‑drop  of  model  components

Ñ  Constraint  propagation Ó  Abductive  Reasoning

Design  Decisions

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 28

Page 29: Quill SigDoc 2013

Discussion Ñ Stakeholders   recognize   the   relevance   and   benefits   of  models Ó  But   they   partially   adopt   them   in   the   software  development  phases

Ñ The  complexity  and  efforts  needed  to  incorporate  them  is  the  main  drawback

Ñ Only   by   facilitating   and   supporting   its   adoption  through  beoer  tools,  it  may  increase  their  usage

29

Page 30: Quill SigDoc 2013

Ñ  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

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 30

Page 31: Quill SigDoc 2013

Acknowledgments

Ñ  The   authors   gratefully   acknowledge   the  support   of   the   FP7   Serenoa   project,   funded  by   the   European   Union   through   under  reference  FP7-­‐‑ICT-­‐‑258030.  

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 31

Page 32: Quill SigDoc 2013

Q&A

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 32

@vivianmooi

Page 33: Quill SigDoc 2013

Ñ  EU  FP7  Serenoa  project Ó  Context  aware  model-­‐‑based  user  interfaces Ó  hop://www.serenoa-­‐‑fp7.eu/

Ñ  W3C  Model-­‐‑Based  UI  Working  Group Ó  Standardizing  task  models  and  abstract  UI Ó  hop://www.w3.org/2011/mbui/

Ñ  Responsive  Design,  e.g. Ó  hop://www.w3.org/2013/Talks/responsive-­‐‑design.pdf

Ñ  About  Quill Ó  hop://www.w3.org/2013/Talks/quill-­‐‑slides-­‐‑www2013.pdf Ó  hop://www.w3.org/2013/Talks/quill-­‐‑paper-­‐‑www2013.pdf

References

SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 33