building mobile experiencesthat don’t suckFrédéric Developers EvangelistHarper Microsoft Canada         @fharper | outofco...
AGENDAwhat we will talk about today              BASIC PRINCIPLES OF MOBILE APP              DESIGN              WHAT MAKE...
BASIC PRINCIPLES OF MOBILE APP DESIGNthe freshman primer
BASIC PRINCIPLES OF MOBILE APP DESIGNmotivations                                Every mobile use case can derive          ...
BASIC PRINCIPLES OF MOBILE APP DESIGNi’m microtaskingmicrotasks are short          idea capture is an example of microtask...
BASIC PRINCIPLES OF MOBILE APP DESIGNi’m localphones are devices ofconvenience andcontext and local is acontext.
BASIC PRINCIPLES OF MOBILE APP DESIGNi’m boredgames account for themajority of popularpaid apps across allmobile platforms...
BASIC PRINCIPLES OF MOBILE APP DESIGNstating the obvious                 ≠
BASIC PRINCIPLES OF MOBILE APP DESIGNpc vs mobileyou can’t think of the phone as just a scaled-down desktop – if you do, y...
BASIC PRINCIPLES OF MOBILE APP DESIGNwhat a desktop app looks like
BASIC PRINCIPLES OF MOBILE APP DESIGNwhat we think mobile experiences looks like
BASIC PRINCIPLES OF MOBILE APP DESIGNwhat mobile experiences really look like
BASIC PRINCIPLES OF MOBILE APP DESIGNthe app we’re thinking of building
BASIC PRINCIPLES OF MOBILE APP DESIGNthe app our users need
BASIC PRINCIPLES OF MOBILE APP DESIGNbut there are times when this is appropriate
BASIC PRINCIPLES OF MOBILE APP DESIGNdesktop and web application “mullet”                                        business ...
BASIC PRINCIPLES OF MOBILE APP DESIGNphone (and most tablet) apps are the “reversemullet”                            party...
BASIC PRINCIPLES OF MOBILE APP DESIGNdrinking our own koolaid in windows phone 7.5 platform, we changed the position of th...
BASIC PRINCIPLES OF MOBILE APP DESIGNunder my thumb…
BASIC PRINCIPLES OF MOBILE APP DESIGNcomfort zones
BASIC PRINCIPLES OF MOBILE APP DESIGNcase study: foursquare for windows phone 7
BASIC PRINCIPLES OF MOBILE APP DESIGNhey – down in the front!
BASIC PRINCIPLES OF MOBILE APP DESIGNmay we suggest a simple fix…
Hockey and mullets go hand in           hand
Offside!
A simple change…
Much better!
BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s law                           𝐷     𝑇 = 𝑎 + 𝑏 ∙ 𝑙𝑜𝑔2 (1 + )                   ...
BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s law, translated                           𝐷     𝑇 = 𝑎 + 𝑏 ∙ 𝑙𝑜𝑔2 (1 + )       ...
BASIC PRINCIPLES OF MOBILE APP DESIGNso, how big is a finger, anyway?                                            26 pixels...
BASIC PRINCIPLES OF MOBILE APP DESIGNladies and gentlemen, introducing fittsquare!       original                   fittsq...
WHAT MAKES A MOBILE APP GREATengineering meets design
WHAT MAKES A MOBILE APP GREAToutside of genetics, cloning is boring            ≠                   ≠       ≠              ...
WHAT MAKES A MOBILE APP GREATdifferentiate your experiencepanorama in wp7                                shallow experienc...
WHAT MAKES A MOBILE APP GREATstay within the paradigm of the platform         every platform has its own unique “flavour” ...
WHAT MAKES A MOBILE APP GREATapp function bars                       for main tasks, use on-screen controls               ...
WHAT MAKES A MOBILE APP GREATgestures – packaged confusion            remember that many users are reluctant to use them  ...
WHAT MAKES A MOBILE APP GREATexperience informs gestures etch-a-sketch: shake   Compass/spirit level:    guitar simulator:...
WHAT MAKES A MOBILE APP GREATseparate apps, separate meaning for shake            urban spoon: shake means to randomize th...
WHAT MAKES A MOBILE APP GREATpaving the cowpaths                                design gesture interactions               ...
WHAT MAKES A MOBILE APP GREATinput – users don’t want to deal with ittext input is a pain in the best of circumstances, so...
IDEAS: THE CURRENCY OF AWESOMENESSmaking users awesome in the moment
IDEAS: THE CURRENCY OF AWESOMENESSremember the three motivations                    i’m multitasking                    i’...
IDEAS: THE CURRENCY OF AWESOMENESSmobile is the seventh mass mediaaccording to tomi ahonen, the seven mass media are, in c...
IDEAS: THE CURRENCY OF AWESOMENESSmobile means personal
IDEAS: THE CURRENCY OF AWESOMENESStake an existing concept and tweak it                        many social networking apps...
IDEAS: THE CURRENCY OF AWESOMENESSsometimes all you need is a disguisehere’s a dirty little secret: fighting games like st...
IDEAS: THE CURRENCY OF AWESOMENESSthink you could write the next solitaire?                        solitaire was written t...
IDEAS: THE CURRENCY OF AWESOMENESSthe design philosophy of great apps……isn’t all that different across the competitive mob...
IDEAS: THE CURRENCY OF AWESOMENESShelp users be awesome in the moment                            think of games like rock ...
BUILDING MOBILE EXPERIENCES THAT DON’T SUCKQuestion?            Frédéric Harper            Developers Evangelist @ Microso...
Upcoming SlideShare
Loading in...5
×

