DOCSLIB.ORG

Human Centred Design for Graphical User Interfaces Practical Guidelines

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Human Centred Design for Graphical User Interfaces Practical Guidelines Master's Thesis Human centred Design for Graphical User Interfaces Practical Guidelines Klaus Hinum 9625167 Dieselgasse 5a/13 A-1100 Vienna Austria Supervisor Silvia Miksch Institute of Software Technology and Interactive Systems [E188] Submitted at the Vienna University of Technology Faculty of Informatics Vienna, 13. February 2004 ______________________ Human centred Design for Graphical User Interfaces Abstract Good graphical user interface design is not a trivial task. This master thesis provides guidelines to solve this problem. It will give hints on how to structure each page, what to consider when using text and graphics, and how to ensure a good usability. Furthermore, icon and menu design are described in depth. These guidelines can be used for designing or evaluating an interface. The principles described are generic and applicable to any existing graphical user interface standard. Finally, the guidelines are used to evaluate four different user interfaces. These analyses show that good designed interfaces fulfil most of the guidelines. Furthermore, it shows that flaws can be uncovered and corrected. The fourth analysis demonstrates that the guidelines can also be taken during the development phase of a user interface. Kurzfassung Gutes grafisches User Interface Design ist eine schwierige Angelegenheit. Diese Diplomarbeit soll, mit Hilfe von Richtlinien, helfen dieses Ziel zu erreichen. Es wird erklärt, wie man die Seiten strukturieren soll, wie man Text und Grafiken darstellen soll und wie man eine gute Benutzbarkeit erreicht. Ausserdem gibt es zwei Kapitel über Menü- und Icondesign. Die Richtlinien können auch zur Bewertung von bestehenden Benutzerschnittstellen verwendet werden. Grundsätzlich wurde der Inhalt allgemein gehalten und kann auf jeden bestehenden Benutzerschnittstellenstandard angewandt werden. Im letzten Teil der Arbeit werden vier verschiedene Benutzerschnittstellen mit den Richtlinien analysiert. Diese Analysen sollen zeigen, dass gutes Design auch durch die Einhaltung der Guidelines charakterisiert ist. Ausserdem lassen sich anhand der Guidelines Designfehler finden und beheben. Die vierte Analyse zeigt, daß die Richtlinien auch während der Entwicklung eines Programmes eingesetzt werden können. i Human centred Design for Graphical User Interfaces Table of Contents 1 Introduction 1 1.1 What is design of graphical user interfaces?............................................................................1 1.2 My motivation..........................................................................................................................2 1.3 Structure of this thesis..............................................................................................................2 2 The human cognition 3 2.1 Perception................................................................................................................................3 2.1.1 Seeing...........................................................................................................................3 2.2 Cognition...............................................................................................................................16 3 History of interface design 18 3.1 Hardware Interface.................................................................................................................18 3.2 Batch System.........................................................................................................................18 3.3 Line-oriented interfaces.........................................................................................................19 3.4 Full-screen interfaces.............................................................................................................19 3.5 Graphical user interfaces........................................................................................................19 4 Design guidelines 21 4.1 General...................................................................................................................................21 4.1.1 Use Gestalt laws for relationships..............................................................................21 4.1.2 Use a grid based structure for designing multiple pages............................................26 4.1.3 Highlight important elements.....................................................................................27 4.1.4 Use layering to display overlapping information.......................................................27 4.1.5 Grouping into functional areas...................................................................................28 4.1.6 Keep controls in a separate area.................................................................................28 4.1.7 Use indents to indicate hierarchies in your elements.................................................28 4.1.8 Balance.......................................................................................................................28 4.1.9 Consistency in all object styles...................................................................................29 4.1.10 Keep screens simple.................................................................................................30 4.1.11 Avoid screens with text alone..................................................................................30 4.1.12 Use specific guidelines for the system you develop for...........................................30 4.2 Text........................................................................................................................................30 4.2.1 Contrast......................................................................................................................30 4.2.2 Type colour.................................................................................................................31 4.2.3 Font family.................................................................................................................31 4.2.4 Do not use too many different typestyles...................................................................31 4.2.5 Use serif fonts for long texts......................................................................................32 4.2.6 Use portable typestyles...............................................................................................32 4.2.7 Typesize appropriate for the audience and amount of reading...................................32 4.2.8 Use both lower- and uppercase text...........................................................................33 4.2.9 Keep line lengths reasonable......................................................................................33 4.2.10 Generally, use single spacing between lines of text.................................................33 ii Human centred Design for Graphical User Interfaces 4.2.11 Use of justification...................................................................................................34 4.2.12 Font: wordspacing, letterspacing..............................................................................34 4.2.13 Use headings as organizers.......................................................................................34 4.2.14 Use paragraphs to organize the information in bite sizes.........................................35 4.2.15 Use directive cues to emphasize important terms or ideas.......................................35 4.2.16 Set up comparison – contrast situations in a side-by-side columnar arrangement...35 4.2.17 Writing for the web..................................................................................................35 4.3 Graphics.................................................................................................................................36 4.3.1 Use graphics for organization of functional areas......................................................36 4.3.2 Images versus words...................................................................................................36 4.3.3 Use contrasts to differentiate elements.......................................................................37 4.3.4 Visual integration requires equal scale and visual weight..........................................37 4.3.5 Optical adjustments for human vision........................................................................38 4.3.6 Use animations carefully............................................................................................39 5 Colour 41 5.1 Computer colour....................................................................................................................41 5.1.1 RGB............................................................................................................................41 5.1.2 CMYK........................................................................................................................41 5.1.3 CIE colour spaces.......................................................................................................41 5.2 Colour guidelines...................................................................................................................41 5.2.1 Use colour contrasts to separate.................................................................................41 5.2.2 Consider colour blind people.....................................................................................45 5.2.3 Do not display fine detail only with chromatic differences........................................45
Load more

