misused ux design patterns
TRANSCRIPT
![Page 1: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/1.jpg)
MISUSED
UX Design patternsZoltan Kollin
![Page 2: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/2.jpg)
Hello, I’M Zoltan KollinUX director at Ustream
AN IBM COMPANY
![Page 3: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/3.jpg)
https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570
![Page 4: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/4.jpg)
Design patterns are reusable solutions to recurring problems.
![Page 5: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/5.jpg)
Design patterns Are commonly used interface elements that your users already know.
![Page 6: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/6.jpg)
![Page 7: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/7.jpg)
Design patterns Are commonly used interface elements and techniques that your users already know.
![Page 8: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/8.jpg)
![Page 9: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/9.jpg)
![Page 10: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/10.jpg)
You don’t have to reinvent the wheel and users don’t have to learn how to use them. win-win.
![Page 11: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/11.jpg)
![Page 12: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/12.jpg)
Design patterns sometimes expire
![Page 13: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/13.jpg)
Design patterns sometimes expire
![Page 14: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/14.jpg)
…and new ones are born
![Page 15: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/15.jpg)
Design patterns Are commonly used interface elements that your users already know.
![Page 16: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/16.jpg)
Misused Design patterns Are commonly used techniques that ignore users.
![Page 17: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/17.jpg)
Misused patterns #1
User interface puzzles
![Page 18: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/18.jpg)
The rise and fall of skeuomorphism
![Page 19: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/19.jpg)
The rise and fall of skeuomorphism
2012 2013
https://dribbble.com/lobanovskiy/tags/waffle
![Page 20: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/20.jpg)
The rise of simplification
![Page 21: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/21.jpg)
“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” - Antoine de Saint-Exupéry
![Page 22: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/22.jpg)
GUI is about metaphors
![Page 23: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/23.jpg)
icons are metaphors
![Page 24: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/24.jpg)
icons are metaphors
![Page 25: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/25.jpg)
Icons are metaphors
I SHOWED MY 12 YEAR OLD SON AN OLD FLOPPY DISK
“WOW…COOL! YOU 3D PRINTED THE SAVE ICON!”
![Page 26: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/26.jpg)
mysterious icons are not metaphors
![Page 27: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/27.jpg)
“Where exactly are messages in instagram?”
“OPen the app and in the top right corner there’s a bathtub. that’s where.”
![Page 28: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/28.jpg)
“researchers at the University of Minnesota […] found that people often disagreed as to whether the same emoji represented a positive, neutral, or negative sentiment.”
http://qz.com/659785/a-new-study-confirms-it-we-really-dont-know-what-were-saying-when-we-use-emoji/
![Page 29: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/29.jpg)
User interface puzzles
Usability first, design trends second
![Page 30: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/30.jpg)
Misused patterns #2
Designing “Out of sight”
![Page 31: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/31.jpg)
The evolution of white space
2009 2016
![Page 32: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/32.jpg)
![Page 33: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/33.jpg)
![Page 34: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/34.jpg)
![Page 35: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/35.jpg)
http://guardz1y11.blogspot.hu/2015/03/writing-css-interesting-parts.html
The evolution of Scroll indicators
![Page 36: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/36.jpg)
SCROLL DOWN
![Page 37: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/37.jpg)
A user interface
is like a joke. If you have to explain it, it’s
not that good.
![Page 38: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/38.jpg)
![Page 39: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/39.jpg)
![Page 40: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/40.jpg)
How most carousels look How carousels should look
Arrows don’t give users an incentive to click
Descriptive labels incentivize to click
http://uxmovement.com/navigation/why-users-arent-clicking-your-home-page-carousel/
![Page 41: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/41.jpg)
![Page 42: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/42.jpg)
![Page 43: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/43.jpg)
Out of sight, out of mind.
![Page 44: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/44.jpg)
Designing “out of sight”
Consider the context and keep essential options accessible
![Page 45: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/45.jpg)
Misused patterns #3
patterns of distraction
![Page 46: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/46.jpg)
90 trillion emails were sent in 2009
81% were spam
![Page 47: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/47.jpg)
Today, less than 0.1% of email in the average Gmail inbox is spam.
![Page 48: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/48.jpg)
![Page 50: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/50.jpg)
Reminder 1 mins ago Call Steve about weekend
Uber now Your car is arriving
Mom 3 mins ago Missed call
Slack now Tim archived 7 channels
Instagram 1 hour ago You have 5 new followers
Podcasts 30 mins ago New Alley-oop episode
Twitter 5 mins ago #UXScotland is trending in your network
![Page 51: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/51.jpg)
The smart way
![Page 52: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/52.jpg)
The manual way
![Page 53: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/53.jpg)
Nine of 10 people suffer from phantom vibration syndrome where they mistakenly think their mobile phone is vibrating in their pocket
![Page 54: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/54.jpg)
Phone addiction?
![Page 55: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/55.jpg)
Hey there!Have a question? Chat with us.
Send a message…
![Page 56: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/56.jpg)
You should really download our brilliant e-book to boost profits.
Enter your email address… GET YOUR FREE EBOOK
![Page 58: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/58.jpg)
Patterns of distraction
Focus on the long term user experience, not quick wins
![Page 59: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/59.jpg)
Misused patterns #4
technology overdrive
![Page 60: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/60.jpg)
Technology should solve people’s problems, not create new ones
![Page 61: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/61.jpg)
![Page 62: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/62.jpg)
“There’s an app for that”
![Page 63: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/63.jpg)
![Page 64: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/64.jpg)
1. Tap on continue
![Page 65: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/65.jpg)
1. Tap on continue 2. Arrive to app store
![Page 66: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/66.jpg)
1. Tap on continue 2. Arrive to app store 3. Tap on get
![Page 67: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/67.jpg)
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install
![Page 68: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/68.jpg)
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install 5. wait for it
![Page 69: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/69.jpg)
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install 5. wait for it 6. Enter password
![Page 70: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/70.jpg)
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install 5. wait for it 6. Enter password 7. wait for installing
![Page 71: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/71.jpg)
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install 5. wait for it 6. Enter password 7. wait for installing 8. Tap on open
![Page 72: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/72.jpg)
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install 5. wait for it 6. Enter password 7. wait for installing 8. Tap on open 9. turn off notifications
![Page 73: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/73.jpg)
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install 5. wait for it 6. Enter password 7. wait for installing 8. Tap on open 9. turn off notifications 10. Access the content
![Page 74: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/74.jpg)
Apps need to be maintained. Even by the users.
![Page 75: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/75.jpg)
![Page 76: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/76.jpg)
![Page 77: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/77.jpg)
Technology should solve people’s problems, not create new ones
![Page 78: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/78.jpg)
“Slap an interface on it!”
![Page 79: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/79.jpg)
Technology overdrive
People should leverage technology, not serve it
![Page 80: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/80.jpg)
The ultimate question:
to follow or not to follow?
![Page 81: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/81.jpg)
![Page 82: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/82.jpg)
![Page 83: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/83.jpg)
![Page 84: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/84.jpg)
![Page 85: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/85.jpg)
![Page 86: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/86.jpg)
![Page 87: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/87.jpg)
![Page 88: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/88.jpg)
“Every website, 2015”
![Page 89: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/89.jpg)
“The two possible websites…”
![Page 90: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/90.jpg)
“All apps look the same…”
![Page 91: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/91.jpg)
![Page 92: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/92.jpg)
How not to misuse design patterns?
![Page 93: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/93.jpg)
Get to know the patterns but unfollow them any time if that’s the best for your users.
![Page 94: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/94.jpg)
Question everything
and do your own research
![Page 95: Misused UX design patterns](https://reader037.vdocument.in/reader037/viewer/2022092723/58cf46291a28ab254a8b63f5/html5/thumbnails/95.jpg)
Thank youLet me know your thoughts
on twitter or linkedin