Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android UX-UI Design Patterns

Android UX-UI Design Patterns

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

Fernando Cejas

March 15, 2013
Tweet

More Decks by Fernando Cejas

Other Decks in Programming

Transcript

  1. @fernando_cejas
    www.fernandocejas.com

    View Slide

  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/

    View Slide

  3. Agenda
    •  User Interface
    •  User Experience
    •  Usability
    •  Android Design Patterns
    •  Examples
    •  Advices  

    View Slide

  4. WTF?

    View Slide

  5. WTF?

    View Slide

  6. WTF?

    View Slide

  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

    View Slide

  8. Elements of a User Interface

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  12. Usability Iceberg
    Interaction Techniques
    Keyboard and mouse
    mappings, menus,
    feedback, etc.
    Visuals
    Cues, feedback, and
    aesthetics

    View Slide

  13. Android Design Patterns

    View Slide

  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

    View Slide

  15. Things change… Isn’t it?

    View Slide

  16. Ice Cream Sandwich! Android 4.0
    •  A big quality step
    •  Mature, stable and elegant

    View Slide

  17. For Smartphones and Tablets
    •  Different devices have different usability

    View Slide

  18. Android Main Themes
    •  Holo Light and Holo Dark

    View Slide

  19. Gestures

    View Slide

  20. Application Structure

    View Slide

  21. Application Structure

    View Slide

  22. Navigation with Back and Up

    View Slide

  23. Action Bar

    View Slide

  24. Action Bar
    •  Consider split it when
    having many elements

    View Slide

  25. Multi-pane Layouts

    View Slide

  26. Multi-pane Layouts

    View Slide

  27. Swipe Views
    •  Navigate with gestures through the content

    View Slide

  28. Contextual Action Bar

    View Slide

  29. Sliding Menu
    •  Replaces the dashboard? (deprecated?)

    View Slide

  30. Pure Android

    View Slide

  31. ActionBarSherlock

    View Slide

  32. UI/UX Examples
    Beautiful… Sweeeet!!!!

    View Slide

  33. UI/UX Examples

    View Slide

  34. UI/UX Examples

    View Slide

  35. UI/UX Examples

    View Slide

  36. Useful Links
    •  Android Design Official
    •  ActionBar Sherlock
    •  Nine Old Androids
    •  Android UI Patterns

    View Slide

  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

    View Slide

  38. Any questions?

    View Slide

  39. Thanks!
    When you look at the dark side, careful you
    must be ... for the dark side looks back.
    @fernando_cejas
    www.fernandocejas.com

    View Slide