WDS UXP Mobile Web May 2008

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    6 Favorites & 2 Groups

    WDS UXP Mobile Web May 2008 - Presentation 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

    + Oliver WeidlichOliver Weidlich, 2 years ago

    custom

    2736 views, 6 favs, 2 embeds more stats

    My presentation about the Mobile Web User Experienc more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2736
      • 2610 on SlideShare
      • 126 from embeds
    • Comments 0
    • Favorites 6
    • Downloads 0
    Most viewed embeds
    • 125 views on http://www.webdirections.org
    • 1 views on http://static.slideshare.net

    more

    All embeds
    • 125 views on http://www.webdirections.org
    • 1 views on http://static.slideshare.net

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories