Misused Mobile UX Patterns ZOLTAN KOLLIN Mobile weekend
“Good artists copy. Great artists steal.”
Gmail EVernote Experienced designers use design patterns and guidelines.
Gmail EVernote Not everything is a best practice that you see in top apps.
bad pattern #1: Hidden navigation
It’s not about this icon. It’s about hiding your app navigation.
Gmail
Gmail It’s so easy to put all your navigation into a scrollable panel that’s hidden by default!
obvious always wins Luke Wroblewski However, at the end of the day, it’s all about usability and metrics.
Youtube 2014: hamburger menu youtube 2015: TAB BAR
THe truth: mobile navigation is about focus & prioritization
bad pattern #2: Icons, icons 
 Everywhere
This symbol is obvious and easier to use than having a ‘Back’ label.
It’s not always obvious Sharing is also a common feature but it’s icon is not so universal…
Instagram
Instagram Would you guess what this icon means in Instagram?
google translate
google translate Or this one, in Google Translate?
swarm If a popover hint is needed, you’re doing it wrong, Swarm.
Twitter But if you’re well- known like Twitter, you can brand icons to some degree.
THe truth: SOme icons are obvious for users
THe truth: but text labels never fail
bad pattern #3: gestures Replacing buttons
clear app Clear app was designed around gestures. Users were educated by the hype.
ios mail Swiping list items is a common gesture.
ios mail Swiping list items is a common gesture.
mailbox Wait, swiping right works differently in Mailbox!
IOS PATTERN Shake the device to undo…
GOOGLE MAPS Or shake to send feedback? Confusing.
TINDER You have to be Tinder to expect users to learn your special gestures.
THe truth: gestures have to be learned and memorized Ness
Bad pattern #4: tutor overlays as onboarding
Dcovery Showing tutorials does not make your UI more intuitive.
Up
THe truth: onboarding is about adding context SLACK
THe truth: onboarding is about getting started AIRBNB
THe truth: onboarding can be about adding content LOOTSY
Bad pattern #5: Creative but useless empty states
GOOGLE photos Meh… Looks nice, but pretty awkward to use.
GOOGLE photos Is search really the primary action for an empty list?
evernote Again: looks nice, but pretty awkward to use.
THe truth: Some context and A good call to action is all you need Flipboard
Good designers follow guidelines. Great designers know when to ignore them.
Misused Mobile UX Patterns
Misused Mobile UX Patterns
Upcoming SlideShare
Loading in …5
×

Misused Mobile UX Patterns

2,096 views

Published on

Getting inspired in UX design is not stealing, however, it's very easy to mistake bad patterns for best practices if you look at the most popular apps. Here's a few common mistakes that you should avoid when designing mobile interfaces.

Published in: Design
2 Comments
21 Likes
Statistics
Notes
no profile picture user
  • @Gergő: if you mean the hamburger stuff, this is a good reference: http://www.lukew.com/ff/entry.asp?1945
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • metrics. is this, like, your opinion, man :) or did you do some ux surveys and stuff?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
No Downloads
Views
Total views
2,096
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
2
Likes
21
Embeds 0
No embeds

No notes for slide

Misused Mobile UX Patterns

  1. 1. Misused Mobile UX Patterns ZOLTAN KOLLIN Mobile weekend
  2. 2. “Good artists copy. Great artists steal.”
  3. 3. Gmail EVernote Experienced designers use design patterns and guidelines.
  4. 4. Gmail EVernote Not everything is a best practice that you see in top apps.
  5. 5. bad pattern #1: Hidden navigation
  6. 6. It’s not about this icon. It’s about hiding your app navigation.
  7. 7. Gmail
  8. 8. Gmail It’s so easy to put all your navigation into a scrollable panel that’s hidden by default!
  9. 9. obvious always wins Luke Wroblewski However, at the end of the day, it’s all about usability and metrics.
  10. 10. Youtube 2014: hamburger menu youtube 2015: TAB BAR
  11. 11. THe truth: mobile navigation is about focus & prioritization
  12. 12. bad pattern #2: Icons, icons 
 Everywhere
  13. 13. This symbol is obvious and easier to use than having a ‘Back’ label.
  14. 14. It’s not always obvious Sharing is also a common feature but it’s icon is not so universal…
  15. 15. Instagram
  16. 16. Instagram Would you guess what this icon means in Instagram?
  17. 17. google translate
  18. 18. google translate Or this one, in Google Translate?
  19. 19. swarm If a popover hint is needed, you’re doing it wrong, Swarm.
  20. 20. Twitter But if you’re well- known like Twitter, you can brand icons to some degree.
  21. 21. THe truth: SOme icons are obvious for users
  22. 22. THe truth: but text labels never fail
  23. 23. bad pattern #3: gestures Replacing buttons
  24. 24. clear app Clear app was designed around gestures. Users were educated by the hype.
  25. 25. ios mail Swiping list items is a common gesture.
  26. 26. ios mail Swiping list items is a common gesture.
  27. 27. mailbox Wait, swiping right works differently in Mailbox!
  28. 28. IOS PATTERN Shake the device to undo…
  29. 29. GOOGLE MAPS Or shake to send feedback? Confusing.
  30. 30. TINDER You have to be Tinder to expect users to learn your special gestures.
  31. 31. THe truth: gestures have to be learned and memorized Ness
  32. 32. Bad pattern #4: tutor overlays as onboarding
  33. 33. Dcovery Showing tutorials does not make your UI more intuitive.
  34. 34. Up
  35. 35. THe truth: onboarding is about adding context SLACK
  36. 36. THe truth: onboarding is about getting started AIRBNB
  37. 37. THe truth: onboarding can be about adding content LOOTSY
  38. 38. Bad pattern #5: Creative but useless empty states
  39. 39. GOOGLE photos Meh… Looks nice, but pretty awkward to use.
  40. 40. GOOGLE photos Is search really the primary action for an empty list?
  41. 41. evernote Again: looks nice, but pretty awkward to use.
  42. 42. THe truth: Some context and A good call to action is all you need Flipboard
  43. 43. Good designers follow guidelines. Great designers know when to ignore them.

×