User Interface Specification in Complex Web-based Information Spaces

INSPECTOR: Method and Tool for Visual UI Specification

1Human-Computer Interaction Lab, University of Konstanz, Germany2Daimler AG, Group Research & Advanced Engineering GR/ESP, Ulm, Germany

Thomas Memmel1, Heiko Ziegler2, Richard Oed2, Harald Reiterer1

Thomas Memmel1, Harald Reiterer1

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

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

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

Responsibility Assignment in Corporate Projects

3

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

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

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

Solution A: Model-Driven UI Specification

5

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

MAXpro (Daimler AG)

• XML-based UI Prototyping & Specification tool• Motivation:

– function as a vehicle for discussions– easy generation of alternate UI design solutions– different versions of the UI generated easy and

quickly– early externalization of design vision (client)– up-front usability evaluation (client) – prevents costly late-cycle changes and helps to – become less dependent on a supplier

6

MAXpro: Video

7

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

MAXpro: Lessons Learned

8

• Formalization vs. Chance for Innovation• Rather inappropriate to propel creative processes• Actors cannot take part in participatory design without

knowing the terminology• Applied no sooner than after the requirements analysis

– Office stays the dominant tool in earlier phases– User and task modelling misses

• Design rationale not incorporated, but dispersed in different media

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

Solution B: Model-Based UI Specification

9

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

Interactive UI Specification Explained

10

Interactive UI Prototypes Interactive UI SpecificationsVehicle 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 detailSupplements text-based specification

Alternative to text-based UI specification

Design rationale saved in other documents

Incorporates design knowledge and rationale

Mayhew, Rosson & Caroll, Constantine

Constantine, Ambler, Beck

Holt, Ambler

Leve

l of a

bstra

ctio

n: T

ext t

o U

I des

ign

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

New Research

A common denominator in UI Modelling

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 Mod

elTa

sk M

odel

Inte

ract

ion

Mod

elV

anderdonckt: CA

ME

LEO

N R

eference Framew

ork

INSPECTOR: Video

13

IASTED-HCI 2008, Innsbruck (Austria), 18.3.08Combined talk about UI specifcation methods and tools Thomas Memmel et al.

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 organizations

14

Thank you very much

Please do not hesitate to ask questions

15