Mobile UX Design

Boulder Digital WorksMay 27, 2010

Hello.Juan SanchezUX Architect at EffectiveUI

@juansanchezjuanchez.com

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

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

What is mobile?

Ah, technology

These are...

And these...

Are these?

More on the way

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

What does it take to create a great mobile experience?

Know the hardware

Best Buy makes a great device lab.

Form Factor

Screen Size

Images via gamesradar.com

Screen Resolution1024 x 768 at 132 ppi

480 x 320 at 163 ppi

800 x 480

480 x 320

Orientation

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

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

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

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

Connected?

Define the app

Not a scaled down website

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

Web app vs. native

Left to right: Twitter Mobile Web and Tweetie iPhone App

What’s the soul of the application?

Mobile is the main source of traffic.

Primary touchpoint?

Applications from left to right: Ramp Champ, Convertbot

Mobile app augments other experiences.

Companion

Applications from left to right: Starbucks, iHome

Same functionality but in an optimized way.

Optimized UI

Applications from left to right: Evernote, Gowalla

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

What’s the use case?

Image via mindingthegaps.com

From icon to user interface

Be clear on the use

AOL Radio

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

Mobile informs

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

Where are people coming from?

Think about design

Consider brand

Chipotle

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

Consider the whole experience

Left to right: Wordpress, Epicurious

Native UI vs.Custom UI

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

Understand the different platforms

Review the HIG and other design guides

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

Make it touchable

Design for the best experience in different orientations.

Orientation

Promote the primaryEliminate extra noise by subduing secondary actions.

Resolution is higher

Image via informationarchitects.jp

★ 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

How do people know to interact with things?

Think affordance

★ 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

iPhone vs. iPad

On-the-go vs.on the couch.

Iamge on left via iLounge.com

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

View from all sides

Scrabble image via engadget.com

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

Wide open spaces

Each screen has its own purpose.

Focussed views

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

Split views, limited views, etc. on the iPad

Single Views

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

In-context Popovers

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

Modal Cards

Beyond design

Review designs★ Create an HTML website with hotspots and share

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

★ 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

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

Image via scopeblog.stanford.edu

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

available

Image via Jonathan Branam

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

Thanks!Questions?

effectiveui.com

@juansanchezjuanchez.com