Mobile experiences that don’t suckSusanIbachTechnical evangelistMicrosoft CanadaSibach@microsoft.com@hockeygeekgirl
Today we will talk about:BASIC PRINCIPLES OF MOBILE APPDESIGNWHAT MAKES A MOBILE APP GREAT?IDEAS: THE CURRENCY OF AWESOMEN...
BASIC PRINCIPLES OF MOBILE APPDESIGN
BASIC PRINCIPLES OF MOBILE APP DESIGNWhat motivates a mobile user to launch an app?mobile use cases derive from 3 basicmot...
BASIC PRINCIPLES OF MOBILE APP DESIGNi’m microtaskingmicrotasks are shortbursts of activity, oftendone between largertasks...
BASIC PRINCIPLES OF MOBILE APP DESIGNi’m localphones and tabletsknow where you are,they are 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 DESIGNLet’s state the obvious≠
BASIC PRINCIPLES OF MOBILE APP DESIGNA mobile device is not just a small pcyou can’t think of the phone as just a scaled-d...
BASIC PRINCIPLES OF MOBILE APP DESIGNA desktop looks like this
BASIC PRINCIPLES OF MOBILE APP DESIGNHere’s what we think mobile looks like
BASIC PRINCIPLES OF MOBILE APP DESIGNHere’s what mobile really looks like
BASIC PRINCIPLES OF MOBILE APP DESIGNYou might be thinking of an app like this
BASIC PRINCIPLES OF MOBILE APP DESIGNThis might be the app your user needs
BASIC PRINCIPLES OF MOBILE APP DESIGNOr maybe this is appropriate, it might be
BASIC PRINCIPLES OF MOBILE APP DESIGNOn the desktop we have controls on topcontrols on the top,content at the bottom
BASIC PRINCIPLES OF MOBILE APP DESIGNOn mobile this is reversedcontentcontrols
BASIC PRINCIPLES OF MOBILE APP DESIGNWhat’s exactly is under my thumb?
BASIC PRINCIPLES OF MOBILE APP DESIGNThink about thumb comfort 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…
BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s lawT: Average time taken to complete the movementa: Start/stop time of the dev...
BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s law, translatedthe bigger and closer a target is, the easier itis to hit.well,...
BASIC PRINCIPLES OF MOBILE APP DESIGNHow big is a finger, anyway?44 pixels / 7mm(iPhone minimum)26 pixels / 7mm(wp7 except...
BASIC PRINCIPLES OF MOBILE APP DESIGNGrids are good for more than mappingdungeons in D&D
BASIC PRINCIPLES OF MOBILE APP DESIGNMeet the new improved fittsquare!original fittsquaremade the mapbiggernice, big targe...
WHAT MAKES A MOBILE APP GREAT?
WHAT MAKES A MOBILE APP GREAToutside of genetics, cloning is boring≠qed≠ ≠≠∴
WHAT MAKES A MOBILE APP GREATLeverage the platformpanorama in Windows Phonepivot in Windows Phoneshallow experienceexpansi...
WHAT MAKES A MOBILE APP GREATDon’t fight the platformevery platform has its own unique “flavour” and styleconsistency of e...
WHAT MAKES A MOBILE APP GREATUse appropriate app function barsfor main tasks, use on-screen controlsFor often used tasks, ...
WHAT MAKES A MOBILE APP GREATBe cautious with gesturesremember that many users are reluctant to use themmany gestures can’...
WHAT MAKES A MOBILE APP GREATMake gestures naturaletch-a-sketch: shaketo clear canvasCompass/spirit level:roll device in v...
WHAT MAKES A MOBILE APP GREATContext affects user expectations:What happens when you shake?urban spoon: shake means random...
WHAT MAKES A MOBILE APP GREATNo-one likes typing on mobile keyboardstext input is a pain in the best of circumstances, so ...
IDEAS: THE CURRENCY OF AWESOMENESS
IDEAS: THE CURRENCY OF AWESOMENESSRemember the three motivationsi’m multitaskingi’m locali’m bored
IDEAS: THE CURRENCY OF AWESOMENESSMobile devices are personal, makethe apps personal too!
IDEAS: THE CURRENCY OF AWESOMENESSHelp users learnsolitaire was written to help familiarize people withmouse techniquemayb...
IDEAS: THE CURRENCY OF AWESOMENESSPut a twist on a classichere’s a dirty little secret: fighting games like street fighter...
IDEAS: THE CURRENCY OF AWESOMENESSHelp users be awesome in the momentthink of games like rock band and dancecentral, which...
IDEAS: THE CURRENCY OF AWESOMENESSthe design philosophy of great apps……isn’t all that different across the competitive mob...
So there you have it!BASIC PRINCIPLES OF MOBILE APPDESIGNWHAT MAKES A MOBILE APP GREAT?IDEAS: THE CURRENCY OF AWESOMENESS
Resources for mobile development• BuildForWindows.ca – for Windows 8• Dev.windowsphone.com – for Windows Phone• Connecting...
Mobile experiences that don’t suckSusanIbachTechnical evangelistMicrosoft CanadaSibach@microsoft.com@hockeygeekgirl
Upcoming SlideShare
Loading in...5
×

Building mobile apps and experiences that don't suck

214

Published on

Building mobile apps and experiences that don't suck

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

  • Be the first to like this

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

No notes for slide

Building mobile apps and experiences that don't suck

  1. 1. Mobile experiences that don’t suckSusanIbachTechnical evangelistMicrosoft CanadaSibach@microsoft.com@hockeygeekgirl
  2. 2. Today we will talk about:BASIC PRINCIPLES OF MOBILE APPDESIGNWHAT MAKES A MOBILE APP GREAT?IDEAS: THE CURRENCY OF AWESOMENESS
  3. 3. BASIC PRINCIPLES OF MOBILE APPDESIGN
  4. 4. BASIC PRINCIPLES OF MOBILE APP DESIGNWhat motivates a mobile user to launch an app?mobile use cases derive from 3 basicmotivationsi’m microtaskingi’m locali’m bored
  5. 5. BASIC PRINCIPLES OF MOBILE APP DESIGNi’m microtaskingmicrotasks are shortbursts of activity, oftendone between largertasks.idea capture is an example of microtasking.TM & © Warner Bros. Entertainment, Inc.
  6. 6. BASIC PRINCIPLES OF MOBILE APP DESIGNi’m localphones and tabletsknow where you are,they are local is acontext.
  7. 7. BASIC PRINCIPLES OF MOBILE APP DESIGNi’m boredgames account for themajority of popularpaid apps across allmobile platforms.any app (game orother) that can fill atime gap addictivelyand with fun is largelysuccessful.
  8. 8. BASIC PRINCIPLES OF MOBILE APP DESIGNLet’s state the obvious≠
  9. 9. BASIC PRINCIPLES OF MOBILE APP DESIGNA mobile device is not just a small pcyou 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 DESIGNA desktop looks like this
  11. 11. BASIC PRINCIPLES OF MOBILE APP DESIGNHere’s what we think mobile looks like
  12. 12. BASIC PRINCIPLES OF MOBILE APP DESIGNHere’s what mobile really looks like
  13. 13. BASIC PRINCIPLES OF MOBILE APP DESIGNYou might be thinking of an app like this
  14. 14. BASIC PRINCIPLES OF MOBILE APP DESIGNThis might be the app your user needs
  15. 15. BASIC PRINCIPLES OF MOBILE APP DESIGNOr maybe this is appropriate, it might be
  16. 16. BASIC PRINCIPLES OF MOBILE APP DESIGNOn the desktop we have controls on topcontrols on the top,content at the bottom
  17. 17. BASIC PRINCIPLES OF MOBILE APP DESIGNOn mobile this is reversedcontentcontrols
  18. 18. BASIC PRINCIPLES OF MOBILE APP DESIGNWhat’s exactly is under my thumb?
  19. 19. BASIC PRINCIPLES OF MOBILE APP DESIGNThink about thumb comfort zones
  20. 20. BASIC PRINCIPLES OF MOBILE APP DESIGNCase study: foursquare for windows phone 7
  21. 21. BASIC PRINCIPLES OF MOBILE APP DESIGNHey – down in the front!
  22. 22. BASIC PRINCIPLES OF MOBILE APP DESIGNMay we suggest a simple fix…
  23. 23. BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s lawT: Average time taken to complete the movementa: Start/stop time of the deviceb: Inherent speed of the deviceD: Distance from the starting point to target centerW: Width of target, measured along axis of motion
  24. 24. BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s law, translatedthe bigger and closer a target is, the easier itis to hit.well, duh.
  25. 25. BASIC PRINCIPLES OF MOBILE APP DESIGNHow big is a finger, anyway?44 pixels / 7mm(iPhone minimum)26 pixels / 7mm(wp7 exceptionalminimum)34 pixels / 9mm(general wp7 minimum)
  26. 26. BASIC PRINCIPLES OF MOBILE APP DESIGNGrids are good for more than mappingdungeons in D&D
  27. 27. BASIC PRINCIPLES OF MOBILE APP DESIGNMeet the new improved fittsquare!original fittsquaremade the mapbiggernice, big targetsfor oft-usedtasks; the mostimportant taskgets the biggesttarget
  28. 28. WHAT MAKES A MOBILE APP GREAT?
  29. 29. WHAT MAKES A MOBILE APP GREAToutside of genetics, cloning is boring≠qed≠ ≠≠∴
  30. 30. WHAT MAKES A MOBILE APP GREATLeverage the platformpanorama in Windows Phonepivot in Windows Phoneshallow experienceexpansiveartisticdeeper experiencedata-driveninformational
  31. 31. WHAT MAKES A MOBILE APP GREATDon’t fight the platformevery platform has its own unique “flavour” and styleconsistency of experience between native activities and 3rd partyapps enjoyable for userpredictability is not a dirty word - intuitive user interfaces areusually better suited to user experience
  32. 32. WHAT MAKES A MOBILE APP GREATUse appropriate app function barsfor main tasks, use on-screen controlsFor often used tasks, use the app function barfor rarer tasks, use a secondary menu
  33. 33. WHAT MAKES A MOBILE APP GREATBe cautious with gesturesremember that many users are reluctant to use themmany gestures can’t be used in one-handed scenariosconsider offering single-digit alternatives to gestures(this does not mean replace gestures in your app)gestures need to be thumb-friendly
  34. 34. WHAT MAKES A MOBILE APP GREATMake gestures naturaletch-a-sketch: shaketo clear canvasCompass/spirit level:roll device in variousdirectionsguitar simulator:multi-finger forchords
  35. 35. WHAT MAKES A MOBILE APP GREATContext affects user expectations:What happens when you shake?urban spoon: shake means randomize the resultfacebook: refresh contentpcalc: clear the current calculationetch-a-sketch: clear the canvas
  36. 36. WHAT MAKES A MOBILE APP GREATNo-one likes typing on mobile keyboardstext input is a pain in the best of circumstances, so keep it to a minimum and helpusers as much as possible
  37. 37. IDEAS: THE CURRENCY OF AWESOMENESS
  38. 38. IDEAS: THE CURRENCY OF AWESOMENESSRemember the three motivationsi’m multitaskingi’m locali’m bored
  39. 39. IDEAS: THE CURRENCY OF AWESOMENESSMobile devices are personal, makethe apps personal too!
  40. 40. IDEAS: THE CURRENCY OF AWESOMENESSHelp users learnsolitaire was written to help familiarize people withmouse techniquemaybe it’s time to write a game to familiarizepeople with phone gestures!
  41. 41. IDEAS: THE CURRENCY OF AWESOMENESSPut a twist on a classichere’s a dirty little secret: fighting games like street fighter and mortal kombatare essentially rock-paper-scissors.
  42. 42. IDEAS: THE CURRENCY OF AWESOMENESSHelp users be awesome in the momentthink of games like rock band and dancecentral, which give people the chance to bestarsthink of apps that let sports fans call up players’stats while they’re at the gamethink of the kitchen, a place typically without acomputer, but a need for info available on thenet
  43. 43. 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 interfacesdeal with complex tasks, but insulate us from that complexitymake accomplishing our goals easierhelp users be awesome in the moment
  44. 44. So there you have it!BASIC PRINCIPLES OF MOBILE APPDESIGNWHAT MAKES A MOBILE APP GREAT?IDEAS: THE CURRENCY OF AWESOMENESS
  45. 45. Resources for mobile development• BuildForWindows.ca – for Windows 8• Dev.windowsphone.com – for Windows Phone• Connecting with Microsoft Canada?• Join the discussion on Linked In “Canadian Developer Connection”
  46. 46. Mobile experiences that don’t suckSusanIbachTechnical evangelistMicrosoft CanadaSibach@microsoft.com@hockeygeekgirl
  1. A particular slide catching your eye?

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

×