WDS UXP Mobile Web May 2008

3,946 views

Published on

My presentation about the Mobile Web User Experience that I gave at Web Directions South in Melbourne May 2008

Published in: Technology, Business

WDS UXP Mobile Web May 2008

  1. the mobile web user experience oliver weidlich, ideal interfaces www.idealinterfaces.wordpress.com
  2. overview • definition • the past • situation today • mobile web examples • the future is here • hints good mobile web uxp www.idealinterfaces.wordpress.com
  3. mobile web def: an internet site/stylesheet that is designed/optimised to be viewed on a mobile size screen and navigated using a mobile hardware UI (keypad, touchscreen, stylus) that caters for a mobile activity (location based, faster access, shorter download times, mobile produced content). www.idealinterfaces.wordpress.com
  4. have you used the mobile web? www.idealinterfaces.wordpress.com
  5. that was then... www.idealinterfaces.wordpress.com
  6. that was then... • WAP 1.0 • slow speed • screen: small & low-res • poor browsers • poor content • bad interaction/interface design www.idealinterfaces.wordpress.com
  7. the experience is broken www.idealinterfaces.wordpress.com
  8. issues with the mobile • call & data plans • too much irrelevant functionality • poor access to applications/content • generally small screen and buttons • generally linear navigation • network dropout www.idealinterfaces.wordpress.com
  9. 192MB = $2,685.02 www.idealinterfaces.wordpress.com
  10. different interactions • hardware • operating system • applications (browser/s) • telco mobile portal • mobile web applications ...navigate this on the go?! www.idealinterfaces.wordpress.com
  11. no fault found • 1 in 7 phone returned • 63% nff 24% usability 31% configuration • $4,500,000,000 to global industry WDS Global: No Fault Found July 2006 www.idealinterfaces.wordpress.com
  12. mobile browser bad good • speed • u.i. looks OK • access • range of trans. • no. of browsers • easy to develop • awareness • data cost fear • security concern? • browser overhead www.idealinterfaces.wordpress.com
  13. mobile application bad good • download app • rich ui • complex process • fast ui • internet req. • more adv. trans. • data cost fear • banking infrequent • access • hard to develop • updates www.idealinterfaces.wordpress.com
  14. dawn of mobile experience www.idealinterfaces.wordpress.com
  15. Cost www.idealinterfaces.wordpress.com
  16. $ getting better... • prices coming down • ‘free to browse’ • more data packs • unlimited soon? • ...but still confusing and expensive.... www.idealinterfaces.wordpress.com
  17. Access www.idealinterfaces.wordpress.com
  18. accessing mobile web • hard key/soft-key bookmark • browser (URL & Bookmark) • OS shortcut • quicklink/Java application menu • WAP Push • image recognition (QR Code & MyClick) www.idealinterfaces.wordpress.com
  19. accessing mobile web • synchronise bookmarks (Opera Links) • sync RSS feeds • offline browsing • Opera Mini most popular mobile app? www.idealinterfaces.wordpress.com
  20. mobile web examples http://idealinterfaces.com.au/m/ www.idealinterfaces.wordpress.com
  21. www.idealinterfaces.wordpress.com
  22. www.idealinterfaces.wordpress.com
  23. www.idealinterfaces.wordpress.com
  24. www.idealinterfaces.wordpress.com
  25. www.idealinterfaces.wordpress.com
  26. www.idealinterfaces.wordpress.com
  27. www.idealinterfaces.wordpress.com
  28. www.idealinterfaces.wordpress.com
  29. www.idealinterfaces.wordpress.com
  30. www.idealinterfaces.wordpress.com
  31. www.idealinterfaces.wordpress.com
  32. www.idealinterfaces.wordpress.com
  33. www.idealinterfaces.wordpress.com
  34. www.idealinterfaces.wordpress.com
  35. www.idealinterfaces.wordpress.com
  36. www.idealinterfaces.wordpress.com
  37. www.idealinterfaces.wordpress.com
  38. www.idealinterfaces.wordpress.com
  39. www.idealinterfaces.wordpress.com
  40. www.idealinterfaces.wordpress.com
  41. www.idealinterfaces.wordpress.com
  42. www.idealinterfaces.wordpress.com
  43. www.idealinterfaces.wordpress.com
  44. www.idealinterfaces.wordpress.com
  45. www.idealinterfaces.wordpress.com
  46. ...anyone else got any? www.idealinterfaces.wordpress.com
  47. more at: http://mobilist.com.au www.idealinterfaces.wordpress.com
  48. UI basics • minimise vertical space used • set & stick to interaction patterns • have clear global navigation • careful of UI elements across browsers • default text entry input • use images/video appropriate for mobile www.idealinterfaces.wordpress.com
  49. UI basics • show depth of content • clearly section the page using heading and colour • cater to different interaction types • use background colour sparingly but effectively www.idealinterfaces.wordpress.com
  50. brief uxp method • research • wireframes • usability paper prototypes • interactive prototype on device • beta version • measure www.idealinterfaces.wordpress.com
  51. design/dev process • constantly check design on phone • create a functional specification • style guide that is easy to use • create templates for staff • render the right version and provide options for other versions www.idealinterfaces.wordpress.com
  52. one web? www.idealinterfaces.wordpress.com
  53. www.idealinterfaces.wordpress.com
  54. compromise between the best or widest experience? www.idealinterfaces.wordpress.com
  55. mobile safari iPhone/iPod Touch www.idealinterfaces.wordpress.com
  56. the purchase experience • buy the phone • no contract in the store process • sign up in i-Tunes • three basic plans • mobile web included in cost (and no extra ads) www.idealinterfaces.wordpress.com
  57. why good mobile web? • WebKit is an open source, cross platform browser engine • WebKit used for iPhone, Android, S60, Trolltech • most web-browser-like mobile browser • not 3G, but fast enough (3G coming...) • clear feedback on web page loading www.idealinterfaces.wordpress.com
  58. why good mobile web? • manages both mobile and non-mobile web content • big screen • portrait or landscape • tight app integration = great uxp • std platform allows a rich web uxp www.idealinterfaces.wordpress.com
  59. why good mobile web? • high resolution • nice rendering of fonts, photos, video • direct navigation = faster • direct access from home screen for up to 16 sites (or subsections) + 12/swipe • synchronised bookmarks www.idealinterfaces.wordpress.com
  60. why good mobile web? • add to bookmarks button always visible • access to bookmarks is easy • easy organisation of bookmarks • Software updates add applications and improvements • clear back arrow for browsing www.idealinterfaces.wordpress.com
  61. www.idealinterfaces.wordpress.com
  62. www.idealinterfaces.wordpress.com
  63. www.idealinterfaces.wordpress.com
  64. www.idealinterfaces.wordpress.com
  65. www.idealinterfaces.wordpress.com
  66. www.idealinterfaces.wordpress.com
  67. www.idealinterfaces.wordpress.com
  68. www.idealinterfaces.wordpress.com
  69. www.idealinterfaces.wordpress.com
  70. www.idealinterfaces.wordpress.com
  71. www.idealinterfaces.wordpress.com
  72. www.idealinterfaces.wordpress.com
  73. www.idealinterfaces.wordpress.com
  74. www.idealinterfaces.wordpress.com
  75. www.idealinterfaces.wordpress.com
  76. www.idealinterfaces.wordpress.com
  77. coming soon to a phone near you! www.idealinterfaces.wordpress.com
  78. good mobile uxp www.idealinterfaces.wordpress.com
  79. good mobile uxp • re-think services for mobile • simplicity and functionality - get the basics right • provide an integrated/contextual service • know/design for the device range • do usability testing www.idealinterfaces.wordpress.com
  80. good mobile uxp • mobile specific content • URL: m. or i. or /m etc. .mobi? Nah! • option to link through to full site in footer • numbered navigation(?) • Log-in www.idealinterfaces.wordpress.com
  81. good mobile uxp • W3C Mobile web initiative http:// www.w3.org/Mobile/ • short URL, SMS keyword, QR Code www.idealinterfaces.wordpress.com
  82. think through the whole mobile uxp www.idealinterfaces.wordpress.com
  83. flickr.com/photos • /willgame • /Thiru Murugan (thongs) • /Kessiye (sunrise) • /tico24 (mobile keys) • /kurtxio (web) • /hans_s (money) all creative commons (attribution only) licensed www.idealinterfaces.wordpress.com
  84. oliverw@idealinterfaces.com.au 0411 551 561 www.twittwer.com/oliverw www.idealinterfaces.wordpress.com

×