Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Designing for the mobile form factor <ul><li>Kirill Grouchnikov </li></ul><ul><li>Android, Google Inc. </li></ul>
Overview <ul><li>Characteristics of a great UI </li></ul><ul><li>Why mobile is different </li></ul><ul><li>From design to ...
Overview  <ul><li>Characteristics of a great UI </li></ul><ul><li>Why mobile is different </li></ul><ul><li>From design to...
What is a great UI? <ul><li>User friendly </li></ul><ul><li>Responsive </li></ul><ul><li>Polished </li></ul>
Square TweetDeck Seesmic doubleTwist
User friendliness <ul><li>Simple flows that assist in completing tasks </li></ul><ul><li>Task-oriented  instead of feature...
Responsiveness <ul><li>Visual confirmation  of a user action </li></ul><ul><li>Long tasks not blocking the UI </li></ul><u...
Visual polish <ul><li>Visual appeal as important as functionality </li></ul><ul><li>Macro-level as well as micro-level </l...
Is mobile different? <ul><li>Similar problems </li></ul><ul><li>Similar solutions </li></ul><ul><li>Different form factor ...
Overview  <ul><li>Characteristics of a great UI </li></ul><ul><li>Why mobile is different </li></ul><ul><li>From design to...
Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User in...
Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User in...
Screen size
Screen size <ul><li>Finger interaction </li></ul><ul><li>Small controls -  user frustration </li></ul><ul><li>Onscreen key...
Screen size <ul><li>Hide optional controls </li></ul><ul><li>Split long forms into separate screens </li></ul><ul><li>Anno...
Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User in...
Rotation <ul><li>Smaller form factor </li></ul><ul><li>No desktop “rigidity” </li></ul><ul><li>Different “natural” orienta...
Landscape mode
Landscape mode
Landscape mode <ul><li>Don’t blindly reuse portrait layout </li></ul><ul><li>Action bar / footer - precious vertical space...
Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User in...
User interaction <ul><li>No mouse. No stylus. No rollovers. </li></ul><ul><li>Optional physical keyboard. </li></ul><ul><l...
Touch <ul><li>Touch modes </li></ul><ul><li>Tap / long press / move / fling </li></ul><ul><li>Multi-touch </li></ul><ul><l...
Touch
Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User in...
Resolution / DPI 1280 pixels / 13.3 inch 800 pixels / 8.3 inch 1280 pixels / 13.3 inch = 96 pixels per inch 800 pixels / 8...
Resolution matters 300dpi 96dpi
Screen density - LDPI Motorola Charm Motorola Flipout Motorola Citrus Sony Ericsson  Xperia X10 Mini HTC Wildfire HTC Tattoo
Screen density - MDPI Motorola Charm HTC Droid Eris Motorola CLIQ HTC Magic  (myTouch 3G) HTC Aria Motorola Backflip
Screen density - HDPI Motorola Droid Sony Ericsson Xperia X10 Samsung Nexus S HTC Nexus One HTC G2 HTC Evo 4G
100% difference  between LDPI and HDPI
Screen density <ul><li>No hard coded pixel values </li></ul><ul><ul><li>Use dips and DisplayMetrics </li></ul></ul><ul><li...
Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User in...
Resources <ul><li>Less powerful CPUs </li></ul><ul><li>GPU / hardware acceleration optional </li></ul><ul><li>Much less me...
Resources <ul><li>Large bitmaps - out of memory errors </li></ul><ul><li>Frequent allocation of small objects - garbage co...
Mobile is different <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li...
Overview  <ul><li>Characteristics of a great UI </li></ul><ul><li>Why mobile is different </li></ul><ul><li>From design to...
What is a great application? <ul><li>User friendly </li></ul><ul><li>Responsive </li></ul><ul><li>Polished </li></ul>
But much more important
A clear, simple,  user-oriented  goal
Design process <ul><li>Formulate and finalize the product goal </li></ul><ul><li>Identify major scenarios </li></ul><ul><l...
User scenarios <ul><li>IA, IaD, UxD, UX, HCI </li></ul><ul><li>Define features (not the other way around) </li></ul><ul><l...
As the implementor <ul><li>Know hard platform limitations </li></ul><ul><li>Identify layouts, components, event handling <...
Visual design <ul><li>Colors, textures, typefaces, layouts </li></ul><ul><li>Lighting models, anti-aliasing, drop shadows,...
As the implementor <ul><li>Know hard platform limitations </li></ul><ul><li>Weigh performance considerations </li></ul><ul...
Pixel perfection <ul><li>Visual separation between sections </li></ul><ul><li>Layout depends on the screen size </li></ul>
Pixel perfection <ul><li>Thumbnail drop shadow </li></ul><ul><li>Text drop shadow </li></ul><ul><li>Vertical alignment </l...
Working with designers <ul><li>Know the platform capabilities and limitations </li></ul><ul><li>Trust that interaction and...
Below the surface <ul><li>UI layer is just one piece </li></ul><ul><li>Data models, persistence, wire protocols, caching, ...
Remember what’s important
What is a great UI? <ul><li>User friendly </li></ul><ul><li>Responsive </li></ul><ul><li>Polished </li></ul>
Everything else can be good enough
Q&A <ul><li>@kirillcool </li></ul><ul><li>pushing-pixels.org </li></ul><ul><li>[email_address] </li></ul><ul><li>android-d...
Upcoming SlideShare
Loading in …5
×

