Generative Pattern-Based Design of User Interfaces
-
Upload
jean-vanderdonckt -
Category
Documents
-
view
2.073 -
download
2
description
Transcript of Generative Pattern-Based Design of User Interfaces
![Page 1: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/1.jpg)
Generative Pattern-Based Design of User Interfaces
Jean Vanderdonckt and Francisco MonteroUniversité catholique de Louvain and University of Castilla-La Mancha
(Belgium) (Spain)
![Page 2: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/2.jpg)
Contents
Introduction
Related Work
A conceptual model of UI patterns
Using UI patterns with UsiXML
Conclusions and future works
![Page 3: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/3.jpg)
Introduction
User
Interface Quality
Experience
Model-based UI Development
Quality
GenerativeexperienceModel-based
UI Development
User Interface
![Page 4: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/4.jpg)
Related work (ii)
UI and interaction patterns
Design Patterns: Elements of
Reusable Object Oriented Software
A Pattern Language: Towns,
Buildings, Construction
USAPs: Usability supporting
Architectural patterns
A Pattern Language for
Human-Computer Interface Design
A Pattern Library for Interaction
Design
User Interface Design
Patterns
Yahoo! Design Pattern Library
Design of Sites, The: Patterns
for Creating Winning
Web Sites
A Pattern Language for Web Usability
Ajax Design
Patterns
Just-UI
Stream-lined
object modelin
g
![Page 5: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/5.jpg)
Related works (ii)<!ELEMENT pattern (name?, alias*, illustration?, problem?, context?, forces?, solution?, synopsis?, diagram?, evidence?, confidence?, literature?, implementation?, related-patterns?, pattern-link*, management?)><!ATTLIST pattern patternID CDATA #REQUIRED><!ELEMENT name (#PCDATA)><!ELEMENT alias (#PCDATA)><!ELEMENT illustration ANY><!ELEMENT problem (#PCDATA)><!ELEMENT context ANY><!ELEMENT forces ANY><!ELEMENT solution ANY><!ELEMENT synopsis (#PCDATA)><!ELEMENT diagram ANY><!ELEMENT evidence (example*, rationale?)><!ELEMENT example ANY><!ELEMENT rationale ANY><!ELEMENT confidence (#PCDATA)><!ELEMENT literature ANY><!ELEMENT implementation ANY><!ELEMENT related-patterns ANY><!ELEMENT pattern-link EMPTY><!ATTLIST pattern-link type CDATA #REQUIREDpatternID CDATA #REQUIREDcollection CDATA #REQUIREDlabel CDATA #REQUIRED><!ELEMENT management (author?, credits?, creation-date?, lastmodified?, revision-number?)><!ELEMENT author (#PCDATA)><!ELEMENT credits (#PCDATA)><!ELEMENT creation-date (#PCDATA)><!ELEMENT last-modified (#PCDATA)><!ELEMENT revision-number (#PCDATA)>
PLML
![Page 6: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/6.jpg)
Related works (iii)
![Page 7: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/7.jpg)
A conceptual model of UI patterns
![Page 8: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/8.jpg)
Using UI patterns and usixml
Task-oriented specification
Abstract User Interface
Concrete User Interface
Final User Interface
![Page 9: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/9.jpg)
An example: Login (welie.com)
![Page 10: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/10.jpg)
An example: Login (welie.com)
Task Model
![Page 11: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/11.jpg)
An example: Login (welie.com)
Task to AUI
model
![Page 12: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/12.jpg)
An example: Login (welie.com)
AUI to CUI
model
![Page 13: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/13.jpg)
Conclusions and future works
• Interaction patterns can be used to generate user interfaces
• Model-based and Model-driven are useful tools for UI development
• Additional work is needed in order to classify and organized available interaction patterns
Quality
GenerativeexperienceModel-based
UI Development
User Interface
![Page 14: Generative Pattern-Based Design of User Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062307/55491e9fb4c905a54c8b6a3b/html5/thumbnails/14.jpg)
Generative Pattern-Based Design of User Interfaces
Jean Vanderdonckt and Francisco MonteroUniversité catholique de Louvain and University of Castilla-La Mancha
(Belgium) (Spain)