Upload
juan-sanchez
View
13.687
Download
1
Embed Size (px)
DESCRIPTION
An overview presentation on designing mobile user experiences.
Citation preview
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