View
112
Download
3
Category
Tags:
Preview:
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.
Citation preview
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
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
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 !!
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 4
The Principles
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.
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 6
Consistency
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
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
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 9
Excise
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
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
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 12
UNDO
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 !!
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
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
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 16
Feedback
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)
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
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! !
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.
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 21
Input & Validation
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
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
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
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 !
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
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
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.
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
Essentials of user interaction design
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 30
Conclusion
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
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
Recommended