How to build a kick-ass mobile experience

HOW TO BUILD A KICK-ASSMOBILE EXPERIENCE @MICHAELDICK

How many peopleare new to mobile?---Rid you of fear that mobile is different. Let’s start with the Similarities

Web designers know how to design for an evolving medium.

Web designers know how to design around technical constraints.

Web designers know how to design using similar tools.

HTML is HTMLCSS is CSS.JS is JS.Safari is Safari.PHP, Ruby, .NET...arestill the same. Web designers know how to test using similar tools.

Same input ﬁelds...but enhanced :)

Use gestures---Tap, Slide, Glide, Swipe A ﬁnger is still a ﬁnger...but enhanced :)

Mimic real world mental models.

Manipulateyourcontent SOURCE: TIDBITS.COM

SOURCE: 31THREE.COM

SOURCE: APPSFORGROWNUPS.COM

So what thehell is context? Context is King.

Everything iscontext.--But is that how wedefine “mobile”....on thego?

Are tablets mobile?

“The ipad is somuch moreintimate.”- Steve Jobs SOURCE: WIKIPEDIA

It’s hard to assume which context a user will be inBehaviors are changing

34% of users discover your site on a desktop... then follow up on mobile. SOURCE:YAHOO!

But that’s whythe web works.---It’s an universal platformthat’s accessible fromanywhere---Users are changing devicesmid-way through their experience.---That’s why it’s important for usas designers to ensure that wecontinue a familiar exp across all platforms. Access is becoming part of the user experience.

SO HOW DO I MAKE A KICK ASSUSER EXPERIENCE?!

GOAL #! A great mobile experience is one that gets the userwhat they want with no hassle.

What’spriority #1?---This is why the “Mobile first” works. Mobile forces us to have super human focus.

It’s aboutmaking aminimal exp.---How can you get the contentclosest to the user? It’s not about making a minature experience.

UX TIPSto tell your developer

Design and build for ﬂuid widths

Always give tappable areas a width and height of: 44x44

Disable autocorrectand autocapitalizein sensitive inputs Don’t let this happen to your users

Behind the scenes• Hide the address bar.• Hide the browser chrome.• Change the color of the status bar.• Include mobile icon.• Use proper input ﬁelds.

QATweet how kick-ass this was??! @michaeldick

http://jfrachi.blogspot.com.ar	25
http://jfrachi.blogspot.com	17
https://si0.twimg.com	6
http://us-w1.rockmelt.com	3
https://twimg0-a.akamaihd.net	3
http://staging.fellownation.com	2
http://www.onlydoo.com	1
http://iedev5	1
http://localhost.local	1

How to build a kick-ass mobile experience

by Michael Dick on Jul 18, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 59

Statistics

How to build a kick-ass mobile experience Presentation Transcript