Three Things I Learned About Mobile UX

The Hard Way

Three Things I Learned About Mobile UX

Ouch.

But first!

Who is this guy?

Josh JeffryesLead UI Engineer

Who is this guy?

Josh JeffryesLead UI Engineer

Director of Creative Development

Who is this guy?

Josh Jeffryespreviously

I designed the BusyEvent mobile BeLinker app, and I’m going to show

you what I learned in the process.

Thing 1:

>

• Do less, not more.

Thing 1:

• Do less, not more.

• On a phone, that means a lot less.

Thing 1:

Our Original Concept

Our Original Concept

Should have been 3 to 5 screens. Tops.

But a ground breaking, cutting edge, industry disrupting app

has to do a lot, right?

Like this.

But a ground breaking, cutting edge, industry disrupting app

has to do a lot, right?

Or this!

But a ground breaking, cutting edge, industry disrupting app

has to do a lot, right?

My God, it’s full of features.

But a ground breaking, cutting edge, industry disrupting app

has to do a lot, right?

We’ll make TechCrunchfor sure!

But a ground breaking, cutting edge, industry disrupting app

has to do a lot, right?

My God, it’s full of features.

No.

On a phone, users want to do 1 to 3 things with an app.

Like this.

Like this.

Use the pointy end.

If users have to think,you have failed.

Thing 2:

>

• Build your app like a website

Thing 2:

• Build your app like a website

• From 1999

Thing 2:

This worked great…

If you had an iPhone.

Horrible Things Wrong with this Design:

• Fixed width• Floats everywhere• Lots of images• Iconitis• Teensy weensy little

words

If you want your mobile web app to work on most phones:

If you want your mobile web app to work on most phones:

(or most tablets, watches, laptops, kiosks, or anything else)

• Use percentage widths

• No floats anywhere

• Big text

• Almost no images

• Center everything

If you want your mobile web app to work on most phones:

• Use percentage widths

• No floats anywhere

• Big text

• Almost no images

• Center everything

If you want your mobile web app to work on most phones:

Works on anything,

any screen size!

Many people still use this.

Or this.Many people still use this.

It’s not their fault.

One massive overhaul later…

This worked on almost every phone, even really, really old Blackberry and Palm phones.

• Less buttons• More focus• Worked all the

way back to HTML 1 with no CSS

• Still worked without javascript

• Any screen size

But…

Thing 3:

>

• A dead-simple web app with ultra optimized code is great…

Thing 3:

• A dead-simple web app with ultra optimized code is great…

• As long as it’s shiny.

Thing 3:

Refinement = Trust

Refinement = Trust

• A refined design implies your app is well made

• The user assumes if it’s well made, it must work

• That means they’ll tolerate any quirks more

This looks like junk. If I can’t figure it out, it must broken.

Oooooh… so shiny. If I can’t figure it out, I must be an idiot.

Our final redesign

• Much shinier• HTML5• CSS3• Progressive

Enhancement• Laser focused• No extra

information or options

Win!

Conclusion

Thing 1: Keep it focused

Thing 2: Simple, robust layout

Thing 3: Make it shiny

55

Josh JeffryesLead UI Engineer

@jjeffryes