misused ux design patterns
TRANSCRIPT
MISUSED
UX Design patternsZoltan Kollin
Hello, I’M Zoltan KollinUX director at Ustream
AN IBM COMPANY
https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570
Design patterns are reusable solutions to recurring problems.
Design patterns Are commonly used interface elements that your users already know.
Design patterns Are commonly used interface elements and techniques that your users already know.
You don’t have to reinvent the wheel and users don’t have to learn how to use them. win-win.
Design patterns sometimes expire
Design patterns sometimes expire
…and new ones are born
Design patterns Are commonly used interface elements that your users already know.
Misused Design patterns Are commonly used techniques that ignore users.
Misused patterns #1
User interface puzzles
The rise and fall of skeuomorphism
The rise and fall of skeuomorphism
2012 2013
https://dribbble.com/lobanovskiy/tags/waffle
The rise of simplification
“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
GUI is about metaphors
icons are metaphors
icons are metaphors
Icons are metaphors
I SHOWED MY 12 YEAR OLD SON AN OLD FLOPPY DISK
“WOW…COOL! YOU 3D PRINTED THE SAVE ICON!”
mysterious icons are not metaphors
“Where exactly are messages in instagram?”
“OPen the app and in the top right corner there’s a bathtub. that’s where.”
“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/
User interface puzzles
Usability first, design trends second
Misused patterns #2
Designing “Out of sight”
The evolution of white space
2009 2016
http://guardz1y11.blogspot.hu/2015/03/writing-css-interesting-parts.html
The evolution of Scroll indicators
SCROLL DOWN
A user interface
is like a joke. If you have to explain it, it’s
not that good.
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/
Out of sight, out of mind.
Designing “out of sight”
Consider the context and keep essential options accessible
Misused patterns #3
patterns of distraction
90 trillion emails were sent in 2009
81% were spam
Today, less than 0.1% of email in the average Gmail inbox is spam.
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
The smart way
The manual way
Nine of 10 people suffer from phantom vibration syndrome where they mistakenly think their mobile phone is vibrating in their pocket
Phone addiction?
Hey there!Have a question? Chat with us.
Send a message…
You should really download our brilliant e-book to boost profits.
Enter your email address… GET YOUR FREE EBOOK
Patterns of distraction
Focus on the long term user experience, not quick wins
Misused patterns #4
technology overdrive
Technology should solve people’s problems, not create new ones
“There’s an app for that”
1. Tap on continue
1. Tap on continue 2. Arrive to app store
1. Tap on continue 2. Arrive to app store 3. Tap on get
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install 5. wait for it
1. Tap on continue 2. Arrive to app store 3. Tap on get 4. Tap on install 5. wait for it 6. Enter password
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
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
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
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
Apps need to be maintained. Even by the users.
Technology should solve people’s problems, not create new ones
“Slap an interface on it!”
Technology overdrive
People should leverage technology, not serve it
The ultimate question:
to follow or not to follow?
“Every website, 2015”
“The two possible websites…”
“All apps look the same…”
How not to misuse design patterns?
Get to know the patterns but unfollow them any time if that’s the best for your users.
Question everything
and do your own research
Thank youLet me know your thoughts
on twitter or linkedin