Mobile UX Design

59
Mobile UX Design Boulder Digital Works May 27, 2010

description

An overview presentation on designing mobile user experiences.

Transcript of Mobile UX Design

Page 1: Mobile UX Design

Mobile UX Design

Boulder Digital WorksMay 27, 2010

Page 2: Mobile UX Design

Hello.Juan SanchezUX Architect at EffectiveUI

@juansanchezjuanchez.com

Page 3: Mobile UX Design

Gartner reported that the global mobile phone sales last year reached around 1.21 billion units.

Page 4: Mobile UX Design

Vendors shipped a total of 54.7 million units in the first quarter of 2010 (1Q10), up 56.7% from the same quarter a year ago.

via International Data Corporation

Page 5: Mobile UX Design

What is mobile?

Page 6: Mobile UX Design

Ah, technology

Page 7: Mobile UX Design

These are...

Page 8: Mobile UX Design

And these...

Page 9: Mobile UX Design

Are these?

Page 10: Mobile UX Design

More on the way

Left to right: Windows Phone 7, Kin, Nokia Morph Concept

Page 11: Mobile UX Design

What does it take to create a great mobile experience?

Page 12: Mobile UX Design

Know the hardware

Page 13: Mobile UX Design

Best Buy makes a great device lab.

Form Factor

Page 14: Mobile UX Design

Screen Size

Images via gamesradar.com

Page 15: Mobile UX Design

Screen Resolution1024 x 768 at 132 ppi

480 x 320 at 163 ppi

800 x 480

480 x 320

Page 16: Mobile UX Design

Orientation

Page 17: Mobile UX Design

Input MethodsKeyboard, wheels, touch, multi-touch, earbuds...

Page 18: Mobile UX Design

Other capabilitiesGPS, accelerometer, microphone, light, camera...

Applications from left to right: iHandy Level, Stickybits, Square

Page 19: Mobile UX Design

Human FactorLeft vs. right handed, proximity of reach, fatigue...

Page 20: Mobile UX Design

Connected?

Page 21: Mobile UX Design

Define the app

Page 22: Mobile UX Design

Not a scaled down website

≠Option + “=” on a Mac will give you a ≠

Page 23: Mobile UX Design

Web app vs. native

Left to right: Twitter Mobile Web and Tweetie iPhone App

Page 24: Mobile UX Design

What’s the soul of the application?

Page 25: Mobile UX Design

Mobile is the main source of traffic.

Primary touchpoint?

Applications from left to right: Ramp Champ, Convertbot

Page 26: Mobile UX Design

Mobile app augments other experiences.

Companion

Applications from left to right: Starbucks, iHome

Page 27: Mobile UX Design

Same functionality but in an optimized way.

Optimized UI

Applications from left to right: Evernote, Gowalla

Page 28: Mobile UX Design

How, where, when is an app going to be used?Who is using the app?

What’s the use case?

Image via mindingthegaps.com

Page 29: Mobile UX Design

From icon to user interface

Be clear on the use

AOL Radio

Page 30: Mobile UX Design

Mobile apps can be a test bed for new features in other experiences. Design mobile first.

Mobile informs

Page 31: Mobile UX Design

What’s their technology ecology?iPhone? Android? Mac OS? Windows? Laptop?

Where are people coming from?

Page 32: Mobile UX Design

Think about design

Page 33: Mobile UX Design

Consider brand

Chipotle

Page 34: Mobile UX Design

There’s more than the UI. There’s the icon, startup screen, app store screens, etc.

Consider the whole experience

Page 35: Mobile UX Design

Left to right: Wordpress, Epicurious

Native UI vs.Custom UI

Page 36: Mobile UX Design

Android, iPhone, Web OS, etc. all have different UIs

Understand the different platforms

Page 37: Mobile UX Design

Review the HIG and other design guides

Page 38: Mobile UX Design

Areas of interaction need to be big enough to easily interact with.

Make it touchable

Page 39: Mobile UX Design

Design for the best experience in different orientations.

Orientation

Page 40: Mobile UX Design

Promote the primaryEliminate extra noise by subduing secondary actions.

Page 41: Mobile UX Design

Resolution is higher

Image via informationarchitects.jp

Page 42: Mobile UX Design

★ Metaphors can create a shallow learning curve, but aren’t always appropriate

★ Use metaphors that make sense★ People are coming from the web if not from another

device

Rethink the metaphor

Page 43: Mobile UX Design

How do people know to interact with things?

Think affordance

Page 44: Mobile UX Design

★ People enter with different gesture vocabularies.★ If you’re not sure, go default.★ You may be competing with other apps.

Use default gestures

Image via Touch Gesture Reference Guide on lukew.com

Page 45: Mobile UX Design

iPhone vs. iPad

Page 46: Mobile UX Design

On-the-go vs.on the couch.

Iamge on left via iLounge.com

Page 47: Mobile UX Design

Unlike a laptop, an iPad has no flip up screen to block interaction with others.

View from all sides

Scrabble image via engadget.com

Page 48: Mobile UX Design

Things can get lost on larger screens.More space means more chances to get lost.

Wide open spaces

Page 49: Mobile UX Design

Each screen has its own purpose.

Focussed views

Apps from left to right: NewsRack, Dictionary.com, Nike + iPod

Page 50: Mobile UX Design

Split views, limited views, etc. on the iPad

Single Views

Page 51: Mobile UX Design

Presents information that would normally be in a whole other view on a phone.

In-context Popovers

Page 52: Mobile UX Design

Another way to surface information without “leaving” the current view.

Modal Cards

Page 53: Mobile UX Design

Beyond design

Page 54: Mobile UX Design

Review designs★ Create an HTML website with hotspots and share

the URL for review★ Email images to be reviewed on a device

Page 55: Mobile UX Design

★ Get set up with the dev environment★ Test and run on the simulators★ Even better, load on to a device★ Even add assets and commit

Get as close as you can to the real thing

Page 56: Mobile UX Design

Test interactions★ Gestures and inputs★ UI overload/fatigue★ Scrolling and selecting★ Navigation flow

Image via scopeblog.stanford.edu

Page 57: Mobile UX Design

Physical prototypes★ Don’t have the physical device? Fake it.★ Made a wooden iPad to test before device was

available

Image via Jonathan Branam

Page 58: Mobile UX Design

Get user feedback★ Form a user testing plan★ Try to get “true” users★ Conduct your own “guerilla” user testing

Page 59: Mobile UX Design

Thanks!Questions?

effectiveui.com

@juansanchezjuanchez.com