The document discusses model-based visual software specification. It proposes a tool-chain for bridging different development disciplines through domain-specific modeling languages. The tool-chain would allow designers, ergonomists and programmers to work with a single model for specification and simulation. This model could then generate visual specifications and prototypes to facilitate early verification. Creating a domain-specific language involves identifying domain concepts, defining constraints, adding a graphical notation, and generating code templates. The benefits of this approach include increased flexibility, standardization and early identification of conceptual problems.

1. UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction
Model-Based Visual
Software Specification
Thomas Memmel, Mathias Heilig, Harald Reiterer
IADIS International Conference
Interfaces and Human Computer Interaction 2007
Lisbon, Portugal, 6-8 July 2007
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

2. hci.uni-konstanz.de
 Design
 Implementation
 Evaluation
 Mobile Devices
 Desktop Computer
 Large-scale Displays (Powerwall)
 Digital Libraries
 WebPages
 Visual Information Systems
 Embedded Systems
 New User interface Paradigm: ZOIL
Zoomable Object-Oriented Information Landscape.
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

3. Content of the presentation
1
Introduction and challenges
2
Concept of the tool-chain
3
Parts of the tool-chain
4
Conclusion and perspective
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

4. Development of automotive HMIs
?
Functionality
 Instrument
cluster
 Climate control
 Infotainment (Radio,
CD, (Mobile-)Phone,
SMS, E-Mail,
Navigation, Voice
control)
 Speedo/odometer  Instrument cluster
 Radio  Climate control
 Radio
 Phone
1960 1970 1980 1990 2000 2010
Time
1
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

5. Participants in an networked development processes
Manufacturer
Specification Product features
(Graphical layout) Market analyses
Product
Supplier
Designer
manager
Requirement Final
Prototypes Programmer Purchaser specification product
Ergonomists
Technical
experts
Interaction concepts Technical
requirements Media disruption
1
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

6. Heterogeneous and proprietary tool landscapes
Tool landscape
12
10
7
6
4
2
1
Developers use different tools for
same development tasks
1
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

7. Model-Driven Development in UE
• Adapt model-driven methods into a usability development
• From the UE perspective
• Bridge the disciplines
• Generation of a Visual Specification
Low-Fi Hi-Fi Visual
Prototype Prototype Specification
2
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

8. Model-Driven Development in UE
• Adapt model-driven methods into a usability development
• From the UE perspective
• Bridge the disciplines
• Generation of a Visual Specification
“Model Driven development makes it possible,
to describe software systems
continuously by models.
Low-Fi Hi-Fi artifacts.”1
Thus it offers the chance to generate Visual
Prototype Prototype Specification
2
UNIVERSITY OF KONSTANZ Computer & Information Science
1colected definition from Stahl, 2005; Völter, 2004.
Human-Computer Interaction

9. Consistent and continuous tool-chain
Overall requirements
 High problem orientation:
Even for non experts
ONE model for specification and simulation
Prevent overhead and complexity  consistency of specification and
 High abstraction level: prototype
Appropriate abstraction level  no additional effort for prototyping
(hide implementation details/ due to code generation
show details-on-demand)  Bridge gaps of understanding due to
 Intuitive notation: standardization
Familiar graphical representation Early verification of specifications
 Formal specification
Enables code generation
2
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

10. Dimensions of a Usability Development
Layout Content
Main
ANTENNE1
D1-Telefon
22°C 13:12
18.04.05
Ergonomists
Designers Technical
Experts
Product Manager
Behaviour
Separation of content, layout and
behaviour
Ergonomists Programmers
 Separation of Concerns
2
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

11. Setup of the tool-chain
technical
technical ergonomist designer
expert
technical
expert designer
expert
programmer programmer
Widgets & Templates Domain-Specific Modellinglanguage (DSL)
designer ergonomist ergonomist
technical technical ergonomist
expert expert ergonomist
ergonomist
Domain-Specific Domain-Specific
GUI-Builder: CASE-Tool: CASE-Tool:
Layout Content Behaviour
programmer
Codegenerator
programmer
Domain-Framework
Output: Simulation, Specification etc.
2
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

12. Creation of a DSL
Identify domain Add graphical
concepts notation
(Visual)
1 2 3 4 Domain-specific
Language (DSL)
Define Create code
constraints generator/framework
1 Identify domain concepts
Example: Development of a meta-model for modelling the Infotainmentsystem:
A) Objects: B) Relationships:
 Different Screen -> States  Push/rotary knobs
 Primary keys (main keys)
 Secondary keys
 Etc.
3
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

13. Creation of a DSL
Identify domain Add graphical
concepts notation
(Visual)
1 2 3 4 Domain-specific
Language (DSL)
Define Create code
constraints generator/framework
2 Define domain constraints 3 Add graphical notation
Definition of modeling rules, e.g.: Provide intuitive visual representation for domain
 Only one connection (=transition) is allowed concepts
between a menu item and a subsequent menu  Schematic symbols for menu screens and keys
screen for a specific event (e.g. Left push/rotary
knob pressed) Menu screen, items right + left
Menuitem 1 Numeric key
Menuitem 2 DDS left pressed
Menuitem 3
Menuitem 4
Menuitem 5 Push/rotary
Menuitem 6 Subsequent knob
menu screen
3
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

14. Creation of a DSL
Identify domain Add graphical
concepts notation
(Visual)
1 2 3 4 Domain-specific
Language (DSL)
Define Create code
constraints generator/framework
4 Create code generator/framework
Definition of transformation rules:
 Templates for the code generator of the Language Templates Models
Workbench catch the information of the models
and pack it into logical arrays for the domain
framework
Code Generator
Implementation of a domain framework: LA LA LA LA LA
 Basic code for the output of the models. Domain Framework
 All constant parts of the output should be Output
implemented in the framework.
3
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

15. Conclusion
Benefits Drawbacks
 More flexibility  Initial effort
 Standardization  Acceptance among developers
 Avoid duplicate work  Can only be applied after basic
 Simulations are available significantly activities
earlier  Changes can only be transported in
 Conceptual problems are recognized one direction (model -> prototype)
earlier
 Less effort for late changes due to
frontloading
 Disciplines are bridged
 Paper-based specifications substituted
by living specifications
4
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction

16. Questions
UNIVERSITY OF KONSTANZ Computer & Information Science
Human-Computer Interaction