Best practices for the mobile web!

Best practices for the mobile web Nov 2005

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

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

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

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 layout “ A picture is worth a thousand words. An interface is worth a thousand pictures.” Ben Shneiderman

It should breathe...but also work
Subtle spacing
No empty spaces, no spacer images
Grow in one direction
Clarity in design
X X 

Understandable is better than pretty!
Size does matter!
Text equivalents necessary
Resizing (server level)
Right-sizing (page level)
Can’t trust fonts!

Color me black and white…
Ensure readability
Provide simplicity
Contrast is essential
Should work without colors

Can I use tables?
Device support
Non-essential tables
Should work without tables also
Consider loading time
Target audience – device support

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 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.

Context Context Context! It’s like water:fish
Suitable content
Meet expectations – that’s it!
Clarity is of the essence

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 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

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

Style allowed? Wow! - Hold it!
Style sheet support
Style sheet independence
Consider loading time
Target audience – device support

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!

Thank you For comments or clarifications… Ekta Rohra Jafri http://www.linkedin.com/in/devingel [email_address]

http://www.medianama.com	356
http://steveyuen.org	49
http://www.slideshare.net	27
http://www.guim.fr	17
http://karen-tondeur.over-blog.com	15
http://apprentieweb.blogspot.com	6
http://marketingdemente.wordpress.com	5
http://reestols.blogspot.com	4
http://www.netvibes.com	4
http://webcache.googleusercontent.com	2
http://dragon.ep.usm.edu	2
http://babyfaces.wordpress.com	1
http://srv04.admin.over-blog.com	1
http://www.lmodules.com	1
http://s3.amazonaws.com	1

Best practices for the mobile web!

by devingel on Jan 02, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 491

Statistics

Best practices for the mobile web! — Presentation Transcript