• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WDS UXP Mobile Web May 2008
 

WDS UXP Mobile Web May 2008

on

  • 3,857 views

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

Statistics

Views

Total Views
3,857
Views on SlideShare
3,548
Embed Views
309

Actions

Likes
5
Downloads
0
Comments
0

3 Embeds 309

http://www.webdirections.org 307
http://static.slideshare.net 1
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

WDS UXP Mobile Web May 2008 WDS UXP Mobile Web May 2008 Presentation Transcript

  • the mobile web user experience oliver weidlich, ideal interfaces www.idealinterfaces.wordpress.com
  • overview • definition • the past • situation today • mobile web examples • the future is here • hints good mobile web uxp www.idealinterfaces.wordpress.com
  • 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
  • have you used the mobile web? www.idealinterfaces.wordpress.com
  • that was then... www.idealinterfaces.wordpress.com
  • that was then... • WAP 1.0 • slow speed • screen: small & low-res • poor browsers • poor content • bad interaction/interface design www.idealinterfaces.wordpress.com
  • the experience is broken www.idealinterfaces.wordpress.com
  • 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
  • 192MB = $2,685.02 www.idealinterfaces.wordpress.com
  • different interactions • hardware • operating system • applications (browser/s) • telco mobile portal • mobile web applications ...navigate this on the go?! www.idealinterfaces.wordpress.com
  • 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
  • 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
  • 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
  • dawn of mobile experience www.idealinterfaces.wordpress.com
  • Cost www.idealinterfaces.wordpress.com
  • $ getting better... • prices coming down • ‘free to browse’ • more data packs • unlimited soon? • ...but still confusing and expensive.... www.idealinterfaces.wordpress.com
  • Access www.idealinterfaces.wordpress.com
  • 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
  • accessing mobile web • synchronise bookmarks (Opera Links) • sync RSS feeds • offline browsing • Opera Mini most popular mobile app? www.idealinterfaces.wordpress.com
  • mobile web examples http://idealinterfaces.com.au/m/ www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • ...anyone else got any? www.idealinterfaces.wordpress.com
  • more at: http://mobilist.com.au www.idealinterfaces.wordpress.com
  • 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
  • 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
  • brief uxp method • research • wireframes • usability paper prototypes • interactive prototype on device • beta version • measure www.idealinterfaces.wordpress.com
  • 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
  • one web? www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • compromise between the best or widest experience? www.idealinterfaces.wordpress.com
  • mobile safari iPhone/iPod Touch www.idealinterfaces.wordpress.com
  • 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
  • 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
  • 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
  • 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
  • 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
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • www.idealinterfaces.wordpress.com
  • coming soon to a phone near you! www.idealinterfaces.wordpress.com
  • good mobile uxp www.idealinterfaces.wordpress.com
  • 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
  • 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
  • good mobile uxp • W3C Mobile web initiative http:// www.w3.org/Mobile/ • short URL, SMS keyword, QR Code www.idealinterfaces.wordpress.com
  • think through the whole mobile uxp www.idealinterfaces.wordpress.com
  • 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
  • oliverw@idealinterfaces.com.au 0411 551 561 www.twittwer.com/oliverw www.idealinterfaces.wordpress.com