Designing for mobile

If you like this presentation – show it...

Slide 0

Designing for mobile A UX perspective for developers

Slide 1

Oscar Gonzalez Duppy Oscar @duppy_ocio Duppy Oscar UX Architect at Accenture/Avanade UX / Front-end Consultant Exa UDEM (LTI) duppy@chic-chic.mx

Slide 2

Overview Know your user Know your goals Evaluate the resources Get inspiration Design Test

Slide 3

Know your user People have different needs, goals, preferences and devices

Slide 4

Needs & Goals Is 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 / Archetypes Business goals App goals User needs

Slide 5

Choosing platforms iOS Android Windows 8 Blackberry Handhelds Example: Adoption of Windows Phone in Argentina Banorte

Slide 6

Available Resources Accelerometer GPS Camera NFC Internet connection …

Slide 7

App context How and where is our app is going to be used? Portrait / Landscape Lighting / Contrast How is the device going to be held Is people driving? Flying? Laying on bed? Is people in an emergency? Do we need voice commands?

Slide 8

Get inspired Getting ideas from others

Slide 9

How to get inspired? Take a look to other’s work Look for patterns and conventions Sketch Ask for help Practice

Slide 10

Guidelines & Resources Different platforms, different experiences

Slide 11

iOS Content is king Take advantage of the whole screen Reconsider visual indicators of physicality and realism. Let translucent UI elements hint at the content behind them. Defer to content

Slide 12

iOS Use of plenty negative space Let color simplify the UI Ensure legibility by using system fonts Embrace borderless buttons …. Provide clarity

Slide 13

Android Delight me in surprising ways Real objects are more fun than buttons and menus Let me make it mine Get to know me Enchant me http://developer.android.com/design/get-started/principles.html

Slide 14

Android Keep it brief Pictures are faster than words Decide for me but let me have the final say Only show what I need when I need it I should always know where I am Never lose my stuff If it looks the same, it should act the same Only interrupt me is its important Simplify my life http://developer.android.com/design/get-started/principles.html

Slide 15

Android Give me tricks that work everywhere It's not my fault Sprinkle encouragement Do the heavy lifting for me Make important things fast Make me amazing http://developer.android.com/design/get-started/principles.html

Slide 16

Windows 8 Metro Modern Style Pride in craftmanship Do more with less: Content, not Chrome Authentically digital Win as One Fast and fluid: be alive (motion)

Slide 17

Think around the box Guidelines ? Template

Slide 18

Sketch first Draw, erase, redraw

Slide 19

There are plenty of tools available

Slide 20

Interactions & Gestures Build for the fingers Swipe Press Press & Hold Drag to refresh Pinch Tap ….

Slide 21

Create engagement with interactions For example: Flipboard Jobr Tinder Paper Infinite scroll

Slide 22

Building your idea Native / Responsive / Web app

Slide 23

Which way to go? Native Responsive Jquery mobile Xamarin Titanium Phonegap … Choose wisely: They all have pros and cons. Evaluate their strengths Evaluate time and effort User tolerance Performance

Slide 24

Don’t forget middle tiers Web services are your friends

Slide 25

Common mistakes Rollovers Big data loading Unreachable Buttons Tactile area Resolutions Missing guidelines Can’t be developed

Slide 26

Testing & Prototyping You don’t need expensive tools for ptototyping: Paper Prototyping Power point (seriously) Axure Omnigraffle UXPIN

Slide 27

Thank you