Avoiding UI Mistakes

KCDC 2013

Avoiding UI Mistakes

Introduction to User Experience Methods

1

Danielle Gobert Cooley @dgcooley

03 May 2013 #KCDC2013

KCDC 2013

2

03 May 2013 @dgcooley #KCDC2013

KCDC 2013

Danielle Gobert Cooley

3


[email protected]

@dgcooley

14 years as a UX Specialist BE, Biomedical and Electrical Engineering – Vanderbilt University MS, Human Factors in InformaMon Design – Bentley University

Selected Clients

hOp://linkedin.com/in/dgcooley

KCDC 2013

Good sites?

4


KCDC 2013 03 May 2013 @dgcooley #KCDC2013

5


6


7


8 hOp://www.theworldsworstwebsiteever.com/


9 hOp://metatech.org/


10 hOp://www.fgmarchitects.com/

KCDC 2013

The 10 Heuristics

11


KCDC 2013

Visibility of System Status

12


The system should always keep users informed about what is going on, through appropriate feedback within reasonable Mme.

Where am I?

How do I get Home?

Was my data saved?

How much longer will it

take?

How many steps are there?

Am I done?

Am I logged in?

KCDC 2013



13

How do I get Home?

KCDC 2013



14

How do I get Home?

KCDC 2013



15

How much longer will it

take?

KCDC 2013



16

How many steps are there?

KCDC 2013



17

Was my data saved?

Mailchimp.com, Kayak.com

KCDC 2013



18

Was my data saved?

hOp://swagbucks.com

KCDC 2013



19

Was my data saved?

HootSuite iPad app, April 2012

KCDC 2013



20

Am I logged in?

KCDC 2013



21

Where am I?

KCDC 2013



22

Where am I?

KCDC 2013

Match Between System and Real World

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-‐oriented terms. Follow real-‐world convenMons, making informaMon appear in a natural and logical order.


23

KCDC 2013

User Control and Freedom

Users oaen choose system funcMons by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.


24

KCDC 2013

Consistency and Standards

Users should not have to wonder whether different words, situaMons, or acMons mean the same thing. Follow plaform convenMons.


25

?

KCDC 2013



26

KCDC 2013



27

Recommenda)on: Both for consistency and intui5veness, use the tradi5onal calendar picker tool throughout the applica5on.

KCDC 2013



28

The three-‐way toggle, though not unique to this tool, is not an immediately-‐recognizable control.

Recommenda)on: Consider a more tradi5onal radio bu>on control:

Exists: ¤Yes ¢No ¢Either

KCDC 2013



29

KCDC 2013

Error PrevenMon

Even beOer than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-‐prone condiMons or check for them and present users with a confirmaMon opMon before they commit to the acMon.


30

KCDC 2013

Error PrevenMon


31

KCDC 2013

Error PrevenMon


32 hOp://www.lukew.com/ff/entry.asp?571

KCDC 2013

Error PrevenMon


33 Microsoa Word, Unknown version; Microsoa Word for Mac 2011, Version 14.3.1

KCDC 2013

RecogniMon > Recall

Minimize the user’s memory load by making objects, acMons, and opMons visible. The user should not have to remember informaMon from one part of the dialogue to another. InstrucMons for use of the system should be visible or easily retrievable whenever appropriate.


34 hOp://online.epocrates.com/noFrame/

KCDC 2013

RecogniMon > Recall


35 Microsoa PowerPoint for Mac 2011, Version 14.3.1

KCDC 2013

Flexibility and Efficiency of Use

Accelerators – unseen by the novice user – may oaen speed up the interacMon for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent acMons.


36

KCDC 2013



37 American Giant, ThinkGeek

KCDC 2013



38 Chrome’s right-‐click menu

KCDC 2013



39 Microsoa Word and PowerPoint for Mac 2011, Version 14.3.1

KCDC 2013



40 TwiOer’s iOS app, November 2011

KCDC 2013

AestheMc and Minimalist Design

Dialogues should not contain informaMon which is irrelevant or rarely needed. Every extra unit of informaMon in a dialogue competes with the relevant units of informaMon and diminishes their relaMve visibility.


41

KCDC 2013



42

KCDC 2013



43 Lane Furniture (2011)

KCDC 2013



44

KCDC 2013



45 hOp://lesscontentmorestrategy.com

KCDC 2013

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and construcMvely suggest a soluMon.


46

KCDC 2013



47

KCDC 2013



48

KCDC 2013



49 Chrome, version 26.0.141065 – May 2013

KCDC 2013



50

KCDC 2013



51

KCDC 2013



52 AmericanGiant.com

KCDC 2013

Help and DocumentaMon

Even though it is beOer if the system can be used without documentaMon, it may be necessary to provide help and documentaMon. Any such informaMon should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.


53

KCDC 2013



54

KCDC 2013



55 Microsoa PowerPoint for Mac 2011, Version 14.3.1

KCDC 2013

So, ask yourself: •  Am I keeping them informed about what’s going on? •  Will they understand this terminology? •  If I do X, will it take control away from my user? •  Am I being consistent with standards? With myself? •  How can I reduce the possibility that they will make this mistake? •  Am I asking them to remember something unnecessarily? If they get a

phone call in the middle of this, are they screwed? •  Am I accommodaMng both my novices and my experts? (How about

repeat novices? •  Is there too much crap in here? •  Have I given them the informaMon they need to recover from their

errors? •  Can they find the help they need? Quickly and easily? When and where

they need it?

56


KCDC 2013

References


57

Technology

Avoiding UI Mistakes