Mobile Web UX Guide

the mobile web
user experience
oliver weidlich, ideal interfaces

www.idealinterfaces.wordpress.com

overview
• deﬁnition
• the past
• situation today
• mobile web examples
• the future is here
• hints good mobile web uxp


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).


have you used the
mobile web?


that was then...


that was then...
• WAP 1.0
• slow speed
• screen: small & low-res
• poor browsers
• poor content
• bad interaction/interface design


the experience is broken


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


192MB = $2,685.02


different interactions
• hardware
• operating system
• applications (browser/s)
• telco mobile portal
• mobile web applications
...navigate this on the go?!


no fault found
• 1 in 7 phone returned
• 63% nff
24% usability

31% conﬁguration

• $4,500,000,000 to global industry

WDS Global: No Fault Found July 2006

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


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


dawn of mobile
experience


Cost


$ getting better...
• prices coming down
• ‘free to browse’
• more data packs
• unlimited soon?
• ...but still confusing and expensive....


Access


accessing mobile web
• hard key/soft-key bookmark
• browser (URL & Bookmark)
• OS shortcut
• quicklink/Java application menu
• WAP Push
• image recognition (QR Code & MyClick)


accessing mobile web
• synchronise bookmarks (Opera Links)
• sync RSS feeds
• ofﬂine browsing
• Opera Mini most popular mobile app?


mobile web examples
http://idealinterfaces.com.au/m/


...anyone else got any?


more at:
http://mobilist.com.au


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


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


brief uxp method
• research
• wireframes
• usability paper prototypes
• interactive prototype on device
• beta version
• measure


design/dev process
• constantly check design on phone
• create a functional speciﬁcation
• style guide that is easy to use
• create templates for staff
• render the right version and provide
options for other versions


one web?


compromise between the
best or widest
experience?


mobile safari
iPhone/iPod Touch


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)


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


• 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


• 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


• 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


coming soon to a phone
near you!


good mobile uxp


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


good mobile uxp
• mobile speciﬁc content
• URL: m. or i. or /m etc. .mobi? Nah!
• option to link through to full site in
footer

• numbered navigation(?)
• Log-in


good mobile uxp
• W3C Mobile web initiative http://
www.w3.org/Mobile/

• short URL, SMS keyword, QR Code


think through the whole
mobile uxp


ﬂickr.com/photos
• /willgame
• /Thiru Murugan (thongs)
• /Kessiye (sunrise)
• /tico24 (mobile keys)
• /kurtxio (web)
• /hans_s (money)

all creative commons (attribution only) licensed

oliverw@idealinterfaces.com.au
0411 551 561
www.twittwer.com/oliverw


Mobile Web UX Guide

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (20)

Similar to Mobile Web UX Guide

Similar to Mobile Web UX Guide (20)

More from Oliver Weidlich

More from Oliver Weidlich (6)

Recently uploaded

Recently uploaded (20)

Mobile Web UX Guide