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. Surat
2. UI & UX for mobile devices Dhruv Patel Surat
4. UI & UX for mobile devices Dhruv Patel Tech Lead, Android @ DearDhruv
5. Brief UI – Interaction (visuals) – Graphical user interface (GUI) – Command line interface (CLI) – Voice user interface (VUI) – Touch user interface (TUI) UX – Experience (feels)
6. Why talk on UI & UX? (for mobile) • Mobile First = Content First • Mobile is where your audience is
8. • Mobile First = Content First • Mobile is where your audience is • Desktop remains important Why talk on UI & UX? (for mobile)
9. Does graphics matter? Be it a game or an app Surat
10. June 1972 • Pong from Atari
13. June 1972, California • Pong from Atari • Originally training exercise • Simple? • Was it good?
15. July 1983, Japan •NES (Nintendo Entertainment System) from Nintendo •Super Mario, September 1985 | October 1985, North America
18. So, Does graphics matter? Surat
20. UI matters Visuals for human Surat
21. Design by Tubik
22. Design by Tubik
23. What is UI for mobile ? Clear and to the point designs Surat
24. 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
28. Remember to •Minimize Cognitive Load •Declutter •Offload tasks •Break tasks •Use familiar screens •Minimize user input •Many more…
29. Common Screens •Splash screen
30. Design by Hike
31. Design by Gleb
32. Common Screens •Splash screen •Onboarding tutorial screens
35. Common Screens •Splash screen •Onboarding tutorial screens •Events
36. Design by Tubik
38. Common Screens •Splash screen •Onboarding tutorial screens •Events •Player
40. Do’s and Don’ts Let’s make better UI Surat
41. 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
42. Typography •Scale
44. Typography •Scale •Font
49. Typography •Scale •Font •Focus
51. Colour •Contrast
54. Colour •Contrast •Error
58. Colour •Contrast •Error •Personality
61. Android Q •Gesture
63. Android Q •Gesture •System windows inset
65. Thank you!
66. 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
67. 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/