The document describes a tool called INSPECTOR that was created to support interdisciplinary and collaborative user interface specification. INSPECTOR uses an integrated modeling framework with different levels of abstraction to provide a common language. It allows for interactive specification by visualizing abstractions and linking artifacts. An evaluation found that INSPECTOR improved the user experience over traditional document-based specification and supported bridging transitions between work stages.

1. 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

2. Contents
 Interface Specification Practice
 Requirements for Tool-Support
 Related Work
 Approach
 Interdisciplinary Modeling Framework
 Interactive Specification
 Evaluation
 Conclusion
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

3. Interface Specification Cycle
User Needs
General
Feedback
Requirements
Supplier Client
Specific UI
Implementation
Requirements
UI Specification UI Prototyping
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

4. Interface Specification Cycle
 Frequent work style transitions
 Multiple iterations
 Document-based artifacts
 Awkward traceability
 Lack of common language
Supplier Client
Call for Action
 Bridge transitions
 Support iterations
 Visual artifacts
 Interconnect artifacts
 Establish common language

5. State of the Art
 Commercial specification and prototyping tools
 User interface simulation
 Look & feel specification
 Neglect requirements and conceptual modeling
iRise
Axure

6. 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.

7. 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.

8. Shortcomings
 Transitions between work styles prevail
 Abstractions are not smoothly visualized
 Iterations in design are not supported
 Not all artifacts are traceable between steps
 Various modeling languages and styles prevent
active stakeholder participation
 Lack of reviewing and collaboration functionality

9. 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

10. 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

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

12. 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.

13. Inspector Tool Design
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

14. Inspector Tool Design
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

15. Inspector Storyboard Level
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

16. Inspector Modeling Level
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

17. Inspector Prototyping Level
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

18. Linking & Tracing
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

19. Evaluation Questionnaires (Daimler AG)
Questionnaire Topic Avg. Result
Participants = 6 5-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 existing 3.8
UI specification practice
The improvement of work style through a combination of different 4.8
models with multi-fidelity UI design
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

20. INSPECTOR on PowerWall
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

21. 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

22. 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

23. Conclusion
 Model-based tool for UI specification
 Novel approach towards a common language
for UI-related modeling
 Idea of interactive UI specifications
 First 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

24. Thank You!
IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer