SlideShare ist ein Scribd-Unternehmen logo
1 von 33
Downloaden Sie, um offline zu lesen
{	
Quill	
Simplifying  the  Development  of  	
Cross-­‐‑Platform  Web  User  Interfaces  by  
Collaborative  Model-­‐‑based  Design
{	
Vivian  Genaro  Mo,i,  Sascha  Van  Cauwelaert,  ,  Jean  Vanderdonckt	
LILab  -­‐‑  Université  catholique  de  Louvain  (Belgium)	
Dave  Ragge,	
ERCIM  W3C  (France)
Ñ  Several  contexts  of  use	
Ó  Multiple  users’  profile	
Ó  Fragmented  device  market	
Ó  Heterogeneous  environments	
Motivations	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
3
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
4	
[Serenoa,  2012]
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
5	
[HaptiMap,  2012]
Ñ  Users  expect	
Ó  Plastic  UIs  through  a  responsive  design	
Ñ  Stakeholders	
Ó  Find  only  partial  support  for  design	
Motivations	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
6
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
Ñ  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
Ñ  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
Ñ  33  participants	
Ó  I.T.  practitioners  of  different  profiles	
Ñ  Context	
Ñ  Adaptation	
Ñ  Models	
Survey	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
10
Results	
Ñ  Profile	
Ó  I.T.  practitioners	
Ó  n=33	
11
Results	
Ñ  Profile	
Ó  I.T.  practitioners	
Ó  n=33	
12
Results	
Ñ  Context  Dimensions  considered	
13
Results	
14	
          Context-­‐‑relevance                        Context-­‐‑usage
Results	
Ñ Contextual  dimensions	
15	
  15	
          Context-­‐‑relevance 	
 	
Context-­‐‑usage
Adoption	
Platform	
 Environment	
User	
Context	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
16
Ñ  …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
Model-­‐‑based  Approach	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
18
Ñ  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
Ñ  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
Architecture	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
21
Case  Study	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
22
Project	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
23
Task  Models	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
24
Abstract  UI	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
25
Concrete  UI	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
26
Final  UI	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
27
Ñ  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
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
Ñ  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
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
Q&A	
SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013	
32	
@vivianmooi
Ñ  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

Weitere ähnliche Inhalte

Ähnlich wie Quill SigDoc 2013

Your First Process and Beyond
Your First Process and BeyondYour First Process and Beyond
Your First Process and BeyondNavvia
 
Strategies for Implementing Aras Innovator
Strategies for Implementing Aras InnovatorStrategies for Implementing Aras Innovator
Strategies for Implementing Aras InnovatorAras
 
Simplifying the Development of Cross-Platform Web User Interfaces by Collabo...
Simplifying the Development of  Cross-Platform Web User Interfaces by Collabo...Simplifying the Development of  Cross-Platform Web User Interfaces by Collabo...
Simplifying the Development of Cross-Platform Web User Interfaces by Collabo...Jean Vanderdonckt
 
Adopting Cloud Testing for Continuous Delivery
Adopting Cloud Testing for Continuous DeliveryAdopting Cloud Testing for Continuous Delivery
Adopting Cloud Testing for Continuous DeliverySOASTA
 
[ICSE2014 SEET]Quantitative Assessment with Using Ticket Driven Development f...
[ICSE2014 SEET]Quantitative Assessment with Using Ticket Driven Development f...[ICSE2014 SEET]Quantitative Assessment with Using Ticket Driven Development f...
[ICSE2014 SEET]Quantitative Assessment with Using Ticket Driven Development f...Hiroshi Igaki
 
Towards Quality-Aware Development of Big Data Applications with DICE
Towards Quality-Aware Development of Big Data Applications with DICETowards Quality-Aware Development of Big Data Applications with DICE
Towards Quality-Aware Development of Big Data Applications with DICEPooyan Jamshidi
 
Free text tagging system
Free text tagging systemFree text tagging system
Free text tagging systemChan Naseeb
 
Network with purpose material for participants
Network with purpose material for participantsNetwork with purpose material for participants
Network with purpose material for participantsLiliane Peters
 
Adopting Cloud Testing for Continuous Delivery, with the premier global provi...
Adopting Cloud Testing for Continuous Delivery, with the premier global provi...Adopting Cloud Testing for Continuous Delivery, with the premier global provi...
Adopting Cloud Testing for Continuous Delivery, with the premier global provi...SOASTA
 
3D visualisation needs for CAD and PDM
3D visualisation needs for CAD and PDM3D visualisation needs for CAD and PDM
3D visualisation needs for CAD and PDMDr Nicolas Figay
 
[OW2con19] LemonLDAP::NG success stories
[OW2con19] LemonLDAP::NG success stories[OW2con19] LemonLDAP::NG success stories
[OW2con19] LemonLDAP::NG success storiesWorteks
 
LemonLDAP::NG Success Stories presented at OW2con'19, June 12-13, Paris.
LemonLDAP::NG Success Stories presented at OW2con'19, June 12-13, Paris. LemonLDAP::NG Success Stories presented at OW2con'19, June 12-13, Paris.
LemonLDAP::NG Success Stories presented at OW2con'19, June 12-13, Paris. OW2
 
“Developing an Efficient Automotive Augmented Reality Solution Using Teacher-...
“Developing an Efficient Automotive Augmented Reality Solution Using Teacher-...“Developing an Efficient Automotive Augmented Reality Solution Using Teacher-...
“Developing an Efficient Automotive Augmented Reality Solution Using Teacher-...Edge AI and Vision Alliance
 
Integrating UX into an Agile Process
Integrating UX into an Agile ProcessIntegrating UX into an Agile Process
Integrating UX into an Agile ProcessJanice James
 
CV B150730-02M 张春晓 20151130
CV B150730-02M 张春晓 20151130CV B150730-02M 张春晓 20151130
CV B150730-02M 张春晓 20151130ZHANG Chunxiao
 
Introduction to the 3DPDF Consortium
Introduction to the 3DPDF ConsortiumIntroduction to the 3DPDF Consortium
Introduction to the 3DPDF Consortium3dpdfconsortium
 
DFW Connector 3D Modeling CIFE
DFW Connector 3D Modeling CIFEDFW Connector 3D Modeling CIFE
DFW Connector 3D Modeling CIFESteven Si Tran
 
Development of a learning diary for a MOOC platform
Development of a learning diary for a MOOC platformDevelopment of a learning diary for a MOOC platform
Development of a learning diary for a MOOC platformEducational Technology
 
Navvia Essentials Sneak Peek
Navvia Essentials Sneak PeekNavvia Essentials Sneak Peek
Navvia Essentials Sneak PeekNavvia
 

Ähnlich wie Quill SigDoc 2013 (20)

Your First Process and Beyond
Your First Process and BeyondYour First Process and Beyond
Your First Process and Beyond
 
Strategies for Implementing Aras Innovator
Strategies for Implementing Aras InnovatorStrategies for Implementing Aras Innovator
Strategies for Implementing Aras Innovator
 
Simplifying the Development of Cross-Platform Web User Interfaces by Collabo...
Simplifying the Development of  Cross-Platform Web User Interfaces by Collabo...Simplifying the Development of  Cross-Platform Web User Interfaces by Collabo...
Simplifying the Development of Cross-Platform Web User Interfaces by Collabo...
 
Adopting Cloud Testing for Continuous Delivery
Adopting Cloud Testing for Continuous DeliveryAdopting Cloud Testing for Continuous Delivery
Adopting Cloud Testing for Continuous Delivery
 
[ICSE2014 SEET]Quantitative Assessment with Using Ticket Driven Development f...
[ICSE2014 SEET]Quantitative Assessment with Using Ticket Driven Development f...[ICSE2014 SEET]Quantitative Assessment with Using Ticket Driven Development f...
[ICSE2014 SEET]Quantitative Assessment with Using Ticket Driven Development f...
 
Towards Quality-Aware Development of Big Data Applications with DICE
Towards Quality-Aware Development of Big Data Applications with DICETowards Quality-Aware Development of Big Data Applications with DICE
Towards Quality-Aware Development of Big Data Applications with DICE
 
Free text tagging system
Free text tagging systemFree text tagging system
Free text tagging system
 
Network with purpose material for participants
Network with purpose material for participantsNetwork with purpose material for participants
Network with purpose material for participants
 
Adopting Cloud Testing for Continuous Delivery, with the premier global provi...
Adopting Cloud Testing for Continuous Delivery, with the premier global provi...Adopting Cloud Testing for Continuous Delivery, with the premier global provi...
Adopting Cloud Testing for Continuous Delivery, with the premier global provi...
 
3D visualisation needs for CAD and PDM
3D visualisation needs for CAD and PDM3D visualisation needs for CAD and PDM
3D visualisation needs for CAD and PDM
 
[OW2con19] LemonLDAP::NG success stories
[OW2con19] LemonLDAP::NG success stories[OW2con19] LemonLDAP::NG success stories
[OW2con19] LemonLDAP::NG success stories
 
LemonLDAP::NG Success Stories presented at OW2con'19, June 12-13, Paris.
LemonLDAP::NG Success Stories presented at OW2con'19, June 12-13, Paris. LemonLDAP::NG Success Stories presented at OW2con'19, June 12-13, Paris.
LemonLDAP::NG Success Stories presented at OW2con'19, June 12-13, Paris.
 
“Developing an Efficient Automotive Augmented Reality Solution Using Teacher-...
“Developing an Efficient Automotive Augmented Reality Solution Using Teacher-...“Developing an Efficient Automotive Augmented Reality Solution Using Teacher-...
“Developing an Efficient Automotive Augmented Reality Solution Using Teacher-...
 
Integrating UX into an Agile Process
Integrating UX into an Agile ProcessIntegrating UX into an Agile Process
Integrating UX into an Agile Process
 
CV B150730-02M 张春晓 20151130
CV B150730-02M 张春晓 20151130CV B150730-02M 张春晓 20151130
CV B150730-02M 张春晓 20151130
 
Introduction to the 3DPDF Consortium
Introduction to the 3DPDF ConsortiumIntroduction to the 3DPDF Consortium
Introduction to the 3DPDF Consortium
 
DFW Connector 3D Modeling CIFE
DFW Connector 3D Modeling CIFEDFW Connector 3D Modeling CIFE
DFW Connector 3D Modeling CIFE
 
ODD: OODA Evolution
ODD: OODA EvolutionODD: OODA Evolution
ODD: OODA Evolution
 
Development of a learning diary for a MOOC platform
Development of a learning diary for a MOOC platformDevelopment of a learning diary for a MOOC platform
Development of a learning diary for a MOOC platform
 
Navvia Essentials Sneak Peek
Navvia Essentials Sneak PeekNavvia Essentials Sneak Peek
Navvia Essentials Sneak Peek
 

Mehr von Vivian Motti

Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020Vivian Motti
 
Smartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive TechnologiesSmartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive TechnologiesVivian Motti
 
Wearable technologies
Wearable technologiesWearable technologies
Wearable technologiesVivian Motti
 
Cards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course MaterialCards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course MaterialVivian Motti
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Vivian Motti
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Vivian Motti
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Vivian Motti
 
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...Vivian Motti
 
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...Vivian Motti
 
Wearable privacy skeletons in the data closet
Wearable privacy  skeletons in the data closetWearable privacy  skeletons in the data closet
Wearable privacy skeletons in the data closetVivian Motti
 
Wearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special EducationWearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special EducationVivian Motti
 
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...Vivian Motti
 
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Vivian Motti
 
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Vivian Motti
 
Toward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsToward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsVivian Motti
 
Wearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyWearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyVivian Motti
 
Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...Vivian Motti
 
An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...Vivian Motti
 

Mehr von Vivian Motti (20)

Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020Keynote speech - Webmedia 2020
Keynote speech - Webmedia 2020
 
Usable Privacy
Usable PrivacyUsable Privacy
Usable Privacy
 
Smartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive TechnologiesSmartwatch Applications as Assistive Technologies
Smartwatch Applications as Assistive Technologies
 
Wearable technologies
Wearable technologiesWearable technologies
Wearable technologies
 
Cards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course MaterialCards - Users with Disabilities - Course Material
Cards - Users with Disabilities - Course Material
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...Assisting Students with Intellectual and Developmental Disabilities in Inclus...
Assisting Students with Intellectual and Developmental Disabilities in Inclus...
 
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
mHealth Application to Inform Caregivers of Babies with Congenital Zika Virus...
 
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
Smartwatch Applications for Mental Health: A Qualitative Analysis of Users’ P...
 
Wearable privacy skeletons in the data closet
Wearable privacy  skeletons in the data closetWearable privacy  skeletons in the data closet
Wearable privacy skeletons in the data closet
 
Wearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special EducationWearable Life: a Wrist-Worn Application to Assist Students in Special Education
Wearable Life: a Wrist-Worn Application to Assist Students in Special Education
 
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
UX Design for Wrist-Worn Wearables – how contextual dynamics influence intera...
 
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
Using Smartwatches to Assist Students with Intellectual and Developmental Dis...
 
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
Smart Wearables or Dumb Wearables? Understanding how Context Impacts the UX i...
 
Toward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy ConceptsToward a Visual Vocabulary for Privacy Concepts
Toward a Visual Vocabulary for Privacy Concepts
 
Wearable Health
Wearable HealthWearable Health
Wearable Health
 
Wearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and PrivacyWearable Computing: Healthcare, Human Factors and Privacy
Wearable Computing: Healthcare, Human Factors and Privacy
 
Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...Micro interactions and multi dimensional graphical user interfaces in the des...
Micro interactions and multi dimensional graphical user interfaces in the des...
 
An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...An Overview of Wearable Applications for Health Care: Requirements and Challe...
An Overview of Wearable Applications for Health Care: Requirements and Challe...
 

Kürzlich hochgeladen

DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersSabitha Banu
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxHumphrey A Beña
 
ENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomnelietumpap1
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxAshokKarra1
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxCarlos105
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxDr.Ibrahim Hassaan
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...JhezDiaz1
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYKayeClaireEstoconing
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17Celine George
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxiammrhaywood
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Mark Reed
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfSpandanaRallapalli
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPCeline George
 

Kürzlich hochgeladen (20)

DATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginnersDATA STRUCTURE AND ALGORITHM for beginners
DATA STRUCTURE AND ALGORITHM for beginners
 
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptxINTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
INTRODUCTION TO CATHOLIC CHRISTOLOGY.pptx
 
ENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choomENGLISH6-Q4-W3.pptxqurter our high choom
ENGLISH6-Q4-W3.pptxqurter our high choom
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
Karra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptxKarra SKD Conference Presentation Revised.pptx
Karra SKD Conference Presentation Revised.pptx
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptxBarangay Council for the Protection of Children (BCPC) Orientation.pptx
Barangay Council for the Protection of Children (BCPC) Orientation.pptx
 
Gas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptxGas measurement O2,Co2,& ph) 04/2024.pptx
Gas measurement O2,Co2,& ph) 04/2024.pptx
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
ENGLISH 7_Q4_LESSON 2_ Employing a Variety of Strategies for Effective Interp...
 
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITYISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
ISYU TUNGKOL SA SEKSWLADIDA (ISSUE ABOUT SEXUALITY
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 
How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17How to Add Barcode on PDF Report in Odoo 17
How to Add Barcode on PDF Report in Odoo 17
 
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptxECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
ECONOMIC CONTEXT - PAPER 1 Q3: NEWSPAPERS.pptx
 
Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)Influencing policy (training slides from Fast Track Impact)
Influencing policy (training slides from Fast Track Impact)
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
ACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdfACC 2024 Chronicles. Cardiology. Exam.pdf
ACC 2024 Chronicles. Cardiology. Exam.pdf
 
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
How to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERPHow to do quick user assign in kanban in Odoo 17 ERP
How to do quick user assign in kanban in Odoo 17 ERP
 
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptxYOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
YOUVE GOT EMAIL_FINALS_EL_DORADO_2024.pptx
 

