Towards a Pattern Language for User Interface Design

1
Towards a Pattern Language for User Interface
Design

• Costin Pribeanu
• National Institute for Research and Development
  in Informatics, Bucuresti, Romania
• E-mail pribeanu_at_ici.ro

2
Content

• Introduction
• Motivation
• Objectives
• Related work
• Existing approaches
• Domain-Task-Presentation mappings
• A framework for model-based design
• Presentation patterns
• vizualization patterns
• Conclusion

3
Patterns in UID

• Patterns
• Used in urban design by Christopher Alexander
• Three-part rules problem, context and a solution
• Patterns are combining themselves in a pattern
  language
• Model-based design of user interfaces
• Typical configurations featured by each model
• Mappings between models
• domain - presentation, user - task, task -
  presentation, task - dialog, platform - dialog,
• UI derivation

4
Related work

• Existing approaches in using patterns for UID
• Conceptual view mental models for designers and
  lingua franca for communication between them and
  the clients
• Welie and 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

5
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

6
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

7
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

8
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.

9
Representation - CTT
10
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

11
Domain-task-presentation

• Mappings in domain, task and presentation models
• Horizontal mappings between models
• Vertical mappings within one model
• Mapping rules and design heuristics

12
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

13
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

14
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.

15
Example

• Presentation pattern
• Context editing a guideline

Show higher
Show higher
Edit entity attributes
16
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