Android UX-UI Design Patterns Introduction

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
Visuals
Cues, feedback,
and aesthetics
Interaction
Techniques
Keyboard and mouse
mappings, menus,
feedback, etc.

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