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

Droidcon EMEA: Material UX for Engineers

Ash Davies
October 09, 2020

Droidcon EMEA: Material UX for Engineers

It's a familiar story, it's a Monday morning, and your PM gathers the team together, ready to brief you all on the new, latest and greatest feature to grace your app, solve all your user woes, and bring in countless five-star reviews! You get excited! Why wouldn't you? This is why we got into this in the first place right? To build exciting and shiny new things, and feel pride when we see our users enjoying the fruits of our labours.

But when you see the design, your joyous smile fades, your world turns dark once more, such wonderous hope and promise, gone, and replaced with another soul-sucking endeavour. Why? Why does this happen to us? What did we do in our past lives to deserve this? Y U NO MATERIAL?!

It doesn't need to be this way. Learn how to share the joys of material design with your design and product colleagues, and how to best pitch the benefits of a truly native mobile design with user affordance compliancy, effective navigation patterns, usable usability. And just as importantly, understand why this happens, why the perceived market audience looks like your chief executives, and how to make use of statistical data to sway your colleagues.

Your next feature need not be an iOS carbon copy.

Ash Davies

October 09, 2020
Tweet

More Decks by Ash Davies

Other Decks in Technology

Transcript

  1. Ash Davies
    Google Developer Expert (Kotlin & Android)
    @askashdavies
    Material UX for Engineers
    .droidcon EMEA - October

    View full-size slide

  2. “People ignore design that ignores people.”
    - Frank Chimero

    View full-size slide

  3. Photo by Jonas Weckschmied on Unsplash

    View full-size slide

  4. Half screen photo slide if
    text is necessary
    Feature Briefing
    Design presentation...

    View full-size slide

  5. Feature Briefing
    Android design ...

    View full-size slide

  6. Stay Calm
    Material UX for Engineers

    View full-size slide

  7. ● Alienates native platform consumers
    ● Breaks user affordance expectations
    ● Longer development time
    ● No benefit over cross-platform
    The Problem.
    Material UX for Engineers

    View full-size slide

  8. ● Difficult to retain consumers
    ● Reduced session duration
    ● Consumer indifference
    ● Increased uninstall rate
    Consumer Alienation
    Material UX for Engineers

    View full-size slide

  9. ● Increased learning curve
    ● Risk of consumer frustration
    ● Onboarding requires development
    User Affordance
    Material UX for Engineers



    View full-size slide

  10. User Affordance
    Material UX for Engineers

    View full-size slide

  11. User Affordance
    Material UX for Engineers

    View full-size slide

  12. User Affordance
    Material UX for Engineers

    View full-size slide

  13. ● Non-default component development
    ● Lack of component re-use
    Development
    Material UX for Engineers


    View full-size slide

  14. ● Primary purpose for native development
    ● Powerful user engagement options
    ● Increased hardware capacity
    Native Support
    Material UX for Engineers



    View full-size slide

  15. Data
    Material UX for Engineers

    View full-size slide

  16. “If we have data, let’s look at data. If
    all we have are opinions, let’s go with
    mine.”
    - Jim Barksdale

    View full-size slide

  17. Android
    Market Share
    Source: gs.statcounter.com
    37% 40% 53% 70%

    View full-size slide

  18. Android
    Market Share
    Source: gs.statcounter.com
    80% 85% 85% 96%

    View full-size slide

  19. Android
    Market Share
    35%
    280,000+
    Daily active
    users

    View full-size slide

  20. ● Daily active users
    ● Revenue per user
    ● User retention
    ● Uninstall rate
    ● Session duration
    Data
    Material UX for Engineers

    View full-size slide

  21. Y U NO MATERIAL
    Material UX for Engineers

    View full-size slide

  22. Bias
    Material UX for Engineers

    View full-size slide

  23. Material
    material.io

    View full-size slide

  24. Material
    material.io

    View full-size slide

  25. “A material metaphor is the unifying theory of
    a rationalised space and a system of motion.
    The material is grounded in tactile reality,
    inspired by our study of paper and ink, yet
    open to imagination and magic”

    View full-size slide

  26. Principles
    Material
    Surfaces are intuitive
    and natural

    View full-size slide

  27. Principles
    Material
    Dimensionality affords
    interaction

    View full-size slide

  28. Principles
    Material
    Content is bold, graphic,
    and intentional

    View full-size slide

  29. Principles
    Material
    Colour, surface, and
    iconography emphasise
    actions

    View full-size slide

  30. Principles
    Material
    Users initiate change

    View full-size slide

  31. Half screen photo slide if
    text is necessary
    Principles
    Material
    Motion provides meaning

    View full-size slide

  32. ● Fixed start destination
    ● Navigation state is represented as a stack
    ● Up and Back are identical within your app's task
    ● The Up button never exits your app
    ● Deep linking simulates manual navigation
    Principles of Navigation
    Material

    View full-size slide

  33. Jetpack Navigation
    Getting started with the
    Navigation Component
    d.android.com/guide/navigation/
    navigation-getting-started

    View full-size slide

  34. Crane
    Material Studies
    ● Flexible aesthetic
    ● Flow structure
    ● Content filtering

    View full-size slide

  35. material.io/components/sliders

    View full-size slide

  36. Backdrop
    Material Studies: Components
    ● Relevant
    ● Immediate
    ● Contextual

    View full-size slide

  37. Fortnightly
    Material Studies
    ● Content-focused
    ● Catalog structure
    ● Branding moment

    View full-size slide

  38. Elevation
    Material UX for Engineers
    material.io/design/environment/
    elevation.html#principles

    View full-size slide

  39. Shrine
    Material Studies
    ● Minimal aesthetic
    ● Angled cuts
    ● Overlapping sheets

    View full-size slide

  40. Backdrop
    Material Studies: Components
    ● Relevant
    ● Immediate
    ● Contextual

    View full-size slide

  41. Inbox by Gmail
    Material Studies
    Too soon…

    View full-size slide

  42. Material Design Awards
    Material Studies
    design.google/library/material-design-awards-2019

    View full-size slide

  43. Material Partner Studies
    Material Studies
    material.io/blog/material-partner-studies

    View full-size slide

  44. Material Partner Studies
    Material Studies
    material.io/blog/material-partner-studies

    View full-size slide

  45. App Bars: Top

    View full-size slide

  46. Sheets (Bottom)
    Material Studies: Components

    View full-size slide

  47. Sheets (Bottom) ❌
    Material Studies: Components

    View full-size slide

  48. “UI is the saddle, the stirrups, and the
    reins. UX is the feeling you get being
    able to ride the horse”
    - Dain Miller

    View full-size slide

  49. Half screen photo slide if
    text is necessary
    Designing should be fun
    Material UX for Engineers

    View full-size slide

  50. Advocacy
    Material UX for Engineers
    ● Internal presentations
    ● Codelabs/Workshops
    ● Collaborative guilds

    View full-size slide

  51. Material Design Kits for Figma, Sketch, & XD
    material.io/resources
    Material Gallery Plugin for Sketch
    material.io/resources/gallery
    #use-with-the-gallery-plugin
    Tooling
    Material UX for Engineers

    View full-size slide

  52. It’s
    the
    little
    things.

    View full-size slide