Confoo 2012-03-01 - Building mobile experiences that don't suck

883

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
883
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Confoo 2012-03-01 - Building mobile experiences that don't suck

  1. 1. building mobile experiencesthat don’t suckFrédéric Developers EvangelistHarper Microsoft Canada @fharper | outofcomfortzone.net
  2. 2. AGENDAwhat we will talk about today BASIC PRINCIPLES OF MOBILE APP DESIGN WHAT MAKES A MOBILE APP GREAT? IDEAS: THE CURRENCY OF AWESOMENESS
  3. 3. BASIC PRINCIPLES OF MOBILE APP DESIGNthe freshman primer
  4. 4. BASIC PRINCIPLES OF MOBILE APP DESIGNmotivations Every mobile use case can derive from 3 basic motivations i’m microtasking i’m local i’m bored
  5. 5. BASIC PRINCIPLES OF MOBILE APP DESIGNi’m microtaskingmicrotasks are short idea capture is an example of microtasking.bursts of activity, oftendone between largertasks. TM & © Warner Bros. Entertainment, Inc.
  6. 6. BASIC PRINCIPLES OF MOBILE APP DESIGNi’m localphones are devices ofconvenience andcontext and local is acontext.
  7. 7. BASIC PRINCIPLES OF MOBILE APP DESIGNi’m boredgames account for themajority of popularpaid apps across allmobile platforms.essentially, any app(game or otherwise)that can fill a time gapaddictively and withfun is largelysuccessful.
  8. 8. BASIC PRINCIPLES OF MOBILE APP DESIGNstating the obvious ≠
  9. 9. BASIC PRINCIPLES OF MOBILE APP DESIGNpc vs mobileyou can’t think of the phone as just a scaled-down desktop – if you do, you’remissing the point (and a lot of nuances)
  10. 10. BASIC PRINCIPLES OF MOBILE APP DESIGNwhat a desktop app looks like
  11. 11. BASIC PRINCIPLES OF MOBILE APP DESIGNwhat we think mobile experiences looks like
  12. 12. BASIC PRINCIPLES OF MOBILE APP DESIGNwhat mobile experiences really look like
  13. 13. BASIC PRINCIPLES OF MOBILE APP DESIGNthe app we’re thinking of building
  14. 14. BASIC PRINCIPLES OF MOBILE APP DESIGNthe app our users need
  15. 15. BASIC PRINCIPLES OF MOBILE APP DESIGNbut there are times when this is appropriate
  16. 16. BASIC PRINCIPLES OF MOBILE APP DESIGNdesktop and web application “mullet” business on the front, party in the back <translation> controls on the top, content at the bottom </translation>
  17. 17. BASIC PRINCIPLES OF MOBILE APP DESIGNphone (and most tablet) apps are the “reversemullet” party business
  18. 18. BASIC PRINCIPLES OF MOBILE APP DESIGNdrinking our own koolaid in windows phone 7.5 platform, we changed the position of the url textbox to the bottom. wp7 wp7.5
  19. 19. BASIC PRINCIPLES OF MOBILE APP DESIGNunder my thumb…
  20. 20. BASIC PRINCIPLES OF MOBILE APP DESIGNcomfort zones
  21. 21. BASIC PRINCIPLES OF MOBILE APP DESIGNcase study: foursquare for windows phone 7
  22. 22. BASIC PRINCIPLES OF MOBILE APP DESIGNhey – down in the front!
  23. 23. BASIC PRINCIPLES OF MOBILE APP DESIGNmay we suggest a simple fix…
  24. 24. Hockey and mullets go hand in hand
  25. 25. Offside!
  26. 26. A simple change…
  27. 27. Much better!
  28. 28. BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s law 𝐷 𝑇 = 𝑎 + 𝑏 ∙ 𝑙𝑜𝑔2 (1 + ) 𝑊 T: Average time taken to complete the movement a: Start/stop time of the device b: Inherent speed of the device D: Distance from the starting point to target center W: Width of target, measured along axis of motion
  29. 29. BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s law, translated 𝐷 𝑇 = 𝑎 + 𝑏 ∙ 𝑙𝑜𝑔2 (1 + ) 𝑊 the bigger and closer a target is, the easier it is to hit. well, duh.
  30. 30. BASIC PRINCIPLES OF MOBILE APP DESIGNso, how big is a finger, anyway? 26 pixels / 7mm 44 pixels / 7mm (wp7 exceptional (iPhone minimum) minimum) 34 pixels / 9mm (general wp7 minimum)
  31. 31. BASIC PRINCIPLES OF MOBILE APP DESIGNladies and gentlemen, introducing fittsquare! original fittsquare made the map bigger nice, big targets for oft-used tasks; the most important task gets the biggest target
  32. 32. WHAT MAKES A MOBILE APP GREATengineering meets design
  33. 33. WHAT MAKES A MOBILE APP GREAToutside of genetics, cloning is boring ≠ ≠ ≠ ∴ ≠ qed
  34. 34. WHAT MAKES A MOBILE APP GREATdifferentiate your experiencepanorama in wp7 shallow experience expansive artistic pivot in wp7 deeper experience data-driven informational
  35. 35. WHAT MAKES A MOBILE APP GREATstay within the paradigm of the platform every platform has its own unique “flavour” and style consistency of experience between native activities and 3rd party apps enjoyable for user predictability is not a dirty word - intuitive user interfaces are usually better suited to user experience
  36. 36. WHAT MAKES A MOBILE APP GREATapp function bars for main tasks, use on-screen controls For oft-used tasks, use the app function bar for rarer tasks, use a secondary menu
  37. 37. WHAT MAKES A MOBILE APP GREATgestures – packaged confusion remember that many users are reluctant to use them many gestures can’t be used in one-handed scenarios consider offering single-digit alternatives to gestures (this does not mean replace gestures in your app) gestures need to be thumb-friendly
  38. 38. WHAT MAKES A MOBILE APP GREATexperience informs gestures etch-a-sketch: shake Compass/spirit level: guitar simulator: to clear canvas roll device in various multi-finger for directions chords
  39. 39. WHAT MAKES A MOBILE APP GREATseparate apps, separate meaning for shake urban spoon: shake means to randomize the result facebook: load new content pcalc: clear the current calculation etch-a-sketch: clear the canvas
  40. 40. WHAT MAKES A MOBILE APP GREATpaving the cowpaths design gesture interactions according to patterns people already follow watch for: unsuccessful gesture attempts Repetitive, time- consuming actions
  41. 41. WHAT MAKES A MOBILE APP GREATinput – users don’t want to deal with ittext input is a pain in the best of circumstances, so give users the quickest way toget out of it.
  42. 42. IDEAS: THE CURRENCY OF AWESOMENESSmaking users awesome in the moment
  43. 43. IDEAS: THE CURRENCY OF AWESOMENESSremember the three motivations i’m multitasking i’m local i’m bored
  44. 44. IDEAS: THE CURRENCY OF AWESOMENESSmobile is the seventh mass mediaaccording to tomi ahonen, the seven mass media are, in chronological order ofcreation: print sound recordings cinema radio television internet mobile
  45. 45. IDEAS: THE CURRENCY OF AWESOMENESSmobile means personal
  46. 46. IDEAS: THE CURRENCY OF AWESOMENESStake an existing concept and tweak it many social networking apps are about helping you find out where your friends are, presumably so you can join them what about a social networking app that helped you avoid people, such as your ex? I give you…ex-factor!
  47. 47. IDEAS: THE CURRENCY OF AWESOMENESSsometimes all you need is a disguisehere’s a dirty little secret: fighting games like street fighter and mortal kombatare essentially rock-paper-scissors.
  48. 48. IDEAS: THE CURRENCY OF AWESOMENESSthink you could write the next solitaire? solitaire was written to help familiarize people with mouse technique maybe it’s time to write a game to familiarize people with phone gestures!
  49. 49. IDEAS: THE CURRENCY OF AWESOMENESSthe design philosophy of great apps……isn’t all that different across the competitive mobile platforms.great apps: don’t make us think about their interfaces deal with complex tasks, but insulate us from that complexity make accomplishing our goals easier help users be awesome in the moment
  50. 50. IDEAS: THE CURRENCY OF AWESOMENESShelp users be awesome in the moment think of games like rock band and dance central, which give people the chance to be stars think of apps that let sports fans call up players’ stats while they’re at the game think of the kitchen, a place typically without a computer, but a need for info available on the net
  51. 51. BUILDING MOBILE EXPERIENCES THAT DON’T SUCKQuestion? Frédéric Harper Developers Evangelist @ Microsoft Canada fredh@microsoft.com @fharper http://webnotwar.ca http://outofcomfortzone.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×