Follow the Flow - Essentials of User Interaction Design

Essentials of user interaction design

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

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

Follow the Flow - Essentials of User Interaction Design

Design

Interaction and Interdependency between Actors to Follow

Securities Industry Essentials (SIE)91acf2223c449e9aca09-573931475ab0c8bec3ec5b55f4da0a6c.r12.cf1.rackcdn.…Our Class Notes book allows you to follow the content presented during

Essentials of MIS, 9efac.ksu.edu.sa/sites/default/files/laudon_ess9_GE_LN_ch05.doc · Web viewWord files, emails, ... Web usage mining: user interaction data recorded by Web servers

METRO ESSENTIALS PACKAGE SMART ESSENTIALS PACKAGE

RESUME ESSENTIALS (MBA CLASS OF 2018)questromworld.bu.edu/.../BU-MSMS-Resume-Essentials...resume essentials (mba class of 2018) resume essentials. resume format. cover letter essentials

Air-Sea Interaction Chapter 1 Clickers Essentials of Oceanography Eleventh Edition Alan P. Trujillo Harold V. Thurman © 2014 Pearson Education, Inc. Chapter

Child-Directed Interaction Session Four. Eight Guiding Principles for Good Interaction Show love Talk to your child Follow your child’s lead Praise and

NonStopNonStopCluster Essentials Cluster Essentials

Chapter 9: Performance Leadership Performance Standards Essentials of Performance Evaluation Making the Evaluation The Appraisal Interview Follow-Up Legal

NUTRITION ESSENTIALS - fitprorecipesfitprorecipes.co.uk/.../2017/02/Fit-Body-Bootcamp-Nutrition-Essentials.pdf · nutritionist. Should you follow any of the information provided,

Essentials of Treasury Management Essentials of

Interaction Design - Medieninformatik · • Compared to other approaches systems design provides a clear roadmap for designers to follow ... Interaction Design – SS2013 56 Unexpected

Frameworks to Follow (Public Speaking Essentials)

Essentials book exam essentials-fce

Interaction Edge Installation and Configuration Guide · Interaction Edge Installation and Configuration Guide . 5 . Safety Instructions . Follow these safety instructions when working

Essentials of Oceanography, Thurman and Trujillo Chapter VI: Air-Sea Interaction

Data Science and Machine Learning Essentials · · 2015-10-19Data Science and Machine Learning Essentials Lab 4C ... To set up the required environment for the lab, follow the instructions

A simple interaction law for viscous–inviscid interaction · matical way. Subsequently, the interaction law will be simpliﬁed such that only its bare essentials remain. We end

Ambient Intelligence in Edutainment: Tangible Interaction ...michaelkipp.de/publication/Ndiayeetal2005.pdf · the feeling that the anthropomorphic characters observe, follow and understand

SOUL WINNING - saltlakebiblecollege.org S/SoulwinningTeacherBookOnline.pdf · A follow-up course for “ESSENTIALS OF SUCCESSFUL SOUL-WINNING” by Dr. James Wilkins SOUL WINNING