tampa ux meetup - october 2014 - slides

SCARY UIAHH!!!

NO!!!

KEEP AWAY!!!

TALES FROM THE WORLD OF UX

WHAAAAAAAAT?!

2

ALL THE FEATURES AND SETTINGS!!

3

CLICK WHAT TO WHAT NOW?

4

If your buttons need instructions, relabel your buttons. (even if it means custom code)

FOR THIS FIRST USER TEST…DON’T CRASH THE PLANE.

5

HOW MANY BUTTONS DOES YOUR TOILET HAVE?

6

AH, THE CLASSIC DOOR HANDLE EXAMPLE

7

AFFORDANCE, PEOPLE! HANDLES ARE FOR PULLING, FLAT PANELS ARE FOR PUSHING!

8

Not perfect, decent

COMPARISON TABLE – NOT SO GOOD

9

• Too much text. • No clear column

headers• Contrast between

alt row bg color and copy not high enough.

• Full borders add clutter

• Overall: blah

http://www.regions.com/personal_banking/savings_cds.rf

COMPARISON TABLE – MUCH BETTER

10

• Clear column headers

• Clear y axis labels• High contrast on

all rows between copy and bg color

• Clearly delineated sections

• Easy to scan

http://www.firehost.com/compare

LOOKS GOOD, BUT IMAGERY TOO BIG!

11

• Clearly designed for large monitors

• The main task users have is to search for flights, and that form is hidden.

http://www.southwest.com

“PARALLAX” (NOT THE GREEN LANTERN VILLAIN)

12

• Numbered navigation?• CTA to ‘Scroll down’

instead of “next” or “continue” ?

• Navigation is clickable and has flyouts?

• How do you visually know there is more content? Section padding is HUGE

• Scroll Down CTAs jump around so you have to keep moving your mouse left and right. Keep them centered

Visually okay, but…

https://www.verizon.com/foryourhome/myaccount/ngen/upr/splash/myvzlearn.aspx

BETTER PARALLAX

13

• Clear that there is more content down below

• ‘more content’ CTA (v) is centered and pointing to more content

• More true parallax since background imagery scrolls at different speeds

https://www.spotify.com/us/

GREAT PARALLAX

14

• Clear that there is more content down below

• ‘more content’ CTA _v_ is centered and pointing to more content

• More true parallax since background imagery scrolls at different speeds

• Navigation/progress indicator on side shows you where you are and lets you click to jump navigate

http://discover.store.sony.com/be-moved/

SCARY PARALLAX! (THE GREEN LANTERN VILLAIN)

15

NICE DESIGN (HAD TO SHOW APPLE. NOT PARALLAX PER SE)

16http://www.apple.com/iphone-6/

CAROUSELS. GREAT RIGHT?!

17http://shouldiuseacarousel.com/

HOVER NAV. CONTROL YOUR FLYOUTS!

18http://www.carmax.com/

• onMouseover = BAD. Instant and annoying

HOVER NAV. MORE CONTROL OVER YOUR FLYOUTS

19http://www.ally.com/

• onHoverIntent! Quick mouseover does not trigger the flyout. Only show flyouts if user actually intends to stop their mouse and wait for a navigation dropdown. NOT annoying!

http://cherne.net/brian/resources/jquery.hoverIntent.html

HUMOR BREAK!

20

FITTS’S LAW

21http://www.flvs.net/Pages/default.aspx

• Click ‘login’. What happened? New page? Where is login?

Fitts's law (often cited as Fitts' law) is a model of human movement …that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. --http://en.wikipedia.org/wiki/Fitts's_law

So, put things closer together if they’re related!

PUT THE DESIRED THING NEAR WHERE USER HAS TO CLICK/TAP

22

LONG FORMS…{YAWN}…ABANDON

23

• 1 long form. • No indication of length.

No indication of progress as you fill it out (other than scrollbar size)

http://www.rkk.com/long-application-form/application/long

FORMS DONE RIGHT WITH CHUNKING, ORGANIZATION, PROGRESS INDICATOR, PROGRESSIVE DISCLOSURE

24

• Progress indicator• You know generally how long (how many

steps there are)• Sections are chunked appropriately

SCHOOL WEBSITES ARE NOTORIOUSLY BAD (NO FUNDING)

25

SCHOOL WEBSITES ARE NOTORIOUSLY BAD (NO FUNDING)

26

• Taxonomy is poor: “whats a program?” OH, my kid’s classes. why not call it classes or at

least ‘subjects’

• Underlining is not enough to denote ‘clickability’, make the hyperlinks blue

• What are those icons? AA? That’s not universal. “ICONS ARE AMBIGUOUS”

• Why is “select teachers to email” label above the “not graded” column?

• Column headers would help: “Class | Status | Teacher” or “Class | Teacher | Status”

• Too many boxes!

DON’T DESTROY YOUR LAYOUT!

27

DON’T DESTROY YOUR LAYOUT!

28

• The pattern for emailing teachers is SO poor here. The form shows up in the content and

smashes the list view left ,making it illegible.

• When you click checkboxes next to email addresses, there is no feedback to user that your

email will actually go to those people (UI needs feedback when user interacts!) I am not

confident as a user, the system is working right.

• Is there even a strong use case for emailing multiple teachers at a time?

CAN BE CLEANED UP BY USING STANDARDS AND INDUSTRY RECOGNIZED PATTERNS

29

CAN BE CLEANED UP BY USING STANDARDS AND INDUSTRY RECOGNIZED PATTERNS

30

WORST CASE UX FAIL..

31https://medium.com/@designuxui/how-bad-ux-killed-jenny-ef915419879e

• Its not just bad visual design and bad UI, its workflow, page flow, alerts, usability!

AMAZON, THEN AND NOW

32

YAHOO, THEN(1994) AND NOW

33

APPLE, THEN(1997) AND NOW

34

TWITTER, THEN AND NOW

35

• Simpler design• Clearer calls to action• Visual to show the product in

action• Better logo ;)

36

37

KRISSY’S 7 UX PRINCIPLES

1. Clarity2. Context3. Defaults4. Feedback5. Easing6. Guided Action7. Preferred Action

Ask Krissy Scoufis for more info

38

SOME UX REFERENCES

http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html

http://www.uie.com/

http://boxesandarrows.com/

http://ui-patterns.com/

http://www.nngroup.com/articles/ten-usability-heuristics/

http://uxpin.com/

39

SOME UX REFERENCES (CONT)

http://developer.android.com/design/get-started/creative-vision.html

https://developer.yahoo.com/ypatterns/

http://www.userfocus.co.uk/index.html

http://www.usertesting.com/

http://rosenfeldmedia.com/

40

http://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535/ref=pd_sim_b_1?ie=UTF8&refRID=0JEFF7Z3XRDVQJFZBDQS

http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=pd_bxgy_b_img_y

http://www.optimalworkshop.com/

SOME UX REFERENCES (CONT)

SILENCE THE SCREAMS.DON’T LET SCARY UI

HAPPEN TO YOUR USERS!Happy

Halloween!