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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (17)

En vedette

En vedette (20)

Similaire à Mobile Web UX Guide

Similaire à Mobile Web UX Guide (20)

Plus de Oliver Weidlich

Plus de Oliver Weidlich (6)

Dernier

Dernier (20)

Mobile Web UX Guide