Building mobile apps and experiences that don't suck

  • 158 views
Uploaded on

Building mobile apps and experiences that don't suck

Building mobile apps and experiences that don't suck

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
158
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile experiences that don’t suckSusanIbachTechnical evangelistMicrosoft CanadaSibach@microsoft.com@hockeygeekgirl
  • 2. Today we will talk about:BASIC PRINCIPLES OF MOBILE APPDESIGNWHAT MAKES A MOBILE APP GREAT?IDEAS: THE CURRENCY OF AWESOMENESS
  • 3. BASIC PRINCIPLES OF MOBILE APPDESIGN
  • 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. 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. BASIC PRINCIPLES OF MOBILE APP DESIGNi’m localphones and tabletsknow where you are,they are local is acontext.
  • 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. BASIC PRINCIPLES OF MOBILE APP DESIGNLet’s state the obvious≠
  • 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. BASIC PRINCIPLES OF MOBILE APP DESIGNA desktop looks like this
  • 11. BASIC PRINCIPLES OF MOBILE APP DESIGNHere’s what we think mobile looks like
  • 12. BASIC PRINCIPLES OF MOBILE APP DESIGNHere’s what mobile really looks like
  • 13. BASIC PRINCIPLES OF MOBILE APP DESIGNYou might be thinking of an app like this
  • 14. BASIC PRINCIPLES OF MOBILE APP DESIGNThis might be the app your user needs
  • 15. BASIC PRINCIPLES OF MOBILE APP DESIGNOr maybe this is appropriate, it might be
  • 16. BASIC PRINCIPLES OF MOBILE APP DESIGNOn the desktop we have controls on topcontrols on the top,content at the bottom
  • 17. BASIC PRINCIPLES OF MOBILE APP DESIGNOn mobile this is reversedcontentcontrols
  • 18. BASIC PRINCIPLES OF MOBILE APP DESIGNWhat’s exactly is under my thumb?
  • 19. BASIC PRINCIPLES OF MOBILE APP DESIGNThink about thumb comfort zones
  • 20. BASIC PRINCIPLES OF MOBILE APP DESIGNCase study: foursquare for windows phone 7
  • 21. BASIC PRINCIPLES OF MOBILE APP DESIGNHey – down in the front!
  • 22. BASIC PRINCIPLES OF MOBILE APP DESIGNMay we suggest a simple fix…
  • 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. BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s law, translatedthe bigger and closer a target is, the easier itis to hit.well, duh.
  • 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. BASIC PRINCIPLES OF MOBILE APP DESIGNGrids are good for more than mappingdungeons in D&D
  • 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. WHAT MAKES A MOBILE APP GREAT?
  • 29. WHAT MAKES A MOBILE APP GREAToutside of genetics, cloning is boring≠qed≠ ≠≠∴
  • 30. WHAT MAKES A MOBILE APP GREATLeverage the platformpanorama in Windows Phonepivot in Windows Phoneshallow experienceexpansiveartisticdeeper experiencedata-driveninformational
  • 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. 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. 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. WHAT MAKES A MOBILE APP GREATMake gestures naturaletch-a-sketch: shaketo clear canvasCompass/spirit level:roll device in variousdirectionsguitar simulator:multi-finger forchords
  • 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. 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. IDEAS: THE CURRENCY OF AWESOMENESS
  • 38. IDEAS: THE CURRENCY OF AWESOMENESSRemember the three motivationsi’m multitaskingi’m locali’m bored
  • 39. IDEAS: THE CURRENCY OF AWESOMENESSMobile devices are personal, makethe apps personal too!
  • 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. 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. 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. 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. So there you have it!BASIC PRINCIPLES OF MOBILE APPDESIGNWHAT MAKES A MOBILE APP GREAT?IDEAS: THE CURRENCY OF AWESOMENESS
  • 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. Mobile experiences that don’t suckSusanIbachTechnical evangelistMicrosoft CanadaSibach@microsoft.com@hockeygeekgirl