For Mobile Developers

Juan José Rodríguezjuanjoserodriguez.me@jrodriguezv10

UX Design for Mobile Developers on Udacity

Presentation inspired in:

50 billion apps installed1 billion users7 billions persons

SAME GOAL!

DESIGNER DEVELOPER

Task 1: Write your current level in:

UX

Mobile Design

Android Design

User Centric Design

AGENDA

UX

UX

UX

UX

UI

Backend code

Frontend code

UX

Frontend code

Backend code

UX

UI

UX

UX

UI

Backend code

Frontend code

UX

UX

UI

Backend code

Frontend code

UX

UX

UI

Backend code

Frontend code

Google Now Experience

≠

UX

Team responsibility

UXOptimization

Examples

UX

UX

Task 1: Improve this form

UX

UX

TRAP SMALL DETAILS

BIG PICTURE

UXTASK:

STEPS:

BUY A PIZZA

1 2 3 4

UXTASK:

STEPS:

SIGNIN CHOOSE BUY EAT!

BUY A PIZZA

1 2 3 4

UXTASK:

STEPS:

BUY A PIZZA

1 2 3 4

STEPS2, 1, 3, 42,3,4

SIGNIN CHOOSE BUY EAT!

UX

TASK 3: FIND A APP YOU LIKE AND DISLIKE AND TELL US:

- WHY DO YOU LIKE - WHY DO YOU DISLIKE

BUT FIRST, TELL US WHO'RE YOU :)

UX

DIFFERENT TYPES OF PERSONALITIES

Features to App to get Pizza

Write about your 3 features would you like it

Is forbbiden:

Combine features orPick one?

Who is your users?How can I understand them?How focus uses cases on especific targets?How can think in my user and not on my personal preference

User Centric Design

User Centric Design

Personas uses cases

Proxy for group of actual users When+Where and How a Persona uses product to accomplish task

User Centric Design

Cynthia20 years old● University student of Administration● Has little money $● Share an apartment with a university friend● Doesn't have a car

Uses cases: How, When, Where?

● Get a pizza 2 AM

● Make a order with friends

❏ Multiple payment channels❏ Show photos of the ingredients❏ Show pizzas ranking

User Centric Design

Cynthia20 years old

● University student of Administration

● Has little money $● Share an apartment with a

university friend● Doesn't have a car

Uses cases:

● Get a pizza 2 AM

● Make a order with

friends

FEATURE:

❏ Split payment ❏ Delivery❏ Pick up the order on the balcony❏ Discount coupons

User Centric Design

Cynthia20 years old Uses cases:

FEATURE:

❏ Split payment ❏ Multiple payment channels.❏ Delivery❏ Discount coupons

● University student of Administration

● Has little money $● Share an apartment with a

university friend● Doesn't have a car

● Get a pizza 2 AM

● Make a order with

friends

TASK: DEVELOP a Feature List of these people

Mauricio40 years old

● Businessman and investor in technological projects.

● Is often busy working on his projects.● It is demanding in relation to food

Uses cases: How, When, Where?

FEATURES??

Marcos28 years old● Fashion and events adviser. ● Likes to always be present at the main events that

happen in the city. ● Likes to travel and share their experiences on social

networks

Uses cases: How, When, Where?

FEATURES??

Mobile Design

http://www.mobile-patterns.com/http://www.android-app-patterns.com/ http://inspired-ui.com/

https://developer.android.com/design/patterns/new.html

Mobile Patterns

Web Application Mobile Application

VS

from the persona perspectiveMobile Design

Mobile constraints

Finite data & Battery

Divided Attention

Handedness

Small Screen

Mobile Design

1 2 3

'OW ZONE'

● 50% use of smartphones is using one hand

● red are avoid zones● Green are natural zones

Ver demo

Android Design

Understand

Android Design

Question: An user is sleeping and receive a notification

Android Design

Android Design

CONTEXTAndroid Design

Moobo Music Player

Shazam

@Voice Read Aloud

Luminosity

Runtastic

Financiator

Mouse Kit

The Whip(Chicote)

❏ What is your user doing?

❏ Where is your user?❏ Who or what are they

near? ❏ Who is your user?

USER CONTEXTAndroid Design

Question: An user is sleeping and receive a notification

Android Design

CONDUCT CODE

HAVE A PURPOSE

For Mobile Developers

Juan José Rodríguezjuanjoserodriguez.me@jrodriguezv10