Android UX-UI Design Patterns

This talk is about android usability patterns. Based on real cases and experiences with mobile development.

Transcript

1. @fernando_cejas www.fernandocejas.com
2. Who am I? •  Barcelona GDG Organizer •  NFC, Android and Agile Geek •  Android10.org •  NFC Actions App •  Flojack (@flomio) •  @fernando_cejas •  http://www.fernandocejas.com/
3. Agenda •  User Interface •  User Experience •  Usability •  Android Design Patterns •  Examples •  Advices  
4. WTF?
5. WTF?
6. WTF?
7. What is User Interface? (UI) •  A common boundary or surface between the interactive system and the user •  All elements which provide communication between the interactive system and the user
8. Elements of a User Interface
9. What is User Interface Design? •  User interface design is the process of supporting the tasks (goals) of the user, ideally in a friendly and articulate manner
10. What about User Experience (UX)? •  “A person’s perceptions and responses that result from the use or anticipated use of a product, interactive system, or service.” –ISO9241-210
11. What is Usability? •  Usability means that a person using a system finds it easy to understand and use •  A usable system allows a person to focus on their tasks, and not on the system itself •  A usable system most often does what a! person expects
12. Usability Iceberg Interaction Techniques Keyboard and mouse mappings, menus, feedback, etc. Visuals Cues, feedback, and aesthetics
13. Android Design Patterns
14. What is a Design Pattern? •  It’s a design solution to a recurring problem •  It’s also about not reinventing the wheel. •  People want to use what they have learnt already using the phone
15. Things change… Isn’t it?
16. Ice Cream Sandwich! Android 4.0 •  A big quality step •  Mature, stable and elegant
17. For Smartphones and Tablets •  Different devices have different usability
18. Android Main Themes •  Holo Light and Holo Dark
19. Gestures
20. Application Structure
21. Application Structure
22. Navigation with Back and Up
23. Action Bar
24. Action Bar •  Consider split it when having many elements
25. Multi-pane Layouts
26. Multi-pane Layouts
27. Swipe Views •  Navigate with gestures through the content
28. Contextual Action Bar
29. Sliding Menu •  Replaces the dashboard? (deprecated?)
30. Pure Android
31. ActionBarSherlock
32. UI/UX Examples Beautiful… Sweeeet!!!!
33. UI/UX Examples
34. UI/UX Examples
35. UI/UX Examples
36. Useful Links •  Android Design Official •  ActionBar Sherlock •  Nine Old Androids •  Android UI Patterns
37. Some advice… •  Don't port the UI from other platforms •  Don't override the behavior of system buttons •  Know your user and get feedback from him •  Test on real users, early and often •  Do what the user expects •  The most common operations should be visible •  Don't reinvent the wheel
38. Any questions?
39. Thanks! When you look at the dark side, careful you must be ... for the dark side looks back. @fernando_cejas www.fernandocejas.com