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

DevFest Live: Material UX for Engineers

DevFest Live: 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

May 22, 2021

More Decks by Ash Davies

Other Decks in Education


  1. Ash Davies Google Developer Expert (Kotlin & Android) @askashdavies Material

    UX for Engineers .DevFest Live - May 💻
  2. “People ignore design that ignores people.” - Frank Chimero

  3. Photo by Jonas Weckschmied on Unsplash

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

    Design presentation...
  5. Feature Briefing Android design ...

  6. None
  7. Stay Calm Material UX for Engineers

  8. • Alienates native platform consumers • Breaks user affordance expectations

    • Longer development time • No benefit over cross-platform The Problem. Material UX for Engineers
  9. • Difficult to retain consumers • Reduced session duration •

    Consumer indifference • Increased uninstall rate Consumer Alienation Material UX for Engineers 🛸
  10. • Increased learning curve • Risk of consumer frustration •

    Onboarding requires development User Affordance Material UX for Engineers 🛸
  11. User Affordance Material UX for Engineers

  12. User Affordance Material UX for Engineers

  13. User Affordance Material UX for Engineers

  14. • Non-default component development • Lack of component re-use Development

    Material UX for Engineers 🛸
  15. None
  16. • Primary purpose for native development • Powerful user engagement

    options • Increased hardware capacity Native Support Material UX for Engineers 🛸 💨
  17. Data Material UX for Engineers

  18. “If we have data, let’s look at data. If all

    we have are opinions, let’s go with mine.” - Jim Barksdale
  19. Android Market Share Source: gs.statcounter.com 󰏦 37% 󰑔 40% 󰏅

    53% 󰎲 70%
  20. Android Market Share Source: gs.statcounter.com 󰎩 80% 󰎙 85% 󰐕

    85% 󰏝 96%
  21. Android Market Share 🏢 35% 280,000+ Daily active users

  22. • Daily active users • Revenue per user • User

    retention • Uninstall rate • Session duration Data Material UX for Engineers
  23. Y U NO MATERIAL Material UX for Engineers

  24. Bias Material UX for Engineers

  25. Material material.io

  26. Material material.io

  27. “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”
  28. Principles Material Surfaces are intuitive and natural

  29. Principles Material Dimensionality affords interaction

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

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

  32. Principles Material Users initiate change

  33. None
  34. Half screen photo slide if text is necessary Principles Material

    Motion provides meaning
  35. None
  36. • 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
  37. Jetpack Navigation Getting started with the Navigation Component d.android.com/guide/navigation/ navigation-getting-started

  38. Crane Material Studies • Flexible aesthetic • Flow structure •

    Content filtering
  39. material.io/components/sliders

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

  41. Fortnightly Material Studies • Content-focused • Catalog structure • Branding

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

  43. Shrine Material Studies • Minimal aesthetic • Angled cuts •

    Overlapping sheets
  44. Backdrop Material Studies: Components • Relevant • Immediate • Contextual

  45. None
  46. Inbox by Gmail Material Studies Too soon… 😭

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

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

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

  50. App Bars: Top

  51. Sheets (Bottom) Material Studies: Components

  52. Sheets (Bottom) ❌ Material Studies: Components

  53. “UI is the saddle, the stirrups, and the reins. UX

    is the feeling you get being able to ride the horse” - Dain Miller
  54. Half screen photo slide if text is necessary Designing should

    be fun Material UX for Engineers
  55. None
  56. Advocacy Material UX for Engineers • Internal presentations • Codelabs/Workshops

    • Collaborative guilds
  57. 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
  58. It’s the little things.