1. Designing for mobile
A UX perspective for developers

2. Oscar González
Duppy Oscar
@duppy_ocioDuppy Oscar
- UX Architect at Accenture/Avanade
- UX / Front-end Consultant
- Exa UDEM (LTI)
duppy@chic-chic.mx

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

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

5. 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

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

7. Available Resources
- Accelerometer
- GPS
- Camera
- NFC
- Internet connection
…

8. 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?

9. Get inspired
Getting ideas from others

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

11. Guidelines & Resources
Different platforms, different experiences

12. 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

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

14. 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

15. 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

16. 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

17. 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)

18. Think around the box
Guidelines ≠ Template

19. Sketch first
Draw, erase, redraw

20. There are plenty of tools available

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

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

23. Building your idea
Native / Responsive / Web app

24. 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

25. Don’t forget middle tiers
Web services are your friends

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

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

28. Thank you