• Save
Action-Driven Design of User Interfaces
Upcoming SlideShare
Loading in...5
×
 

Action-Driven Design of User Interfaces

on

  • 1,449 views

 

Statistics

Views

Total Views
1,449
Views on SlideShare
1,240
Embed Views
209

Actions

Likes
0
Downloads
0
Comments
0

4 Embeds 209

http://www.foerderverein-technische-fakultaet.at 154
http://www.ftf.or.at 38
http://abtasty.com 15
http://feeds.feedburner.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Action-Driven Design of User Interfaces Action-Driven Design of User Interfaces Presentation Transcript

  • 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsSurvey 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsWhat 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsDifferent design artifacts Early page sketches c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsDesign artifacts II Site map sketches c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsDesign artifacts III Storyboards c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsExternal artifacts Polished site map c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsExternal artifacts II Site map after client’s feedback c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsExternal artifacts III Page schematics c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsExternal artifacts IV Page mockups c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsExternal 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMy 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsInteraction 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMonk’s triangular model shows how interaction cycles through 3 steps usability problems associated to edges c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsEmbodied 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsCoupling 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMy 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsExpected results c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsProgramming 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsRich 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsOn 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsModel-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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsGoals 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsState 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsState 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsUWE: 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsUWE: metamodels For a library management system: use cases conceptual model (classes) c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsUWE: metamodels II navigation space c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsUWE: metamodels III navigation structure presentation model (abstract widgets) c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsUWE: metamodels IV task model c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMy 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsRUX: 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMy 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsNon-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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsOne and two (Gajos, Weld, Wobbrock, SUPPLE, 2010) c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsThree and four c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsWhat do they have in common? same conceptual model same functionalities/use cases c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsWhy 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsWhat 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsState 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsState charts II c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsState 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsExample of a TV set c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsThe 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsUML-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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsFoundation 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsData views (classroom example) c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsBehavior model I c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsBehavior model II c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsAction 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsDesign 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsResults No annotations With annotations c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsAnnotations Example that binds a widget to a state and a variable c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsVariant: one light section visible only c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsResults c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsAnother design variant c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsSpeed 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsApproach 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsPowerful 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsExpected 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsCompare with this c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsWhat did we do? We separated three aspects c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMVC Model c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMVC Controller c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMVC And the View? c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsMVC 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsDoes MVC make sense at conceptual level? (In addition to being useful at the programming level?) c Giorgio Brajnik Action-driven design of user interfaces
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsYes, 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsUICompiler 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTable 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsConclusions 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsInteraction 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
  • Designing and Analyzing Interaction Challenges for designers Model driven engineering UML-IDEA ConclusionsTHANK 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