Tampa UX Meetup - October 2014 - Slides
Download as PPTX, PDF1 like501 views
The document discusses various user experience (UX) design issues and principles, like the importance of clear navigation and avoiding overwhelming users with features. It critiques specific examples of UI designs, pointing out flaws and providing better alternatives, emphasizing clarity, feedback, and user-friendly layouts. Additionally, it offers a set of UX principles and references for further reading on effective design practices.
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
- 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!