UI design in practice

A talk I gave to students of the University of Auckland's business school.

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
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