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