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