Usability in Mobile Applications BRUNO FIGUEIREDO the_ml
Europe: 90.9% have a mobile 41% worldwide (2,67 billion) ██   120% >  ██  100-120%  ██  80-100%  ██  < 80% wikipedia
Adapted from Bill  Moggridge & Jan Borchers Market Evolution Sweet Spot
PDAs Keyboard, Touchscreen Mobile Phone Types dotMobi Feature Phones Phone, SMS, Internet Smart Phones Applications
Mobile Web Sites moritz™
Screen Resolution and Formats dotMobi
Mobile Development Languages Wikipedia
Regular Web, Mobile version
Auntie P
Mobile Web
Main Mobile Browsers Pocket Internet Explorer Opera Mobile Safari Mobile
Hub and Spoke Home
Simple Hierarchy
Clickstream Brian Fling
Home Heading Navigation Footer Section 2 Highlights Section 1 Highlights Section 1 Heading Navigation Footer Content Secti...
Optimized Degradation Normal Without CSS
Horizontal Lines and Breadcrumbs Optimized for vertical navigation Breadcrumbs: only useful for more than 3 levels deep
Forms
Shortcut Keys
The Magic Number (+ or – 2) George Miller
Good Practices <ul><li>Easy to type addresses m.site.com or site.mobi instead of www.site.com/mobile </li></ul><ul><li>Spe...
Good Practices <ul><li>Layout links vertically </li></ul><ul><li>Avoid repetitive data entry passwords are hard to type </...
Mobile Applications Tim Caynes
Main Mobile Platforms Symbian 65% Windows Mobile 12% BlackBerry 11% iPhone 7%
liewcf Numeric  Keyboard and Joystick
StarrGazr Half Keyboard and Ball
KhE  龙 Cursor Keys
Crouching Donkey Touchscreen (Multi-touch)
Full Keyboard and Touchscreen
Card Stack Screens with subtle animations
Two Panels List + Detail
Fisheye Lens
Distortion Lens
Predictive Text
Availability Restrictions
Progressive Filtering
Rapid Serial Visual Presentation 50 miliseconds Robert Spencer
Good Practices <ul><li>Optimize interaction for the target device stylus based, small targets; finger based, big targets 3...
[email_address] Thank you gailjadehamilton
Upcoming SlideShare
Loading in...5
×

Usability In Mobile Applications

11,604

Published on

Key usability pointers for anyone who's developing mobile web sites and applications.

Published in: Design, Technology, Business
4 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,604
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
536
Comments
4
Likes
26
Embeds 0
No embeds

No notes for slide

Usability In Mobile Applications

  1. 1. Usability in Mobile Applications BRUNO FIGUEIREDO the_ml
  2. 2. Europe: 90.9% have a mobile 41% worldwide (2,67 billion) ██   120% > ██  100-120% ██  80-100% ██  < 80% wikipedia
  3. 3. Adapted from Bill Moggridge & Jan Borchers Market Evolution Sweet Spot
  4. 4. PDAs Keyboard, Touchscreen Mobile Phone Types dotMobi Feature Phones Phone, SMS, Internet Smart Phones Applications
  5. 5. Mobile Web Sites moritz™
  6. 6. Screen Resolution and Formats dotMobi
  7. 7. Mobile Development Languages Wikipedia
  8. 8. Regular Web, Mobile version
  9. 9. Auntie P
  10. 10. Mobile Web
  11. 11. Main Mobile Browsers Pocket Internet Explorer Opera Mobile Safari Mobile
  12. 12. Hub and Spoke Home
  13. 13. Simple Hierarchy
  14. 14. Clickstream Brian Fling
  15. 15. Home Heading Navigation Footer Section 2 Highlights Section 1 Highlights Section 1 Heading Navigation Footer Content Section 2 Heading Navigation Footer Content Aux. Section Heading Navigation Footer Content Recomended Structure
  16. 16. Optimized Degradation Normal Without CSS
  17. 17. Horizontal Lines and Breadcrumbs Optimized for vertical navigation Breadcrumbs: only useful for more than 3 levels deep
  18. 18. Forms
  19. 19. Shortcut Keys
  20. 20. The Magic Number (+ or – 2) George Miller
  21. 21. Good Practices <ul><li>Easy to type addresses m.site.com or site.mobi instead of www.site.com/mobile </li></ul><ul><li>Specialized mobile versions </li></ul><ul><li>Simple, shallow navigation structures </li></ul><ul><li>Useful and simplified content on every page not just navigation </li></ul><ul><li>Optimize for degradation </li></ul>1 2 3 4 5
  22. 22. Good Practices <ul><li>Layout links vertically </li></ul><ul><li>Avoid repetitive data entry passwords are hard to type </li></ul><ul><li>Simplify forms (with clear buttons) </li></ul><ul><li>Provide shortcuts </li></ul><ul><li>Minimize the (yet short) bandwidth use </li></ul>6 7 8 9 10
  23. 23. Mobile Applications Tim Caynes
  24. 24. Main Mobile Platforms Symbian 65% Windows Mobile 12% BlackBerry 11% iPhone 7%
  25. 25. liewcf Numeric Keyboard and Joystick
  26. 26. StarrGazr Half Keyboard and Ball
  27. 27. KhE 龙 Cursor Keys
  28. 28. Crouching Donkey Touchscreen (Multi-touch)
  29. 29. Full Keyboard and Touchscreen
  30. 30. Card Stack Screens with subtle animations
  31. 31. Two Panels List + Detail
  32. 32. Fisheye Lens
  33. 33. Distortion Lens
  34. 34. Predictive Text
  35. 35. Availability Restrictions
  36. 36. Progressive Filtering
  37. 37. Rapid Serial Visual Presentation 50 miliseconds Robert Spencer
  38. 38. Good Practices <ul><li>Optimize interaction for the target device stylus based, small targets; finger based, big targets 3D look and feel for touchscreen interfaces </li></ul><ul><li>Minimize data entry </li></ul><ul><li>Optimize content presentation emphasize what’s being seen/manipulated </li></ul><ul><li>Provide shortcuts for experienced users </li></ul>1 3 4 5 2
  39. 39. [email_address] Thank you gailjadehamilton
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×