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