Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Follow the Flow - Essentials of User Interaction Design

4,529 views

Published on

These slides are a brief introduction of the main principles of User Interaction Design. I use them as a starting point when training juniors. They are largely based on the Book "About Face" by Alan Cooper et al.

Published in: Design, Technology, Business

Follow the Flow - Essentials of User Interaction Design

  1. 1. Essentials of user interaction design Memi Beltrame Follow the Flow Essentials of User Interaction Design © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 1
  2. 2. Essentials of user interaction design User Interaction Design Shapes Behaviour Behaviour Interaction designers User Experience Form Content Graphic designers Information architects © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 2
  3. 3. Essentials of user interaction design Behaviour is the Key ! Make the software behave like a considerate being ! • Respond to the different types of users (and their behaviour) • Be rational, clear, friendly. © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 3
  4. 4. Essentials of user interaction design The Principles © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 4
  5. 5. Essentials of user interaction design These are the Rules • Strive for consistency. • Get rid of Excise • Offer informative feedback. • Avoid dialog: Offer UNDO for reversal of actions • IF you use dialog: Design it to yield closure. • Offer simple error handling. • Provide the sense of control. • Reduce short-term memory load. © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 5
  6. 6. Essentials of user interaction design Consistency © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 6
  7. 7. Essentials of user interaction design Strive for consistency Behaviour: task steps, feedback, action vs navigation Form: Content color, shapes, command names, tone typography, layout, icons © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 7
  8. 8. Essentials of user interaction design Consistency Rules • Consistency does not imply rigidity • Visually distinguish elements that behave differently. Visually group elements that behave in the same way © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 8
  9. 9. Essentials of user interaction design Excise © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 9
  10. 10. Essentials of user interaction design Eliminate excise Excise is • unnecessary work load, • visual elements that distract the user • complexity that confuses or overwhelms the user ! Get rid of excise, sofort ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 10
  11. 11. Essentials of user interaction design Excise rules • Don‘t stop the proceedings with idiocy • Don‘t clutter the interface • Don‘t force the user to resize or move windows • Allow input wherever there is output • Don‘t make the user ask permission • Reduce the number of places to go © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 11
  12. 12. Essentials of user interaction design UNDO © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 12
  13. 13. Essentials of user interaction design The Power of UNDO UNDO • is the rescuer of users in distress. • encourages exploration. • eliminates sensless confirmation-dialogs ! Don‘t ask, do and UNDO ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 13
  14. 14. Essentials of user interaction design UNDO on Websites On websites undos are typically • not chronological • single-level (not chained) Not all actions can be undone • Sending an e-mail / submitting a form • logging out © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 14
  15. 15. Essentials of user interaction design Undo and DELETE in Databases Include the UNDO-process in your DB scheme A) • provide a IS_DELETED flag • work with views on complex schemes B) • Copy INSERT statement(s) of deleted entry to a separate UNDO-Table © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 15
  16. 16. Essentials of user interaction design Feedback © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 16
  17. 17. Essentials of user interaction design Offer Informative Feedback Give feedback • that is helpful • that matters to the user • that is understandable by the user (that‘s probably NOT YOU) • without interrupting the user (no pop-ups that have to be confirmed) © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 17
  18. 18. Essentials of user interaction design Design Dialog to Yield Closure • Always give exit paths at any time, without doing no harm and losing no data. • Always end a dialogue by giving feedback on the ending of the process © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 18
  19. 19. Essentials of user interaction design Offer Simple Error Handling Remember Users get humiliated when software tells them they failed. Therefore: ! Prevent the users from making errors ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 19
  20. 20. Essentials of user interaction design Offer Simple Error Handling • Inform and clean up the mess. • Don‘t interrupt the user with error message boxes . THEY ARE USELESS! • Considerate software fails gracefully: - it stores entered data - it gives the possibility to resume the process. © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 20
  21. 21. Essentials of user interaction design Input & Validation © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 21
  22. 22. Essentials of user interaction design Forms of Input Bounded Unbounded Boolean: Free text Yes/no Finite Lists: Phonenumbers M/F days of week Chars: 0-9(+ Ranges: 0-255 © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 22
  23. 23. Essentials of user interaction design Types of Controls bounded • Radiobuttons, checkboxes, selects > booleans, shortlists • Dials, sliders > ranges • Textfields with livesearch-like behaviour > long finite lists • Textfields and textareas > Unbound data unbounded © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 23
  24. 24. Essentials of user interaction design Controls and Validation If users can make an Input they assume it is valid ! Use bounded controls for bounded input ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 24
  25. 25. Essentials of user interaction design Text Edit Controls and Validation • Inform the users what input they can make • before they enter • in the validation feedback ! Audit, don‘t edit ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 25
  26. 26. Essentials of user interaction design Active Validation Active : on entering • Use this for validation that can be done in the client. • Give visual feedback immediately after wrong input has happened © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 26
  27. 27. Essentials of user interaction design Passive Validation Passive : on blur • Use this for validation that can not be done in the client e.g. availability of a username © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 27
  28. 28. Essentials of user interaction design Provide the sense of control • Allow the use of either keyboard or mouse • Allow users to change focus • Accomodate users of different levels • Enable frequent users to use shortcuts • Allow users to customize the interface • Don‘t let users just sit there: inform them on the progress of the task. © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 28
  29. 29. Essentials of user interaction design Reduce Short Term Memory Load • Rely on recognition, not recall • Provide clues to: - where are the users? - what are they doing? • Focus on key information - hide less common features - allow users to navigate to them © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 29
  30. 30. Essentials of user interaction design Conclusion © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 30
  31. 31. Essentials of user interaction design This is your Goal • Consistency Users in control • Orientation of a rich • No Excise interface that • Rich feedback allows true • Entry control collaboration ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 31
  32. 32. Essentials of user interaction design References Cooper, Alan. 2007. About Face 3: The Essentials of Interaction Design. Indianapolis: Wiley Publishing. Mandel, Theo. 1997. The Elements of User Interface Design. Indianapolis: Wiley Publishing. My UI Bookmarks on delicious: http://delicious.com/plonk/ui © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 32

×