Follow the Flow - Essentials of User Interaction Design

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


User Interaction Design Shapes Behaviour

Behaviour
Interaction designers

User
Experience

Form Content
Graphic designers Information architects



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.



The Principles



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.


Consistency



Strive for consistency
Behaviour:
task steps, feedback, action vs navigation

Form: Content
color, shapes, command names, tone
typography, layout,
icons



Consistency Rules
• Consistency does not imply rigidity

• Visually distinguish elements that behave
differently.
Visually group elements that behave in the
same way



Excise



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 !


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



UNDO



The Power of UNDO
UNDO
• is the rescuer of users in distress.
• encourages exploration.
• eliminates sensless conﬁrmation-dialogs

! Don‘t ask, do and UNDO !


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


Undo and DELETE in Databases
Include the UNDO-process in your DB scheme
A)
• provide a IS_DELETED ﬂag
• work with views on complex schemes

B)
• Copy INSERT statement(s) of deleted entry to a
separate UNDO-Table


Feedback



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 conﬁrmed)



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



Offer Simple Error Handling
Remember
Users get humiliated
when software tells
them they failed.

Therefore:
! Prevent the users from making errors !


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.



Input & Validation



Forms of Input

Bounded Unbounded
Boolean: Free text
Yes/no Finite Lists: Phonenumbers
M/F days of week Chars: 0-9(+
Ranges:
0-255



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



Controls and Validation

If users can make an Input
they assume it is valid

! Use bounded controls for bounded input !



Text Edit Controls and Validation

• Inform the users what input they can make
• before they enter
• in the validation feedback

! Audit, don‘t edit !



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



Passive Validation
Passive : on blur

• Use this for validation that can not be done
in the client
e.g. availability of a username



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.



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



Conclusion



This is your Goal

• Consistency Users in control
• Orientation of a rich
• No Excise interface that
• Rich feedback allows true
• Entry control collaboration !


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


Follow the Flow - Essentials of User Interaction Design

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Follow the Flow - Essentials of User Interaction Design

Similar to Follow the Flow - Essentials of User Interaction Design (20)

More from Memi Beltrame

More from Memi Beltrame (12)

Recently uploaded

Recently uploaded (20)

Follow the Flow - Essentials of User Interaction Design