DOCSLIB.ORG

A Zoom-Based Specification Tool Supporting Interdisciplinary User Interface Design Processes

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
A Zoom-Based Specification Tool Supporting Interdisciplinary User Interface Design Processes 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..................................
Load more

Recommended publications
  • Kentico Content Management System (CMS) Widget Documentation
    Kentico [email protected] GC CUNY Kentico Content Management System (CMS) Widget Documentation I. INTRODUCTION ............................................................................................................................................................................... 2 II. Login to Kentico CMS Desk ............................................................................................................................................................... 3 III. GENERAL WIDGETS ........................................................................................................................................................................ 4 1. General Module – Contact ............................................................................................................................................................ 4 2. General Module – Static HTML ..................................................................................................................................................... 5 IV. CAROUSEL WIDGET ................................................................................................................................................................... 6 1. Carousel Module – Images with Captions ..................................................................................................................................... 6 V. IMAGE WIDGET ...............................................................................................................................................................................
    [Show full text]
  • M-Explorer User's Guide
    Table of Contents M-Explorer User’s Guide Table of Contents M-Explorer User’s Guide..............................................1 Chapter 1 Using This Guide.................................................................1-1 Introduction...................................................................................................... 1-1 Key Concepts................................................................................................... 1-2 Chapter Organization .....................................................................................................1-2 Online Help ....................................................................................................................1-2 Manual Conventions ......................................................................................................1-2 Chapter 2 Introduction to M-Explorer .................................................2-1 Introduction...................................................................................................... 2-1 Key Concepts................................................................................................... 2-2 System Component Interaction......................................................................................2-2 OPC Data Access Servers.............................................................................................2-2 M-Inspector ....................................................................................................................2-2 M-Password ...................................................................................................................2-3
    [Show full text]
  • Oracle Service Cloud Agent Browser UI November 2019 What's
    TABLE OF CONTENTS NOVEMBER 2019 UPDATE ·································································································································································· 2 Revision History ························································································································································································ 2 Overview ······································································································································································································· 2 Feature Summary ····················································································································································································· 3 Workspaces ···························································································································································································· 4 Reorderable Tabs ········································································································································································ 4 New Workspace Designer Options for the Agent Browser UI ····················································································· 4 Workspace Filter Mapping ························································································································································ 7 Analytics ··································································································································································································
    [Show full text]
  • Iwork '08 Getting Started (Manual)
    Overview of iWork Tools All three iWork applications share many of the same tools. The Toolbar and Format Bar At the top of each application window, the toolbar provides controls for common tasks. Each toolbar is described in detail in the appropriate chapter in this book. You can customize the toolbar so that it contains the tools you use most often. To customize the toolbar: m Choose View > Customize Toolbar. The toolbar at the top of each window provides controls for common tasks. The Format Bar provides additional formatting tools. The Format Bar provides quick access to commonly used tools for formatting objects. If the Format Bar isn’t visible beneath the toolbar, click View in the toolbar and choose Show Format Bar to show it. 16 Preface Welcome to iWork ’08 The Inspector Window You can format all elements of your document using the panes of the Inspector window. The Inspector panes are described in detail in the user’s guides. To open the Inspector window: m Click Inspector (a blue i) in the toolbar. Click the buttons along the top to see the different Inspector panes. You can have more than one Inspector window open at a time. To open another Inspector window: m Choose View > New Inspector, or Option-click one of the buttons at the top of the Inspector window. Preface Welcome to iWork ’08 17 To see what a control does, rest the pointer over it until its help tag appears. The Media Browser This window provides quick access to all the files in your iTunes library, your iPhoto library, your Aperture library, and your Movies folder.
    [Show full text]
  • 2D Scrolling Background in Unity When Creating a Scrolling
    2D Scrolling Background in Unity When creating a scrolling background image you will use something called a Quad and convert the Sprite into a Material. This works only if the background is designed to be scrollable. The general steps are: A. Create a new Project or use an existing project. B. Import the background sprite into the project C. Convert the Sprite into a Material D. Add a Quad 3D object and resize this object to match the background and set the Material Filtering E. Resize the Camera F. Add a Scrolling Script to the Quad 1. Download the scrolling backgrounds folder that contains some background images (see link for lecture). This will contain three images, a city background image (1230x600), a space background (1782x600) and a trees background (1100x405) 2. Start Unity and choose New to create a new Project. 3. Name the project Scrolling Background and select the 2D option. 4. Create the Project. 5. In the Assets folder create two new folders named Sprites and Scripts. 6. Drag these three background images into the sprites folder. 7. Click the scrolling city background image in the Sprites folder. The Inspector window shows the properties: You are going to change the Texture Type and the Wrap mode. 8. Set the Texture Type to Default and the Wrap Mode to Repeat. 9. Scroll down in the Inspector window and click the Apply button. 10. Repeat these steps for the other two sprites. 11. Click the Game Object menu, choose 3D, and choose Quad: You want to resize the quad object so it matches the background.
    [Show full text]
  • Guide for Web Editors January 2020, Version 3
    Guide for Web Editors January 2020, Version 3 Hanken School of Economics Table of Contents 1. Quick post-launch fix............................................... p. 3 2. Create a new page.................................................... p. 5 3. Overview of page elements......................................p. 6 4. Text headings.............................................................p. 7 5. Main image.................................................................p. 8 6. Adding images to article...........................................p. 12 7. Image sizes................................................................ p. 15 8. Add hyperlink (using node link).............................. p. 16 9. Remove hyperlink......................................................p. 17 10. Add file..................................................................... p. 18 11. Change file name.................................................... p. 20 12. Types of elements................................................... p. 23 13. Add accordion..........................................................p. 25 14. Add regular content paragraph..............................p. 26 15. Add rectangular image links.................................. p. 27 16. Add coloured buttons............................................. p. 28 17. Add simple buttons.................................................p. 29 18. Add horizontal block...............................................p. 30 19. Create event.............................................................p.
    [Show full text]
  • Stack Zooming for Multi-Focus Interaction in Time-Series Data Visualization
    Stack Zooming for Multi-Focus Interaction in Time-Series Data Visualization Waqas Javed∗ Niklas Elmqvist† Purdue University ABSTRACT Information visualization shows tremendous potential for helping both expert and casual users alike make sense of temporal data, but current time series visualization tools provide poor support for com- paring several foci in a temporal dataset while retaining context and distance awareness. We introduce a method for supporting this kind of multi-focus interaction that we call stack zooming. The approach is based on the user interactively building hierarchies of 1D strips stacked on top of each other, where each subsequent stack repre- sents a higher zoom level, and sibling strips represent branches in the visual exploration. Correlation graphics show the relation be- tween stacks and strips of different levels, providing context and Figure 1: The stack zooming technique for line graphs. The analyst distance awareness among the focus points. The zoom hierarchies has focused on a period of radical changes in the main timeline (top). can also be used as graphical histories and for communicating in- sights to stakeholders. We also discuss how visual spaces that sup- port stack zooming can be extended with annotation and local statis- tics computations that fit the hierarchical stacking metaphor. stack zooming. The technique is based on vertically stacking strips of 1D data into a stack hierarchy and showing their correlations Index Terms: H.5.2 [Information Interfaces and Presentation]: (Figure 1). To exemplify the new method, we also present a pro- User Interfaces—Graphical User Interfaces (GUI); I.3.6 [Computer totype implementation, called TRAXPLORER (Figure 2), that sup- Graphics]: Methodology and Techniques—Interaction techniques ports multi-focus interaction in temporal data through stack zoom- ing, as well as additional functionality such as local statistics com- 1 INTRODUCTION putation and annotation support.
    [Show full text]
  • Western Web Style Guide | the Department of Communications and Public Affairs | Western University | [email protected] Version 6 | August 2013 Contents
    WEB STYLE GUIDE Standards and Resources for Creating Western’s Web Experience Western Web Style Guide | The Department of Communications and Public Affairs | Western University | [email protected] Version 6 | August 2013 conTEnts Cascade CMS 3 Column Layouts 27-28 2-Column Layout 27 Page Design and Layouts 4-9 3-Column Layout 28 Layout 1: Homepage 4 Layout 2: Lower-level page with left navigation 6 Styling Lists 29 Layout 3. Lower-level page with a right sidebar 7 Title Bars 30 Layout 4. Lower-level single column page 8 Layout 5. Lower-level single column page 9 Boxes31-32 Blue Box 31 Consistent Page Elements 10-13 Callout Box 32 Header10 Main Body 11 Tables 33-34 Footer13 Tables With Borders 33 Tables Without Borders 34 Typography 14-15 Using Heading Tags 15 Forms35-37 W e b LogosWeb 16 Javascript Modules 38-41 Single Image Carousel 38 Web Banners 17 Triple Image Carousel 39 Colors18 Random Info Box 40 Accordion 41 Graphic Elements 19-26 Tabs42 Image Size Guidelines 19-20 Dynamic Slideshow 21 Twitter Feed 43 Static Images 22 Writing for the Web 44 Banner Image 23 Image Classes 24 Naming Conventions 45-49 Image with Captions 25 Web Standards Summary 50 Social Media Icons 26 Pre-launch Checklist 51-52 Western Web Style Guide (v.6) | The Department of Communications and Public Affairs | Western University | [email protected] 2 caScaDE cMS The goal of the Western Communications office is to bring the campus’ web presence to a unified, Online Resources Cascade System Warning/Alert Info Link intuitive, easy to use look and feel.
    [Show full text]
  • Shape Data Analysis Using Qushape
    SHAPE DATA ANALYSIS USING QUSHAPE 1. INTRODUCTION QuShape is a comprehensive user-friendly software package designed to perform fully automated analysis of SHAPE experimental data. QuShape requires no other software to fully analyze raw experimental capillary electrophoresis data. QuShape can be run in an automatic mode with default analytical procedures but contains an array of alternative algorithmic procedures and parameter controls that the user can apply if not satisfied with the default results. 2. GRAPHIC USER INTERFACE The user controls QuShape via a graphic interface. This interface includes the main Data View window, the Tool Inspector window, and the Script Inspector window. Results of every operation are plotted in the Data View window, allowing the user to monitor the quality of each data processing step. The user can vary the graphic display format via a set of control buttons. At each data processing step, the Tool Inspector window offers the user additional analytical tools that can be employed if the user is not satisfied with the results of the automatic procedure. 1 2.1. MAIN MENU AND TOOLS BAR Four groups of icons are found at the top of the QuShape screen: File-handling, Channels, Figure Options, and Split Channels. File-handling icons: These icons allow users to create or save projects. New Project – Click this icon to create a new project. Open Project – Click this icon to open an existing project. Save Project – Click this icon to save the project. Save Project As – Click this icon to save the project under a different name. Channels icons: Six differently colored label widgets relate colors of the lines in the Data View window to specific data channels (these labels refer to the two-capillary approach used to resolve the chemical probing experiment data).
    [Show full text]
  • Deltek Vision 7.4
    Set Start and Finish Dates Deltek Vision® 7.x Project Planning You specify a start and end date for each WBS element in the Start and Finish Quick Reference Chart Indent and Outdent columns. By default, a new task’s Finish date is determined by the Start Date or Select a row in the grid and click Outdent www.deltek.com End Date on the Plan’s General tab (depending on how the plan was created - (left button) to move a subset row to the from Project, from Opportunity, or from scratch). The Finish date is updated highest level. Select a row and click Indent based on hours you enter in the Planned Hrs fields on the accordion grid. Right- Shortcut Menu (right button) to make the selected row a click in the Finish column to select Match finish date(s) to planned values and Right-click in the grey area to the left of the subset of the left-justified item above it. rollback a Finish date to match the hours entered for the task. When you add Description column for any given row to access Subset rows can be opened or closed using hours in the Planned Hrs fields on the accordion grid, the Finish date updates, the shortcut menu. the plus and minus sign. providing that the hours are entered for a date beyond that currently entered in the Finish column. Cut, Copy, and Paste existing rows from the open plan Project Planning Toolbar to build your new plan and assign Save - Saves the current plan. resources.
    [Show full text]
  • 3D Reconstructions As Research Hubs: Geospatial Interfaces for Real-Time Data Exploration of Seventeenth-Century Amsterdam Domestic Interiors
    Open Archaeology 2021; 7: 314–336 Research Article Hugo Huurdeman*, Chiara Piccoli 3D Reconstructions as Research Hubs: Geospatial Interfaces for Real-Time Data Exploration of Seventeenth-Century Amsterdam Domestic Interiors https://doi.org/10.1515/opar-2020-0142 received December 7, 2020; accepted April 23, 2021 Abstract: This paper presents our ongoing work in the Virtual Interiors project, which aims to develop 3D reconstructions as geospatial interfaces to structure and explore historical data of seventeenth-century Amsterdam. We take the reconstruction of the entrance hall of the house of the patrician Pieter de Graeff (1638–1707) as our case study and use it to illustrate the iterative process of knowledge creation, sharing, and discovery that unfolds while creating, exploring and experiencing the 3D models in a prototype research environment. During this work, an interdisciplinary dataset was collected, various metadata and paradata were created to document both the sources and the reasoning process, and rich contextual links were added. These data were used as the basis for creating a user interface for an online research environment, taking design principles and previous user studies into account. Knowledge is shared by visualizing the 3D reconstructions along with the related complexities and uncertainties, while the integra- tion of various underlying data and Linked Data makes it possible to discover contextual knowledge by exploring associated resources. Moreover, we outline how users of the research environment can add annotations and rearrange objects in the scene, facilitating further knowledge discovery and creation. Keywords: virtual reconstructions, digital humanities, interface design, human–computer interaction, domestic architecture 1 Introduction In this paper, we explore the use of 3D reconstructions¹ as heuristic tools in the research process.
    [Show full text]
  • SAMHSA Data Webpage Help Guide.Pdf
    SAMHSA Data Webpage Help Guide November 2014 Table of Contents Introduction & Helpful Navigation Tools Pages 2-3 • Mega Menu • Fast Finder (Topic Index, Browse by Publication Type and SAMHDA—online analysis and data files) • Data Section Search • Data Archive • RSS Feed (email updates) Finding a Short Report Pages 4-5 Finding the NSDUH National Findings & Detailed Tables Pages 6-8 Finding the Uniform Reporting System (URS) Tables Pages 9-10 Finding the Barometers—National and State Pages 11-14 Finding Data by State, Region or Metro Area Pages 15-18 Contact Info Page 19 1 Introduction & Helpful Navigation Tools To help our Data webpage users adjust to using the new SAMHSA.gov/data site, we have created this quick reference guide with screenshots. The following types of reports are represented: • Short Reports • NSDUH National Findings & Detailed Tables • Uniform Reporting System (URS) Tables • Barometers • State Data • Reports by Topic First, let us show you some of the new features of the site that will be helpful tools in navigating it: Mega Menu: You can access the mega menu by hovering your mouse over the Data link on SAMHSA.gov. The mega menu will work on any page. From the mega menu, you can access all types of reports and each survey with one click. It is the fastest way to dig deep into the site. Data Search: The Data section of SAMHSA.gov has a second search button. If you enter your search term in the box and then click on the Data button, then the site will only search Data reports and content.
    [Show full text]