tampa bay ux - scary ui 2
TRANSCRIPT
SCARY UI 2
AHH!!!
NO! Anything
but that!!
KEEP AWAY!!!
MORE CHILLING UX TALES FROM AROUND THE INTERWEBS
AND….GO!
2
INTERFACES HAVE AFFORDANCE!
3
4
AFFORDANCE! HANDLES ARE FOR PULLING, FLAT PANELS ARE FOR PUSHING. THE CONTROL SHOULD AFFORD HOW IT SHOULD BE INTERACTED WITH
UH, DO WHAT NOW?! PLEASE DON’T MAKE ME USE THIS!
5
CLASSIC EXAMPLE OF NOT ENOUGH ON THE PAGE
6
SCARY MOBILE UI
Many images from a blog post by Theresa Neil -
https://theresaneil.wordpress.com/2011/08/22/bad-mobile-apps-ui-design-gone-wrong/7
The screen is small. Your fingers are big. You are constantly distracted.
Its quite easy to provide UI that is extremely scary (and unusable)
SCARY ERROR MESSAGES
8
Huh? Thanks for the SUPER helpful message.
AIRPORT WIFI LOGINS. LOTS OF TEXT AND SMALL LINKS! YAY!
9
YOUTUBE, WHERE IS THE SEARCH LINK OR ICON?!
10
OH. I HAD TO RE-DOWNLOAD THE APP TO GET IT.
11
INTERACTION SHOULD MATCH BEHAVIOR!
12
Typical swipe left gesture on a list is the card (or list item) moves left to reveal options underneath it. Here, Google broke that and on left swipe has a little button appear. It feels very awkward.
INTERACTION SHOULD MATCH BEHAVIOR!
13
Here is the standard way to expose options on left swipe of a card or list item.
YOWZA!
14
I think my icon library threw up on the screen.
UHH…{SHRUG} NEXT APP!
15
Don’t make me think. please. If a user wants to solve puzzles, they will get a puzzle app.
* See Steve Krug’s book
ALL THE OPTIONS!
16
Why group things? A long list is fine.
1. COMIC SANS FTW. 2. SEE LUKEW FOR FORM DESIGN
17
DON’T ALWAYS COPY APPLE. CONTEXT IS VERY IMPORTANT
18
Google introduced, for just one day, a totally crazy Apple OS X style dock above the search bar.
Ugly icons, architectural mess, lack of connection to any use case. Dropped in less than 24 hours.
GAUGES ARE FUN!
19
I guess a finance degree will help you understand this.
Also, green is overused. Lets use blue for ‘good’.
MOTIONX SICKNESS
20
ooh, it reminds me of the old iPod!
Standard controls decrease cognitive load and allow for faster task time.
EXEC SAID HE WANTED BAR CHARTS…
21
AHH, SPACE FOR THE EYE TO REST…
22
And time for the brain to sit and wonder what to do next.
If the point of this view is to log in, where is the form?? why a big blank sky??
CONTRAST IS GOOD.
23
white on light blue is kinda hard to read. Increased cognitive barriers == decreased usability
A BIT OVERDESIGNED
24
skeuomorphism at its finest. or worst.
On/off switches need figuring out. do they relate to the lights next to them?
FLAG ON THE PLAY! BACKGROUND IMAGE INTERFERENCE.
25
WHAT ARE THOSE ICONS?
26
do they need to be shown on every row?
SMALL, MEDIUM, LARGE ARE DETAILS?
27
Sometimes you need details vs subjective relative labels.
SCARY MOBILE UI
Many of the app images from a blog post by Theresa Neil -
https://theresaneil.wordpress.com/2011/08/22/bad-mobile-apps-ui-design-gone-wrong/28
The screen is small. Your fingers are big. You are busy and distracted.
Spend EXTRA time on usability research and testing
CRUELEST OPT OUTS
29
Why make your user feel good when you can shame them into behaving how you want?!
CRUELEST OPT OUTS
30
CRUELEST OPT OUTS
31
CRUELEST OPT OUTS
32
CRUELEST OPT OUTS
33
CRUELEST OPT OUTS
http://cruelestoptouts.tumblr.com/?utm_campaign=UX_Design_Weekly_Issue_57&utm_medium=email&utm_source=uxdesignweekly.com
34
10 WORST DESIGN FAILURES OF ALL TIME
http://studio.uxpin.com/blog/10-worst-design-failures-of-all-times/ 35
BEWARE OF GOBLINS IN PRINCESS DRESSES
36
37
Design vs. Usability
38
“Hey! That looks cool!”Be cautious about following a trend.
39
“Hey! That looks cool!”Be cautious about following a trend.
Favourite Website Awards
gomacro.com
40
“Hey! That looks cool!”Be cautious about following a trend.
5 seconds: Wow! I love the colors here and this background!
10 seconds: Woah - this slider is moving away to fast - I can’t read it.
40 seconds: This navigation makes no sense. It is color coded but I am looking for a coconut bar and thought that would be under the brown tab - I had to check each tab and found it under the blue tab.
90 seconds: When I put the bar in the cart it takes me to the general shopping page so I have to locate the bar all over again. ARGH! This isn’t worth it….
41
Interaction CostReadingLookingScrollingClickingTyping
Reduce interaction cost to increase usability
42
Mobile’s Influence on Design.
43
Mobile Influences Design
44
• Less clutter
• Larger everything (including text)
• Mobile-optimized navigation
• Minimalism
45
BIG Hero.
BIG Hero Don’t forget to welcome your visitors and tell them who you are
BIG Hero Don’t forget to welcome your visitors and tell them who you are
“There is a pretty girl so….is it a fashion website?”
Avoid the False Floor Let users know there is more content below
Avoid the False Floor Let users know there is more content below
Avoid the False Floor Let users know there is more content below
Avoid the False Floor Let users know there is more content below
Avoid the False Floor Let users know there is more content below
Avoid the False Floor Let users know there is more content below
Avoid the False Floor Let users know there is more content below
BIG Hero Solutions
BIG Hero Solutions
BIG Hero Solutions
BIG Hero Solutions
BIG Hero Solutions
BIG Hero Solutions
BIG Hero Solutions
63
Polygons, Angles & Circles.
Polygons are HOT!Use them regularly
Polygons are HOT!Use them regularly
Polygons are HOT!Use them regularly
Use Angles to break the false floorIrregular angles and shallow angles cause motion sickness
Use Angles to break the false floorIrregular angles and shallow angles cause motion sickness
Circles are great to add focusUse them with objects that are naturally round
Circles are great to add focusUse them with objects that are naturally round
Circles are great to add focusUse them with objects that are naturally round
72
Ghost Buttons
Ghost Buttons Increase Interaction Cost
Ghost Buttons Increase Interaction Cost
Ghost Buttons Increase Interaction Cost
76
Hidden Content
Hiding Content Increases Interaction Cost
Hiding Content Increases Interaction Cost
Hiding Content Increases Interaction Cost
Hiding Content Increases Interaction Cost
Hiding Content Increases Interaction Cost
Hiding Content Increases Interaction Cost
83
Navigation.
Navigation Solution One trend to avoid — the hamburger menu
Navigation Solution Trendsetters using the hamburger on desktop have now gone
back to more discoverable methods.
Navigation Solution Trendsetters using the hamburger on desktop have now gone
back to more discoverable methods.
Navigation Solution Trendsetters using the hamburger on desktop have now gone
back to more discoverable methods.
Navigation Solution Trendsetters using the hamburger on desktop have now gone
back to more discoverable methods.
89
UX RecommendationHamburger menu OK for mobile in most situations (consider your audience)
Should avoid using on desktop
Can use in responsive after certain breakpoints
“Menu” label should always accompany icon
WORST CASE UX FAIL.. ☹
90https://medium.com/@designuxui/how-bad-ux-killed-jenny-ef915419879e
• Its not just bad visual design and bad UI, its workflow, page flow, alerts, usability!
EMPLOYEES ARE PEOPLE TOO!
91
LET THE PAIN STOP!
92
How much time are employees wasting trying to use the tool, then complaining about the tool?
Do you want your employees frustrated and angry at work?
THEN AND NOW
How has design changed since the beginning of the web?
93
AMAZON, THEN AND NOW
94
YAHOO, THEN(1994) AND NOW
95
APPLE, THEN(1997) AND NOW
96
TWITTER, THEN AND NOW
97
• Simpler design • Clearer calls to action • Visual to show the product in
action • Better logo ;)
98
99
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/
100
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/
101
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!
IMAGES FROM SCARY UI 1!
FOR THIS FIRST USER TEST…DON’T CRASH THE PLANE.
104
ALL THE FEATURES AND SETTINGS!!
105
CLICK WHAT TO WHAT NOW?
106
If your buttons need instructions, relabel your buttons. (even if it means custom code)
HOW MANY BUTTONS DOES YOUR TOILET HAVE?
107
COMPARISON TABLE – NOT SO GOOD
108
• 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
109
• 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!
110
• 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)
111
• 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
112
• 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
113
• 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)
114
NICE DESIGN (HAD TO SHOW APPLE. NOT PARALLAX PER SE)
115http://www.apple.com/iphone-6/
HOVER NAV. CONTROL YOUR FLYOUTS!
117http://www.carmax.com/
• onMouseover = BAD. Instant and annoying
HOVER NAV. MORE CONTROL OVER YOUR FLYOUTS
118http://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!
119
FITTS’S LAW
120http://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
121
LONG FORMS…{YAWN}…ABANDON
122
• 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
123
• Progress indicator • You know generally how long (how many
steps there are) • Sections are chunked appropriately
SCHOOL WEBSITES ARE NOTORIOUSLY BAD (NO FUNDING)
124
SCHOOL WEBSITES ARE NOTORIOUSLY BAD (NO FUNDING)
125
• 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!
126
DON’T DESTROY YOUR LAYOUT!
127
• 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
128
CAN BE CLEANED UP BY USING STANDARDS AND INDUSTRY RECOGNIZED PATTERNS
129