Your SlideShare is downloading. ×
0
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
WDS UXP Mobile Web May 2008
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WDS UXP Mobile Web May 2008

2,744

Published on

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

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

Published in: Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,744
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×