MAKING YOUR GATEWAY EASY AND PLEASANT TO USE

Transcription

1 MAKING YOUR GATEWAY EASY AND PLEASANT TO USE AN INTRODUCTION TO USABILITY AND USER-CENTERED DESIGN Paul Parsons November 8, 2017 SGCI Webinar

2 Background PhD, Computer Science Specialty: Human-Computer Interaction (HCI) BS, Computer Science & Cognitive Science Paul Parsons Assistant Professor Purdue University, USA web.ics.purdue.edu/~parsonsp Teaching Previous ( ) HCI for computer science students Current User Experience (UX) for undergrad and grad

3 OBJECTIVES 1. value the importance of usability and user-centered design 2. be able to identify some common usability problems 3. appreciate various strategies for identifying and fixing common usability problems 4. be able to communicate with usability experts in an informed way

4 HISTORY Interface design was system-centric Users had to adapt to the technology Focus was on training users Design was concerned with: What can we build with such-and-such a platform? How efficient is the code? How can resources be optimized? U.S. Army Photo Most users don t care about these unless they impact usability and the user experience

5 SYSTEM-CENTERED DESIGN View of the user? A person who should adapt to your system

6 SYSTEM-CENTERED DESIGN View of the user? The user is just like me!

7 FOR USABLE SOFTWARE Need to shift the focus from system-centered design to user-centered design

8 USER-CENTERED DESIGN First Rule Know Thy Users! And you are not thy users Corollary: if you think you know thy users, think again!

9 Image courtesy of Nikki Roda USER-CENTERED DESIGN

10 Image courtesy of Nikki Roda USER-CENTERED DESIGN

11 Image courtesy of Nikki Roda USER-CENTERED DESIGN

12 Image courtesy of Nikki Roda USER-CENTERED DESIGN

13 Image courtesy of Nikki Roda USER-CENTERED DESIGN

14 USABILITY Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency: Once users have learned the design, how quickly can they perform tasks? Memorability: When users return to the design after a period of not using it, how easily can they re-establish proficiency? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design?

15 USABILITY Some reasons for poor usability not understanding users solving the wrong problem violating visual design principles violating interaction design principles

16 PRINCIPLES 80/20 rule affordances alignment chunking closure common fate consistency constraint control convergence errors feedback figure-ground Fitts law Hick s law interference layering mapping navigation progressive disclosure proximity recognition over recall similarity visual hierarchy

17 VISUAL HIERARCHY arrangement and styling of elements in a way that implies importance visual hierarchy influences the order in which the human eye perceives what it sees

18 VISUAL HIERARCHY 1. value the importance of usability and user-centered design 2. be able to identify common usability problems 3. appreciate various strategies for identifying and fixing common usability problems 4. be able to communicate with usability experts in an informed way

19 VISUAL HIERARCHY

20 VISUAL HIERARCHY

21 VISUAL HIERARCHY nodejs.org

22 VISUAL HIERARCHY nodejs.org

23 Image courtesy of Canva VISUAL HIERARCHY

24 GESTALT PERCEPTION we tend to order our experience in a manner that is regular, orderly, symmetrical, and simple proximity similarity closure symmetry continuity

25 SIMILARITY

26 SIMILARITY

27 SIMILARITY

28 PROXIMITY

29 PROXIMITY

30 PROXIMITY

31 PROXIMITY

32 NAVIGATION 1. Where am I? 2. Where have I been? 3. Where can I go?

33 NAVIGATION

34 NAVIGATION

35 NAVIGATION

36 METHODS a/b testing affinity diagramming bodystorming card sorting case studies cognitive walkthrough contextual inquiry cultural probes experience prototyping eye tracking focus groups heuristic evaluation interviews mental model diagramming participatory design personas questionnaires scenarios simulation storyboards surveys task analysis usability testing user journey mapping

37 METHODS EMPIRICAL with users example: usability testing ANALYTICAL no users example: heuristic evaluation

38 Image courtesy of Good Work Labs USABILITY TEST

39 USABILITY TEST

40 Image courtesy of WebHunt Infotech HEURISTIC EVALUATION

41 HEURISTIC EVALUATION

42 HEURISTIC EVALUATION

43 Image courtesy of kruthis HEURISTIC EVALUATION

44 Image courtesy of Nikki Roda USER-CENTERED DESIGN

45 USER RESEARCH UCD PROTOTYPING EVALUATION

46 Image courtesy of La Fabulerie USER RESEARCH

47 Image courtesy of NZ Dave USER RESEARCH

48 PROTOTYPING

49 Image courtesy of Parinishtha PROTOTYPING

50 Image courtesy of Rodolphe Courtier EVALUATION

51 Image courtesy of Good Work Labs EVALUATION

52 Image courtesy of K2_UX EVALUATION

53 Image courtesy of Simple Usability EVALUATION

54 OBJECTIVES 1. value the importance of usability and user-centered design 2. be able to identify some common usability problems 3. appreciate various strategies for identifying and fixing common usability problems 4. be able to communicate with usability experts in an informed way

55 Image courtesy of Everyday Interview Tips