Your SlideShare is downloading. ×
0
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Best practices for the mobile web!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Best practices for the mobile web!

7,658

Published on

W3C mobile web standards decoded into normal speak!

W3C mobile web standards decoded into normal speak!

Published in: Technology, Economy & Finance
3 Comments
34 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,658
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
355
Comments
3
Likes
34
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Best practices for the mobile web Nov 2005
  • 2. Best practices in Navigation Navigation is about wayfinding, you can't treat it as separate (from design).. ..it's about creating a complete system. It's about looking at the whole. Clement Mok On navigation in building architecture
  • 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. 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. 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. Best practices in layout “ A picture is worth a thousand words. An interface is worth a thousand pictures.” Ben Shneiderman
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Thank you For comments or clarifications… Ekta Rohra Jafri http://www.linkedin.com/in/devingel [email_address]

×