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.

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