Designing for the mobile form factor
Download as PPT, PDF15 likes15,778 views
This document discusses designing for the mobile form factor. It begins by outlining characteristics of a great user interface: being user friendly, responsive, and polished. It then explains how mobile design is different due to limitations of smaller screens, varied orientations, touch interaction, lower screen densities and limited resources. The document provides guidance on adapting designs for these mobile constraints and stresses the importance of usability testing and prioritizing the user experience.
![Q&A @kirillcool pushing-pixels.org [email_address] android-developers.blogspot.com](https://image.slidesharecdn.com/andevcon-110309175216-phpapp02/85/Designing-for-the-mobile-form-factor-53-320.jpg)
Designing for the mobile form factor
- 1. Designing for the mobile form factor Kirill Grouchnikov Android, Google Inc.
- 2. Overview Characteristics of a great UI Why mobile is different From design to implementation
- 3. Overview Characteristics of a great UI Why mobile is different From design to implementation
- 4. What is a great UI? User friendly Responsive Polished
- 5. Square TweetDeck Seesmic doubleTwist
- 6. User friendliness Simple flows that assist in completing tasks Task-oriented instead of feature-oriented Guide the user instead of fight the user Build on user’s knowledge of the domain
- 7. Responsiveness Visual confirmation of a user action Long tasks not blocking the UI Progress of long running tasks
- 8. Visual polish Visual appeal as important as functionality Macro-level as well as micro-level Visual consistency to anchor the flows
- 9. Is mobile different? Similar problems Similar solutions Different form factor
- 10. Overview Characteristics of a great UI Why mobile is different From design to implementation
- 11. Form factor Smaller screens, bigger controls Rotation and ratio change User interaction Screen density Limited resources
- 12. Form factor Smaller screens, bigger controls Rotation and ratio change User interaction Screen density Limited resources
- 13. Screen size
- 14. Screen size Finger interaction Small controls - user frustration Onscreen keyboard - even less space for controls
- 15. Screen size Hide optional controls Split long forms into separate screens Annotate fields for better keyboard modes
- 16. Form factor Smaller screens, bigger controls Rotation and ratio change User interaction Screen density Limited resources
- 17. Rotation Smaller form factor No desktop “rigidity” Different “natural” orientation Varying user preference
- 18. Landscape mode
- 19. Landscape mode
- 20. Landscape mode Don’t blindly reuse portrait layout Action bar / footer - precious vertical space More actionable content above the fold Don’t leave gigantic unused “holes” But don’t cram too much content either
- 21. Form factor Smaller screens, bigger controls Rotation and ratio change User interaction Screen density Limited resources
- 22. User interaction No mouse. No stylus. No rollovers. Optional physical keyboard. Touch is king.
- 23. Touch Touch modes Tap / long press / move / fling Multi-touch Pinch / zoom / rotate / tilt
- 24. Touch
- 25. Form factor Smaller screens, bigger controls Rotation and ratio change User interaction Screen density Limited resources
- 26. Resolution / DPI 1280 pixels / 13.3 inch 800 pixels / 8.3 inch 1280 pixels / 13.3 inch = 96 pixels per inch 800 pixels / 8.3 inch = 96 pixels per inch Artwork by studiomx.eu
- 27. Resolution matters 300dpi 96dpi
- 28. Screen density - LDPI Motorola Charm Motorola Flipout Motorola Citrus Sony Ericsson Xperia X10 Mini HTC Wildfire HTC Tattoo
- 29. Screen density - MDPI Motorola Charm HTC Droid Eris Motorola CLIQ HTC Magic (myTouch 3G) HTC Aria Motorola Backflip
- 30. Screen density - HDPI Motorola Droid Sony Ericsson Xperia X10 Samsung Nexus S HTC Nexus One HTC G2 HTC Evo 4G
- 31. 100% difference between LDPI and HDPI
- 32. Screen density No hard coded pixel values Use dips and DisplayMetrics No single set of images Bundle multiple resolutions
- 33. Form factor Smaller screens, bigger controls Rotation and ratio change User interaction Screen density Limited resources
- 34. Resources Less powerful CPUs GPU / hardware acceleration optional Much less memory
- 35. Resources Large bitmaps - out of memory errors Frequent allocation of small objects - garbage collection pauses Use DDMS and “Allocation tracker” tab
- 36. Mobile is different Smaller screens, bigger controls Rotation and ratio change User interaction Screen density Limited resources
- 37. Overview Characteristics of a great UI Why mobile is different From design to implementation
- 38. What is a great application? User friendly Responsive Polished
- 39. But much more important
- 40. A clear, simple, user-oriented goal
- 41. Design process Formulate and finalize the product goal Identify major scenarios Build user flows Pixel-perfect visual design Implementation
- 42. User scenarios IA, IaD, UxD, UX, HCI Define features (not the other way around) Sketch high-level wireframes Define consistent navigation model
- 43. As the implementor Know hard platform limitations Identify layouts, components, event handling Flesh out major building blocks anchor areas, navigation controls, interaction patterns
- 44. Visual design Colors, textures, typefaces, layouts Lighting models, anti-aliasing, drop shadows, soft edges Translucency, overlapping, non-rectangular components
- 45. As the implementor Know hard platform limitations Weigh performance considerations Consider target hardware limitations (colors, memory, screen size, ...) Two-way communication and early validation
- 46. Pixel perfection Visual separation between sections Layout depends on the screen size
- 47. Pixel perfection Thumbnail drop shadow Text drop shadow Vertical alignment Scaling text size to fit
- 48. Working with designers Know the platform capabilities and limitations Trust that interaction and visual designers know what they’re doing Engage early and often Provide specific feedback You are not the user
- 49. Below the surface UI layer is just one piece Data models, persistence, wire protocols, caching, binding It’s easy to “cut corners” on pixel level
- 51. What is a great UI? User friendly Responsive Polished
- 52. Everything else can be good enough
- 53. Q&A @kirillcool pushing-pixels.org [email_address] android-developers.blogspot.com