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

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

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

by Frédéric Harper

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 201

Statistics

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

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