1. 1 ICAS’2008 – Gosier, March 16-21, 2008 A Transformational Approach for Pattern-based Design of User Interfaces Costin Pribeanu Jean Vanderdonckt National Institute for Research & Development in Informatics (ICI), Bucharest, Romania Université catholique de Louvain (UCL) Louvain School of Management (LSM) Belgian Laboratory of Computer-Human Interaction (BCHI) Belgium

2. 2 ICAS’2008 – Gosier, March 16-21, 2008 Introduction Existing approaches in using patterns for UID –Conceptual view: mental models for designers and lingua franca for communication between them and the clients van Welie and van der Veer (2003), Molina et al (2002), Nielsen (2002) –Layering of task models: separating context dependent from context independent parts Seffah and Forbig (2002) –Mapping between domain and presentation models Traetteberg (2000), Sinnig et al (2002) Limitations of existing model-based approaches –Either too general: stopping at conceptual level –Either too detailed: focusing on only one model –Narrowly focusing on only two models

3. 3 ICAS’2008 – Gosier, March 16-21, 2008 Domain and task models UID – progressive derivation of UI components from representations –users, task, domain and technology Exploiting both domain and task models –Domain model what information is needed in the interface –Task model how to organize and present the information on the screen in a usable way

4. 4 ICAS’2008 – Gosier, March 16-21, 2008 Entities and relationships Domain model –Domain objects (entities) –Attributes - widget level –Relationships – dialog unit level Relationships –One-to-many - for example, a guideline is part-of a section guide –Many-to-many- for example a guideline respects one or more criteria and none or several guidelines respect a criterion Logical model (relational approach) –Typical constructs (foreign key attributes and tables) –Make it possible to address control issues

5. 5 ICAS’2008 – Gosier, March 16-21, 2008 Task model Task models –Goals, actions, properties, task decomposition Criteria used for task decomposition –data structure, functional structure –data processing, situations –nature of work - cognitive, manual, input, display –interaction objects used, interaction techniques Representation –CTT – concur task tree graphical notation (Paterno, 1999) Temporal relations between tasks (siblings) Assigning properties and interaction objects

6. 6 ICAS’2008 – Gosier, March 16-21, 2008 Example Task –Create a guide using a tool for working with guidelines Relationships –A guide can have several bases; a base contains several sections and each section contains several guidelines. –A guideline could be hierarchically structured, from more general to more specific guidelines –A guideline can be associated with other objects like references, examples and criteria Target user –a designer or human factor specialist –collecting guidelines in source-based approach create new bases, sections and criteria types.

7. 7 ICAS’2008 – Gosier, March 16-21, 2008 Representation - CTT

8. 8 ICAS’2008 – Gosier, March 16-21, 2008 Layers in task decomposition Initial task model –planning (functional) goals Specified during early task analysis –platform independent –unit tasks: show “what to do” Goals the user wants to accomplish Designed task model –operational goals - basic tasks Specified during user interface design –platform dependent –show “how to do it “ How the user is accomplishing a goal with a given technology

9. 9 ICAS’2008 – Gosier, March 16-21, 2008 Edit entity attributes pattern A simple pattern –Most used in model-based UID Mappings between three pairs –Entity-attributes –Unit task - basic tasks –Dialog unit – abstract interaction objects

10. 10 ICAS’2008 – Gosier, March 16-21, 2008 Identifying patterns Patterns afforded by relationships –Provide the user with means to visualize hierarchically organized data –Generic task flow: visualize-select-manipulate Displaying patterns –Basic patterns afforeded by relationships Interaction patterns depending on the relationship –One-to-many relationships –Many-to-many relationships

11. 11 ICAS’2008 – Gosier, March 16-21, 2008 Displaying patterns Mirroring relationships among entities –consistent with the mental model of the user as regarding the data organization –placement of the higher / lower level entity above / below the AIO group used for data entry Pattern combination –(c) is a composition of three patterns: show higher, edit entity attributes, and show lower.

12. 12 ICAS’2008 – Gosier, March 16-21, 2008 Example Presentation pattern –Context: editing a guideline Show higher Edit entity attributes Show higher

13. 13 ICAS’2008 – Gosier, March 16-21, 2008 Displaying patterns Interaction patterns in one-to-many relationships Interaction patterns in many-to-many relationships

14. 14 ICAS’2008 – Gosier, March 16-21, 2008 Example Design pattern for IO grouping

15. 15 ICAS’2008 – Gosier, March 16-21, 2008 Examples Design pattern for creating a new entity Editing a many-to-many relationships in one dialog unit

16. 16 ICAS’2008 – Gosier, March 16-21, 2008 Examples A many-to-many relationship in two dialog units

17. 17 ICAS’2008 – Gosier, March 16-21, 2008 UI derivation from task and domain models DomainTask modelPresentation

18. 18 ICAS’2008 – Gosier, March 16-21, 2008 Conclusion Identifying patterns –Displaying patterns refer mainly to the presentation –Selection patterns are relating the presentation and dialog model at widget level with the control model –Patterns for changing the associations are also relating the dialog model at dialog unit level Pattern languages for UID for user interfaces should include both –Patterns occurring within the various models –Patterns of mapping between models Applications are very different as regarding the driving model: driven by task and functional requirements, others by complex relationships or by large data structures and other by content. Although attractive, patterns could easily trap the designer into futile work which could be saved by using design heuristics;in elaborating a pattern language, finding a stopping criterion is hard. Patterns languages are difficult to elaborate: the more formal definition is used, more time is spent to integrate related patterns and this may lead to narrow their applicability

19. 19 ICAS’2008 – Gosier, March 16-21, 2008 Conclusion Advantages of the 4C framework for DUI –Multiple monitors, same platform, same user –Multiple platforms, same user –Multiple platforms, different users, but same technological space –Multiple platforms, different users, different technological spaces Limitations –Framework oriented towards the context of use –Some aspects not considered in the framework Ambient intelligence Possible extension Generalization needed

20. 20 ICAS’2008 – Gosier, March 16-21, 2008 Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language http://www.similar.cc European network on Multimodal UIs For more information and downloading, http://iihm.imag.fr/ http://iihm.imag.fr/