Multi-Fidelity User Interface Specifications Thomas Memmel 1, Jean Vanderdonckt 2, Harald Reiterer 1 1 Human-Computer Interaction Group, University of Konstanz, Universitätsstrasse 10, Konstanz, Germany 2 Université catholique de Louvain (UCL) Louvain School of Management (LSM) - Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI)

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Challanges of UI Specification 2 Zetie 2005 Different disciplines, speaking different languages Separation of concerns (client & supplier) Media disruptions, loss of precision, ambiguity Lots of systems lack UI quality (usability, user experience)  failure

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. UI Specification Is Not A Linear Proces 3 Creating innovative interactive products requires Leaping between abstract and detail Designing design alternatives Keeping the design space open as long as possible From: Löwgren & Stolterman 2004, Thoughtful Interaction Design

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Responsibility Assignment in Corporate Projects 4 Client Business People, Usability Experts Avoids CASE-Tools Office dominates Informal notations preferred Gulf between academic methods and industrial practice IT Supplier Software Engineers Structured approaches Formal Notations (e.g. UML) Professional tools (GUI-Builder) Programming languages

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Current Situation Media disruptions Text-based artifacts Document-based requirements management Lack of traceability Difficult to translate into UI Intransparent Ambiguous Corporate UI Development Process IT Supplier Client 5 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 Save rationale & artifacts electr. IT Supplier Client Prototyping-Driven UI Specification

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Prototyping for everybody: Comm. Tools 6 iRise Axure

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Related Work 7 Denim/Damsk Canon & Task Sketch

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Bringing it all together Provide shared means of communication to support collaboration of different disciplines –Identify a common denominator Overcome limitations of text-based work-style –Provide something tangible and interactive Determine ingredients of UI specification –Support switching between abstract and detail (multi-fidelity) –Provide traceability and transparency –Save design rationale 8

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Interactive UI Specification Explained 9 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-fidelityMulti-Fidelity: Several levels of detail Supplements text-based specification Alternative to text-based UI specification Design rationale saved in other documents Incorporates design knowledge and rationale

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Model-driven vs. Model-based Model-driven UI specification –Uses formal, predefined models –Allows code generation directly from models –Very suitable for straight forward design solutions or when design space is constrained Model-based UI specification –Is based on models, but no need to code generation –Models visualize requirements –More appropriate when innovation is required and disciplines must be bridged 10

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, Class & Sequence Diagram Use Case Diagram Business Use Case Class Diagram, 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

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Zooming through Levels of Abstraction 12 Drawing is based on Garrett, Jesse J. (2002). The Elements of User Experience: User-Centered Design for the Web. New Riders Press.

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Evaluation Interviews (n=7): Very positive feedback; experts expect improvement of work style through multi-fidelity approach Long-term diary study (4 weeks; n=8) –Rapid enhancement of tool usability (1.75 to 4.25) –Incorporated „contextual layer“ –Support masters/templates, creation of patterns –Versioning of specification objects (design rationale) –Annotation support, defect management console Ongoing expert interviews (e.g. SIEMENS AG) 13

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Future Work: Collaboration 14

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Summary Towards a common denominator for UI- related modeling in non-IT organizations Include business process modeling in research on bridging in the gaps Idea of interactive UI specifications Situation-dependant alternative to model- driven UI specification methods Experimental tool-support to encourage collaboration and creativity 15

DSV-IS’2008, Kingston, Canada, July 16-18, 2008Thomas Memmel, Jean Vanderdonckt, Harald Reiterer. Thank you very much for your attention User Interface eXtensible Markup Language Website of INSPECTOR method & tool The iRise prototyping and specification tool The Axure Pro prototyping and specification tool