SlideShare uma empresa Scribd logo
1 de 45
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

Mais conteúdo relacionado

Destaque

2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General Guidelines2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General GuidelinesDonghoo Kim
 
The Evolution of UX Challenges
The Evolution of UX ChallengesThe Evolution of UX Challenges
The Evolution of UX ChallengesZoltan Kollin
 
Product Placement Ethics
Product Placement EthicsProduct Placement Ethics
Product Placement EthicsLawson Rushing
 
UX 관점에서 사용성 평가하기
UX 관점에서 사용성 평가하기UX 관점에서 사용성 평가하기
UX 관점에서 사용성 평가하기JongHo Lee
 
2017-02-28 Modern Web Based Accounting System Seminar featuring Intacct
2017-02-28 Modern Web Based Accounting System Seminar featuring Intacct2017-02-28 Modern Web Based Accounting System Seminar featuring Intacct
2017-02-28 Modern Web Based Accounting System Seminar featuring IntacctRaffa Learning Community
 
AIG Annual Reports and Proxy Statements 2007 Annual Report
AIG Annual Reports and Proxy Statements 2007 Annual Report AIG Annual Reports and Proxy Statements 2007 Annual Report
AIG Annual Reports and Proxy Statements 2007 Annual Report finance2
 
Mekesson Quarterly Reports 2006 2nd
Mekesson Quarterly Reports 2006 2ndMekesson Quarterly Reports 2006 2nd
Mekesson Quarterly Reports 2006 2ndfinance2
 
goldman sachs Amended and Restated By-laws
goldman sachs Amended and Restated By-laws   goldman sachs Amended and Restated By-laws
goldman sachs Amended and Restated By-laws finance2
 
Untitled Presentation
Untitled PresentationUntitled Presentation
Untitled PresentationPJ Taei
 
Getting to know your audeince
Getting to know your audeinceGetting to know your audeince
Getting to know your audeinceFrancesca Peskops
 
Stay One Step Ahead of Cyber Threats - Check Point
Stay One Step Ahead of Cyber Threats - Check PointStay One Step Ahead of Cyber Threats - Check Point
Stay One Step Ahead of Cyber Threats - Check PointMarcoTechnologies
 

Destaque (11)

2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General Guidelines2015 HCI - Smart TV General Guidelines
2015 HCI - Smart TV General Guidelines
 
The Evolution of UX Challenges
The Evolution of UX ChallengesThe Evolution of UX Challenges
The Evolution of UX Challenges
 
Product Placement Ethics
Product Placement EthicsProduct Placement Ethics
Product Placement Ethics
 
UX 관점에서 사용성 평가하기
UX 관점에서 사용성 평가하기UX 관점에서 사용성 평가하기
UX 관점에서 사용성 평가하기
 
2017-02-28 Modern Web Based Accounting System Seminar featuring Intacct
2017-02-28 Modern Web Based Accounting System Seminar featuring Intacct2017-02-28 Modern Web Based Accounting System Seminar featuring Intacct
2017-02-28 Modern Web Based Accounting System Seminar featuring Intacct
 
AIG Annual Reports and Proxy Statements 2007 Annual Report
AIG Annual Reports and Proxy Statements 2007 Annual Report AIG Annual Reports and Proxy Statements 2007 Annual Report
AIG Annual Reports and Proxy Statements 2007 Annual Report
 
Mekesson Quarterly Reports 2006 2nd
Mekesson Quarterly Reports 2006 2ndMekesson Quarterly Reports 2006 2nd
Mekesson Quarterly Reports 2006 2nd
 
goldman sachs Amended and Restated By-laws
goldman sachs Amended and Restated By-laws   goldman sachs Amended and Restated By-laws
goldman sachs Amended and Restated By-laws
 
Untitled Presentation
Untitled PresentationUntitled Presentation
Untitled Presentation
 
Getting to know your audeince
Getting to know your audeinceGetting to know your audeince
Getting to know your audeince
 
Stay One Step Ahead of Cyber Threats - Check Point
Stay One Step Ahead of Cyber Threats - Check PointStay One Step Ahead of Cyber Threats - Check Point
Stay One Step Ahead of Cyber Threats - Check Point
 

Mais de Zoltan Kollin

Embracing Friction - Zoltan Kollin
Embracing Friction - Zoltan KollinEmbracing Friction - Zoltan Kollin
Embracing Friction - Zoltan KollinZoltan Kollin
 
Good design is a myth - Zoltan Kollin @ UX Cambridge 2017 & UX Scotland 2017
Good design is a myth - Zoltan Kollin @ UX Cambridge 2017 & UX Scotland 2017Good design is a myth - Zoltan Kollin @ UX Cambridge 2017 & UX Scotland 2017
Good design is a myth - Zoltan Kollin @ UX Cambridge 2017 & UX Scotland 2017Zoltan Kollin
 
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017Zoltan Kollin
 
Xlabs - Bemutatkozik a user experience
Xlabs - Bemutatkozik a user experienceXlabs - Bemutatkozik a user experience
Xlabs - Bemutatkozik a user experienceZoltan Kollin
 
Little big details - Kollin Zoltán
Little big details - Kollin ZoltánLittle big details - Kollin Zoltán
Little big details - Kollin ZoltánZoltan Kollin
 
