1. building mobile experiencesthat don’t suckFrédéric Developers EvangelistHarper Microsoft Canada @fharper | outofcomfortzone.net
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. BASIC PRINCIPLES OF MOBILE APP DESIGNthe freshman primer
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. 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. BASIC PRINCIPLES OF MOBILE APP DESIGNi’m localphones are devices ofconvenience andcontext and local is acontext.
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. BASIC PRINCIPLES OF MOBILE APP DESIGNstating the obvious ≠
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. BASIC PRINCIPLES OF MOBILE APP DESIGNwhat a desktop app looks like
11. BASIC PRINCIPLES OF MOBILE APP DESIGNwhat we think mobile experiences looks like
12. BASIC PRINCIPLES OF MOBILE APP DESIGNwhat mobile experiences really look like
13. BASIC PRINCIPLES OF MOBILE APP DESIGNthe app we’re thinking of building
14. BASIC PRINCIPLES OF MOBILE APP DESIGNthe app our users need
15. BASIC PRINCIPLES OF MOBILE APP DESIGNbut there are times when this is appropriate
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. BASIC PRINCIPLES OF MOBILE APP DESIGNphone (and most tablet) apps are the “reversemullet” party business
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. BASIC PRINCIPLES OF MOBILE APP DESIGNunder my thumb…
20. BASIC PRINCIPLES OF MOBILE APP DESIGNcomfort zones
21. BASIC PRINCIPLES OF MOBILE APP DESIGNcase study: foursquare for windows phone 7
22. BASIC PRINCIPLES OF MOBILE APP DESIGNhey – down in the front!
23. BASIC PRINCIPLES OF MOBILE APP DESIGNmay we suggest a simple fix…
24. Hockey and mullets go hand in hand
26. A simple change…
27. Much better!
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. 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. 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. 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. WHAT MAKES A MOBILE APP GREATengineering meets design
33. WHAT MAKES A MOBILE APP GREAToutside of genetics, cloning is boring ≠ ≠ ≠ ∴ ≠ qed
34. WHAT MAKES A MOBILE APP GREATdifferentiate your experiencepanorama in wp7 shallow experience expansive artistic pivot in wp7 deeper experience data-driven informational
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. 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. 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. 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. 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. 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. 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. IDEAS: THE CURRENCY OF AWESOMENESSmaking users awesome in the moment
43. IDEAS: THE CURRENCY OF AWESOMENESSremember the three motivations i’m multitasking i’m local i’m bored
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. IDEAS: THE CURRENCY OF AWESOMENESSmobile means personal
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. 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. 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. 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. 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. BUILDING MOBILE EXPERIENCES THAT DON’T SUCKQuestion? Frédéric Harper Developers Evangelist @ Microsoft Canada email@example.com @fharper http://webnotwar.ca http://outofcomfortzone.net