Multi-Fidelity User Interface Specifications

Thomas Memmel1, Jean Vanderdonckt2, Harald Reiterer1

1Human-Computer

Interaction Group, University of Konstanz, Universittsstrasse 10, 78457 Konstanz, Germany http://hci.uni-konstanz.de
2Universit

catholique de Louvain (UCL) Louvain School of Management (LSM) - Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI) http://www.isys.ucl.ac.be/bchi

Challanges of UI Specification

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-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
2

UI Specification Is Not A Linear Proces

Creating innovative interactive products requires Leaping between abstract and detail Designing design alternatives Keeping the design space open as long as possible

From: Lwgren & Stolterman 2004, Thoughtful Interaction Design

DSV-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
3

Responsibility Assignment in Corporate Projects

Client
Business People, Usability Experts Avoids CASE-Tools Office dominates Informal notations preferred Gulf between academic methods and industrial practice
DSV-IS2008, Kingston, Canada, July 16-18, 2008

IT Supplier
Software Engineers Structured approaches Formal Notations (e.g. UML) Professional tools (GUI-Builder) Programming languages
Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
4

Corporate UI Development Process

Current Situation
Media disruptions Text-based artifacts Document-based Feedback requirements management Lack of traceability Difficult to translate into UI Intransparent Ambiguous
User Needs

User Needs

General Feedback Requirements

General Requirements

Client Client IT Supplier

Required Change

Implementation

Implementation

Specific UI Requirements

Specific UI Requirements

Usability strategic factor IT Supplier UE must not be outsourced Early prototyping UI Specification UI Prototyping Rapid feedback UI Prototyping UI Specification Corporate Design Specification incl. Design Prototyping-Driven UI Specification Save rationale & artifacts electr.
DSV-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
5

Prototyping for everybody: Comm. Tools

iRise

Axure

DSV-IS2008, Kingston, Canada, July 16-18, 2008

Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.

Related Work

Canon & Task Sketch

Denim/Damsk
DSV-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
7

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
DSV-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
8

Interactive UI Specification Explained

Interactive UI Prototypes Vehicle for requirements analysis Interactive UI Specifications Vehicle for requirements specification

Exclusively models the UI layer; Allows drill down from UI to may be inconsistent with models; relates UI to specification and graphical requirements and vice versa notations Either low-fidelity or high-fidelity Supplements text-based specification Design rationale saved in other documents
DSV-IS2008, Kingston, Canada, July 16-18, 2008

Multi-Fidelity: Several levels of detail Alternative to text-based UI specification Incorporates design knowledge and rationale
Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
9

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
DSV-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
10

1. Usability Engineering

2. Software Engineering

3. Business Process Modelling Power Point Prototype Mockups UI Slide Show, UI Storyboard Activity, Class & Sequence Diagram Use Case Diagram Business Use Case Class Diagram, Business Roles Business Vision

4. Common Denominator

Level of abstraction: Text to UI design

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

Pilot System Essential UI Prototype

Detailed Prototype Abstract Prototype UI Storyboard Flow Chart, Activity & Data Flow Diagram

Use Case Storyboard, UI Flow Diagram

Activity, Robustness & Sequence Diagram Use Case Diagram (Essential) Use Case User Story, User Role, Personas Usage Scenario

Use Case Diagram, Task Map

(Essential) Use Case

Personas, User Role, Role Map

Scenario Map

Define a common denominator for interdisciplinary UI modelling (Bridge the gaps)

Mayhew, Rosson & Caroll, Constantine Constantine, Ambler, Beck Holt, Ambler New Research

Zooming through Levels of Abstraction

Drawing is based on Garrett, Jesse J. (2002). The Elements of User Experience: User-Centered Design for the Web. New Riders Press.

DSV-IS2008, Kingston, Canada, July 16-18, 2008

Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.

12

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)

DSV-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
13

Future Work: Collaboration

DSV-IS2008, Kingston, Canada, July 16-18, 2008

Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.

14

Summary
Towards a common denominator for UIrelated 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 modeldriven UI specification methods Experimental tool-support to encourage collaboration and creativity
DSV-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.
15

Thank you very much for your attention

http://hci.uni-konstanz.de/INSPECTOR Website of INSPECTOR method & tool http://www.irise.com The iRise prototyping and specification tool http://www.axure.com The Axure Pro prototyping and specification tool http://www.usixml.org User Interface eXtensible Markup Language
DSV-IS2008, Kingston, Canada, July 16-18, 2008 Thomas Memmel, Jean Vanderdonckt, Harald Reiterer.