mobile ux practices

28
Mobile is all about getting a job done in the fastest and sexiest possible way Sanjay Raval Sr. Mobile UX Designer, Yodlee 19 Apr, 2014

Upload: sanjay-raval

Post on 12-Jul-2015

314 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Mobile ux practices

Mobile is all about  getting a job done in the fastest and sexiest possible way

Sanjay Raval

Sr. Mobile UX Designer, Yodlee

19 Apr, 2014

Page 2: Mobile ux practices

WHY IT MATTERS? §  - Small Screen •  - Difficult to type •  - On the Go •  - Out side Interruption •  - Battery Life •  - Processing Power •  - Data transfer and Pricing •  - Hard to Multi-task •  - Attention is partial

Page 3: Mobile ux practices

HOW TO DEAL? §  1) Less is More §  2) Designing for Thumb §  3) Be really awesome at One Thing §  4) Clear Communication §  5) Smart use of Gestures §  6) Think Beyond Style Guide

Page 4: Mobile ux practices

1 LESS IS MORE

Page 5: Mobile ux practices

1 LESS IS MORE §  - Focus on most important features and content §  - Only one action or max two actions §  - One task at a time

Page 6: Mobile ux practices

2 DESIGNING FOR THUMB

Page 7: Mobile ux practices

2 DESIGNING FOR THUMB §  In a study, it has found that about 75% of people's

interactions with a smartphone were managed with a thumb.

§  So when it comes to designing for mobile, it makes sense to follow the thumb.

§  Thumb is better than finger

Page 8: Mobile ux practices

3 BE REALLY AWESOME AT ONE THING

Page 9: Mobile ux practices

3 BE REALLY AWESOME AT ONE THING

§  Instead of trying be to perfect at everything. §  Focus on one core feature of the product and §  Make It Awesome

Page 10: Mobile ux practices

4 CLEAR COMMUNICTION

Page 11: Mobile ux practices

4 CLEAR COMMUNICATION - Good color contrast

- Bigger fonts

- Use of icons

- Infographics

- Clear Feedback

Page 12: Mobile ux practices

5 SMART USE OF GESTURES

Page 13: Mobile ux practices

5 SMART USE OF GESTURES

- Gestures are quicker, §  - Provides comfortable experience for hand since a

large area of the screen is used for a function.

Page 14: Mobile ux practices

6 THINK BEYOND STYLE GUIDE

Page 15: Mobile ux practices

6 THINK BEYOND STYLE GUIDE

Following style guide is good to bring consistency and taking care of the user conventions. But following them blindingly is not something good. If we have a better way, we must try and do. Good is an envy of the best

Page 16: Mobile ux practices

EXAMPLES & QA

Page 17: Mobile ux practices

NOT SO GOOD iPhone Alarm App

1

What is not so good:

1) Thumb Friendliness

Page 18: Mobile ux practices

1 GOOD Rise Alarm App

Page 19: Mobile ux practices

NOT SO GOOD Any.do (To Do App)

2

Page 20: Mobile ux practices

NOT SO GOOD Any.do (To Do App)

2

What is not so good:

1) Entering Task Name 2) Selecting Date and Time 3) Color Contrast 4) Thumb Friendliness

Page 21: Mobile ux practices

2 GOOD Fast Remind

Page 22: Mobile ux practices

2 GOOD Fast Remind

Page 23: Mobile ux practices

GOOD 2 Current Design Improvised Design

Page 24: Mobile ux practices

NOT SO GOOD Music App (iPhone native app)

3

What is not so good:

1) User has to tap on bottom tabs to change view

Page 25: Mobile ux practices

3 GOOD Beat

What is good:

1) Just swipe the finger to change view

Page 26: Mobile ux practices

AWESOME APPS

Page 27: Mobile ux practices

CAM ME Selfies App

1

What is so good:

CamMe helps users take selfies from up to 16 feet away - without having to touch their device.   To take a selfie, users simply raise their hand and make a fist, which triggers a three-second shutter timer.

Page 28: Mobile ux practices

Sanjay Raval