Model Based Layouting


Published on

Offering user interfaces for interactive applications that are flexible enough to be adapted to various context-of-use scenarios such as supporting different display sizes or addressing various input styles requires an adaptive layout. We describe an approach for layout derivation that is embedded in a model-based user interface generation process. By an interactive and tool-supported process we can efficiently create a layout model that is composed of interpretations of the other design models and is consistent to the application design. By shifting the decision about which interpretations are relevant to support a specific context-of-use scenario from design-time to run-time, we can flexibly adapt the layout to consider new device capabilities, user demands and user interface distributions. We present our run-time environment that is able to evaluate the relevant model layout information to constraints as they are required and to reassemble the user interface parts regarding the updated containment, order, orientation and sizes information of the layout-model. Finally we present results of an evaluation we performed to test the design and run-time efficiency of our model-based layouting approach.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Model Based Layouting

    1. 1. Model-based Layout Generation The Multi-Access Service Platform Sebastian Feuerstack , Marco Blumendorf, Veit Schwartze, Sahin Albayrak
    2. 2. Agenda <ul><li>Motivation </li></ul><ul><li>Approach </li></ul><ul><li>Layout Model Generation Process </li></ul><ul><li>The Multi-Access Service Platform </li></ul><ul><li>Tool </li></ul><ul><li>Evaluation </li></ul><ul><li>Conclusion </li></ul>
    3. 3. Approach <ul><li>A model-based user interface layouting that differs from previous approaches in two general aspects: </li></ul><ul><ul><li>We interpret the information from already existing user interface design models using an interactive tool. </li></ul></ul><ul><ul><ul><li>Reduce amount of information for specifying the layout </li></ul></ul></ul><ul><ul><ul><li>Generate a layout that is consistent to the design models </li></ul></ul></ul><ul><ul><li>We shift the decision about which of the statements are applied from design-time to run-time to enable </li></ul></ul><ul><ul><ul><li>flexible context-of-use adaptations of the user interface layout </li></ul></ul></ul><ul><ul><ul><li>describe new context-of-use adaptations of the layout without the need to change the application </li></ul></ul></ul>
    4. 4. Layout Model Generation Process <ul><li>Two kind of layout statements for interpreting the design models: </li></ul><ul><ul><li>Relevant to a specific interactive application </li></ul></ul><ul><ul><li>Relevant to a certain context-of-use (device, user, environment) </li></ul></ul><ul><li>By a simulation, statements can be applied for (pre-defined) various screens or context-of-use scenarios </li></ul>
    5. 5. Layout Characteristics <ul><li>Containtment </li></ul><ul><ul><li>c3 contains e3 & e4 </li></ul></ul><ul><li>Order </li></ul><ul><ul><li>e1 before e2, e4 after e3 </li></ul></ul><ul><ul><li>Presentation depends on localization / context! </li></ul></ul><ul><li>Orientation </li></ul><ul><ul><li>c2 & c3 horizontal </li></ul></ul><ul><ul><li>e1 & e2 vertical </li></ul></ul><ul><li>Size </li></ul><ul><ul><li>e3 width/height = ½ </li></ul></ul><ul><ul><li>width (e3) = 3 x width (e4) </li></ul></ul><ul><li>Interdependencies between characteristics require definition of a strict processing order </li></ul><ul><li>Size to ensure aspect ratio </li></ul><ul><li>Orientation for efficient space utilization </li></ul>
    6. 6. Properties of a Layout Statement
    7. 7. The Multi-Access Service Platform (MASP) <ul><li>Agent-based run-time environment making design models alive </li></ul><ul><li>Layout Model Agent receives user interface distribution + context to calculate the CUI layout </li></ul>
    8. 8. Layout Generation in MASP <ul><li>Statements are selected based on Context and Distribution, evaluated and solved at run-time. </li></ul><ul><ul><li>reduces the constraint network to solve </li></ul></ul><ul><ul><li>can consider contexts unknown during design-time </li></ul></ul>
    9. 9. Layout Model Generator
    10. 10. Recipe Finder / 4-Star Cooking Assistant
    11. 11. Evaluation: Design Efficiency <ul><li>Model-based layout generation of an existing application </li></ul><ul><li>Sequentially 4 situations were layouted with different amount of elements to layout (1) and with different complexity (2) </li></ul><ul><li>Results: </li></ul><ul><ul><li>Containtment (3) and Order (5) can be derived from task model efficently </li></ul></ul><ul><ul><li>The amount of statements to specify decreases with each additional screen </li></ul></ul><ul><ul><li>Orientation (4) cannot be derived from the design models </li></ul></ul><ul><ul><li>Layouts for User Interface distributions can be generated at run-time. </li></ul></ul><ul><ul><li>Size related statements can be efficiently derived by design models and context </li></ul></ul>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
    12. 12. Evaluation: Efficiency at Run-time <ul><li>Measured for 4 situations: </li></ul><ul><ul><li>the statement selection and evaluation (3) </li></ul></ul><ul><ul><li>The solving time to generate the coordinates (4) </li></ul></ul><ul><li>Results: </li></ul><ul><ul><li>Selecting relevant statements (1) before the constraint calculation (2) is cheap (3) and reduced the solving time (4) </li></ul></ul><ul><ul><li>=>We can instantly recalculate the layout at run-time to reflect context changes. E.g. distance-ware layouting. </li></ul></ul>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
    13. 13. Conclusions & Further Work <ul><li>The information of design models of a model-based UI design can be used to derive a layout model. </li></ul><ul><li>We use statements for the interpretation of design models that we evaluate at run-time </li></ul><ul><ul><li>We can ensure a consistent user interface layout </li></ul></ul><ul><ul><li>We can consider context-of-use adaptations of the layout even to situations not explicitly addressed during design-time </li></ul></ul><ul><li>Further Work: </li></ul><ul><ul><li>Evaluation of huge applications. </li></ul></ul><ul><ul><li>Identification of a set of statements that can be generally applied for generating a layout. </li></ul></ul><ul><ul><li>Improve tool support. </li></ul></ul>
    14. 14. 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