Designing for the mobile form factor

18,321 views

Published on

The presentation i gave at AnDevCon 2011

Published in: Technology, News & Politics
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ritakoneh@hotmail.co.uk
    Hola el meu amic nou
    El meu nom és rita vaig veure el seu perfil en (www.slideshare.net) i m'encanta crec que podem fer clic així que si us plau m'agradaria a enviar de tornada a través de la meva adreça de correu electrònic així: perquè jo pugui et va dir més sobre mi i dono la meva imatge dolça, perquè pugui saber que em va bé.
    A l'espera de veure la seva resposta el més aviat possible encantadora.
    Miss ritakoneh@hotmail.co.uk rita
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing for the mobile form factor

  1. Designing for the mobile form factor <ul><li>Kirill Grouchnikov </li></ul><ul><li>Android, Google Inc. </li></ul>
  2. Overview <ul><li>Characteristics of a great UI </li></ul><ul><li>Why mobile is different </li></ul><ul><li>From design to implementation </li></ul>
  3. Overview <ul><li>Characteristics of a great UI </li></ul><ul><li>Why mobile is different </li></ul><ul><li>From design to implementation </li></ul>
  4. What is a great UI? <ul><li>User friendly </li></ul><ul><li>Responsive </li></ul><ul><li>Polished </li></ul>
  5. Square TweetDeck Seesmic doubleTwist
  6. User friendliness <ul><li>Simple flows that assist in completing tasks </li></ul><ul><li>Task-oriented instead of feature-oriented </li></ul><ul><li>Guide the user instead of fight the user </li></ul><ul><li>Build on user’s knowledge of the domain </li></ul>
  7. Responsiveness <ul><li>Visual confirmation of a user action </li></ul><ul><li>Long tasks not blocking the UI </li></ul><ul><li>Progress of long running tasks </li></ul>
  8. Visual polish <ul><li>Visual appeal as important as functionality </li></ul><ul><li>Macro-level as well as micro-level </li></ul><ul><li>Visual consistency to anchor the flows </li></ul>
  9. Is mobile different? <ul><li>Similar problems </li></ul><ul><li>Similar solutions </li></ul><ul><li>Different form factor </li></ul>
  10. Overview <ul><li>Characteristics of a great UI </li></ul><ul><li>Why mobile is different </li></ul><ul><li>From design to implementation </li></ul>
  11. Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User interaction </li></ul><ul><li>Screen density </li></ul><ul><li>Limited resources </li></ul>
  12. Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User interaction </li></ul><ul><li>Screen density </li></ul><ul><li>Limited resources </li></ul>
  13. Screen size
  14. Screen size <ul><li>Finger interaction </li></ul><ul><li>Small controls - user frustration </li></ul><ul><li>Onscreen keyboard - even less space for controls </li></ul>
  15. Screen size <ul><li>Hide optional controls </li></ul><ul><li>Split long forms into separate screens </li></ul><ul><li>Annotate fields for better keyboard modes </li></ul>
  16. Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User interaction </li></ul><ul><li>Screen density </li></ul><ul><li>Limited resources </li></ul>
  17. Rotation <ul><li>Smaller form factor </li></ul><ul><li>No desktop “rigidity” </li></ul><ul><li>Different “natural” orientation </li></ul><ul><li>Varying user preference </li></ul>
  18. Landscape mode
  19. Landscape mode
  20. Landscape mode <ul><li>Don’t blindly reuse portrait layout </li></ul><ul><li>Action bar / footer - precious vertical space </li></ul><ul><li>More actionable content above the fold </li></ul><ul><li>Don’t leave gigantic unused “holes” </li></ul><ul><li>But don’t cram too much content either </li></ul>
  21. Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User interaction </li></ul><ul><li>Screen density </li></ul><ul><li>Limited resources </li></ul>
  22. User interaction <ul><li>No mouse. No stylus. No rollovers. </li></ul><ul><li>Optional physical keyboard. </li></ul><ul><li>Touch is king. </li></ul>
  23. Touch <ul><li>Touch modes </li></ul><ul><li>Tap / long press / move / fling </li></ul><ul><li>Multi-touch </li></ul><ul><li>Pinch / zoom / rotate / tilt </li></ul>
  24. Touch
  25. Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User interaction </li></ul><ul><li>Screen density </li></ul><ul><li>Limited resources </li></ul>
  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 <ul><li>No hard coded pixel values </li></ul><ul><ul><li>Use dips and DisplayMetrics </li></ul></ul><ul><li>No single set of images </li></ul><ul><ul><li>Bundle multiple resolutions </li></ul></ul>
  33. Form factor <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User interaction </li></ul><ul><li>Screen density </li></ul><ul><li>Limited resources </li></ul>
  34. Resources <ul><li>Less powerful CPUs </li></ul><ul><li>GPU / hardware acceleration optional </li></ul><ul><li>Much less memory </li></ul>
  35. Resources <ul><li>Large bitmaps - out of memory errors </li></ul><ul><li>Frequent allocation of small objects - garbage collection pauses </li></ul><ul><li>Use DDMS and “Allocation tracker” tab </li></ul>
  36. Mobile is different <ul><li>Smaller screens, bigger controls </li></ul><ul><li>Rotation and ratio change </li></ul><ul><li>User interaction </li></ul><ul><li>Screen density </li></ul><ul><li>Limited resources </li></ul>
  37. Overview <ul><li>Characteristics of a great UI </li></ul><ul><li>Why mobile is different </li></ul><ul><li>From design to implementation </li></ul>
  38. What is a great application? <ul><li>User friendly </li></ul><ul><li>Responsive </li></ul><ul><li>Polished </li></ul>
  39. But much more important
  40. A clear, simple, user-oriented goal
  41. Design process <ul><li>Formulate and finalize the product goal </li></ul><ul><li>Identify major scenarios </li></ul><ul><li>Build user flows </li></ul><ul><li>Pixel-perfect visual design </li></ul><ul><li>Implementation </li></ul>
  42. User scenarios <ul><li>IA, IaD, UxD, UX, HCI </li></ul><ul><li>Define features (not the other way around) </li></ul><ul><li>Sketch high-level wireframes </li></ul><ul><li>Define consistent navigation model </li></ul>
  43. As the implementor <ul><li>Know hard platform limitations </li></ul><ul><li>Identify layouts, components, event handling </li></ul><ul><li>Flesh out major building blocks </li></ul><ul><ul><li>anchor areas, navigation controls, interaction patterns </li></ul></ul>
  44. Visual design <ul><li>Colors, textures, typefaces, layouts </li></ul><ul><li>Lighting models, anti-aliasing, drop shadows, soft edges </li></ul><ul><li>Translucency, overlapping, non-rectangular components </li></ul>
  45. As the implementor <ul><li>Know hard platform limitations </li></ul><ul><li>Weigh performance considerations </li></ul><ul><li>Consider target hardware limitations (colors, memory, screen size, ...) </li></ul><ul><li>Two-way communication and early validation </li></ul>
  46. Pixel perfection <ul><li>Visual separation between sections </li></ul><ul><li>Layout depends on the screen size </li></ul>
  47. Pixel perfection <ul><li>Thumbnail drop shadow </li></ul><ul><li>Text drop shadow </li></ul><ul><li>Vertical alignment </li></ul><ul><li>Scaling text size to fit </li></ul>
  48. Working with designers <ul><li>Know the platform capabilities and limitations </li></ul><ul><li>Trust that interaction and visual designers know what they’re doing </li></ul><ul><li>Engage early and often </li></ul><ul><li>Provide specific feedback </li></ul><ul><li>You are not the user </li></ul>
  49. Below the surface <ul><li>UI layer is just one piece </li></ul><ul><li>Data models, persistence, wire protocols, caching, binding </li></ul><ul><li>It’s easy to “cut corners” on pixel level </li></ul>
  50. Remember what’s important
  51. What is a great UI? <ul><li>User friendly </li></ul><ul><li>Responsive </li></ul><ul><li>Polished </li></ul>
  52. Everything else can be good enough
  53. Q&A <ul><li>@kirillcool </li></ul><ul><li>pushing-pixels.org </li></ul><ul><li>[email_address] </li></ul><ul><li>android-developers.blogspot.com </li></ul>

×