HOW TO BUILDA KICK-ASS

MOBILE EXPERIENCE

@MICHAELDICK

Let’s start with the

Similarities

How many people are new to mobile?---Rid you of fear that mobile is different.

Web designers know how to designfor an evolving medium.

Web designers know how to designaround technical constraints.

Web designers know how to designusing similar tools.

Web designers know how to testusing similar tools.

HTML is HTMLCSS is CSS.JS is JS.Safari is Safari.PHP, Ruby, .NET...are still the same.

Same input fields...but enhanced :)

A finger is still a finger...but enhanced :)

Use gestures---Tap, Slide, Glide, Swipe

Mimic real world mental models.

SOURCE: TIDBITS.COM

Manipulateyourcontent

SOURCE: 31THREE.COM

SOURCE: APPSFORGROWNUPS.COM

Context is King.

So what the hell is context?

Everything is context.--But is that how we define “mobile”....on the go?

Are tablets mobile?

SOURCE: WIKIPEDIA

“The ipad is somuch more intimate.”- Steve Jobs

Behaviors are changing

It’s hard to assume which context a user will be in

34% of users discover yoursite on a desktop...

then follow up on mobile.

SOURCE: YAHOO!

Access is becoming partof the user experience.

But that’s why the web works.---It’s an universal platformthat’s accessible from anywhere

---Users are changing devicesmid-way through their experience.

---That’s why it’s important for usas designers to ensure that wecontinue a familiar exp acrossall platforms.

SOHOW DO I MAKE

A KICK ASSUSER EXPERIENCE?!

GOAL #!

A great mobile experienceis one that gets the user

what they want with no hassle.

Mobile forces us to have super human focus.

What’spriority #1?---This is why the “Mobile first” works.

It’s not about makinga minature experience.

It’s about making a minimal exp.---How can you get the content closest to the user?

UX TIPSto tell yourdeveloper

Design and build for fluid widths

Always give tappable areasa width and height of:

44x44

Don’t let this happento your users

Disable autocorrect and autocapitalize in sensitive inputs

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

QATweet how kick-ass this was??!

@michaeldick