UI & UX for mobile devices

Working with UI in android is sometimes messy, developers have their ways of handling the obstacles, and yet, developers and designers still get tripped up on patterns.
This talk includes common practices and other efficient ways of designing UI in android apps. Highlights general and unnoticeable mistakes made when creating a design for mobile devices.

Transcript

1. UI & UX for mobile devices Dhruv Patel @DearDhruv Principle Software Engineer
2. BRIEF • UI – Interaction (visuals) • Graphical user interface (GUI) • Command line interface (CLI) • Voice user interface (VUI) • Touch user interface (TUI) • UX – Experience (feels)
3. WHY TALK ON UI & UX? (FOR MOBILE) • Mobile First = Content First • Mobile is where your audience is
5. WHY TALK ON UI & UX? (FOR MOBILE) • Mobile First = Content First • Mobile is where your audience is • Desktop remains important
6. DOES GRAPHICS MATTER? BE IT A GAME OR AN APP
7. JUNE 1972 • Pong from Atari
10. JUNE 1972, CALIFORNIA • Pong from Atari • Originally training exercise • Simple? • Was it good?
12. JULY 1983, JAPAN • NES (Nintendo Entertainment System) from Nintendo • Super Mario, September 1985 | OCTOBER 1985, NORTH AMERICA
15. SO, DOES GRAPHICS MATTER?
17. UI MATTERS VISUALS FOR HUMAN
18. Design by Tubik
19. Design by Tubik
20. WHAT IS UI FOR MOBILE ? CLEAR AND TO THE POINT DESIGNS
21. WHAT IS UI FOR MOBILE ? • Touch sensitive graphical content • Smaller screen size • Higher resolution (UHD) • Icon based controls • Similar info presented on different sizes (smart watches, tablets) • Higher refresh rate and that poor mobile CPU
22. REMEMBER TO • Minimize Cognitive Load • Declutter • Offload tasks • Break tasks • Use familiar screens • Minimize user input • Many more…
23. COMMON SCREENS • Splash screen
24. Design by Hike
25. Design by Gleb
26. COMMON SCREENS • Splash screen • Onboarding tutorial screens
29. COMMON SCREENS • Splash screen • Onboarding tutorial screens • Events
30. Design by Tubik
32. COMMON SCREENS • Splash screen • Onboarding tutorial screens • Events • Player
34. DO’S AND DON’TS LET’S MAKE BETTER UI
35. DO’S AND DON’TS • Research before design • Prioritize features • Cut out the clutter • Make navigation self-evident • Design finger-friendly tap-targets • Minimize typing • Waiting for content – avoid that
36. TYPOGRAPHY • Scale
38. TYPOGRAPHY • Scale • Font
43. TYPOGRAPHY • Scale • Font • Focus
45. COLOUR • Contrast
48. COLOUR • Contrast • Error
52. COLOUR • Contrast • Error • Personality
55. ANDROID Q • Gesture
57. ANDROID Q • Gesture • System windows inset
59. THANK YOU!
60. RESOURCES • https://theblog.adobe.com/10-dos-donts-mobile-ux-design/ • https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/ • https://pair.withgoogle.com/chapter/user-needs/ • https://www.sqlshack.com/4k-resolution-and-high-dpi-what-you-need-to-know-about-it-to-have-great- visuals/ • https://android-developers.googleblog.com/2019/08/gesture-navigation-backstory.html • https://think360studio.com/20-tips-how-to-design-great-ui-for-mobile-apps/ • https://www.perficientdigital.com/insights/our-research/mobile-vs-desktop-usage-study
61. RESOURCES • https://material.io/design/typography/the-type-system.html#applying-the-type-scale • https://material.io/design/usability/accessibility.html#color-contrast • https://theblog.adobe.com/10-dos-donts-mobile-ux-design/ • http://www.color-blindness.com/coblis-color-blindness-simulator/