Model-based Layout Generation The Multi-Access Service Platform Sebastian Feuerstack , Marco Blumendorf, Veit Schwartze, Sahin Albayrak

Agenda Motivation Approach Layout Model Generation Process The Multi-Access Service Platform Tool Evaluation Conclusion

Motivation

Approach

Layout Model Generation Process

The Multi-Access Service Platform

Tool

Evaluation

Conclusion

Approach A model-based user interface layouting that differs from previous approaches in two general aspects: We interpret the information from already existing user interface design models using an interactive tool. Reduce amount of information for specifying the layout Generate a layout that is consistent to the design models We shift the decision about which of the statements are applied from design-time to run-time to enable flexible context-of-use adaptations of the user interface layout describe new context-of-use adaptations of the layout without the need to change the application

A model-based user interface layouting that differs from previous approaches in two general aspects:

We interpret the information from already existing user interface design models using an interactive tool.

Reduce amount of information for specifying the layout

Generate a layout that is consistent to the design models

We shift the decision about which of the statements are applied from design-time to run-time to enable

flexible context-of-use adaptations of the user interface layout

describe new context-of-use adaptations of the layout without the need to change the application

Layout Model Generation Process Two kind of layout statements for interpreting the design models: Relevant to a specific interactive application Relevant to a certain context-of-use (device, user, environment) By a simulation, statements can be applied for (pre-defined) various screens or context-of-use scenarios

Two kind of layout statements for interpreting the design models:

Relevant to a specific interactive application

Relevant to a certain context-of-use (device, user, environment)

By a simulation, statements can be applied for (pre-defined) various screens or context-of-use scenarios

Layout Characteristics Containtment c3 contains e3 & e4 Order e1 before e2, e4 after e3 Presentation depends on localization / context! Orientation c2 & c3 horizontal e1 & e2 vertical Size e3 width/height = ½ width (e3) = 3 x width (e4) Interdependencies between characteristics require definition of a strict processing order Size to ensure aspect ratio Orientation for efficient space utilization

Containtment

c3 contains e3 & e4

Order

e1 before e2, e4 after e3

Presentation depends on localization / context!

Orientation

c2 & c3 horizontal

e1 & e2 vertical

Size

e3 width/height = ½

width (e3) = 3 x width (e4)

Interdependencies between characteristics require definition of a strict processing order

Size to ensure aspect ratio

Orientation for efficient space utilization

Properties of a Layout Statement

The Multi-Access Service Platform (MASP) Agent-based run-time environment making design models alive Layout Model Agent receives user interface distribution + context to calculate the CUI layout

Agent-based run-time environment making design models alive

Layout Model Agent receives user interface distribution + context to calculate the CUI layout

Layout Generation in MASP Statements are selected based on Context and Distribution, evaluated and solved at run-time. reduces the constraint network to solve can consider contexts unknown during design-time

Statements are selected based on Context and Distribution, evaluated and solved at run-time.

reduces the constraint network to solve

can consider contexts unknown during design-time

Layout Model Generator

Recipe Finder / 4-Star Cooking Assistant

Evaluation: Design Efficiency Model-based layout generation of an existing application Sequentially 4 situations were layouted with different amount of elements to layout (1) and with different complexity (2) Results: Containtment (3) and Order (5) can be derived from task model efficently The amount of statements to specify decreases with each additional screen Orientation (4) cannot be derived from the design models Layouts for User Interface distributions can be generated at run-time. Size related statements can be efficiently derived by design models and context 8 4 2 2 0 10 15 4.Cooking Aid 3 0 0 1,2 0 8 4,9 3. Distribution: PDA,Touch 9 2 1 6 0 8 13 2.Shopping List 19 4 3 3 9 7 19 1.Recipe Search 7) 6) 5) 4) 3) 2) 1) Screen

Model-based layout generation of an existing application

Sequentially 4 situations were layouted with different amount of elements to layout (1) and with different complexity (2)

Results:

Containtment (3) and Order (5) can be derived from task model efficently

The amount of statements to specify decreases with each additional screen

Orientation (4) cannot be derived from the design models

Layouts for User Interface distributions can be generated at run-time.

Size related statements can be efficiently derived by design models and context

Evaluation: Efficiency at Run-time Measured for 4 situations: the statement selection and evaluation (3) The solving time to generate the coordinates (4) Results: Selecting relevant statements (1) before the constraint calculation (2) is cheap (3) and reduced the solving time (4) =>We can instantly recalculate the layout at run-time to reflect context changes. E.g. distance-ware layouting. 13 ms <1ms 130 23 4. Cooking Aid 8,10ms <1ms 56,81 8,10 3. Distribution PDA,Touch 8 ms <1ms 107 20 2.Shopping List 14 ms <1ms 142 25 1.Recipe Search 4) 3) 2) 1) Screen

Measured for 4 situations:

the statement selection and evaluation (3)

The solving time to generate the coordinates (4)

Results:

Selecting relevant statements (1) before the constraint calculation (2) is cheap (3) and reduced the solving time (4)

=>We can instantly recalculate the layout at run-time to reflect context changes. E.g. distance-ware layouting.

Conclusions & Further Work The information of design models of a model-based UI design can be used to derive a layout model. We use statements for the interpretation of design models that we evaluate at run-time We can ensure a consistent user interface layout We can consider context-of-use adaptations of the layout even to situations not explicitly addressed during design-time Further Work: Evaluation of huge applications. Identification of a set of statements that can be generally applied for generating a layout. Improve tool support.

The information of design models of a model-based UI design can be used to derive a layout model.

We use statements for the interpretation of design models that we evaluate at run-time

We can ensure a consistent user interface layout

We can consider context-of-use adaptations of the layout even to situations not explicitly addressed during design-time

Further Work:

Evaluation of huge applications.

Identification of a set of statements that can be generally applied for generating a layout.

Improve tool support.

Thanks for your attention! Questions? Copyright next generation media 2007 Please visit our demo during the breaks! Multimodal User Interfaces for Smart Environments: The Multi-Access Service Platform More information including videos, papers and software online at http://masp.dai-labor.de