User interface design in practice - University of Auckland Business School

User interface design in practice - University of Auckland Business School

A talk I gave to the students of the University of Auckland's Business School.

D1ff88a16a287b41f0570da424460401?s=128

Justine Sanderson

May 03, 2007
Tweet

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