ModelBased UI Development

1
(No Transcript)
2
Content

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• Model-Based UI Development
• The Limitations
• HCI Patterns
• The Solution
• Pattern-Driven Model-Based Framework
• The Core Constitutes
• Case Study Hotel Management
• The Exemplification
• Conclusion
• The Justification

3
Research Objectives

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• Enhance the model-based framework with support
  for knowledge reuse by integrating patterns.
• Recommend a classification for patterns
  according to models, and in conjunction, propose
  a set of selected patterns.
• Demonstrate how tools and technologies can be
  used for building and evaluating the various
  models and for applying patterns.

4
Model-Based UI Development

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Idea Identify useful abstractions, that
highlight the main aspects of a UIs design
Aspects are represented using declarative
models Model-based UI Development focuses on
finding mapping between the various
models Benefits Design decisions are made at
conceptual levels Easier to comprehend the
system for later maintenance
5
Model-Based UI Development

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Current Status The mainstream developer has not
adopted the model-based approach for creating
UIs Limitations The complexity of the models
and their notations The lack of tool
support Lack of reusing already modeled
solutions.
? HCI Patterns as a solution
6
HCI Patterns

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• Idea
• A pattern encapsulates a solution to a common
  problem, which applies in different contexts of
  use.
• HCI Patterns encapsulate design knowledge related
  to interactive systems and the UI.
• Patterns as a vehicle for reuse
• The concept of patterns can cope with the three
  dimensions of reuse
• Encapsulation
• Combination
• Customization

7
Pattern-Driven Model-Based Framework

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

8
The Process of Pattern Application

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Identification A subset M of the target model
M is identified M ? M Selection A pattern P
is selected, which is appropriate to be
applied to M Adaptation The pattern P will
be adjusted according to the context of use C
resulting in the pattern instance S A (P,C) S
Integration The pattern instance will be
integrated into M F (M, S) M
9
Pattern Structure and Interface

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Pattern Interface
10
Pattern Interface and Structure

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Pattern Structure
11
Patterns in Task Modeling

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• The Task Model
• Describes how activities can be performed to
  reach the users goals when interacting with the
  system.
• Hierarchical decompositions of tasks and subtasks
  into atomic actions.
• Temporal Relationships between tasks.
• Patterns for the Task Model
• Instances of these patterns deliver task
  fragments

12
Patterns in Task Modeling

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Multi-value Input Form Pattern
13
Patterns in Dialog Modeling

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• The Dialog Model
• Defines the navigational structure of the user
  interface by
• Grouping related tasks into dialog views
• Defining transitions from one dialog view to
  another, as well as trigger events
• Represented by a graph (vertices, edges).
• Constrained by hierarchical and temporal
  relations of the
• task model.

14
Patterns in Dialog Modeling

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Recursive Activation Pattern
15
Patterns in Presentation Modeling

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• The Presentation Model
• Defines a set of abstract interaction elements
• Style attributes remain unset
• Abstract interaction elements described as XUL
  fragments
• Presentation Patterns
• Instances deliver XUL Code
• Formalized as XUL Velocity templates

16
Patterns in Presentation Modeling

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

The Unambiguous Format Pattern
17
Patterns in Layout Modeling

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• The Layout Model
• Abstract interaction elements are aggregated
  according to an overall floorplan.
• Defines the look-and-feel by setting the
  remaining style attributes
• XUL and Style Sheets (XUL Skins)
• Rendered to the actual UI
• Layout Patterns
• Instances deliver aggregated XUL code or XUL
  Skins
• Implemented as Velocity templates

18
The Task-Pattern-Wizard

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• Assistance for all 4 steps of pattern application
• Identification Picking of a sub graph of the
  existing task model (described in XIML)
• Selection Choosing an appropriate pattern
  (described in TPML)
• Adaptation User will be guided through the top
  down process of pattern adaptation
• Integration Merging the pattern instance with
  the existing task model

19
The Task-Pattern-Wizard

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

