Mobile UX Design Essentials

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