Designing for mobileA UX perspective for developers

Oscar GonzálezDuppy Oscar

@duppy_ocioDuppy Oscar

- UX Architect at Accenture/Avanade

- UX / Front-end Consultant

- Exa UDEM (LTI)

duppy@chic-chic.mx

Overview

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

Know your userPeople have different needs, goals, preferences and devices

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

Choosing platforms

- iOS- Android- Windows 8- Blackberry- Handhelds

Example:- Adoption of Windows Phone in Argentina- Banorte

Available Resources- Accelerometer- GPS- Camera- NFC- Internet connection

…

App contextHow 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?

Get inspiredGetting ideas from others

How to get inspired?- Take a look to other’s work- Look for patterns and

conventions- Sketch - Ask for help- Practice

Guidelines & Resources

Different platforms, different experiences

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

iOS

- Use of plenty negative space

- Let color simplify the UI

- Ensure legibility by using system

fonts

- Embrace borderless buttons

- ….

Provide clarity

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

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

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

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)

Think around the boxGuidelines ≠ Template

Sketch firstDraw, erase, redraw

There are plenty of tools available

Interactions & GesturesBuild for the fingers• Swipe• Press• Press & Hold• Drag to refresh• Pinch• Tap• ….

Create engagement with interactionsFor example:• Flipboard• Jobr• Tinder• Paper• Infinite scroll

Building your ideaNative / Responsive / Web app

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

Don’t forget middle tiers

Web services are your friends

Common mistakes

• Rollovers

• Big data loading

• Unreachable Buttons

• Tactile area

• Resolutions

• Missing guidelines

• Can’t be developed

Testing & PrototypingYou don’t need expensive tools for ptototyping:

• Paper Prototyping

• Power point (seriously)

• Axure

• Omnigraffle

• UXPIN

Thank you