Tool-Support for Interdisciplinary and Collaborative User Interface Specification

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Contents

Interface Specification PracticeRequirements for Tool-SupportRelated WorkApproach

Interdisciplinary Modeling FrameworkInteractive Specification

EvaluationConclusion

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Interface Specification Cycle

ClientSupplier

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Interface Specification Cycle

ClientSupplier

Frequent work style transitionsMultiple iterationsDocument-based artifactsAwkward traceabilityLack of common language

Call for Action:Bridge transitionsSupport iterationsVisual artifactsInterconnect artifactsEstablish common language

State of the Art

Commercial specification and prototyping tools User interface simulation Look & feel specification Neglect requirements and conceptual modeling

iRiseAxure

Related Research

CanonSketch & TaskSketch (Campos & Nunes, 2004) Abstract modeling combined with canonical prototyping Tracing between models & interface elements

P. F. Campos & N. J. Nunes (2004). `CanonSketch: A User-Centered Tool for Canonical Abstract Prototyping'. In EHCI/DS-VIS, pp. 146-163.

Related Research

Denim & Damask (Lin & Landay, 2002) Informal prototyping with whiteboard sketching Zoom-based storyboard modeling

J. Lin, et al. (2000). `DENIM: finding a tighter fit between tools and practice for Web site design'.In CHI '00: Proceedings of the SIGCHI conference on Human factors in computing systems, pp. 510-517, New York, NY, USA. ACM Press.

Shortcomings

Transitions between work styles prevailAbstractions are not smoothly visualized Iterations in design are not supportedNot all artifacts are traceable between stepsVarious modeling languages and styles prevent

active stakeholder participationLack of reviewing and collaboration functionality

Requirements For Tool-Support

Purpose Requirement

Bridge tool transitions Integrated solution and smooth visual transitions

Visualize abstractions Support for very early informal sketching over medium-fidelity to more formal expressions

Manage iterations Smooth switching between iterations to allow exploring the design progress

Traceability Interconnect artifacts to allow tracing and linking

Stakeholder participation Provide common language for specification

Collaboration Enable reviewing and decision-making

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Approach

Identify adequate models for common language Interdisciplinary modeling framework Hierarchical structure of process abstractions

Provide interactive process visualization Visualize abstractions between process steps Bridge transitions with interactive exploration Interconnections between artifacts

Support for iterative and creative work style Early informal sketching techniques Rapid multi-fidelity iterative prototyping Collaborative decision-making

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Common Language

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Structure of Abstractions

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

Visualization of Abstractions

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Tool Design

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Scenario Map

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Storyboard Level

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Modeling Level

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Prototyping Level

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Linking & Tracing

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Video Presentation

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Questionnaire TopicParticipants = 6

Avg. Result5-point Likert scale

Text-based and graphical requirements modeling (aggregated) 3.8

Overall UI prototyping capabilities (aggregated) 3.2

Overall rating of the interaction with INSPECTOR (aggregated) 3.3

The overall contribution of INSPECTOR to existingUI specification practice

3.8

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

4.8

Evaluation Questionnaires (Daimler AG)

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Diary Study

Long term evaluation of INSPECTOR in a lecture project 3 groups of students Period of 3 weeks Asynchronous modeling and design tasks Discussion and review in team sessions

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Diary Study

Diary questions on Types of models used Additional needed tools Usability issues User experience General opinion

Average results on all questions (based on a 5 point Likert scale) 1st week: 1.75pts (std. 0.46) 2nd week: 3pts (std. 0.00) 3rd week 4.25pts (std. 0.46)

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Conclusion

Model-based tool for UI specificationNovel approach towards a common language

for UI-related modeling Idea of interactive UI specificationsFirst empirical studies prove:

The idea to interconnect a thoughtful selection of models with different levels of UI design contributes to UI specification processes in client organizations.

Future work Interface components for creativity support Distributed data model for asynchronous specification

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Thank You!

IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer