1. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Action-driven design of user interfaces
Giorgio Brajnik
Dip. di Matematica e Informatica
University of Udine, Italy
and
School of Computer Science, University of Manchester, UK
www.dimi.uniud.it/giorgio
These slides: http://www.dimi.uniud.it/giorgio/events/aau.pdf
Institut für Informatik-Systeme
Alpen-Adria Universität Klagenfurt
January 25, 2013
c Giorgio Brajnik Action-driven design of user interfaces

2. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

3. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

4. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Survey on professional web designers
(Newman and Landay, DIS 2000)
Activities
1. information design (information architecture)
2. navigation design
3. visual design
c Giorgio Brajnik Action-driven design of user interfaces

5. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
What web designers do
more than one design shown to clients
different phases:
discovery
design exploration
design refinement
production
iterative process
formal presentations at the end of each cycle
c Giorgio Brajnik Action-driven design of user interfaces

6. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Different design artifacts
Early page sketches
c Giorgio Brajnik Action-driven design of user interfaces

7. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Design artifacts II
Site map sketches
c Giorgio Brajnik Action-driven design of user interfaces

8. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Design artifacts III
Storyboards
c Giorgio Brajnik Action-driven design of user interfaces

9. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
External artifacts
Polished site map
c Giorgio Brajnik Action-driven design of user interfaces

10. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
External artifacts II
Site map after client’s feedback
c Giorgio Brajnik Action-driven design of user interfaces

11. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
External artifacts III
Page schematics
c Giorgio Brajnik Action-driven design of user interfaces

12. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
External artifacts IV
Page mockups
c Giorgio Brajnik Action-driven design of user interfaces

13. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
External artifacts IV
Executable prototypes
in HTML or Powerpoint
Often mentioned
Usually done at the end, during "Production phase"
Usually developed as "executable specs"
c Giorgio Brajnik Action-driven design of user interfaces

14. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
My comments
1. lots of arrows, everywhere, to represent behavior
user actions are important
2. structure of content is important
it determines how content is operated upon
3. different types of artifacts
raw or polished ones
4. executable prototypes developed late
because expensive
their full power is not unleashed
c Giorgio Brajnik Action-driven design of user interfaces

15. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

16. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Interaction Units
(Hokyoung and Monk, HCI, 2009)
A usability analysis technique
brief interaction scenarios annotated with user actions
with their effects on the UI
with their ripercussions on user’s goal stack
c Giorgio Brajnik Action-driven design of user interfaces

17. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Monk’s triangular model
shows how interaction cycles through 3 steps
usability problems associated to edges
c Giorgio Brajnik Action-driven design of user interfaces

18. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

19. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Embodied interaction
(Dourish, Where the action is, 2001)
Key points
1. Interaction is the means by which work is
accomplished, dynamically and in a context
2. The ways in which we experience the world are
through directly interacting with it
3. We act in the world by exploring the opportunities for
action that it provides to us
c Giorgio Brajnik Action-driven design of user interfaces

20. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Coupling actions to functions
(Wensveen et al., DIS, 2004)
Relevant dimensions
time
location
direction
speed and force
modality
expressivity
c Giorgio Brajnik Action-driven design of user interfaces

21. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
My comments
actions and effects are important in design artifacts
they are important for usability
they are even philosophically justified
c Giorgio Brajnik Action-driven design of user interfaces

22. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

23. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Expected results
c Giorgio Brajnik Action-driven design of user interfaces

24. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Programming frameworks
Such as GWT, Spring, PHP, Dojo, jQuery, ...
1. these tools/frameworks promote bottom-up approaches
2. they are good for production
3. they are not suitable for UI prototyping
4. code is very structured, but user actions very opaque
c Giorgio Brajnik Action-driven design of user interfaces

25. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Rich Internet Applications (RIAs) are complex
1. variety of widgets, that have to be choreographed
2. multitargeting (different user platforms)
3. with multimedia content
4. with multimodal interaction (gestures, voice, special
devices)
5. online/offline capabilities
6. distributed data management (granularity and policy of
syncs)
7. communication with server (pull/push)
8. hard and soft states in browsers
c Giorgio Brajnik Action-driven design of user interfaces

26. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
On top of that
Frequent changes are needed
new functional requirements
because new user segments
because new competitors
because new technologies
because of errors
...
Abstraction difficulties
behavior needs to be reified through some artifact
Gap between use cases and user interface specification
c Giorgio Brajnik Action-driven design of user interfaces

27. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

28. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Model-driven engineering
Tenets
Modeling lifts the abstraction level from code to models
It provides means to direct the course of
understanding, design, construction, deployment,
operation, maintenance and modification
Thus modeling could be a way to overcome some of the
challenges
c Giorgio Brajnik Action-driven design of user interfaces

29. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Goals of MDE for UIs
To support:
abstraction of relevant views of the application
generation of early prototypes
rapid changes
finding usability problems
elicitation of requirements
seamless transition to implementation
multitargeting, multimodality
test management
c Giorgio Brajnik Action-driven design of user interfaces

30. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

31. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
State of the terminal
(Parnas, ACM Natl. Conference, 1969)
commands=inputs
system output=effects
He suggested to use them for
specification of the UI
design support
to identify usability problems
c Giorgio Brajnik Action-driven design of user interfaces

32. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
State of the terminal II
Usability problems that can be discovered
hidden mode
dead ends
loops
After 43yrs, same problems
visibility of state, visibility of operations, user control,
consistency!
c Giorgio Brajnik Action-driven design of user interfaces

33. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

34. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
UWE: UML Web Modeling
(Koch et al., 2002)
following the MDE school
"evolutionist" approach:
many models
automatic M2M transformations (design patterns)
compatible with manual editing
c Giorgio Brajnik Action-driven design of user interfaces

35. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
UWE: metamodels
For a library management system:
use cases
conceptual model (classes)
c Giorgio Brajnik Action-driven design of user interfaces

36. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
UWE: metamodels II
navigation space
c Giorgio Brajnik Action-driven design of user interfaces

37. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
UWE: metamodels III
navigation structure
presentation model (abstract widgets)
c Giorgio Brajnik Action-driven design of user interfaces

38. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
UWE: metamodels IV
task model
c Giorgio Brajnik Action-driven design of user interfaces

39. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
My comments
interaction is mainly defined in a data-driven approach
actions are spread over different models (navigation space,
navigation structure and task model)
approach well suited for CRUD applications
roundtrip engineering unsolved
activity diagram has its own interpreter included in
deployed app
c Giorgio Brajnik Action-driven design of user interfaces

40. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
RUX: Rich Internet Application User Experience
(Linaje, 2007)
"parassitic" approach:
it relies on abstract models written in WebML, UWE, OOH
then add RIAs models
it produces running code
through many complex M2M transformations
c Giorgio Brajnik Action-driven design of user interfaces

41. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
My comments
it addresses multimedia
it addresses responsiveness
through a flat event/condition/action model
still bottom-up, still data-driven
c Giorgio Brajnik Action-driven design of user interfaces

42. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Non-data-driven design
A UI for controlling a classroom
for 3 light sections
for audio-video equipments
for ventilation
Look at the following examples:
How do they differ from each other?
Which design decisions were taken, and why?
c Giorgio Brajnik Action-driven design of user interfaces

43. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
One and two
(Gajos, Weld, Wobbrock, SUPPLE, 2010)
c Giorgio Brajnik Action-driven design of user interfaces

44. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Three and four
c Giorgio Brajnik Action-driven design of user interfaces

45. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
What do they have in common?
same conceptual model
same functionalities/use cases
c Giorgio Brajnik Action-driven design of user interfaces

46. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Why do they differ?
interaction modality
geometry of the display
aesthetics
which actions
are more frequent
Conclusion:
these designs were not data-driven
c Giorgio Brajnik Action-driven design of user interfaces

47. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

48. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

49. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
What kind of models?
Consider that
UIs are reactive systems
they react to
user actions
server events
other users
UIs are also complex artifacts
require powerful abstractions for controlling complexity
c Giorgio Brajnik Action-driven design of user interfaces

50. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
State charts
invented by D. Harel in early ’80
in the context of avionics systems
to cope with "badly organized documentation and mental
models" of engineers
centered on events/conditions/actions rules
Key notions
"device modes" are crucial for understanding
visual language very powerful
c Giorgio Brajnik Action-driven design of user interfaces

51. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
State charts II
c Giorgio Brajnik Action-driven design of user interfaces

52. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
State machines in UML 2.4
Newer version of statecharts
Extended finite state machines: variables and operations
on them
Transitions with event triggers, guards, actions
States with entry/exit/do actions
State hierarchy ("superstates" and "superedges")
Concurrent regions
History
Arbitrary plumbing with pseudostates
c Giorgio Brajnik Action-driven design of user interfaces

53. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Example of a TV set
c Giorgio Brajnik Action-driven design of user interfaces

54. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
The UI design problem
Deciding
how to locate in space and time information that users
have to interpret and actions they have to take, and
what look and feel to adopt
so that users can carry out their work
c Giorgio Brajnik Action-driven design of user interfaces

55. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
UML-based Interaction Design Approach
1. Start from essential use cases (user intentions and system
responsibilities)
2. define conceptual model of user interface
3. identify interaction spaces
4. model interaction through state machines
5. incrementally add data views models
6. incrementally add widgets/containers
7. automatically generate executable prototypes
for debugging
for user testing
to promote quick changes
to promote exploration of solution space
8. seamlessly evolve them into production code.
c Giorgio Brajnik Action-driven design of user interfaces

56. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Foundation for UML-IDEA
Data views, to represent the objects being manipulated
and their operations;
State Machines and Events, to represent the behavior;
Annotations, to bind the two and providing widgets to
render data and triggers for events;
User platforms, to decide how to render things.
c Giorgio Brajnik Action-driven design of user interfaces

57. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Data views (classroom example)
c Giorgio Brajnik Action-driven design of user interfaces

58. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Behavior model I
c Giorgio Brajnik Action-driven design of user interfaces

59. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Behavior model II
c Giorgio Brajnik Action-driven design of user interfaces

60. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Action Driven Design
Basic assumptions behind ADD
1. States should be identified by the transitions that leave
them
2. States should be annotated with data and widgets
needed by the user to decide what to do next.
c Giorgio Brajnik Action-driven design of user interfaces

61. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Design principles
1. Each state corresponds to an interaction space
2. Nesting of states corresponds to nesting of interaction
spaces
3. Concurrent regions correspond to sibling interaction
spaces
c Giorgio Brajnik Action-driven design of user interfaces

62. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Results
No annotations With annotations
c Giorgio Brajnik Action-driven design of user interfaces

63. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Annotations
Example that binds a widget to a state and a variable
c Giorgio Brajnik Action-driven design of user interfaces

64. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Variant: one light section visible only
c Giorgio Brajnik Action-driven design of user interfaces

65. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Results
c Giorgio Brajnik Action-driven design of user interfaces

66. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Another design variant
c Giorgio Brajnik Action-driven design of user interfaces

67. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

68. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Speed and flexibility
Generation of UIs is automatic
Annotations add widgets and data
Many code hooks to enhance UIs rendering
Changing the dynamics is simple, as well as replacing
widgets
Suitable for exploring the design space
Suitable for user testing
Suitable for parallel design
Specs and code are in sync
Models are platform independent
c Giorgio Brajnik Action-driven design of user interfaces

69. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Approach suitable for mixed-fidelity prototypes
Five dimensions of fidelity
Visual refinement
Breadth of functionality
Depth of functionality
Richness of interactivity
Richness of data
(McCurdy et al, 2006)
In UML-IDEA they are independent.
c Giorgio Brajnik Action-driven design of user interfaces

70. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Powerful UI compiler
Seamless evolution from prototypes to running user
interfaces
Efficient code based on finite-state automata
Clever techniques to avoid combinatorial explosion
(flattening of state machines)
c Giorgio Brajnik Action-driven design of user interfaces

71. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Expected characteristics of resulting UIs
Visibility: all and only needed options and materials are
visible to users
Feedback: users are kept informed of relevant state
changes
Structure: the UI is organized purposefully ... by putting
related things together and separating unrelated things.
(Constantine and Lockwood, 1999)
c Giorgio Brajnik Action-driven design of user interfaces

72. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Compare with this
c Giorgio Brajnik Action-driven design of user interfaces

73. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
What did we do?
We separated three aspects
c Giorgio Brajnik Action-driven design of user interfaces

74. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
MVC
Model
c Giorgio Brajnik Action-driven design of user interfaces

75. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
MVC
Controller
c Giorgio Brajnik Action-driven design of user interfaces

76. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
MVC
And the View?
c Giorgio Brajnik Action-driven design of user interfaces

77. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
MVC
View
only partially given
in terms of individual widgets/containers
in terms of CSS rules
Not as a structure:
Hence:
V = M + C + widgets
c Giorgio Brajnik Action-driven design of user interfaces

78. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Does MVC make sense at conceptual level?
(In addition to being useful at the programming level?)
c Giorgio Brajnik Action-driven design of user interfaces

79. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Yes, of course!
Different issues can be uncovered
they are independent from each other, orthogonal
Model: what is being shown? does it make sense to
the user? are operations the expected ones? is some
missing?
Controller: are actions the expected ones in that
space? are they complete with respect to model? what
data need to be shown to let users make the
appropriate decision?
View: is the rendering of M or C appropriate?
salience? affordance? consistency?
c Giorgio Brajnik Action-driven design of user interfaces

80. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

81. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
UICompiler
right now a standalone Java application
capable of handling standard UML state machines
with a dozen types of widgets
a single target platform: HTML, CSS, jQuery
Next
to extend the widget library to handle most of
commonly used ones
to perform studies to make sure of usefulness of
generated prototypes
to target different platforms
c Giorgio Brajnik Action-driven design of user interfaces

82. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Table of contents
Designing and Analyzing Interaction
What designers do
Usability investigations
Primacy of actions
Challenges for designers
Model driven engineering
Early model-based UIs
More modern model-based UIs
Action-Driven Design: the UML-IDEA
State machines
Expected advantages
Limitations
Conclusions
c Giorgio Brajnik Action-driven design of user interfaces

83. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Conclusions
1. Events/states/actions for UIs were suggested since 1969
2. SMs can be abstract (wrt platform, modality, development
platform)
3. SMs are expressive enough to generate UIs
4. SMs can be used as primary UI models:
to support elicitation of requirements
to support design
to support generation of prototypes
for usability analysis
c Giorgio Brajnik Action-driven design of user interfaces

84. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
Interaction Design Solutions SrL
A spin-off of the University of Udine
We design user interfaces
We do usability investigations
We develop GENIUS - the UML-IDEA generator of
user interfaces
c Giorgio Brajnik Action-driven design of user interfaces

85. Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA Conclusions
THANK YOU!
Questions?
These slides:
http:
//www.dimi.uniud.it/giorgio/events/aau.pdf
Contact:
brajnik@uniud.it
www.dimi.uniud.it/giorgio
c Giorgio Brajnik Action-driven design of user interfaces