Best practices for the mobile web!

Slide 1: Best practices for the mobile web Nov 2005

Slide 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 Best practices in designing for the mobile web 2

Slide 3: Welcome to Airtel When it comes to access - Live Wap Portal: [ ]Travel & Ticketing what is important is how… [ ] Banking [ ] Jobs [ ] Matrimony [GIF- AirTel Live] 1.[ ] Banking Bank with  Clarity in linking HDFC | IDBI | UTI Get a loan Home | Personal | Auto  Don’t link to something you can’t get ------------- 2. [ ] Travel & Ticketing Railway enquiry  Make access easy Air ticketing City guide ------------  Minimize nav bars on top 3. [ ] Jobs Search | More… ------------  Main content – first! 4. [ ] Matrimony Find | Status| Chat ------------ 5.[ ] Search 6.[ ] Bill pay Best practices in designing for the mobile web 3

Slide 4: How deep do you go? [ ] HDFC -Balance enquiry Select: -Mini statement [ ] HDFC Bank  Browsing time is a factor -Bill pay [ ] IDBI Bank More.. [ ] UTI Bank ----------- [ ] More Banks  Easier to scroll than to click [ ] IDBI -Balance enquiry Back -Cheque status  Shallow and wide -Deposit details More.. -----------  Not narrow and deep [ ] UTI -Balance enquiry -Mini statement -Open account  The key is balance ----------- [ ] Get a loan Home | Personal | Auto ----------- Menu Best practices in designing for the mobile web 4

Slide 5: Everything has to look the same!  Consistency in terminology  Consistency in visual design  Mean what you say!  Make it familiar  The key is memorability Best practices in designing for the mobile web 5

Slide 6: Best practices in layout “A picture is worth a thousand words. An interface is worth a thousand pictures.” Ben Shneiderman Best practices in designing for the mobile web 6

Slide 7: It should breathe...but also work  Subtle spacing  No empty spaces, no spacer images  Grow in one direction  Clarity in design  Best practices in designing for the mobile web 7

Slide 8: Understandable is better than pretty!  Size does matter!  Text equivalents necessary  Resizing (server level)  Right-sizing (page level)  Can’t trust fonts! Best practices in designing for the mobile web 8

Slide 9: Color me black and white…  Ensure readability  Provide simplicity  Contrast is essential  Should work without colors Best practices in designing for the mobile web 9

Slide 10: Can I use tables?  Device support  Non-essential tables  Should work without tables also  Consider loading time  Target audience – device support Best practices in designing for the mobile web 10

Slide 11: Text input is a pain…need relief!  By hook or by crook – minimize  Evaluate, contain text entry  Don’t default on defaults  Clickable is always better than input Best practices in designing for the mobile web 11

Slide 12: Best practices in Communication \"Context\" 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. Best practices in designing for the mobile web 12

Slide 13: Context Context Context! It’s like water:fish  Suitable content  Meet expectations – that’s it!  Clarity is of the essence Best practices in designing for the mobile web 13

Slide 14: Beeeeeep! Error! Now what?  Human error – Human error message  Machine error – Human error message  Navigation – retry, cancel or away  How to recover…  Prevention is better than cure! Best practices in designing for the mobile web 14

Slide 15: Best practices for high end mobiles \"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 Best practices in designing for the mobile web 15

Slide 16: High-end mobiles  Color - finally  Images - necessary  Formatting  Do not trust cookies!  No frames…at all  Ensure readability- its still very small  Test on all target devices extensively Best practices in designing for the mobile web 16

Slide 17: Style allowed? Wow! - Hold it!  Style sheet support  Style sheet independence  Consider loading time  Target audience – device support Best practices in designing for the mobile web 17

Slide 18: What works…  Prioritize tasks for mobile use  Design for single button use – navigation key or left soft key  Minimize input  Make information very contextual. Use location info  Make information personal. Take into account usage behavior etc  Test. Test. Test. Test. On users & on devices! Best practices in designing for the mobile web 18

Slide 19: Thank you For comments or clarifications… Ekta Rohra Jafri http://www.linkedin.com/in/devingel devingel@gmail.com