1 human-computer interaction lab, university of konstanz, germany thomas memmel 1, harald reiterer 1...

1Human-Computer Interaction Lab, University of Konstanz, Germany

Thomas Memmel1, Harald Reiterer1

INSPECTORInterdisciplinary UI Specification Tool

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

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


Responsibility Assignment in Corporate Projects

3


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

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)


Trade-Off : Ceiling and Threshold

5

Capabilities

Resources(time, experience,…)

100%

50%

Ceiling

Threshold

Firs

t gen

erat

ion

Seco

nd g

ener

atio

n

Thi

rd g

ener

atio

n

Inte

grat

ed D

evel

opm

ent E

nvir

onm

ents

UI types

Walls


Tool Requirements

6

Purpose/Added Value Tool Requirement

Traceability of design rationale; transparency of translation of models into UI designSwitching back and forth between different (levels of) models

Smooth transition from problem-space concepts to solution spaceSmooth progression between abstract and detailed representations

HCI experts can build abstract and detailed prototypes rapidlyDesigning 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 changesAllowing an up-front usability evaluation of look and feel; providing feedback easily

Mayhew, Rosson & Caroll, Constantine

Constantine, Ambler, Beck

Holt, Ambler

Leve

l of a

bstr

actio

n: T

ext t

o U

I des

ign

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

New Research


Interactive UI Specification Explained

8

Interactive UI Prototypes Interactive 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-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

Scenario Map

Interactive UI Specification

Inspector UI design

Detailed specification design

Medium-fidelity design

Abstract canonical designPersonas, User Roles

User Role Map Use Case DiagramUse Case Diagram

Task Map

Flow DiagramEssential Use Case

Activity Diagram

Data Flow Diagram

UI

Storyboard

Use

r M

odel

Tas

k M

odel

Inte

ract

ion

Mod

elV

anderdonckt: CA

ME

LEO

N R

eference Fram

ework


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.


Mapping Artefacts to the Zoom-Canvas

11


Video

12


UI Design: Inspector – Expression Blend

13


Evaluation: Questionnaire (Daimler AG)

14

Questionnaire topic Avg. Ability to integrate documents and logic with INSPECTOR 3.66Chance to capture conceptual and schematic ideas 3.83Support for user, task and interaction modelling 4.00Possibility to link models and to thereby increase the traceability and transparency 3.66Text-based and graphical requirements modelling (aggregated) 3.79

Accessibility of the prototyping features 3.16Provided functionality at the UI design layer 3.40Applicability of the UI designs for usability evaluations 3.33Possibility to link UI designs in order to create a simulation 3.25Overall UI prototyping capabilities (aggregated) 3.28

Chance to get both overview and detail on the zoom-based specification space 3.33Helpfulness of the zoom-interaction style during prototyping and modelling 3.00Support for switching between created artefacts 3.50Accessibility of all necessary information on the zoom-canvas 3.50Overall rating of the interaction with INSPECTOR (aggregated) 3.33

The overall contribution of INSPECTOR to existing UI specification practice 3.83

The improvement of work style through a combination of different models with multi-fidelity UI design

4.83


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


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


Additional Information

• Thanks to Jean Vanderdonckt for inviting INSPECTOR to become a member of the usiXML supply chain

• Please visit http://hci.uni-konstanz.de/inspector for more information about the project

• 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

http://hci.uni-konstanz.de/inspector

Thank you very much

Please do not hesitate to ask questions

18

1 human-computer interaction lab, university of konstanz, germany thomas memmel 1, harald reiterer 1...

Documents

ui designdefine

ui designswitching

ui layer

ui specificationconcentration

interdisciplinary ui

high ui quality

albacete spain

requirements analysisvehicle