$30 off During Our Annual Pro Sale. View Details »

Android UX-UI Design for Fun and Profit

Android UX-UI Design for Fun and Profit

Even though we are developers dealing with source code, it is good to know how to deal with UI/UX when building our user interfaces by applying tips and best practices.
So, in this session, we are gonna talk about android usability patterns, based on real cases and experiences with mobile development.

Fernando Cejas

May 28, 2014
Tweet

More Decks by Fernando Cejas

Other Decks in Design

Transcript

  1. @fernando_cejas

    View Slide

  2. Who am I?
    •  Barcelona GDG Organizer.
    •  Software Engineer.
    •  Android lover.
    •  Geek.

    View Slide

  3. Who am I?
    •  Not a UX/UI guy…. I'm a coder...
    •  So what the hell I’m doing here?

    View Slide

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

    View Slide

  5. Why this talk?

    View Slide

  6. WTF?

    View Slide

  7. WTF?

    View Slide

  8. WTF?

    View Slide

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

  10. Elements of a User Interface

    View Slide

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

  12. What about User Experience (UX)?
    •  User experience (UX) is about how a person feels about
    using a product, system or service. User experience is
    subjective in nature, because it is about an individual’s
    feelings and thoughts about the system.

    View Slide

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

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

    View Slide

  15. Android Design Patterns

    View Slide

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

  17. Things change… Isn’t it?

    View Slide

  18. Things change… Isn’t it?

    View Slide

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

    View Slide

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

    View Slide

  21. Android Main Themes
    •  Holo Light and Holo Dark.

    View Slide

  22. Your branding
    •  Consistency has its place in Android, but you also have the flexibility
    to customize the look of your app to reinforce your brand.

    View Slide

  23. Gestures
    •  Gestures allow users to interact with your app by
    manipulating the screen objects you provide

    View Slide

  24. Gestures
    •  Gestures allow users to interact with your app by
    manipulating the screen objects you provide

    View Slide

  25. Gestures
    •  Gestures allow users to interact with your app by
    manipulating the screen objects you provide

    View Slide

  26. Application Structure

    View Slide

  27. Navigation with Back and Up

    View Slide

  28. Action Bar

    View Slide

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

    View Slide

  30. Navigation Drawer
    •  The navigation drawer is a panel that transitions in from the left
    edge of the screen and displays the app’s main navigation options.
    •  The user can open the drawer panel by touching the navigation
    drawer indicator.

    View Slide

  31. Multi-pane Layouts

    View Slide

  32. Multi-pane Layouts

    View Slide

  33. Compound Views and Orientation Changes

    View Slide

  34. Compound Views and Orientation Changes

    View Slide

  35. Compound Views and Orientation Changes

    View Slide

  36. Compound Views and Orientation Changes

    View Slide

  37. Swipe Views
    •  Navigate with gestures through the content.

    View Slide

  38. Contextual Action Bar

    View Slide

  39. Notifications
    •  The notification system allows your app to keep the user informed
    about events, such as new chat messages or a calendar event.

    View Slide

  40. Pure Android

    View Slide

  41. Google Glass…

    View Slide

  42. Design for Glass….
    •  Users typically have multiple devices that store and display
    information for specific time periods. Glass works best with
    information that is simple, relevant, and current.
    •  Don't try to replace a smartphone, tablet, or laptop by
    transferring features designed for these devices to Glass.
    Instead, focus on how Glass and your services complement
    each other, and deliver an experience that is unique.

    View Slide

  43. Design for Glass….
    •  Design interfaces that use imagery, colloquial voice
    interactions, and natural gestures.

    View Slide

  44. Android Wear….
    •  Android wearables provide just the right information at just
    the right time, allowing you to be connected to the virtual
    world and present in the real world.

    View Slide

  45. Android Wear - Pages
    •  Pages are additional cards that can appear to the right of
    your main card in the stream. If your core message is longer
    than a short snippet, do not sacrifice glanceability by packing
    a lot of information into your primary notification. Instead, use
    pages to provide additional content.

    View Slide

  46. Android Wear - Notification Stacks
    •  Stacks are a way of adding multiple useful notifications
    without overwhelming the user’s stream. If your application
    may produce multiple concurrent notifications, consider
    combining them into a stack.

    View Slide

  47. Android Wear - Pages
    •  Voice replies are primarily used by messaging applications to
    provide a hands-free way of dictating a short message. You
    can also provide a up to five suggested replies or “canned
    responses” that are useful in a wide range of cases.

    View Slide

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

    View Slide

  49. UI/UX Examples
    Grand St.

    View Slide

  50. UI/UX Examples
    Banjo

    View Slide

  51. UI/UX Examples
    Timely Alarm Clock.

    View Slide

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

  53. Some advice…
    •  Innovate but don't go further than standards
    •  Build better products, not more features

    View Slide

  54. Any questions?

    View Slide

  55. Thanks!
    @fernando_cejas
    www.fernandocejas.com

    View Slide