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

Interface Specification Cycle ClientSupplier User Needs General Requirements Specific UI Requirements UI PrototypingUI SpecificationImplementationFeedback IADIS 2008 Amsterdam – Workgroup HCI University of Konstanz – Thomas Memmel, Florian Geyer, Johannes Rinn and Harald Reiterer

Interface Specification Cycle ClientSupplier Frequent work style transitions Multiple iterations Document-based artifacts Awkward traceability Lack of common language Call for Action: Bridge transitions Support iterations Visual artifacts Interconnect artifacts Establish common language

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

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

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 , New York, NY, USA. ACM Press.

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

Requirements For Tool-Support PurposeRequirement Bridge tool transitionsIntegrated solution and smooth visual transitions Visualize abstractionsSupport for very early informal sketching over medium- fidelity to more formal expressions Manage iterationsSmooth switching between iterations to allow exploring the design progress TraceabilityInterconnect artifacts to allow tracing and linking Stakeholder participationProvide common language for specification CollaborationEnable 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 Topic Participants = 6 Avg. Result 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 UI 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) 1 st week: 1.75pts (std. 0.46) 2 nd week: 3pts (std. 0.00) 3 rd 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 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

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