follow the flow - essentials of user interaction design
DESCRIPTION
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.TRANSCRIPT
![Page 1: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/1.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 1
Memi Beltrame
Follow the FlowEssentials of User Interaction Design
![Page 2: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/2.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 2
User Interaction Design Shapes Behaviour
BehaviourInteraction designers
Form Content
User Experience
Information architectsGraphic designers
![Page 3: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/3.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 3
Behaviour is the Key
• Respond to the different types of users (and their behaviour)
• Be rational, clear, friendly.
Make the software behavelike a considerate being !!
![Page 4: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/4.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 4
The Principles
![Page 5: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/5.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 5
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.
![Page 6: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/6.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 6
Consistency
![Page 7: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/7.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 7
Strive for consistency
Contentcommand names, tone
Behaviour:task steps, feedback, action vs navigation
Form:color, shapes,typography, layout,icons
![Page 8: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/8.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 8
Consistency Rules
• Consistency does not imply rigidity
• Visually distinguish elements that behave differently. Visually group elements that behave in the same way
![Page 9: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/9.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 9
Excise
![Page 10: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/10.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 10
Eliminate excise
Get rid of excise, sofort !!
Excise is• unnecessary work load,• visual elements that distract the user• complexity that confuses or overwhelms the user
![Page 11: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/11.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 11
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
![Page 12: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/12.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 12
UNDO
![Page 13: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/13.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 13
The Power of UNDO
UNDO• is the rescuer of users in distress.• encourages exploration.• eliminates sensless confirmation-dialogs
Don‘t ask, do and UNDO !!
![Page 14: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/14.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 14
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
![Page 15: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/15.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 15
Undo and DELETE in Databases
Include the UNDO-process in your DB schemeA)• provide a IS_DELETED flag• work with views on complex schemes
B)• Copy INSERT statement(s) of deleted entry to a separate UNDO-Table
![Page 16: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/16.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 16
Feedback
![Page 17: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/17.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 17
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)
![Page 18: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/18.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 18
Design Dialog to Yield Closure
• Always give exit paths at any time,without doing no harmand losing no data.
• Always end a dialogue by giving feedback onthe ending of the process
![Page 19: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/19.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 19
Offer Simple Error Handling
RememberUsers get humiliatedwhen software tellsthem they failed.
Therefore: Prevent the users from making errors! !
![Page 20: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/20.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 20
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.
![Page 21: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/21.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 21
Input & Validation
![Page 22: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/22.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 22
Forms of Input
Bounded Unbounded
Boolean:Yes/noM/F
Free textPhonenumbersChars: 0-9(+
Finite Lists:days of week
Ranges:0-255
![Page 23: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/23.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 23
Types of Controls
• Radiobuttons, checkboxes, selects> booleans, shortlists
• Dials, sliders> ranges
• Textfields with livesearch-like behaviour> long finite lists
• Textfields and textareas> Unbound data
bounded
unbounded
![Page 24: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/24.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 24
Controls and Validation
! Use bounded controls for bounded input !
If users can make an Input they assume it is valid
![Page 25: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/25.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 25
Text Edit Controls and Validation
• Inform the users what input they can make• before they enter• in the validation feedback
! Audit, don‘t edit !
![Page 26: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/26.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 26
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
![Page 27: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/27.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 27
Passive Validation
Passive : on blur
• Use this for validation that can not be done in the client
e.g. availability of a username
![Page 28: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/28.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 28
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.
![Page 29: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/29.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 29
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
![Page 30: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/30.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 30
Conclusion
![Page 31: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/31.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 31
This is your Goal
• Consistency• Orientation• No Excise• Rich feedback• Entry control !
Users in controlof a richinterface thatallows truecollaboration
![Page 32: Follow the Flow - Essentials of User Interaction Design](https://reader034.vdocuments.mx/reader034/viewer/2022051613/54c76e3b4a7959b6248b457c/html5/thumbnails/32.jpg)
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 32
References
Cooper, Alan. 2007. About Face 3: The Essentials ofInteraction Design. Indianapolis: Wiley Publishing.
Mandel, Theo. 1997. The Elements of User InterfaceDesign. Indianapolis: Wiley Publishing.
My UI Bookmarks on delicious:http://delicious.com/plonk/ui