Information Architecture and Web Usability Course Notes Version of 06 Oct 2021 Ao.Univ.-Prof. Dr. Keith Andrews ISDS Graz University of Technology Inffeldgasse 16c A-8010 Graz [email protected] https://courses.isds.tugraz.at/iaweb/iaweb.pdf Copyright 2021 by Keith Andrews, except as otherwise noted. Contents Contents i List of Figures iii List of Tables v Preface vii Credits ix 1 Introduction 1 2 User Experience and the Web5 2.1 User Experience (UX) . .5 2.2 Web User Experience . .6 3 Web Usability 9 3.1 Three Kinds of Web Site . 10 3.2 Typical Cost of Building a Web Site . 12 3.3 Indicators of Web Usability . 12 4 Mobile Usability 17 4.1 Mobile Usage Has Long Overtaken Desktop . 18 4.2 Mobile First is Not Mobile Only . 18 5 Web Accessibility 19 5.1 Checking Your Web Site for Accessibility . 19 6 Site Objectives and User Needs 21 6.1 Site Objectives . 21 6.2 Web Site User Needs and Characteristics . 21 7 Content Strategy 25 8 Information Architecture 27 8.1 Organisation Schemes . 30 8.2 Taxonomies and Hierarchies . 36 8.3 Card Sorting . 39 8.4 Tree Testing . 45 8.5 Controlled Vocabularies . 50 i 8.6 Faceted Classification . 52 8.7 User-Generated Structures . 54 8.8 Site Search . 56 8.9 Navigation Systems . 56 8.10 Domain-Driven Design . 60 9 Information and Navigation Design 63 9.1 Navigation Design . 65 9.2 Text Design . 67 9.3 Image Design . 71 10 Visual Design 77 10.1 Greeking Test . 77 11 Implementation and Optimisation 83 11.1 Tabular Page Layout (“The Old Way”) . 83 11.2 HTML5 . 90 11.3 Polyglot XHTML5 . 92 11.4 Building Fault-Tolerant Web Sites . 95 11.5 Responsive Web Design . 96 11.6 Design Systems . 101 11.7 Web Performance . 104 12 Conducting a Formal Experiment 109 12.1 Experimental Design . 111 12.2 Statistical Analysis . 117 12.3 Examples for Common Situations . 118 13 Evidence-Based Guidelines 123 13.1 Screen Fonts . 123 14 Web Usability Case Studies 131 14.1 SunWeb: User Interface Design for Sun Microsystem’s Internal Web . 131 14.2 SunWWW: User Interface Design for Sun’s Web Site . 136 14.3 MSWeb: Microsoft Intranet Site . 147 14.4 Designing Web Applications . 147 Bibliography 149 ii List of Figures 2.1 Five Planes of User Experience . .7 3.1 Three kinds of web site . 10 3.2 Mixing Purposes Within a Web Site . 12 8.1 From a Pile of Stuff . 28 8.2 Uses of Information Architecture . 29 8.3 Topical Organisation Scheme at ConsumerReports . 32 8.4 Task-Based Organisation Scheme at Ebay . 33 8.5 Dell Web Site . 33 8.6 Lufthansa Virtual Airport . 34 8.7 Stanford Web Site . 35 8.8 Mixed-Up Libarary . 35 8.9 Hertz Web Site in 2016 . 37 8.10 Hertz Navigation Label Audit . 38 8.11 Open Card Sorting . 40 8.12 Concept Cards Scattered on a Table . 41 8.13 Test Facilitator Explains Unclear Concepts . 42 8.14 Grouping Cards into Categories . 42 8.15 Categories Labeled with Post-It Notes . 43 8.16 Card Set for Paper-Based Tree Test . 47 8.17 Paper-Based Tree Test . 47 8.18 Treejack: Creating a Study . 48 8.19 Treejack: Participating in a Study . 49 8.20 Treejack: Pietree for a Task . 49 8.21 Faceted Navigation at K&L Wines . 54 8.22 University Canteen Emergent Path . 55 8.23 University Canteen Paved Cowpath . 55 8.24 PeopleSoft Home Page . 58 8.25 PeopleSoft Site Index . 59 8.26 PeopleSoft Site Map . 59 9.1 DENIM Storyboard . 64 9.2 DENIM Runtime . 64 9.3 Balsamiq Mockup Wireframe . 65 9.4 Navigational Bar at Top of Each Page . 66 9.5 Information Scent . 67 9.6 Link Overload on PICS Pages at W3C . 70 iii 9.7 GIF Interlacing . 73 9.8 Progressive JPEG . 73 9.9 Using transparency for non-rectangular images . 74 9.10 Anti-aliasing a black line . 74 9.11 Antialiasing a red circle . 75 9.12 An antialiased circle against a different background . 75 10.1 Greeking Test, Template 1 . 78 10.2 Greeking Test, Template 2 . 78 10.3 Greeking Test, Template 3 . 79 10.4 Greeking Test, Template 4 . 79 10.5 Greeking Test, Template 5 . 80 10.6 Average Percentage of Correctly Identified Page Elements . 80 10.7 Preferred Page Templates . 81 11.1 The Virtual Vineyards Site . 84 11.2 The Virtual Vineyards Site, Table Borders Turned On . 85 11.3 Original Look of Keith’s Home Page . 87 11.4 Keith’s Redesigned Home Page . ..