UI design in practice

Transcript

1. Usability in Practice User Interface Design in Practice Justine Sanderson|

   Userfaction Ltd | 3 May 2007 © 2007 Justine Sanderson

2. Today 1.  You are not the user 2.  Design for

   the user model 3.  Involve users – not just stakeholders 4.  Prototype 5.  Learn about good design principles 6.  Know your Usability Heuristics 7.  Read some books 8.  Remember these axioms

3. You are not the user

4. architect cleaner waitress policeman teacher gardener farmer midwife receptionist musician

   builder marine biologist nurse florist photographer sales assistant nanny plumber sharetrader banana ripener accountant journalist coach politician student machine operator truck driver manager secretary

5. Hang out with people hang out with people who don`t

   use a computer 8 hours a day
6. None
7. None
8. None

9. Design for the user model

10. System Model

11. User’s Mental Model The internet is a series of tubes

12. Involve Users

13. Create Personas •  Archetypal representation of your target audience • 

    Based on user research (ideally) •  Aggregation of your users` goals, attitudes, and behaviours •  Presented as a vivid, narrative description of a single lpersonz who represents a user segment

14. Create Personas

15. Prototype

16. Test Early & Often

17. The cost of changes

18. Prototyping Redux

19. Never be satisfied with the first idea Most developers tend

    to adopt a "satisficing" strategy that focuses on initial, satisfactory, but less than optimal, solutions. Never be satisfied with a single opinion or the first idea. It is Ball, L.J., Evans, J.B.T. And Dennis, I. (1994), Cognitive processes in engineering design: A longitudinal study, Ergonomics, 37(11), 1753-1786. best to "saturate the design space" with ideas before making decisions and to consider alternatives (i.e., better design solutions, throughout the design process).

20. Screen Description Diagram

21. 1. bBits` for an account page http://37signals.com/papers/introtopatterns/ 1.  Company info

    2.  Insurance info for company 3.  My (current user) info 4.  Other users on this account 5.  My sales rep contact info 6.  Current account plan 7.  Link to change search preferences 8.  Date account was created 9.  People rarely view or change insurance info 10. Any user can edit anything except other users' info 11. Changing password is the most likely action 12. People might come here to change search preferences (which are on a separate page)

22. 1. Company info 2. Insurance info for company 4. Other

    users on this account 5. My sales rep contact info 6. Current account plan 9. People rarely view or change insurance info 10. Any user can edit anything except other users' info 10. Any user can edit anything except other users' info 10. Any user can edit anything except other users' info 10. Any user can edit anything except other users' info 3. My (current user) info 11. Changing password is the most likely action 10. Any user can edit anything except other users' info A B C D E F 2. Group related bits together

23. 1. Company info 10. Any user can edit anything except

    other users' info A 3. My (current user) info 11. Changing password is the most likely action 10. Any user can edit anything except other users' info C 5. My sales rep contact info E 8. Date account was created G Most important: 2. Insurance info for company 9. People rarely view or change insurance info 10. Any user can edit anything except other users' info B 4. Other users on this account 10. Any user can edit anything except other users' info D 6. Current account plan 10. Any user can edit anything except other users' info F Necessary: 7. Link to change search preferences 12. People might come here to change search preferences (which are on a separate page) H Nice to have: 3. Prioritize

24. A C E G B 4. Design each bit individually

25. 5. Put the chunks together

26. 6. Build in software of choice

27. Create Scenarios/Storyboards

28. Prototype with Powerpoint Footer e-asTTle Welcome, username Log Out Sign-In

    Password: Forgot Password? Username: ex.myname@myschool.co.nz Remember me on this computer Please sign in to your e-asTTle account: e-asTTle logo 8-Feb- 2006: e-asTTle will be unavailable on Saturday 8th February due to maintenance. 6-Feb-2006: New resources have been added to What’s Next News Sign-In Login

29. Learn about design principles

30. 8. Aesthetics & Minimalist Design

31. 8. Aesthetics & Minimalist Design

32. http://dev.uxmatters.com/MT/archives/000015.php 8. Aesthetics & Minimalist Design

33. 8. Aesthetics & Minimalist Design

34. Patterns

35. Doing Heuristics Evaluations

36. Jacob Nielsen’s Heuristics 1.  Visibility of system status 2.  Match

    between system and the real world 3.  User control and freedom 4.  Consistency and standards 5.  Error prevention 6.  Recognition rather than recall 7.  Flexibility and efficiency of use 8.  Aesthetic and minimalist design 9.  Help users recognize, diagnose, and recover from errors 10.  Help and documentation

37. Match between the system and the real world

38. 2. Match the system and real world

39. 2. Match the system and the real world

40. Be Consistent

41. 2. Match the system and the real world

42. Prevent Errors

43. 5. Error Prevention

44. Encourage recognition rather than recall

45. 6. Recognition rather than recall

46. Provide Help

47. 10. Help & Documentation

48. Other Guidelines •  Bruce Tognazzini’s First Principles of Interaction Design

    http://www.asktog.com/basics/firstPrinciples.html •  A good introductory summary from a fellow student http://www.charlieguo.com/web_design_readings.php

49. Recommended Books

50. Donald Norman

51. Steve Krug

52. Alan Cooper

53. Alan Cooper

54. Jenifer Tidwell

55. Axioms •  Interaction Design is not guesswork •  Imagine users

    as very intelligent but very busy •  No matter how cool your interface is, less would be better •  Software should behave like a considerate human