Josh Jeffryes, a lead UI engineer, shares three things he learned about mobile UX the hard way when designing the BusyEvent mobile app. Thing 1 is to do less rather than more and keep the app focused on 1-3 core functions. Thing 2 is to build the app like a simple, robust website from the 1990s that works on any device rather than using complex designs from modern websites. Thing 3 is that while a simple, optimized design is good, it also needs refinement and polish to build user trust that the app is well-made and will work properly.

1. Three Things I Learned
About Mobile UX

2. Three Things I Learned
About Mobile UX
The Hard Way

4. Ouch.

5. But first!

6. Who is this guy?
Josh Jeffryes
Lead UI Engineer

7. Who is this guy?
Josh Jeffryes
Lead UI Engineer

8. Who is this guy?
Josh Jeffryes
previously
Director of Creative Development

9. I designed the BusyEvent mobile
BeLinker app, and I’m going to show
you what I learned in the process.

10. Thing 1:
>

11. Thing 1:
• Do less, not more.

12. Thing 1:
• Do less, not more.
• On a phone, that means a lot less.

13. Our Original Concept

14. Our Original Concept
Should have
been 3 to 5
screens. Tops.

15. But a ground breaking, cutting
edge, industry disrupting app
has to do a lot, right?

16. But a ground breaking, cutting
edge, industry disrupting app
has to do a lot, right?
Like this.

17. But a ground breaking, cutting
edge, industry disrupting app
has to do a lot, right?
Or this!

18. But a ground breaking, cutting
edge, industry disrupting app
has to do a lot, right?
My God,
it’s full of
features.

19. But a ground breaking, cutting
edge, industry disrupting app
has to do a lot, right?
My God,
it’s full of
features.
We’ll make TechCrunch
for sure!

20. No.

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

22. Like this.

23. Us
e the
poi
nty
end
.
Like this.

24. If users have to think,
you have failed.

25. Thing 2:
>

26. Thing 2:
• Build your app like a website

27. Thing 2:
• Build your app like a website
• From 1999

29. This worked
great…
If you had an
iPhone.

30. Horrible Things
Wrong with this
Design:
• Fixed width
• Floats everywhere
• Lots of images
• Iconitis
• Teensy weensy little
words

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

32. If you want your mobile web
app to work on most phones:
(or most tablets, watches, laptops,
kiosks, or anything else)

33. 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

34. If you want your mobile web
app to work on most phones:
• Use percentage widths
• No floats anywhere Wor ks on any
thing,
ze!
any screen si
• Big text
• Almost no images
• Center everything

35. Many people still use this.

36. Many people still use this. Or this.

37. It’s not their fault.

38. One massive overhaul
later…

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

41. • Less buttons
• More focus
• Worked all the
way back to
HTML 1 with
no CSS
• Still worked
without
javascript
• Any screen size

42. But…

43. Thing 3:
>

44. Thing 3:
• A dead-simple web app with ultra
optimized code is great…

45. Thing 3:
• A dead-simple web app with ultra
optimized code is great…
• As long as it’s shiny.

46. Refinement = Trust

47. 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

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

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

50. Our final redesign

52. • Much shinier
• HTML5
• CSS3
• Progressive
Enhancement
• Laser focused
• No extra
information or
options

53. Win!

54. Conclusion
Thing 1: Keep it focused
Thing 2: Simple, robust layout
Thing 3: Make it shiny

55. Josh Jeffryes
Lead UI Engineer
@jjeffryes