Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Tampa UX Meetup - October 2014 - Slides

•Download as PPTX, PDF•
•
Mike Gallers
Mike Gallers

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

1 of 41
SCARY UI 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! Not perfect, decent 8
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
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
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
“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
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/
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/
SCARY PARALLAX! (THE GREEN LANTERN VILLAIN) 15
NICE DESIGN (HAD TO SHOW APPLE. NOT PARALLAX PER SE) 16 http://www.apple.com/iphone-6/
CAROUSELS. GREAT RIGHT?! 17 http://shouldiuseacarousel.com/
HOVER NAV. CONTROL YOUR FLYOUTS! • onMouseover = BAD. Instant and annoying http://www.carmax.com/ 18
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
HUMOR BREAK! 20
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!
PUT THE DESIRED THING NEAR WHERE USER HAS TO CLICK/TAP 22
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
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) • 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!
DON’T DESTROY YOUR LAYOUT! 27
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?
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..  • 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
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. Clarity 2. Context 3. Defaults 4. Feedback 5. Easing 6. Guided Action 7. 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/
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/
SILENCE THE SCREAMS. DON’T LET SCARY UI HAPPEN TO YOUR USERS! Happy Halloween!

More Related Content

Tampa UX Meetup - October 2014 - Slides

  • 1. SCARY UI TALES FROM THE WORLD OF UX
  • 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
  • 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
  • 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!