Best practices for the mobile web!
-
Upload
ekta-rohra-jafri -
Category
Technology
-
view
13 -
download
0
description
Transcript of Best practices for the mobile web!
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