Post on 15-Jan-2015
description
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