COMP 3020: Human-Computer Interaction I Fall 2017 Layout James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Pourang Irani, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry
alignment - controls align controls, more important than labels make it easier to use, navigate, find, etc., controls Name: Mailing Address: Occupation: Name: Mailing Address: Occupation: Name: Mailing Address: Occupation: Comp 3020 2
Multiple Columns Scanning across gaps is hard: Revolutionary Road 145 Blood Diamond 101 The Departed 122 Catch Me If You Can 110 What s Eating Gilbert Grape 98 Comp 3020 3
multiple columns use leaders Revolutionary Road 145 Blood Diamond 101 The Departed 122 Catch Me If You Can 110 What s Eating Gilbert Grape 98 what is a limitation with this? Comp 3020 4
multiple columns how is this used? index topics -> page do we index page number to topic? no Revolutionary Road, 145 Blood Diamond, 101 The Departed, 122 Catch Me If You Can, 110 What s Eating Gilbert Grape, 98 what is a limitation with this? Comp 3020 5
snapshot from my thesis
Multiple Columns Delineate using colour Revolutionary Road 145 Blood Diamond 101 The Departed 122 Catch Me If You Can 110 What s Eating Gilbert Grape 98 Comp 3020 7
Grids Grids (typically invisible) for laying out structure horizontal and vertical lines to align and group related components can serve as template to be re-used Comp 3020 8
grids Standard Icon Set Message Text Verdana, 14 pt. Left aligned? Do you really want to delete the file myfile.doc from the folder junk? cancel confirm Cancel Delete Do you really want to delete the file myfile.doc from the folder junk? Apply! Cannot move the file myfile.doc to the folder junk because the disc is full. Cancel OK Comp 3020 9
Impact of Good Visual Design Find the price of a single room at the De Soto hotel in Bradley Comp 3020 10
Impact of Good Visual Design Find the price of a double room at the Sheraton Inn in Charleston Comp 3020 11
Impact of Visual Design It takes much longer to find information on the 1st screen even though both contain the same quantity of information Tullis (1987) studied user performance, finding that it took users: 5.5 seconds to search with the 1st screen 3.2 seconds to search with the 2nd screen What if a user had to access info in this manner 2 times per day? Difference of ~28 hours in 1 year Comp 3020 12
Layout: Recap Gestalt principles leverage properties of perception to create structure Consider content and intended meaning when making grouping and alignment decisions Create hierarchies to facilitate scanning Grids help organize screens and promote consistency Comp 3020 13
COMP 3020: Human-Computer Interaction I Fall 2017 design: navigation James Young, with acknowledgements to Anthony Tang, Andrea Bunt, Pourang Irani, Julie Kientz, Saul Greenberg, Ehud Sharlin, Jake Wobbrock, Dave Hendry, Andy Ko, Jennifer Turns, & Mark Zachry
navigation how do people move around and between features / components of an interface? Comp 3020 15
goal seeking people have to navigate from a system state toward their goal goal start Comp 3020 16
goal seeking goal start usually when exploring, at each point in the interaction, a user progresses with local knowledge only Comp 3020 17
goal seeking goal start but can (hopefully) get to (navigate to) the goal Comp 3020 18
goal seeking goal start initially, many conscious decisions! (high attention! concious cognition!) later: unconscious cognition even initially, what role does unconscious cognition play? past knowledge users will draw on it! Comp 3020 19
goal seeking goal start users are not going to progress in a straight line (will not take the optimum path) designers should try to avoid, minimize chances of big detours Comp 3020 20
three rules of navigation knowing where you are knowing where you are going or what will happen knowing where you ve been or what you ve done these generally have to be part of conscious cognition Interfaces should support these to minimize cognitive load!! Comp 3020 21
where you are - websites important to have clear identification since users can enter from anywhere Comp 3020 22
where you are
where you are - breadcrumbs Comp 3020 24
breadcrumbs.. use when program has a strong hierarchical design with a lot of pages (e.g., encyclopedia) web: use when a user may land on a deep page from an external link, brings them up to speed does not replace main navigation, but adds more detail as a secondary support
breadcrumb abuse: hierarchy is not clear, pages belong to many groups used when unnecessary can be cluttering or confusing
where you are going use meaningful link / button descriptions e.g., avoid click here to do X, instead have X Comp 3020 27
Where you are going navigation panels should be at the top and/or the left (north America!!) visible even with small devices support left to right reading order hierarchy of page is up front and center! don t rely on search boxes users aren t great at formulating queries and give up navigation structures should not dominate content Comp 3020 28
where you are going
where you are going Make commands obvious what will they do?
how do I search for something in my source file?
where you are going - dialogs be VERY clear on options use simple, user-centered language IN the dialog use action verbs in buttons instead of OK CANCEL or YES NO
Some of these interfaces were posted on Interface Hall of Shame Confusing dialog boxes what to press???? What happens if I press yes? What happens when you cancel a cancelled operation? Uhhh I give up on this one
where have you been good on the web! e.g., colouring previously visited links, history lists, back button Comp 3020 36
where have you been with deep trees can provide a history include a way back to a place that acts as a vantage point i.e. from where users can reorient themselves if lost home button Comp 3020 37
navigation hierarchy Explicitly plan out the navigation hierarchy for your system Comp 3020 38
navigation hierarchy The system Info and Help Management Message Add User Remove User why is making this useful? Comp 3020 39
navigation hierarchy is this hierarchy visible to the users?? will assist with the 3 goals suggested earlier typically functional separation but also: by roles by user types by modules in an educational system Comp 3020 40
navigating hierarchies deep is difficult! users lose track of where there are / limited conscious cognition There is evidence that if it takes any more than 4-5 clicks, users will give up implication: aim for a flat application http://cs.umanitoba.ca optimal? many items on each screen (logically related) leads to fewer screens but well structured within screen Comp 3020 41
bigger problems navigating between applications and websites style issues platform standards, consistency functional issues cut and paste (thankfully now mostly central) Comp 3020 42
today s messages: navigation In hierarchical systems, provide navigational cues where the user is where the user has been where the user is going interface must support navigation: good groupings good labels / buttons make hierarchy visible (good menus, breadcrumbs, etc.) support history to help user understand what they have tried Comp 3020 43