Így tervezz jó formokat
Így tervezz jó formokatÍgy tervezz jó formokat
Így tervezz jó formokatZoltan Kollin
 
Mi az a UX (és hogy kell megdizájnolni)?
Mi az a UX (és hogy kell megdizájnolni)?Mi az a UX (és hogy kell megdizájnolni)?
Mi az a UX (és hogy kell megdizájnolni)?Zoltan Kollin
 
Laposabb lett az élmény? - Flat UI trendek
Laposabb lett az élmény? - Flat UI trendekLaposabb lett az élmény? - Flat UI trendek
Laposabb lett az élmény? - Flat UI trendekZoltan Kollin
 
Analitika és felhasználói kutatások
Analitika és felhasználói kutatásokAnalitika és felhasználói kutatások
Analitika és felhasználói kutatásokZoltan Kollin
 
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin ZoltánAndroid design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin ZoltánZoltan Kollin
 
A koncepciótól a drótváz tervig - Kollin Zoltán
A koncepciótól a drótváz tervig - Kollin ZoltánA koncepciótól a drótváz tervig - Kollin Zoltán
A koncepciótól a drótváz tervig - Kollin ZoltánZoltan Kollin
 
Felhasználóbarát felületek tervezése - Kollin Zoltán
Felhasználóbarát felületek tervezése - Kollin ZoltánFelhasználóbarát felületek tervezése - Kollin Zoltán
Felhasználóbarát felületek tervezése - Kollin ZoltánZoltan Kollin
 
A mobilos felülettervezés alapjai - Kollin Zoltán
A mobilos felülettervezés alapjai - Kollin ZoltánA mobilos felülettervezés alapjai - Kollin Zoltán
A mobilos felülettervezés alapjai - Kollin ZoltánZoltan Kollin
 
Az érintőképernyők evolúciója - Kollin Zoltán
Az érintőképernyők evolúciója - Kollin ZoltánAz érintőképernyők evolúciója - Kollin Zoltán
Az érintőképernyők evolúciója - Kollin ZoltánZoltan Kollin
 

Mais de Zoltan Kollin (16)

Embracing Friction - Zoltan Kollin
Embracing Friction - Zoltan KollinEmbracing Friction - Zoltan Kollin
Embracing Friction - Zoltan Kollin
 
Good design is a myth - Zoltan Kollin @ UX Cambridge 2017 & UX Scotland 2017
Good design is a myth - Zoltan Kollin @ UX Cambridge 2017 & UX Scotland 2017Good design is a myth - Zoltan Kollin @ UX Cambridge 2017 & UX Scotland 2017
Good design is a myth - Zoltan Kollin @ UX Cambridge 2017 & UX Scotland 2017
 
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017
Good design is... a myth - Zoltan Kollin - UX Copenhagen 2017
 
Xlabs - Bemutatkozik a user experience
Xlabs - Bemutatkozik a user experienceXlabs - Bemutatkozik a user experience
Xlabs - Bemutatkozik a user experience
 
Little big details - Kollin Zoltán
Little big details - Kollin ZoltánLittle big details - Kollin Zoltán
Little big details - Kollin Zoltán
 
Így tervezz jó formokat
Így tervezz jó formokatÍgy tervezz jó formokat
Így tervezz jó formokat
 
Mi az a UX (és hogy kell megdizájnolni)?
Mi az a UX (és hogy kell megdizájnolni)?Mi az a UX (és hogy kell megdizájnolni)?
Mi az a UX (és hogy kell megdizájnolni)?
 
Laposabb lett az élmény? - Flat UI trendek
Laposabb lett az élmény? - Flat UI trendekLaposabb lett az élmény? - Flat UI trendek
Laposabb lett az élmény? - Flat UI trendek
 
Mobil UX design
Mobil UX designMobil UX design
Mobil UX design
 
Analitika és felhasználói kutatások
Analitika és felhasználói kutatásokAnalitika és felhasználói kutatások
Analitika és felhasználói kutatások
 
Building Scida
Building ScidaBuilding Scida
Building Scida
 
Android design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin ZoltánAndroid design guideline - App! 2012 - Kollin Zoltán
Android design guideline - App! 2012 - Kollin Zoltán
 
A koncepciótól a drótváz tervig - Kollin Zoltán
A koncepciótól a drótváz tervig - Kollin ZoltánA koncepciótól a drótváz tervig - Kollin Zoltán
A koncepciótól a drótváz tervig - Kollin Zoltán
 
Felhasználóbarát felületek tervezése - Kollin Zoltán
Felhasználóbarát felületek tervezése - Kollin ZoltánFelhasználóbarát felületek tervezése - Kollin Zoltán
Felhasználóbarát felületek tervezése - Kollin Zoltán
 
A mobilos felülettervezés alapjai - Kollin Zoltán
A mobilos felülettervezés alapjai - Kollin ZoltánA mobilos felülettervezés alapjai - Kollin Zoltán
A mobilos felülettervezés alapjai - Kollin Zoltán
 
Az érintőképernyők evolúciója - Kollin Zoltán
Az érintőképernyők evolúciója - Kollin ZoltánAz érintőképernyők evolúciója - Kollin Zoltán
Az érintőképernyők evolúciója - Kollin Zoltán
 

Último

CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 

Último (20)

CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 

Misused Mobile UX Patterns