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.

Best practices for the mobile web!


Published on

W3C mobile web standards decoded into normal speak!

Published in: Technology, Economy & Finance

Best practices for the mobile web!

  1. 1. Best practices for the mobile web Nov 2005
  2. 2. Best practices in Navigation Navigation is about wayfinding, you can't treat it as separate (from design)..'s about creating a complete system. It's about looking at the whole. Clement Mok On navigation in building architecture
  3. 3. When it comes to access - what is important is how… <ul><li>Clarity in linking </li></ul><ul><li>Don’t link to something you can’t get </li></ul><ul><li>Make access easy </li></ul><ul><li>Minimize nav bars on top </li></ul><ul><li>Main content – first! </li></ul>Welcome to Airtel Live Wap Portal: [ ] Travel & Ticketing [ ] Banking [ ] Jobs [ ] Matrimony <ul><li>[GIF- AirTel Live] </li></ul><ul><li>1.[ ] Banking </li></ul><ul><li>Bank with </li></ul><ul><li>HDFC | IDBI | UTI </li></ul><ul><li>Get a loan </li></ul><ul><li>Home | Personal | Auto </li></ul><ul><li>------------- </li></ul><ul><li>2. [ ] Travel & Ticketing </li></ul><ul><li>Railway enquiry </li></ul><ul><li>Air ticketing </li></ul><ul><li>City guide </li></ul><ul><li>------------ </li></ul><ul><li>3. [ ] Jobs </li></ul><ul><li>Search | More… </li></ul><ul><li>------------ </li></ul><ul><li>4. [ ] Matrimony </li></ul><ul><li>Find | Status | Chat </li></ul><ul><ul><li>------------ </li></ul></ul><ul><li>5.[ ] Search </li></ul><ul><li>6.[ ] Bill pay </li></ul>
  4. 4. How deep do you go? <ul><li>Browsing time is a factor </li></ul><ul><li>Easier to scroll than to click </li></ul><ul><li>Shallow and wide </li></ul><ul><li>Not narrow and deep </li></ul><ul><li>The key is balance </li></ul>Select: [ ] HDFC Bank [ ] IDBI Bank [ ]  UTI Bank [ ]  More Banks Back <ul><li>[ ] HDFC </li></ul><ul><li>Balance enquiry </li></ul><ul><li>Mini statement </li></ul><ul><li>Bill pay </li></ul><ul><li>More.. </li></ul><ul><li>----------- </li></ul><ul><li>[ ] IDBI </li></ul><ul><li>Balance enquiry </li></ul><ul><li>Cheque status </li></ul><ul><li>Deposit details </li></ul><ul><li>More.. </li></ul><ul><li>----------- </li></ul><ul><li>[ ] UTI </li></ul><ul><li>Balance enquiry </li></ul><ul><li>Mini statement </li></ul><ul><li>Open account </li></ul><ul><li>----------- </li></ul><ul><li>[ ] Get a loan </li></ul><ul><li>Home | Personal | Auto </li></ul><ul><li>----------- </li></ul><ul><li>Menu </li></ul>
  5. 5. Everything has to look the same! <ul><li>Consistency in terminology </li></ul><ul><li>Consistency in visual design </li></ul><ul><li>Mean what you say! </li></ul><ul><li>Make it familiar </li></ul><ul><li>The key is memorability </li></ul>
  6. 6. Best practices in layout “ A picture is worth a thousand words. An interface is worth a thousand pictures.” Ben Shneiderman
  7. 7. It should breathe...but also work <ul><li>Subtle spacing </li></ul><ul><li>No empty spaces, no spacer images </li></ul><ul><li>Grow in one direction </li></ul><ul><li>Clarity in design </li></ul>X X 
  8. 8. Understandable is better than pretty! <ul><li>Size does matter! </li></ul><ul><li>Text equivalents necessary </li></ul><ul><li>Resizing (server level) </li></ul><ul><li>Right-sizing (page level) </li></ul><ul><li>Can’t trust fonts! </li></ul>
  9. 9. Color me black and white… <ul><li>Ensure readability </li></ul><ul><li>Provide simplicity </li></ul><ul><li>Contrast is essential </li></ul><ul><li>Should work without colors </li></ul>
  10. 10. Can I use tables? <ul><li>Device support </li></ul><ul><li>Non-essential tables </li></ul><ul><li>Should work without tables also </li></ul><ul><li>Consider loading time </li></ul><ul><li>Target audience – device support </li></ul>
  11. 11. Text input is a pain…need relief! <ul><li>By hook or by crook – minimize </li></ul><ul><li>Evaluate, contain text entry </li></ul><ul><li>Don’t default on defaults </li></ul><ul><li>Clickable is always better than input </li></ul>
  12. 12. Best practices in Communication &quot;Context&quot; is the invisible environment, the interrelated conditions, the structure of interpretation in which your life occurs. The context of your life is like water to a fish.
  13. 13. Context Context Context! It’s like water:fish <ul><li>Suitable content </li></ul><ul><li>Meet expectations – that’s it! </li></ul><ul><li>Clarity is of the essence </li></ul>
  14. 14. Beeeeeep! Error! Now what? <ul><li>Human error – Human error message </li></ul><ul><li>Machine error – Human error message </li></ul><ul><li>Navigation – retry, cancel or away </li></ul><ul><li>How to recover… </li></ul><ul><li>Prevention is better than cure! </li></ul>
  15. 15. Best practices for high end mobiles &quot; Designers have to learn to stop trying to control the display of their pages. They have to accept that forces beyond their control will cause their design to display differently, sometimes radically, in certain situations. - Randal Rust
  16. 16. High-end mobiles <ul><li>Color - finally </li></ul><ul><li>Images - necessary </li></ul><ul><li>Formatting </li></ul><ul><li>Do not trust cookies! </li></ul><ul><li>No frames…at all </li></ul><ul><li>Ensure readability- its still very small </li></ul><ul><li>Test on all target devices extensively </li></ul>
  17. 17. Style allowed? Wow! - Hold it! <ul><li>Style sheet support </li></ul><ul><li>Style sheet independence </li></ul><ul><li>Consider loading time </li></ul><ul><li>Target audience – device support </li></ul>
  18. 18. What works… <ul><li>Prioritize tasks for mobile use </li></ul><ul><li>Design for single button use – navigation key or left soft key </li></ul><ul><li>Minimize input </li></ul><ul><li>Make information very contextual. Use location info </li></ul><ul><li>Make information personal. Take into account usage behavior etc </li></ul><ul><li>Test. Test. Test. Test. On users & on devices! </li></ul>
  19. 19. Thank you For comments or clarifications… Ekta Rohra Jafri [email_address]