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.any app (game orother) that can fill atime gap addictivelyand with fun is largelysuccessful.
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-down desktop – if you do, you’remissing the point (and a lot of nuances)
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 deviceb: Inherent speed of the deviceD: Distance from the starting point to target centerW: Width of target, measured along axis of motion
BASIC PRINCIPLES OF MOBILE APP DESIGNfitt’s law, translatedthe bigger and closer a target is, the easier itis to hit.well, duh.
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)
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 targetsfor oft-usedtasks; the mostimportant taskgets the biggesttarget
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 experienceexpansiveartisticdeeper experiencedata-driveninformational
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
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
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
WHAT MAKES A MOBILE APP GREATMake gestures naturaletch-a-sketch: shaketo clear canvasCompass/spirit level:roll device in variousdirectionsguitar simulator:multi-finger forchords
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
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
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 techniquemaybe it’s time to write a game to familiarizepeople with phone gestures!
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.
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
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
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 with Microsoft Canada?• Join the discussion on Linked In “Canadian Developer Connection”
Mobile experiences that don’t suckSusanIbachTechnical evangelistMicrosoft CanadaSibach@microsoft.com@hockeygeekgirl