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

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

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

Essentials of user interaction design
The Principles
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 4

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

Essentials of user interaction design
Consistency
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 6

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

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

Essentials of user interaction design
Excise
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 9

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

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

Essentials of user interaction design
UNDO
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 12

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

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

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

Essentials of user interaction design
Feedback
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 16

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

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

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

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

Essentials of user interaction design
Input & Validation
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 21

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

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

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

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

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

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

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

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

Essentials of user interaction design
Conclusion
© Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 30

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

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