20
Case Study Hotel Management

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Scope Non-functional UI prototype to illustrate
the core ideas Exemplify the creation of the
models and pattern usage Demonstrate the
interplay of different tools and
technologies Implementation Envisioned task,
the dialog, the presentation and layout
model Usage of 13 different patterns
21
Case Study Hotel Management

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Task Model
22
Case Study Hotel Management

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Dialog Model
23
Case Study Hotel Management

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Presentation Model
24
Case Study Hotel Management

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Layout Model
25
Conclusion Main Contributions

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• 1. Enhanced the model-based framework
• Patterns as building blocks for the various
  models in order to foster reuse (Encapsulation)
• Proposed a classification of patterns according
  to models
• Proposed the process of pattern application, in
  which patterns are abstractions which must be
  instantiated (Customization)
• Proposed an interface for aggregating patterns
  (Combination)

26
Conclusion Main Contributions

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• 2. Elaboration of a comprehensive case study
• Implementation of a UI prototype using the
  pattern-driven model- based framework
  (Exemplification)
• 13 different patterns relative to the various
  models were discovered, formalized and applied

27
Conclusion Main Contributions

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

• 3. Development of the Task-Pattern-Wizard
• Selecting and applying patterns to establish
  task models
• Proposed notation and method for "formalizing"
  task patterns
• Demonstrated the interplay of different tools
  and technologies

28
Future Investigations

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Evaluation and dissemination of patterns Extend
framework for generation of functional UI
prototypes Enhance contextualization of the
framework to support Multiple User Interfaces

29
Publications

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Sinnig, D., Gaffar, A., Reichart, D., Forbrig, P.
and Seffah, A., Computer-Aided Design of User
Interfaces IV, chapter entitled Patterns in
Model-based Engineering, Kluwer, 2004 (to
appear). Javahery, H., Seffah, A., Engelberg, D.
and Sinnig, D., Multiple User Interfaces
Multiple-Devices, Cross-Platform and
Context-Awareness, ch. 12 Migrating User
Interfaces between Platforms Using HCI Patterns.
Wiley, 2003. Sinnig, D., Gaffar, A., Reichart,
D., Forbrig, P. and Seffah, A., Patterns in
Model-based Engineering, in Proceedings CADUI
2004 jointly organized with ACM-IUI 2004,
Funchal, Protugal, 13.-16. Jan., 2004, pp. 197
210. Abi-Aad, R., Sinnig, D., Radhakrishnan, T.
and Seffah, A., CoU Context of Use Model for
User Interface Design, in Proceedings of HCI
International 2003, vol. 4, (Greece), pp. 8 12,
LEA, June 2003.
30
Publications

• Model-Based UI Development
• HCI Patterns
• Pattern-Driven Model-Based Framework
• Task Model
• Dialog Model
• Presentation Model
• Layout Model
• Task-Pattern-Wizard
• Case Study Hotel Management
• Conclusion

Sinnig, D., Javahery, H., Forbrig, F. and Seffah,
A., The Complicity of Model-Based Approaches and
Patterns for UI Engineering, in Proceedings of
BIR 2003, (Berlin), pp. 120 - 131, SHAKER, Sept.
2003. Sinnig, D., Gaffar, A., Forbrig, P.,
Seffah, A., Patterns, Tools and Models for
Interaction Design, Position Paper in CADUI 2004
Workshop entitled Making model-based user
interface design practical Usable and open
methods and tools, Funchal, Portugal, 12. Jan.,
2004. Sinnig, D., Forbrig, P. and Seffah, A.,
Patterns in Model-Based Development, Position
Paper in INTERACT 03 Workshop entitled Software
and Usability Cross-Pollination The Role of
Usability Patterns, September 2003. Gaffar, A.,
Sinnig, D., Javahery, H. and Seffah, A., MOUDIL
A Comprehensive Framework for Disseminating and
Sharing HCI Patterns, Position Paper for CHI 03
Workshop entitled Perspectives on HCI patterns
Concepts and Tools, February 2003.
31
(No Transcript)