Follow the Flow - Essentials of User Interaction Design
14 likes2,715 views
The document outlines key principles of user interaction design, emphasizing the importance of user behavior and experience. It highlights essential practices such as ensuring consistency, eliminating unnecessary complexity, providing informative feedback, and allowing easy error handling. The ultimate goal is to create an intuitive interface that empowers users and facilitates collaboration.
Follow the Flow - Essentials of User Interaction Design
- 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. 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. 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. Essentials of user interaction design The Principles © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 4
- 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. Essentials of user interaction design Consistency © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 6
- 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. 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. Essentials of user interaction design Excise © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 9
- 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. 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. Essentials of user interaction design UNDO © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 12
- 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. 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. 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. Essentials of user interaction design Feedback © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 16
- 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. 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. 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. 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. Essentials of user interaction design Input & Validation © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 21
- 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. 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. 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. 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. 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. 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. 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. 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. Essentials of user interaction design Conclusion © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 30
- 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. 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