Best practices for the mobile web

Nov 2005

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

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.[ ] BankingBank withHDFC | IDBI | UTIGet a loanHome | Personal | Auto-------------2. [ ] Travel & TicketingRailway enquiryAir ticketingCity guide------------3. [ ] JobsSearch | More…------------4. [ ] MatrimonyFind | Status| Chat

------------5.[ ] Search6.[ ] Bill pay

Best practices in designing for the mobile web 4

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 payMore..-----------[ ] IDBI-Balance enquiry-Cheque status-Deposit detailsMore..-----------[ ] UTI-Balance enquiry-Mini statement-Open account-----------[ ] Get a loanHome | Personal | Auto-----------Menu

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

Thank you

For comments or clarifications…

Ekta Rohra Jafri

http://www.linkedin.com/in/devingel

devingel@gmail.com