View
113
Download
1
Category
Tags:
Preview:
DESCRIPTION
Slides from the October Tampa UX meetup on Scary UI (and the design patterns/principles to avoid them)
Citation preview
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/
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!
Recommended