Avoiding UI Mistakes - D2WC

01 October 2013 @dgcooley #D2WC

1

Avoiding UI Mistakes

Introduction to User Experience MethodsDanielle Gobert Cooley

@dgcooley

01 October 2013 #D2W2013


2

Danielle Gobert Cooley

[email protected]

@dgcooley

14 years as a UX Specialist

BE, Biomedical and Electrical Engineering – Vanderbilt UniversityMS, Human Factors in Information Design – Bentley University

Selected Work

http://linkedin.com/in/dgcooley


3


4

Good sites?


5


6


7


8http://www.theworldsworstwebsiteever.com/


9http://metatech.org/


10http://www.fgmarchitects.com/


11

Mistake #1: Keeping Secrets


12

Tell the user what’s going on.The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

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?


13

How do I get Home?


14

How do I get Home?


15

How much longer will it

take?


16

How many steps are

there?


17

Was my data saved?

Mailchimp.com, Kayak.com


18

Was my data saved?

http://swagbucks.com


19

Was my data saved?

HootSuite iPad app, April 2012


20

Am I logged in?


21

Where am I?


22

Where am I?


23

Mistake #2: Poor Word Choice


24

Use words people will understand.

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


25

Use words people care about

http://www.nngroup.com/articles/user-centric-language/

Ortholite ® anatomical footbed

Keep feet comfortable with our Ortholite® washable foam

insole

Breathable mesh lining treated with Aegis®

Fight odor with our Aegis® antimicrobial-treated mesh

lining


26

Use words people can relate to

http://www.nngroup.com/articles/user-centric-language/

Customer must return item within 30 days for full refund.

We give you a 30-day, money-back guarantee on all of our products.


27

Mistake #3: Taking Over


28

User Control and Freedom

Users often choose system functions 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.


29

Mistake #4: Being Inconsistent


30

Consistency and Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

?


31


32

Recommendation: Both for consistency and intuitiveness, use the traditional calendar picker tool throughout the application.


33

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

Recommendation: Consider a more traditional radio button control:

Exists: Yes No Either


34

Consistency and Standards


35

Mistake #5: Making Mistakes Easy


36

Error Prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.


37


38http://www.lukew.com/ff/entry.asp?571


39Microsoft Word, Unknown version; Microsoft Word for Mac 2011, Version 14.3.1


40

Mistake #6: Relying on People’s Memories


41

Recognition > Recall

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

http://online.epocrates.com/noFrame/


42Microsoft PowerPoint for Mac 2011, Version 14.3.1


43

Mistake #7: Failing to Balance Ease & Speed


44

Flexibility and Efficiency of Use

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


45American Giant, ThinkGeek


46Chrome’s right-click menu


47Microsoft Word and PowerPoint for Mac 2011, Version 14.3.1


48Twitter’s iOS app, November 2011


49

Mistake #8: Too Much Stuff


50

Aesthetic and Minimalist Design

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


51


52

Aesthetic and Minimalist Design

Lane Furniture (2011)


53


54http://lesscontentmorestrategy.com


55

Mistake #9: Bad Error Messages


56

Help users recognize, diagnose, and recover from errors

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


57


58


59Chrome, version 26.0.141065 – May 2013


60


61


62AmericanGiant.com


63

Mistake #10: No or Bad Help


64

Help and Documentation

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


65


66

Help and Documentation

Microsoft PowerPoint for Mac 2011, Version 14.3.1


67

Bonus Mistake: Being Evil


68

Dark Patterns

darkpatterns.org

A Dark Pattern is a type of user interface that appears to have been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills.


69

Road Block


70

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 accommodating both my novices and my experts? (How about repeat

novices?)• Is there too much crap in here?• Have I given them the information they need to recover from their errors?• Can they find the help they need? Quickly and easily? When and where they need

it?

• Are we being evil?


71

10 Heuristics for User Interface Design


72

References


73

More from me?

Code: DCSPECIAL

12 December: How to Design Intuitive and Usable Products Through User Research

06 March: Don’t Guess: Test! The Why, What, and How of User Testing


74

Avoiding UI Mistakes - D2WC

Education

Transcript of Avoiding UI Mistakes - D2WC