Masterarbeit A Zoom-Based Specification Tool supporting Interdisciplinary User Interface Design Processes von Florian Geyer 1. Gutachter: Prof. Dr. Harald Reiterer 2. Gutachter: Prof. Dr. Oliver Deussen FB Informatik und Informationswissenschaft Studiengang Information Engineering Universität Konstanz Mai 2008 iii Abstract Careful design of user interfaces is getting more and more important as computers increas- ingly determine the capabilities, limitations and organization of our work. Today, interfaces have to meet an extensive number of requirements on performance, functionality and us- ability. Additionally, the quality of user interfaces is also an economic factor, as it has a dramatical influence on customer satisfaction and brand value. Consequently, structured approaches to user interface design are characterized by a multitude of tasks and techniques that make interface development a complex process. However, current design practice is ac- companied with a variety of employed tools and frequent transitions from abstract problem definitions to detailed specifications. Based on a detailed investigation of interface design theory and practice, this thesis introduces a novel interface specification tool that aims on ad- dressing the interdisciplinary nature of the design process and gaps in communication and technology in order to ease work transitions. Nevertheless, it also aims on promoting cre- ativity and innovation in design by offering informal means of expression and by allowing to relate design artifacts in context. It contributes to current design practice by respecting the need for iterations and continuous reviewing as well as collaboration among design- ers throughout the design process. This thesis explains the rationale behind the developed tool by a detailed examination of applied theoretical foundations, related research, practical design methods and utilized interface concepts, before presenting a conceptual model that led to the physical interface design. As a result of careful integration and implementation of innovative, zoom-based interaction and visualization techniques that closely resemble transitions in work practice, the introduced tool design extends the perception of interface specification tools to a broader, more comprehensive coverage of the design process. After describing the technical implementation, the thesis concludes with a review of contributions and remaining issues as well as implications for future investigations. iv Abstract v Uberblick¨ Die Gestaltung von Benutzeroberflachen¨ gewinnt immer mehr an Bedeutung, da die Moglichkeiten,¨ Grenzen und die Organisation unserer Arbeit zunehmend von Comput- ern bestimmt werden. An sie wird eine umfangreiche Reihe von Anforderungen an Leis- tung, Funktionalitat¨ und Usability gestellt. Zusatzlich¨ ist die Benutzerschittstelle auch ein wirtschaftlicher Faktor, der Einfluss auf Kundenzufriedenheit und Markenwert hat. Strukturierte Ansatze¨ der Benutzerschnittstellenentwicklung zeichnen sich daher durch eine Vielzahl von komplexen Methoden und Techniken aus. Prozessmodelle in der Praxis sind charakerisiert durch eine Vielzahl von eingesetzten Werkzeugen und haufigen¨ Uberg¨ angen¨ zwischen abstrakten Problemdefinitionen bis hin zu detaillierten Spezifikatio- nen. Diese Masterarbeit stellt ein innovatives Werkzeug zur Spezifikation von Benutzer- schnittstellen vor, das auf einer detaillierten Recherche von Theorie und Praxis basiert. Das entwickelte Werkzeug respektiert den interdisziplinaren¨ Charakter des Entwurfsprozesses und die Lucken¨ in Kommunikation und Technik durch eine effektive Uberbr¨ uckung¨ von Werkzeuguberg¨ angen.¨ Dennoch fordert¨ das Werkzeug Kreativitat¨ und Innovation durch die Unterstutzung¨ von informellen Ausdrucksmitteln und durch die Moglichkeit¨ erzeugte Arte- fakte im Kontext der Entwicklung zu betrachten. Durch Unterstutzung¨ von Iterationen und durchgangigen¨ Evaluationsmoglichkeiten¨ wahrend¨ des Gestaltungsprozesses, sowie der Kollaboration zwischen Designern wird der gesamte Designprozess abgedeckt. Diese Mas- terarbeit beschreibt die Hintergrunde¨ des entwickelten Werkzeugs durch eine ausfuhrliche¨ Beschreibung von angewandten theoretischen Grundlagen, verwandter Forschungspro- jekte und praktischer Konzepte, bevor ein konzeptueller Entwurf und das finale Design vorgestellt werden. Durch eine bedachte Integration von innovativen, Zoom-basierten Visualisierung- und Interaktionstechniken, wird die Auslegung von Werkzeugen zur Un- terstutzung¨ von Gestaltungsprozessen neu definiert. Nach Beschreibung der technischen Umsetzung, schließt die Arbeit mit einer Bewertung des Erreichten, offenen Fragen sowie Empfehlungen fur¨ zukunftige¨ Entwicklungen ab. vii Contents 1 Introduction1 1.1 Motivation and Goals.................................3 1.1.1 Need for a new Generation of UI Tools..................3 1.1.2 Incremental Innovation...........................4 1.1.3 Proposed Features for effective Tool Support...............5 1.2 Research Approach..................................6 1.2.1 Background..................................6 1.2.2 Thesis Scope..................................7 1.3 Thesis Structure....................................7 2 Theoretical Foundations9 2.1 User Interface Design and HCI...........................9 2.2 General Approaches to UI Design.......................... 11 2.3 Technology and Innovation............................. 12 2.4 Interdisciplinary Design............................... 13 2.4.1 Engineering and Design........................... 14 2.4.2 Separation of Concerns........................... 15 2.4.3 Bridging the Gap in Practice........................ 16 2.5 Treasuring Design Experience............................ 19 2.6 Summary........................................ 22 2.6.1 Shortcomings................................. 22 2.6.2 Implications for Tool Support........................ 23 3 Related Work 25 3.1 A Lesson in History.................................. 25 3.2 State-of-the-Art Tool Support............................ 26 3.3 Related Research................................... 28 3.3.1 Supporting early Design Phases by Sketching.............. 28 3.3.2 Hybrid Solutions to ease Work Transitions................ 30 3.4 Research Gap..................................... 33 4 Analysis 37 4.1 Structured Approaches to User Interface Design................. 37 4.1.1 Integration with Software Development.................. 38 4.1.2 Widely adopted Structured Approaches.................. 38 4.2 Adapted Process Model............................... 45 4.2.1 Tasks, Techniques and Artifacts....................... 47 4.2.2 Interdisciplinary Selection of Artifacts................... 48 4.3 Requirements for Tool Support........................... 50 4.3.1 General Guidelines.............................. 50 4.3.2 Specific Requirements............................ 53 5 Design 57 5.1 Conceptual Design.................................. 57 5.1.1 User Characteristics............................. 58 5.1.2 Contextual Work style............................ 61 5.1.3 The Design Room Metaphor........................ 67 5.2 Collecting Concepts - Interaction & Visualization................. 71 viii Contents 5.2.1 Whiteboard Interaction........................... 71 5.2.2 Spatial Navigation.............................. 76 5.2.3 Interactive Visualization........................... 84 5.2.4 Collaboration................................. 90 5.3 Physical Design.................................... 94 5.3.1 Overview................................... 94 5.3.2 Interaction Concept.............................. 95 5.3.3 Visualization & Navigation concept.................... 100 5.3.4 Collaboration................................. 106 6 Implementation 109 6.1 Technical Framework................................. 109 6.2 System Architecture.................................. 110 6.2.1 System Components............................. 112 6.3 Lessons Learned.................................... 116 7 Conclusion 119 7.1 Review......................................... 119 7.1.1 Design Rationale............................... 119 7.1.2 Expert Evaluation & Field Study...................... 120 7.1.3 Reflection................................... 122 7.2 Future Work...................................... 123 7.3 Summary........................................ 126 A Methods and Tools 129 B Conceptual Models 133 C Screenshots 139 D Evaluation Questionnaire 147 Bibliography 153 ix List of Figures 2.1 HCI Design Curriculum............................... 10 3.1 SILK........................................... 28 3.2 DENIM and DAMASK................................ 29 3.3 DiaMODL....................................... 30 3.4 CanonSketch...................................... 31 3.5 TaskSketch....................................... 32 3.6 WinSketch....................................... 33 3.7 Comparison of Selected Tools............................ 34 3.8 Comparison of Proposed Research Coverage to CanonSketch.......... 35 4.1 The STAR Lifecycle.................................. 40 4.2 The Usability Engineering Lifecycle........................ 41 4.3 Usage-centered Design................................ 42 4.4 Scenario-based Design................................ 44 4.5 Adapted Process Model............................... 46 4.6 Interdisciplinary Visual Specification Framework................. 48 4.7 A Framework for Creativity Support........................ 52 5.1 Role Map........................................ 60 5.2 A Work Transition..................................