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

Clarity in linking

Don’t link to something you can’t get

Make access easy

Minimize nav bars on top

Main content – first!

[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

Browsing time is a factor

Easier to scroll than to click

Shallow and wide

Not narrow and deep

The key is balance

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

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 

Subtle spacing

No empty spaces, no spacer images

Grow in one direction

Clarity in design

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

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

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

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

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

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!

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

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

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!

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]