From Model-based to Model-driven Design of User Interfaces

Leuven, June 9, 2005 2 / 31

Agenda

Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, 2005 3 / 31

Agenda

Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, 2005 4 / 31

Introduction

Software engineering Use models Model driven Engineering (MDE) User Interface

Prototyping No or limited modeling

Problems Multi-device / mobile user interfaces Context-sensitive user interfaces

Leuven, June 9, 2005 5 / 31

Introduction

User interface (technology) is complex Business applications Mobile and embedded interfaces

Memory and processing constraints Heterogeneous devices, environments Cognitive constraints Input and output constraints

Model-based design of user interfaces On its own Combine with MDE?

Leuven, June 9, 2005 6 / 31

Agenda

Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, 2005 7 / 31

Model-based Design of User Interfaces

Reuse designs Use different models for different aspects

Task model Presentation model

Abstract (logical structure) Concrete (“physical structure”)

Dialog model Context model

User, Environment, Platform, Services

Leuven, June 9, 2005 8 / 31

Model-based Design of User Interfaces

Use multiples levels of abstraction Tasks Platform/modality independent (abstract) Toolkit independent (concrete) Code, xml, … (final)

Availability of tools: Limited in scope Research tools Not always publicly available

Leuven, June 9, 2005 9 / 31

Agenda

Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, 2005 10 / 31

Model-driven Engineering

Reuse of design: Different levels of abstraction

Computation independent models Platform independent models Platform specific models

Transformations based upon Marks Platform information Additional information

Code generation

Context information

Abstract

Concrete

Leuven, June 9, 2005 11 / 31

Agenda

Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, 2005 12 / 31

Context-Sensitive User Interface Profile

Goals Integrate user interface models in

UML (2.0) Software engineering (MDE)

Define platform independent / abstract layer Tasks Presentation

Integrate context Broader than platform: environment, users, … Context is more than information

Leuven, June 9, 2005 13 / 31

Context-Sensitive User Interface Profile

Usage of CUP Platform independent models (CUP stereotypes)

CUP (abstract) Patterns/CUP

Specific models

(concrete)

Leuven, June 9, 2005 14 / 31

Context-Sensitive User Interface Profile

UML Profile Extend UML meta model Enhance semantics New notations

Extends UML 2.0 Extensions for

Context Abstract User Interfaces Task specification

Leuven, June 9, 2005 15 / 31

CUP: Models Activity model <> Task model:

Tasks Temporal relations Hierarchy

Presentation model Abstract

Context model Information Gathering

Domain model

Leuven, June 9, 2005 16 / 31

CUP: Activity Model

Activity “flow” Temporal relations between actions Composed of activities Stereotypes indicating kind of action

User Interaction System Environment

Leuven, June 9, 2005 17 / 31

CUP: Activity model -- Example

Leuven, June 9, 2005 18 / 31

CUP: Activity model -- Presentation

Leuven, June 9, 2005 19 / 31

CUP: Presentation Model

Abstract model Logical structure of deployed user interface Omits platform specific information Precedence specification Stereotypes (user interface components)

Input component Output component Action component Group component

Leuven, June 9, 2005 20 / 31

CUP: Presentation Model

Properties of user interface components Datatype Meta-data

Label Explanation Importance …

Sequencing can be done through associations Time Space

Leuven, June 9, 2005 21 / 31

CUP: Presentation Model -- Example

Leuven, June 9, 2005 22 / 31

CUP: Activity model – Context

Leuven, June 9, 2005 23 / 31

CUP: Context model

Context information Can be broad specification as in the context ontology Gathering indicated by stereotypes

profiledContext - by humans detectedContext - by system

Context processing Indicate responsible components

contextCollector

Leuven, June 9, 2005 24 / 31

CUP: Context Model

Leuven, June 9, 2005 25 / 31

Agenda

Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, 2005 26 / 31

Current activities – future work

Define transformations to platform specific models Use patterns

Wizard Each user interface component is a step Add “buttons” for navigation

Form Linear list of input components Confirmation, cancellation at end

Leuven, June 9, 2005 27 / 31

Current Activities – future work

Define transformations to platform specific models Use design knowledge

Integrate knowledge from prototyping Integration with early prototyping tool (sketch-based) Possibilities for consistency checks

XML-based: XHTML (+ XForms) UIML?

Use style Directly to code?

Leuven, June 9, 2005 28 / 31

Agenda

Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, 2005 29 / 31

Conclusions Defined CUP

Platform independent models Actions Presentation

Context model Information Interaction

Working on Transformations to platform specific models Refinement of the profile

Leuven, June 9, 2005 30 / 31

Conclusions

Other contributions Context-sensitive models

Decision nodes Dialog model with transitions triggered by context Integration “context toolkit” Tool support

Distributed user interfaces Adapting models for distributed user interfaces Tool support

Leuven, June 9, 2005 31 / 31

Questions?