COMP 3020: Human-Computer Interaction I Fall 2017

Transcription

1 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

2 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

3 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

4 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

5 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

6 snapshot from my thesis

7 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

8 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

9 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

10 Impact of Good Visual Design Find the price of a single room at the De Soto hotel in Bradley Comp

11 Impact of Good Visual Design Find the price of a double room at the Sheraton Inn in Charleston Comp

12 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

13 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

14 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

15 navigation how do people move around and between features / components of an interface? Comp

16 goal seeking people have to navigate from a system state toward their goal goal start Comp

17 goal seeking goal start usually when exploring, at each point in the interaction, a user progresses with local knowledge only Comp

18 goal seeking goal start but can (hopefully) get to (navigate to) the goal Comp

19 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

20 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

21 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

22 where you are - websites important to have clear identification since users can enter from anywhere Comp

23 where you are

24 where you are - breadcrumbs Comp

25 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

26 breadcrumb abuse: hierarchy is not clear, pages belong to many groups used when unnecessary can be cluttering or confusing

27 where you are going use meaningful link / button descriptions e.g., avoid click here to do X, instead have X Comp

28 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

29 where you are going

30 where you are going Make commands obvious what will they do?

31 how do I search for something in my source file?

32

33

34 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

35 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

36 where have you been good on the web! e.g., colouring previously visited links, history lists, back button Comp

37 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

38 navigation hierarchy Explicitly plan out the navigation hierarchy for your system Comp

39 navigation hierarchy The system Info and Help Management Message Add User Remove User why is making this useful? Comp

40 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

41 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 optimal? many items on each screen (logically related) leads to fewer screens but well structured within screen Comp

42 bigger problems navigating between applications and websites style issues platform standards, consistency functional issues cut and paste (thankfully now mostly central) Comp

43 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