Memmel Vanderdonckt Reiterer DSVIS2008

8/13/2019 Memmel Vanderdonckt Reiterer DSVIS2008

1/16

Multi-Fidelity User InterfaceSpecifications

Thomas Memmel1, Jean Vanderdo nck t2, Harald Reiter er1

1Human-Computer Interaction Group, University of Konstanz,

Universittsstrasse 10, 78457 Konstanz, Germany

http://hci.uni-konstanz.de

2

Universit 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


2/16

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

Challanges of UI Specification

2

Zetie 2005

Different disciplines, speaking different languagesSeparation of concerns (client & supplier)

Media disruptions, loss of precision, ambiguity

Lots of systems lack UI quality (usability, user experience)failure


3/16


UI Specification Is Not A Linear Proces

3

Creating innovative interactive products requires

Leaping between abstract and detailDesigning design alternatives

Keeping the design space open as long as possible

From: Lwgren & Stolterman 2004, Thoughtful Interaction Design


4/16


Responsibility Assignment in Corporate Projects

4

Client

Business People,Usability Experts

Avoids CASE-Tools Office dominates

Informal notationspreferred

Gulf betweenacademic methodsand industrial practice

IT Supplier

Software Engineers

Structured

approaches Formal Notations(e.g. UML)

Professional tools(GUI-Builder)

Programminglanguages


5/16


Current Situation

Media disruptionsText-based artifacts

Document-based

requirements management

Lack of traceability

Difficult to translate into UI

IntransparentAmbiguous

Corporate UI Development Process

IT Supplier

Client

5

User Needs

GeneralRequirements

Specific UIRequirements

UI SpecificationUI Prototyping

Implementation

Feedback

Required ChangeUsability strategic factor

UE must not be outsourced

Early prototypingRapid feedback

Corporate Design

Specification incl. Design

Save rationale & artifacts electr.

IT Supplier

Client

User Needs

GeneralRequirements

Specific UIRequirements

UI PrototypingUI Specification

Implementation

Feedback

Prototyping-Driven UI Specification


6/16


Prototyping for everybody: Comm. Tools

6

iRise

Axure


7/16


Related Work

7

Denim/Damsk

Canon & TaskSketch


8/16


Bringing it all together

Provide shared means of communication tosupport collaboration of different disciplines

Identify a common denominator

Overcome limitations of text-based work-style

Provide something tangibleand interactive

Determine ingredients of UI specification

Support switching between abstract and detail

(multi-fidelity) Provide traceability and transparency

Save design rationale

8


9/16


Interactive UI Specification Explained

9

Interactive UI Prototypes Interactive UI Specifications

Vehicle for requirementsanalysis

Vehicle for requirementsspecification

Exclusively models the UI layer;

may be inconsistent with

specification and graphicalnotations

Allows drill down from UI to

models; relates UI to

requirements and vice versa

Either low-fidelity or high-fidelity Multi-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


10/16


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


11/16

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 System

Essential 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 ProcessModelling

Power Point Prototype

Mockups

UI Slide Show, UIStoryboard

Activity, Class &

SequenceDiagram

Use Case Diagram

Business Use Case

Class Diagram,

Business Roles

Business Vision

4. Common Denominator

Detailed Prototype

Abstract Prototype

UI Storyboard

Flow Chart, Activity &Data Flow Diagram

Use Case Diagram,Task Map

(Essential) Use Case

Personas, User Role,

Role Map

Scenario Map

Levelofabstraction

:Textto

UIdesign

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

New Research


12/16


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.


13/16


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


14/16


Future Work: Collaboration

14


15/16


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


16/16


Thank you very much for your attention

http://www.usixml.org

User Interface eXtensible Markup Language

http://hci.uni-konstanz.de/INSPECTORWebsite 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/http://hci.uni-konstanz.de/INSPECTORhttp://www.irise.com/http://www.axure.com/http://www.axure.com/http://www.irise.com/http://hci.uni-konstanz.de/INSPECTORhttp://hci.uni-konstanz.de/INSPECTORhttp://hci.uni-konstanz.de/INSPECTORhttp://www.usixml.org/

Memmel Vanderdonckt Reiterer DSVIS2008

Documents