Avoiding UI MIstakes - Code PaLOUsa 2014

Avoiding UI Mistakes

Introduction to User Experience Methods

1

Danielle Gobert Cooley @dgcooley

26 February 2014 #CPL14

Danielle Gobert Cooley

2

26 February 2014 @dgcooley #CPL14

[email protected]

@dgcooley

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

Selected Work

hQp://linkedin.com/in/dgcooley

Good sites?

3



4


5


6


7 hQp://www.theworldsworstwebsiteever.com/


8 hQp://metatech.org/


9 hQp://www.fgmarchitects.com/

Mistake #1: Keeping Secrets

10


Tell the user what’s going on.

11


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

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?


12

How do I get Home?


13

How do I get Home?


14

How much longer will it

take?


15

How many steps are there?


16

Was my data saved?

Mailchimp.com, Kayak.com


17

Was my data saved?

hQp://swagbucks.com


18

Was my data saved?

HootSuite iPad app, April 2012


19

Am I logged in?


20

Where am I?


21

Where am I?

Mistake #2: Poor Word Choice

22


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 convenOons, making informaOon appear in a natural and logical order.


23

Use words people care about


24

hQp://www.nngroup.com/arOcles/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® anOmicrobial-‐treated mesh

lining

Use words people can relate to


25

hQp://www.nngroup.com/arOcles/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.

Mistake #3: Taking Over

26


User Control and Freedom

Users ocen choose system funcOons 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.


27

User Control and Freedom <script language="JavaScript1.2"> <!-‐-‐ top.window.moveTo(0,0); if (document.all) { top.window.resizeTo(screen.availWidth,screen.availHeight); } else if (document.layers||document.getElementById) { if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){ top.window.outerHeight = screen.availHeight; top.window.outerWidth = screen.availWidth; } } //-‐-‐> </script>


28

Mistake #4: Being Inconsistent

29


Consistency and Standards

Users should not have to wonder whether different words, situaOons, or acOons mean the same thing. Follow plauorm convenOons.


30

?


31


32

Recommenda)on: Both for consistency and intui6veness, use the tradi6onal calendar picker tool throughout the applica6on.


33

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

Recommenda)on: Consider a more tradi6onal radio bu?on control:

Exists: ¤Yes ¢No ¢Either

Consistency and Standards


34

Mistake #5: Making Mistakes Easy

35


Error PrevenOon

Even beQer than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-‐prone condiOons or check for them and present users with a confirmaOon opOon before they commit to the acOon.


36


37


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


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

Mistake #6: Relying on People’s Memories

40


RecogniOon > Recall

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


41 hQp://online.epocrates.com/noFrame/


42 Microsoc PowerPoint for Mac 2011, Version 14.3.1

Mistake #7: Failing to Balance Ease & Speed

43


Flexibility and Efficiency of Use

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


44


45 American Giant, ThinkGeek


46 Chrome’s right-‐click menu


47 Microsoc Word and PowerPoint for Mac 2011, Version 14.3.1


48 TwiQer’s iOS app, November 2011

Mistake #8: Too Much Stuff

49


AestheOc and Minimalist Design

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


50


51

AestheOc and Minimalist Design


52 Lane Furniture (2011)


53


54 hQp://lesscontentmorestrategy.com

Mistake #9: Bad Error Messages

55


Help users recognize, diagnose, and recover from errors

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


56


57


58


59 Chrome, version 26.0.141065 – May 2013


60


61


62 AmericanGiant.com

Mistake #10: No or Bad Help

63


Help and DocumentaOon

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


64


65

Help and DocumentaOon


66 Microsoc PowerPoint for Mac 2011, Version 14.3.1

Bonus Mistake: Being Evil

67


Dark PaQerns


68 darkpaQerns.org

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

Road Block


69

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

novices?) •  Is there too much crap in here? •  Have I given them the informaOon 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?

70


10 HeurisOcs for User Interface Design


71

References


72

More from me?


73

Education

Avoiding UI MIstakes - Code PaLOUsa 2014