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.essentially, any app(game or otherwise)that can fill a time gapaddictively and withfun is largelysuccessful.
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, you’remissing the point (and a lot of nuances)
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 on the front, party in the back <translation> controls on the top, content at the bottom </translation>
BASIC PRINCIPLES OF MOBILE APP DESIGNphone (and most tablet) apps are the “reversemullet” party business
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
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…
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
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.
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)
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
WHAT MAKES A MOBILE APP GREATengineering meets design
WHAT MAKES A MOBILE APP GREAToutside of genetics, cloning is boring ≠ ≠ ≠ ∴ ≠ qed
WHAT MAKES A MOBILE APP GREATdifferentiate your experiencepanorama in wp7 shallow experience expansive artistic pivot in wp7 deeper experience data-driven informational
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
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
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
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
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
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
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.
IDEAS: THE CURRENCY OF AWESOMENESSmaking users awesome in the moment
IDEAS: THE CURRENCY OF AWESOMENESSremember the three motivations i’m multitasking i’m local i’m bored
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
IDEAS: THE CURRENCY OF AWESOMENESSmobile means personal
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!
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.
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!
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
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
BUILDING MOBILE EXPERIENCES THAT DON’T SUCKQuestion? Frédéric Harper Developers Evangelist @ Microsoft Canada firstname.lastname@example.org @fharper http://webnotwar.ca http://outofcomfortzone.net
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.