Follow the Flow - Essentials of User Interaction Design

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



User Interaction Design Shapes Behaviour

BehaviourInteraction designers

Form Content

User Experience

Information architectsGraphic designers



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 !!



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

Contentcommand names, tone

Behaviour:task steps, feedback, action vs navigation

Form:color, shapes,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

Get rid of excise, sofort !!

Excise is• unnecessary work load,• visual elements that distract the user• complexity that confuses or overwhelms the user



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 confirmation-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 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



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 confirmed)



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



Offer Simple Error Handling

RememberUsers get humiliatedwhen software tellsthem 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:Yes/noM/F

Free textPhonenumbersChars: 0-9(+

Finite Lists:days of week

Ranges:0-255



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



Controls and Validation

! Use bounded controls for bounded input !

If users can make an Input they assume it is valid



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• Orientation• No Excise• Rich feedback• Entry control !

Users in controlof a richinterface thatallows truecollaboration



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