1 Human-Computer Interaction Lab, University of Konstanz, Germany Thomas Memmel 1, Harald Reiterer 1 INSPECTOR Interdisciplinary UI Specification Tool

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. 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

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. 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

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. 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 SpecificationUI PrototypingImplementationFeedback Required Change Usability strategic factor UE must not be outsourced Early prototyping Rapid feedback Corporate Design Specification incl. Design IT Supplier Client Prototyping-Driven UI Specification (Schrage 1999)

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Trade-Off : Ceiling and Threshold 5 Capabilities Resources (time, experience,…) 100% 50% Ceiling Threshold First generation Second generation Third generation Integrated Development Environments UI types Walls

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Tool Requirements 6 Purpose/Added ValueTool Requirement Traceability of design rationale; transparency of translation of models into UI design Switching back and forth between different (levels of) models Smooth transition from problem- space concepts to solution space Smooth progression between abstract and detailed representations HCI experts can build abstract and detailed prototypes rapidly Designing different versions of a UI is easy and quick, as is making changes to it Provide support for design assistance and creative thinking for everybody; all kinds of actors can proactively take part in the UI specification Concentration on a specific subset of modelling artefacts, which can be a UML-like notation or one that best leverages collaboration The early detection of usability issues prevents costly late-cycle changes Allowing an up-front usability evaluation of look and feel; providing feedback easily

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

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Interactive UI Specification Explained 8 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

User Model Task Model Interaction Model Vanderdonckt: CAMELEON Reference Framework

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Levels of Abstraction 10 Drawing is based on Garrett, Jesse J. (2002). The Elements of User Experience: User-Centered Design for theWeb. New Riders Press.

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Mapping Artefacts to the Zoom-Canvas 11

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Video 12

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. UI Design: Inspector – Expression Blend 13

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Evaluation: Questionnaire (Daimler AG) 14 Questionnaire topicAvg. Ability to integrate documents and logic with INSPECTOR3.66 Chance to capture conceptual and schematic ideas3.83 Support for user, task and interaction modelling4.00 Possibility to link models and to thereby increase the traceability and transparency3.66 Text-based and graphical requirements modelling (aggregated)3.79 Accessibility of the prototyping features3.16 Provided functionality at the UI design layer3.40 Applicability of the UI designs for usability evaluations3.33 Possibility to link UI designs in order to create a simulation3.25 Overall UI prototyping capabilities (aggregated)3.28 Chance to get both overview and detail on the zoom-based specification space3.33 Helpfulness of the zoom-interaction style during prototyping and modelling3.00 Support for switching between created artefacts3.50 Accessibility of all necessary information on the zoom-canvas3.50 Overall rating of the interaction with INSPECTOR (aggregated)3.33 The overall contribution of INSPECTOR to existing UI specification practice3.83 The improvement of work style through a combination of different models with multi- fidelity UI design 4.83

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Dimensions of Future Work Collaboration –Provide an interaction framework for joint UI modelling, design and specifcation e.g. Gigapixel displays and multi-modal interaction Common denominator –Consider to in-/decrease the amount of models Creativity –Support different grades of formality Simulation –Link disciplines by simulation –Drive the UI process by externalization of vision –Prototyping-driven UI specification 15

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. 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 organisations 16

CADUI 2008, Albacete (Spain), Inspector – Interdisciplinary Specification Tool Thomas Memmel and Harald Reiterer. Additional Information Thanks to Jean Vanderdonckt for inviting INSPECTOR to become a member of the usiXML supply chain Please visit for more information about the projecthttp://hci.uni-konstanz.de/inspector Please visit our YouTube channel to get in touch with HCI at lake Constance We are happy to invite you as a guest speaker! 17

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