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

Leuven, June 9, / 31 Agenda Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, / 31 Agenda Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, / 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, / 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, / 31 Agenda Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, / 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, / 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, / 31 Agenda Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, / 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, / 31 Agenda Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, / 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, / 31 Context-Sensitive User Interface Profile Usage of CUP  Platform independent models (CUP stereotypes) CUP (abstract) Patterns/CUP Specific models (concrete)

Leuven, June 9, / 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, / 31 CUP: Models Activity model <> Task model:  Tasks  Temporal relations  Hierarchy Presentation model  Abstract Context model  Information  Gathering Domain model

Leuven, June 9, / 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, / 31 CUP: Activity model -- Example

Leuven, June 9, / 31 CUP: Activity model -- Presentation

Leuven, June 9, / 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, / 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, / 31 CUP: Presentation Model -- Example

Leuven, June 9, / 31 CUP: Activity model – Context

Leuven, June 9, / 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, / 31 CUP: Context Model

Leuven, June 9, / 31 Agenda Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, / 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, / 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, / 31 Agenda Introduction Model-based Design of User Interfaces (MBUID) Model-driven Engineering and MBUID CUP Current activities Conclusion

Leuven, June 9, / 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, / 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, / 31 Questions?