User Interface Specification in Complex Web-based Information Spaces INSPECTOR: Method and Tool for Visual UI Specification 1 Human-Computer Interaction Lab, University of Konstanz, Germany 2 Daimler AG, Group Research & Advanced Engineering GR/ESP, Ulm, Germany Thomas Memmel 1, Heiko Ziegler 2, Richard Oed 2, Harald Reiterer 1 Thomas Memmel 1, Harald Reiterer 1

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. Common Denominator ? Software Engineering Usability Engineering Business Process Modeling How do we build interactive systems with high UI quality and usability in complex organizations? 2 Usability Expert: - Must bridge the disciplines - Needs to extend his expertise Usability-driven question: Bridge the gaps

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. Responsibility Assignment in Corporate Projects 3 Client Avoids CASE-Tools Office dominates Informal notations preferred Gulf between academic methods and industrial practice IT Supplier Structured approaches Formal Notations (e.g. UML) Professional tools (GUI-Builder) Programming languages

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. Current Situation Media disruptions Text-based artifacts Document-based requirements management Difficult to translate into UI Intransparent Ambiguous Corporate UI Development Process IT Supplier Client 4 User Needs General Requirements Specific UI Requirements UI PrototypingUI SpecificationImplementationFeedback Required Change Usability strategic factor UE must not be outsourced Early prototyping Rapid feedback Corporate Design Specification incl. Design IT Supplier Client

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. Solution A: Model-Driven UI Specification 5 Tool- Support Modelling Process UI Specification Model-Driven Approach Generate UI from Models Model-based Approach Support the creative process of translating requirements into UI design

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. MAXpro (Daimler AG) XML-based UI Prototyping & Specification tool Motivation: –function as a vehicle for discussions –easy generation of alternate UI design solutions –different versions of the UI generated easy and quickly –early externalization of design vision (client) –up-front usability evaluation (client) –prevents costly late-cycle changes and helps to –become less dependent on a supplier 6

MAXpro: Video 7

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. MAXpro: Lessons Learned 8 Formalization vs. Chance for Innovation Rather inappropriate to propel creative processes Actors cannot take part in participatory design without knowing the terminology Applied no sooner than after the requirements analysis –Office stays the dominant tool in earlier phases –User and task modelling misses Design rationale not incorporated, but dispersed in different media

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. Solution B: Model-Based UI Specification 9 Tool- Support Modelling Process UI Specification Model-Driven Approach Generate UI from Models Model-based Approach Support the creative process of translating requirements into UI design

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. Interactive UI Specification Explained 10 Interactive UI PrototypesInteractive UI Specifications Vehicle for requirements analysis Vehicle for requirements specification Exclusively models the UI layer; may be inconsistent with specification and graphical notations Allows drill down from UI to models; relates UI to requirements and vice versa Either low-fidelity or high-fidelitySeveral levels of detail Supplements text-based specification Alternative to text-based UI specification Design rationale saved in other documents Incorporates design knowledge and rationale

Mayhew, Rosson & Caroll, Constantine Constantine, Ambler, Beck Holt, Ambler 1. Usability Engineering High-Fi Prototype Low-Fi Prototype, Conceptual Model UI Storyboard, Navigation Map Flow Chart, Process Model Task Map Task Case Personas, User Scenario, User Role Activity, Information, Interaction Scenario 2. Software Engineering Pilot SystemEssential UI Prototype Use Case Storyboard, UI Flow Diagram Activity, Robustness & Sequence Diagram Use Case Diagram (Essential) Use Case User Story, User Role, Personas Usage Scenario 3. Business Process Modelling Power Point PrototypeMockups UI Slide Show, UI Storyboard Activity, Sequence, & Data Flow Diagram Use Case Diagram Business Use Case Personas, Business Roles Business Vision 4. Common Denominator Detailed PrototypeAbstract Prototype UI Storyboard Flow Chart, Activity & Data Flow Diagram Use Case Diagram, Task Map (Essential) Use Case Personas, User Role, Role Map Scenario Map Level of abstraction: Text to UI design Define a common denominator for interdisciplinary UI modelling (Bridge the gaps) New Research A common denominator in UI Modelling

User Model Task Model Interaction Model Vanderdonckt: CAMELEON Reference Framework

INSPECTOR: Video 13

IASTED-HCI 2008, Innsbruck (Austria), Combined talk about UI specifcation methods and tools Thomas Memmel et al. Summary & Conclusion Model-driven and model-based approach for UI specification New research towards a common denominator for UI-related modelling Idea of interactive UI specifications First empirical studies prove: the idea to interconnect a thoughtful selection models with different levels of UI design very much contributes to UI specification processes in client organizations 14

Thank you very much Please do not hesitate to ask questions 15