Quill SigDoc 2013

  • 1. { Quill Simplifying  the  Development  of   Cross-­‐‑Platform  Web  User  Interfaces  by   Collaborative  Model-­‐‑based  Design
  • 2. { Vivian  Genaro  Mo,i,  Sascha  Van  Cauwelaert,  ,  Jean  Vanderdonckt LILab  -­‐‑  Université  catholique  de  Louvain  (Belgium) Dave  Ragge, ERCIM  W3C  (France)
  • 3. Ñ  Several  contexts  of  use Ó  Multiple  users’  profile Ó  Fragmented  device  market Ó  Heterogeneous  environments Motivations SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 3
  • 4. SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 4 [Serenoa,  2012]
  • 5. SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 5 [HaptiMap,  2012]
  • 6. Ñ  Users  expect Ó  Plastic  UIs  through  a  responsive  design Ñ  Stakeholders Ó  Find  only  partial  support  for  design Motivations SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 6
  • 7. 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
  • 8. Ñ  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
  • 9. Ñ  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
  • 10. Ñ  33  participants Ó  I.T.  practitioners  of  different  profiles Ñ  Context Ñ  Adaptation Ñ  Models Survey SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 10
  • 11. Results Ñ  Profile Ó  I.T.  practitioners Ó  n=33 11
  • 12. Results Ñ  Profile Ó  I.T.  practitioners Ó  n=33 12
  • 14. Results 14          Context-­‐‑relevance                        Context-­‐‑usage
  • 15. Results Ñ Contextual  dimensions 15  15          Context-­‐‑relevance Context-­‐‑usage
  • 16. Adoption Platform Environment User Context SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 16
  • 17. Ñ  …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
  • 18. Model-­‐‑based  Approach SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 18
  • 19. Ñ  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
  • 20. Ñ  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
  • 21. Architecture SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 21
  • 22. Case  Study SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 22
  • 23. Project SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 23
  • 24. Task  Models SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 24
  • 25. Abstract  UI SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 25
  • 26. Concrete  UI SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 26
  • 27. Final  UI SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 27
  • 28. Ñ  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
  • 29. 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
  • 30. Ñ  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
  • 31. 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
  • 32. Q&A SigDoc'ʹ2013  -­‐‑  Greenville,  NC  -­‐‑  10/01/2013 32 @vivianmooi
  • 33. Ñ  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