PowerPoint Presentation
Designing for mobileA UX perspective for developers
Oscar GonzlezDuppy Oscar@duppy_ocioDuppy Oscar
UX Architect at Accenture/AvanadeUX / Front-end ConsultantExa UDEM (LTI)
OverviewKnow your userKnow your goalsEvaluate the resourcesGet inspirationDesignTest
Know your userPeople have different needs, goals, preferences and devices
Needs & GoalsIs it for fun? Is it for business?What is the user expected to do?What is the app expected to do?Why would this app be successful?
It is useful to do Personas / ArchetypesBusiness goals
App goals
User needs
Choosing platforms
iOSAndroidWindows 8BlackberryHandhelds
Example:Adoption of Windows Phone in ArgentinaBanorte
Available ResourcesAccelerometerGPSCameraNFCInternet connection
App contextHow and where is our app is going to be used?
Portrait / LandscapeLighting / ContrastHow is the device going to be heldIs people driving? Flying? Laying on bed?Is people in an emergency?Do we need voice commands?
Get inspiredGetting ideas from others
How to get inspired?Take a look to others workLook for patterns and conventionsSketch Ask for helpPractice
Guidelines & ResourcesDifferent platforms, different experiences
iOSContent is kingTake advantage of the whole screenReconsider visual indicators of physicality and realism.Let translucent UI elements hint at the content behind them.
Defer to content
iOSUse of plenty negative spaceLet color simplify the UIEnsure legibility by using system fontsEmbrace borderless buttons.Provide clarity
AndroidDelight me in surprising waysReal objects are more fun than buttons and menusLet me make it mineGet to know meEnchant mehttp://developer.android.com/design/get-started/principles.html
AndroidKeep it briefPictures are faster than wordsDecide for me but let me have the final sayOnly show what I need when I need itI should always know where I amNever lose my stuffIf it looks the same, it should act the sameOnly interrupt me is its important
Simplify my lifehttp://developer.android.com/design/get-started/principles.html
AndroidGive me tricks that work everywhereIt's not my faultSprinkle encouragementDo the heavy lifting for meMake important things fastMake me amazinghttp://developer.android.com/design/get-started/principles.html
Windows 8 Metro Modern StylePride in craftmanshipDo more with less: Content, not ChromeAuthentically digitalWin as OneFast and fluid: be alive (motion)
Think around the boxGuidelines Template
Sketch firstDraw, erase, redraw
There are plenty of tools available
Interactions & GesturesBuild for the fingersSwipePressPress & HoldDrag to refreshPinchTap.
Create engagement with interactionsFor example:FlipboardJobrTinderPaperInfinite scroll
Building your ideaNative / Responsive / Web app
Which way to go?NativeResponsiveJquery mobileXamarinTitaniumPhonegapChoose wisely: They all have pros and cons. Evaluate their strengths Evaluate time and effort User tolerance Performance
Dont forget middle tiersWeb services are your friends
Common mistakesRolloversBig data loadingUnreachable ButtonsTactile areaResolutionsMissing guidelinesCant be developed
Testing & PrototypingYou dont need expensive tools for ptototyping:
Paper PrototypingPower point (seriously)AxureOmnigraffleUXPIN
Thank you
