mDevMeet - Material UX for Engineers

It’s a familiar story, it’s Monday morning, and you’re ready to start on the latest feature to solve all your user woes! You’re excited! You’re engaged! But then you see the design, your joyous smile fades, your world turns dark once more. Why? Another iOS carbon copy…

It doesn’t need to be this way. Learn how to share the joy of Material Design with your colleagues, and pitch the benefits of a truly native design with user affordance, effective navigation patterns, and usable usability.

Transcript

1. Ash Davies Google Developer Expert (Kotlin & Android) @askashdavies Material UX for Engineers mDevMeet 2021 - 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 ...
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 🛸
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
34. Half screen photo slide if text is necessary Principles Material Motion provides meaning
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
39. Crane Material Studies • Flexible aesthetic • Flow structure • Content filtering
40. material.io/components/sliders
41. Backdrop Material Studies: Components • Relevant • Immediate • Contextual
42. Fortnightly Material Studies • Content-focused • Catalog structure • Branding moment
43. Elevation Material UX for Engineers material.io/design/environment/ elevation.html#principles
44. Shrine Material Studies • Minimal aesthetic • Angled cuts • Overlapping sheets
45. Backdrop Material Studies: Shrine • Cutout reinforces brand • Applied to dialogs also
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. Designing should be fun Material UX for Engineers
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.