MOBILE UX DESIGN ESSENTIALS
MINA KIM DIRECTOR OF UX, ADJACENT TO ONE
UX Design = User Experience Design
MY PROFILE CURRENT ROLE Director of UX at Adjacent to One (design studio)
!
SOME PAST ROLES Director, Mobile Strategy & Experience at Amex OPEN Director of Mobile Initiatives at UrbanDaddy Senior Product Manager, Aol Mobile
!
SOME PAST MOBILE PROJECTS UrbanDaddy apps (The Next Move, Manero) Moviefone for iPhone app Patch iPhone and Android apps Amex OPEN ReceiptMatch apps
This lecture is for:
• Developers who are getting started with design • Visual designers with limited UX experience • Junior UX designers
! ! For more advanced UX guidance, please sign up for my office hours (posted on ohours.org).
Designing a functional mobile interface is not rocket science.
CHALLENGES OF MOBILE UX DESIGN
CHALLENGES OF MOBILE UX DESIGN
Small screen ! !
• Requires more thought to get from point A to point B on a smaller screen • You really have to know what your purpose is
Too many screen sizes
• Android’s fragmented device landscape • Apple’s continues to further fragment
! !
More design talent each year competing for the attention of mobile users
• Lots of brainpower focused on mobile UX design in 2014 • Higher chance of coming out on top if you follow a few basic guiding principles
GUIDING PRINCIPLE #1:
DESIGN FOR YOUR AUDIENCE
#1: DESIGN FOR YOUR AUDIENCE
Who is your audience? For instance, if target user is not tech-savvy…
DO - Leans on most prevalent UX trends - Includes all icon labels
DON’T - No labels in sight
- Gestures take unpredictable actions
#1: DESIGN FOR YOUR AUDIENCE
If target user is on the move…
DO - Larger text + icons
- Fewer steps to task completion
DON’T
If targeting multiple demographics: Design for the lowest common denominator
GUIDING PRINCIPLE #2:
SHOW VISUAL HIERARCHY
#2: SHOW VISUAL HIERARCHY
What should the user look at first? Make it obvious.
DO
DO
DON’T
#2: SHOW VISUAL HIERARCHY
Make your content hierarchy shine.
DO - Color, size and font weight
help to streamline this view - User is on a guided journey
DON’T - Color draws eye to bottom first
- All text is similar in size and has
no hierarchy
#2: SHOW VISUAL HIERARCHY
Streamline your views.
DO -
!
3 columns Icons are big and clear Color used to differentiate
DON’T -
4-5 columns Icons have similar weight Sliders not consistent Too much information for a quick view
DON’T -
5 columns
-
Icons have similar weight
! !
#2: SHOW VISUAL HIERARCHY
General rules of thumb: • Keep written content in 1-column format
• Keep thumbnail grids to 2-3 columns max • Do not mix content types randomly in grids • Limit segmented controls to 3 items max • Limit tabbed main navigation to 5 items max • Infinite vertical scrolling on mobile is A-OK
GUIDING PRINCIPLE #3:
IF YOU LOVE YOUR USERS, LET THEM GO
#3: IF YOU LOVE THEM, LET THEM GO
Always show a clear path to exit.
• Make main navigation super accessible from any point in a user flow • Modals: Do not make users search or aim for the Close button
DO
#3: IF YOU LOVE THEM, LET THEM GO
Unclear path to exit
How do I go back from here?
DON’T
#3: IF YOU LOVE THEM, LET THEM GO
Give your users a reason to stay.
Never not assume anyone is naturally dying to use your app.
DO Some sections can be browsed without login or sign up
DON’T
DON’T
Login or sign up must be completed before user can digest what the app can do
First experience; no incentive to share anything with friends at this point
RECAP:
!
1. D E S I G N F O R Y O U R A U D I E N C E 2. S H O W V I S U A L H I E R A R C H Y 3. I F Y O U L O V E Y O U R U S E R S , L E T T H E M G O
I’m here to help. OFFICE HOURS http://ohours.org/thisproduct ! TWITTER: @thisproduct