Recommended publications
  • Using Experience Design to Drive Institutional Change, by Matt Glendinning
    The Monthly Recharge - November 2014, Experience Design Designing Learning for School Leaders, by Carla Silver Using Experience Design to Drive Institutional Change, by Matt Glendinning Designing the Future, by Brett Jacobsen About L+D Designing Learning for School Leadership+Design is a nonprofit Leaders organization and educational Carla Robbins Silver, Executive Director collaborative dedicated to creating a new culture of school leaders - empathetic, creative, collaborative Dear Friends AND Designers: and adaptable solution-makers who can make a positive difference in a The design industry is vast and wonderful. In his book, Design: rapidly changing world. Creation of Artifacts in Society, Karl Ulrich, professor at Wharton School of Business at the University of Pennsylvania, includes an We support creative and ever-growing list of careers and opportunities in design. They innovative school leadership at range form the more traditional and known careers - architecture the individual and design, product design, fashion design, interior design - to organizational level. possibilities that might surprise you - game design, food design, We serve school leaders at all news design, lighting and sound design, information design and points in their careers - from experience design. Whenever I read this list, I get excited - like teacher leaders to heads of jump-out-of-my-seat excited. I think about the children in all of our school as well as student schools solving complex problems, and I think about my own leaders. children, and imagine them pursuing these careers as designers. We help schools design strategies for change, growth, Design is, according to Ulrich, "conceiving and giving form to and innovation.
    [Show full text]
  • Transformational Information Design 35
    Petra Černe Oven & Cvetka Požar (eds.) ON INFORMATION DESIGN Edited by Petra Černe Oven and Cvetka Požar Ljubljana 2016 On Information Design Edited by Petra Černe Oven and Cvetka Požar AML Contemporary Publications Series 8 Published by The Museum of Architecture and Design [email protected], www.mao.si For the Museum of Architecture and Design Matevž Čelik In collaboration with The Pekinpah Association [email protected], www.pekinpah.org For the Pekinpah Association Žiga Predan © 2016 The Museum of Architecture and Design and authors. All rights reserved. Photos and visual material: the authors and the Museum for Social and Economic Affairs (Gesellschafts- und Wirtschaftsmuseum), Vienna English copyediting: Rawley Grau Design: Petra Černe Oven Typefaces used: Vitesse and Mercury Text G2 (both Hoefler & Frere-Jones) are part of the corporate identity of the Museum of Architecture and Design. CIP - Kataložni zapis o publikaciji Narodna in univerzitetna knjižnica, Ljubljana 7.05:659.2(082)(0.034.2) ON information design [Elektronski vir] / Engelhardt ... [et al.] ; edited by Petra Černe Oven and Cvetka Požar ; [photographs authors and Austrian Museum for Social and Economic Affairs, Vienna]. - El. knjiga. - Ljubljana : The Museum of Architecture and Design : Društvo Pekinpah, 2016. - (AML contemporary publications series ; 8) ISBN 978-961-6669-26-9 (The Museum of Architecture and Design, pdf) 1. Engelhardt, Yuri 2. Černe Oven, Petra 270207232 Contents Petra Černe Oven Introduction: Design as a Response to People’s Needs (and Not People’s Needs
    [Show full text]
  • The Desktop (Overview)
    The desktop (overview) The desktop is the main screen area that you see after you turn on your computer and log on to Windows. Like the top of an actual desk, it serves as a surface for your work. When you open programs or folders, they appear on the desktop. You can also put things on the desktop, such as files and folders, and arrange them however you want. The desktop is sometimes defined more broadly to include the taskbar and Windows Sidebar. The taskbar sits at the bottom of your screen. It shows you which programs are running and allows you to switch between them. It also contains the Start button , which you can use to access programs, folders, and computer settings. On the side of the screen, Sidebar contains small programs called gadgets. The desktop, taskbar, and Sidebar Where did my desktop go? Because programs run on top of the desktop, the desktop itself is often partially or completely hidden. But it's still there, underneath everything. To see the whole desktop without closing any of your open programs or windows, click the Show Desktop button on the taskbar. The desktop is revealed. Click the icon again to restore all of your windows to the way they were. Desktop Training Session Handout Page 1 http://ict.maxwell.syr.edu/vista/ Working with desktop icons Icons are small pictures that represent files, folders, programs, and other items. When you first start Windows, you'll see at least one icon on your desktop: the Recycle Bin (more on that later).
    [Show full text]
  • Creating Document Hyperlinks Via Rich-Text Dialogs
    __________________________________________________________________________________________________ Creating Document Hyperlinks via Rich-Text Dialogs EXAMPLE: CREATING A HYPERLINK IN EXCEPTIONS/REQUIREMENTS: Enter the appropriate paragraph either by selecting from the Lookup Table or manually typing in the field, completing any prompts as necessary. Locate and access the item to be hyperlinked on the external website (ie through the County Recorder Office): Copy the address (typically clicking at the end of the address will highlight the entire address) by right click/copy or Control C: __________________________________________________________________________________________________ Page 1 of 8 Creating Hyperlinks (Requirements/Exceptions and SoftPro Live) __________________________________________________________________________________________________ In Select, open the Requirement or Exception, highlight the text to hyperlink. Click the Add a Hyperlink icon: __________________________________________________________________________________________________ Page 2 of 8 Creating Hyperlinks (Requirements/Exceptions and SoftPro Live) __________________________________________________________________________________________________ The Add Hyperlink dialog box will open. Paste the link into the Address field (right click/paste or Control V) NOTE: The Text to display (name) field will autopopulate with the text that was highlighted. Click OK. The text will now be underlined indicating a hyperlink. __________________________________________________________________________________________________
    [Show full text]
  • Chapter 2 3D User Interfaces: History and Roadmap
    30706 02 pp011-026 r1jm.ps 5/6/04 3:49 PM Page 11 CHAPTER 2 3D3D UserUser Interfaces:Interfaces: HistoryHistory andand RoadmapRoadmap Three-dimensional UI design is not a traditional field of research with well-defined boundaries. Like human–computer interaction (HCI), it draws from many disciplines and has links to a wide variety of topics. In this chapter, we briefly describe the history of 3D UIs to set the stage for the rest of the book. We also present a 3D UI “roadmap” that posi- tions the topics covered in this book relative to associated areas. After reading this chapter, you should have an understanding of the origins of 3D UIs and its relation to other fields, and you should know what types of information to expect from the remainder of this book. 2.1. History of 3D UIs The graphical user interfaces (GUIs) used in today’s personal computers have an interesting history. Prior to 1980, almost all interaction with com- puters was based on typing complicated commands using a keyboard. The display was used almost exclusively for text, and when graphics were used, they were typically noninteractive. But around 1980, several technologies, such as the mouse, inexpensive raster graphics displays, and reasonably priced personal computer parts, were all mature enough to enable the first GUIs (such as the Xerox Star). With the advent of GUIs, UI design and HCI in general became a much more important research area, since the research affected everyone using computers. HCI is an 11 30706 02 pp011-026 r1jm.ps 5/6/04 3:49 PM Page 12 12 Chapter 2 3D User Interfaces: History and Roadmap 1 interdisciplinary field that draws from existing knowledge in perception, 2 cognition, linguistics, human factors, ethnography, graphic design, and 3 other areas.
    [Show full text]
  • Information Scaffolding: Application to Technical Animation by Catherine
    Information Scaffolding: Application to Technical Animation By Catherine Claire Newman a dissertation submitted in partial satisfaction of the requirements for the degree of DOCTOR OF PHILOSOPHY in ENGINEERING – MECHANICAL ENGINEERING in the GRADUATE DIVISION of the UNIVERSITY of CALIFORNIA, BERKELEY Committee in Charge: Professor Alice Agogino, Chair Professor Dennis K Lieu Professor Michael Buckland FALL, 2010 Information Scaffolding: Application to Technical Animation Copyright © 2010 Catherine Newman i if you can help someone turn information into knowledge, if you can help them make sense of the world, you win. --- john battelle ii Abstract Information Scaffolding: Application to Technical Animation by Catherine C. Newman Doctor of Philosophy in Mechanical Engineering University of California, Berkeley Professor Alice Agogino, Chair Information Scaffolding is a user-centered approach to information design; a method devised to aid “everyday” authors in information composition. Information Scaffolding places a premium on audience-centered documents by emphasizing the information needs and motivations of a multimedia document's intended audience. The aim of this method is to structure information in such a way that an intended audience can gain a fuller understanding of the information presented and is able to incorporate knowledge for future use. Information Scaffolding looks to strengthen the quality of a document’s impact both on the individual and on the broader, ongoing disciplinary discussion, by better couching a document’s contents in a manner relevant to the user. Thus far, instructional research design has presented varying suggested guidelines for the design of multimedia instructional materials (technical animations, dynamic computer simulations, etc.), primarily do’s and don’ts.
    [Show full text]
  • The Shareware Review? Hi, I Just Recieved Your Latest Issue, Which Covered Almost All E-Zines with Quite a Bit of Depth
    About This Particular Macintosh™ 2.02: about the personalll computing experience Volume 2, Number 2 February 14, 1996 Send requests for free subscriptions to: [email protected] Cover Art "I Love You Mac" © 1996 Romeo A. Esparrago, Jr.: [email protected] Web Page: http://205.218.104.78/Friends/RomeoE/RomeHome.html We need new cover art every month! Write to us! Staff Publishing Tycoon - RD Novo Editor of Editors - RD Novo Beta Testers - Nancy Ross Adam Junkroski The Editorial Staff In charge of Design - RD Novo Finder Icon Design - Marc Robinson Demigod - Adam Junkroski Opinionated Associate Editor - Mike Shields The Featured Associate Editor - Vacant The Very Critical Associate Editor - Vacant The Shareware Editor - Vacant Webmaster - Mike Shields See the Helllp Wanted chapter for Information. Contributors Romeo A. Esparrago, Jr. Patti Gregson Adam Junkroski David Lindsay RD Novo Mike Shields Mike Wallinga Cristoph Wiese (and dora) Users like you (and you, too) The Tools Pokegenia (a Mac IIci) DOCMaker 4.5.1 ClarisWorks 4.0v3 Color It! 3.0 DeBump 1.1 Emailer 1.0v2 Graphic Converter 2.2.2 The Fonts Arial Condensed Light Cheltenham Garamond Geneva Gill Sans Helvetica Isla Bella Rosabel Antique (now called Pabst Oldstyle) Where to Find ATPM America Online : search "atpm" CompuServe : GO MACCLU eWorld : go Shareware North Coast BBS NYMUG, New York City SenseNet, New York City Tulsa Info Mall BBS, Oklahoma Raven Net, British Columbia SpiderNet, Holland Any others? Let us know! An Only Boy Production © 1996, All Rights Reserved (Except as noted below) Reprints Articles and original art cannot be reproduced without the express permission of Only Boy Productions, unless otherwise noted in the article.
    [Show full text]
  • Welcome to Computer Basics
    Computer Basics Instructor's Guide 1 COMPUTER BASICS To the Instructor Because of time constraints and an understanding that the trainees will probably come to the course with widely varying skills levels, the focus of this component is only on the basics. Hence, the course begins with instruction on computer components and peripheral devices, and restricts further instruction to the three most widely used software areas: the windows operating system, word processing and using the Internet. The course uses lectures, interactive activities, and exercises at the computer to assure accomplishment of stated goals and objectives. Because of the complexity of the computer and the initial fear experienced by so many, instructor dedication and patience are vital to the success of the trainee in this course. It is expected that many of the trainees will begin at “ground zero,” but all should have developed a certain level of proficiency in using the computer, by the end of the course. 2 COMPUTER BASICS Overview Computers have become an essential part of today's workplace. Employees must know computer basics to accomplish their daily tasks. This mini course was developed with the beginner in mind and is designed to provide WTP trainees with basic knowledge of computer hardware, some software applications, basic knowledge of how a computer works, and to give them hands-on experience in its use. The course is designed to “answer such basic questions as what personal computers are and what they can do,” and to assist WTP trainees in mastering the basics. The PC Novice dictionary defines a computer as a machine that accepts input, processes it according to specified rules, and produces output.
    [Show full text]
  • How to Use the Graphical User Interface TCS Technical Bulletin
    How to Use the Graphical User Interface TCS Technical Bulletin A. Create/Edit the Graphical Interface (Build Mode) Accessing the site using the Graphical Interface requires that you first build a layout (one or more layers/tabs depending on your site). This is done using the setup wizard to upload images/backgrounds and place controllers in appropriate locations on those images/backgrounds. When finished and saved, the User accesses the site using the Graphical Interface. 1. Click the “+” button to add a layer/tab for the site. (Skip to step 7 to edit an existing layer.) 2. Name the layer/tab by clicking in the field and entering the desired name. 3. Click the Choose File button to select the desired background image from your computer’s drive and click the Save button. 4. The Place View will open showing you the layer/tab title, a Save Positions button, the background image, and a bin of available controllers along the right-hand edge of the Graphical Interface which can be placed onto the layer/ tab. 5. Drag/drop controller icons from the icon bin to the desired location on the background image. Moving your mouse over each icon will show that controller’s name. The arrows at the top and bottom of scroll bar or the scroll bar itself allow you to scroll through the available controllers. NOTE: If you have placed controller icons too close to the icon bin and you would like to move them, you may need to scroll the available controllers up or down to clear the area around an icon to allow it to be dragged/dropped again.
    [Show full text]
  • Leaks, Sabotage, and Information Design∗
    Leaks, Sabotage, and Information Design∗ Aaron Kolby Erik Madsenz February 2, 2019 Abstract We study optimal dynamic information disclosure by a principal to an agent of uncer- tain loyalty who may engage in hidden undermining, for instance through damaging leaks or sabotage. The agent requires information to correctly perform a task but may also covertly commit destructive acts which are only stochastically detectable. The principal optimally provides inconclusive incremental guidance until a deterministic time when the agent is deemed trusted and given a conclusive final report. Disloyal agents are never given incentives to feign loyalty, and in the unique time-consistent implementation undermine with variable, non-monotonic intensity over the lifetime of employment. JEL Classification: C70, D82, D83, D86, M51 Keywords: information leaks, sabotage, principal-agent model, information design 1 Introduction An organization has found itself the victim of information leaks and sabotage. Sensitive documents have been leaked to the media, corporate secrets have been sold to competitors, obscure vulnerable points in production lines have been discovered and sabotaged. An insider with access to privileged information must be undermining the organization | but who? Halting the distribution of sensitive data would staunch the bleeding, but also leave employees paralyzed and unable to act effectively. Limited information could be circulated ∗The authors thank Laurent Mathevet and seminar audiences at Brown University and the 2018 NSF/NBER/CEME Conference at the University of Chicago for helpful conversations. yDepartment of Business Economics and Public Policy, Kelley School of Business, Indiana University (Email: [email protected]). zDepartment of Economics, New York University (Email: [email protected]).
    [Show full text]
  • Features of Nctracks Portal Help System (PDF, 146
    Features of NCTracks Portal Help System The major forms of help on the NCTracks web portal are as follows: Navigational breadcrumbs System-Level Help: Indicated by the "NCTracks Help" link on each page Page-Level Help: Indicated by the " Help" link above the Legend Legend Data/Section Group Help: Indicated by a question mark (?) Hover over or Tooltip Help on form elements Navigational Breadcrumb A breadcrumb trail is a navigational tool that shows the user the path of screens they have visited from the homepage. This breadcrumb consists of links so the user can return to specific screens on this path. System Level Help The System Help link opens a new window with the complete table of contents for a given user's account privileges. The System Level Help link, "NCTracks Help," will show up at the top right of any secure portal page or web application form page that contains Page Level and/or Data/Form Group Help. Page Level Help Page Level Help opens a modal window with all of the Data/Form Group help topics for the current page. The Page Level Help link shows across from the page title of any web application form page. Features of NCTracks Portal Help System Page 1 of 2 Features of NCTracks Portal Help System Form Legend A legend of all helpful icons is presented on pages as needed to explain the relevant meanings. This helps the user become familiar with any new icon representations in context with the form or page as it is used. Move your mouse over the Legend icon to open list.
    [Show full text]
  • Design-Build Manual
    DISTRICT OF COLUMBIA DEPARTMENT OF TRANSPORTATION DESIGN BUILD MANUAL May 2014 DISTRICT OF COLUMBIA DEPARTMENT OF TRANSPORTATION MATTHEW BROWN - ACTING DIRECTOR MUHAMMED KHALID, P.E. – INTERIM CHIEF ENGINEER ACKNOWLEDGEMENTS M. ADIL RIZVI, P.E. RONALDO NICHOLSON, P.E. MUHAMMED KHALID, P.E. RAVINDRA GANVIR, P.E. SANJAY KUMAR, P.E. RICHARD KENNEY, P.E. KEITH FOXX, P.E. E.J. SIMIE, P.E. WASI KHAN, P.E. FEDERAL HIGHWAY ADMINISTRATION Design-Build Manual Table of Contents 1.0 Overview ...................................................................................................................... 1 1.1. Introduction .................................................................................................................................. 1 1.2. Authority and Applicability ........................................................................................................... 1 1.3. Future Changes and Revisions ...................................................................................................... 1 2.0 Project Delivery Methods .............................................................................................. 2 2.1. Design Bid Build ............................................................................................................................ 2 2.2. Design‐Build .................................................................................................................................. 3 2.3. Design‐Build Operate Maintain....................................................................................................
    [Show full text]