Confoo 2012-03-01 - Building mobile experiences that don't suck
Upcoming SlideShare
Loading in...5
×
 

Confoo 2012-03-01 - Building mobile experiences that don't suck

on

  • 982 views

 

Statistics

Views

Total Views
982
Views on SlideShare
748
Embed Views
234

Actions

Likes
1
Downloads
10
Comments
0

2 Embeds 234

http://outofcomfortzone.net 233
http://feeds.feedburner.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Confoo 2012-03-01 - Building mobile experiences that don't suck Confoo 2012-03-01 - Building mobile experiences that don't suck Presentation Transcript

  • building mobile experiencesthat don’t suckFrédéric Developers EvangelistHarper Microsoft Canada @fharper | outofcomfortzone.net
  • AGENDAwhat we will talk about today BASIC PRINCIPLES OF MOBILE APP DESIGN WHAT MAKES A MOBILE APP GREAT? IDEAS: THE CURRENCY OF AWESOMENESS
  • BASIC PRINCIPLES OF MOBILE APP DESIGNthe freshman primer
  • 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
  • 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.
  • 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…
  • Hockey and mullets go hand in hand
  • Offside!
  • A simple change…
  • Much better!
  • 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 fredh@microsoft.com @fharper http://webnotwar.ca http://outofcomfortzone.net