Slides from the October Tampa UX meetup on Scary UI (and the design patterns/principles to avoid them)

1. SCARY UI
TALES FROM THE WORLD OF
UX

2. WHAAAAAAAAT?!
2

3. ALL THE FEATURES AND SETTINGS!!
3

4. CLICK WHAT TO WHAT NOW?
4
If your buttons need instructions, relabel your buttons.
(even if it means custom code)

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

6. HOW MANY BUTTONS DOES YOUR
TOILET HAVE?
6

7. AH, THE CLASSIC DOOR HANDLE EXAMPLE
7

8. AFFORDANCE, PEOPLE! HANDLES ARE FOR
PULLING, FLAT PANELS ARE FOR PUSHING!
Not perfect,
decent
8

9. COMPARISON TABLE – NOT SO GOOD
• Too much text.
• No clear column
9
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

10. COMPARISON TABLE – MUCH BETTER
• Clear column
10
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

11. LOOKS GOOD, BUT IMAGERY TOO BIG!
• Clearly designed
for large monitors
• The main task
users have is to
search for flights,
and that form is
hidden.
11
http://www.southwest.com

12. “PARALLAX” (NOT THE GREEN LANTERN VILLAIN)
Visually okay, but…
• Numbered navigation?
• CTA to ‘Scroll down’
12
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
https://www.verizon.com/foryourhome/myaccount/ngen/upr/splash/myvzlearn.aspx

13. BETTER PARALLAX
• Clear that there is more content
13
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/

14. GREAT PARALLAX
• Clear that there is more content
14
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/

15. SCARY PARALLAX! (THE GREEN LANTERN VILLAIN)
15

16. NICE DESIGN (HAD TO SHOW APPLE. NOT PARALLAX PER SE)
16
http://www.apple.com/iphone-6/

17. CAROUSELS. GREAT RIGHT?!
17
http://shouldiuseacarousel.com/

18. HOVER NAV. CONTROL YOUR FLYOUTS!
• onMouseover = BAD.
Instant and annoying
http://www.carmax.com/ 18

19. HOVER NAV. MORE CONTROL OVER
YOUR FLYOUTS
• 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
http://www.ally.com/ 19

20. HUMOR BREAK!
20

21. FITTS’S LAW
• Click ‘login’. What happened?
New page? Where is login?
http://www.flvs.net/Pages/default.aspx 21
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!

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

23. LONG FORMS…{YAWN}…ABANDON
• 1 long form.
• No indication of length.
No indication of progress
as you fill it out (other
than scrollbar size)
23
http://www.rkk.com/long-application-form/application/long

24. 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

25. SCHOOL WEBSITES ARE NOTORIOUSLY BAD (NO FUNDING)
25

26. SCHOOL WEBSITES ARE NOTORIOUSLY BAD (NO FUNDING)
• Taxonomy is poor: “whats a program?” OH, my kid’s classes. why not call it classes or at
26
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!

27. DON’T DESTROY YOUR LAYOUT!
27

28. DON’T DESTROY YOUR LAYOUT!
• The pattern for emailing teachers is SO poor here. The form shows up in the content and
28
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?

29. CAN BE CLEANED UP BY USING STANDARDS AND
INDUSTRY RECOGNIZED PATTERNS
29

30. CAN BE CLEANED UP BY USING STANDARDS AND
INDUSTRY RECOGNIZED PATTERNS
30

31. WORST CASE UX FAIL.. 
• Its not just bad visual design and
bad UI, its workflow, page flow,
alerts, usability!
https://medium.com/@designuxui/how-bad-ux-killed-jenny-ef915419879e 31

32. AMAZON, THEN AND NOW
32

33. YAHOO, THEN(1994) AND NOW
33

34. APPLE, THEN(1997) AND NOW
34

35. TWITTER, THEN AND NOW
35
• Simpler design
• Clearer calls to action
• Visual to show the product in
action
• Better logo ;)

36. 36

37. 37
KRISSY’S 7 UX PRINCIPLES
1. Clarity
2. Context
3. Defaults
4. Feedback
5. Easing
6. Guided Action
7. Preferred Action
Ask Krissy Scoufis for more info 

38. 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. 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. SOME UX REFERENCES (CONT)
http://www.amazon.com/Things-Designer-People-Voices-
Matter/dp/0321767535/ref=pd_sim_b_1?ie=UTF8&refRID=
0JEFF7Z3XRDVQJFZBDQS
40
http://www.amazon.com/Dont-Make-Think-Revisited-
Usability/dp/0321965515/ref=pd_bxgy_b_img_y
http://www.optimalworkshop.com/

41. SILENCE THE
SCREAMS.
DON’T LET SCARY
UI HAPPEN TO
YOUR USERS!
Happy
Halloween!