Mobile Breakfast Briefing June 2012

Mobile UX - Breakfast Briefing
June 14th 2012

Mark Westwater – Senior User Experience Consultant
mark@uservision.co.uk

Outline

 Background
 What’s happened since the last mobile breakfast
briefing? (September 2009)
 Design principles
 Current trends in mobile UX
– Responsive Design

 The future?

2 Mobile UX Overview | 14/06/2012

Background


Background (2)


Background (3)
 2011 as a year in Mobile:
– Nokia relevance questionable.
– Windows Mobile’s poor IE browser.
– Palm Web OS gone.
– Blackberry’s struggling to evolve past being enterprise email.
– Windows phone?
 The mobile market is essentially down to only two competitors:
iOS and Android.
 Think of it as building desktop software for Windows and Mac.
You have no excuse not to build a custom app optimised for at
least one or the other.
– If you really must have an app that is – in certain instances a good mobile
website could work better…..

Outline

 Background
briefing?

 The future?


Breakfast Briefing 2009 - Mobile Statistics
 Some statistics:
– 20% of UK mobile phone users now use the
Internet on their mobile devices (source:
3G.co.uk).
– In 2008 alone there was an estimated 58 million
PDAs sold worldwide (source: eTForecast).
– A recent press release from Comscore indicated
that mobile web use has more than DOUBLED
from 10.8 million in January 2008 to 22.4
million in January 2009.
– By 2011, more smart phones than PCs.
– It is clear that mobile web use is a growing
market.


Now - Mobile Statistics
 2011 saw 500M mobile internet users worldwide, 20M in
the UK alone.
 Of all the time spent accessing the internet, 23% of it is
done on a mobile device.
 YouTube mobile has 200M video playbacks each day
worldwide.
 Amazon.com have had $1 billion in sales via mobile
commerce.
 App development has gone through the roof.
 Smartphone sales are expected to overtake PC sales by
2013.

Since last briefing 2009

 App development/downloads gone through the roof.
– Longevity is questionable.
 Mobile site creation has not grown as fast.
 Squeezing more content into the mobile space.


The mobile challenges

Source: NNG Lecture


The mobile challenges

 Variety of browsers
 Tricky input method
 Poor success rates
 Download times
 Scrolling
 ‘Bloated’ pages
 Unfamiliarity
 Reluctance to use


The mobile UX cycle

Source: strategist.net


1. Assess current situation
 When an organisation decides to design a website or an app
targeted at mobile web users, they need to consider several
factors like:
– Why should we make / create a mobile web application?
– What are the benefits of doing so?
– What kind of content can be made available online?
– Will the content delivered on mobile devices make sense for the
target audience?
– Is it really adding value to their usage?
– Are the tasks short and sweet?
– Will it work across multiple device profiles?


1. Assess current situation - Mobile Strategy
Do weed need a mobile
offering?
Yes No

Mobile web stats =
iOS Android Blackberry >10%

App Site App Site App Site

Stand Stand Stand
Resp Resp Resp
Alone Alone Alone

Questions:
• What type of devices are they pointing at your site with?
• What tasks do they undertake?
• What content/features do they need?
• Where are they?


Apps vs. mobile sites
 Why bother creating a mobile version of a website
when an app seems to be in vogue?
– The app needs to be downloaded from app store whereas everyone can access the
mobile website and often are automatically directed there.
– Apps difficult to find in app store?
– All apps require Apples’ blessing. Not the case with Android.
– Downloading the iPhone app requires a wireless network or the experience can be
frustrating. I recently downloaded an app over the 3G network which took over
20mins to download and install correctly!
– In many cases the iPhone app load time appears longer than the mobile website.
– The mobile website is eg. Safari driven/displayed and given that up to 8 pages can
remain open at any given time it is easier to switch between them.
– Limit to the number of apps that can be installed.
– Apps ‘lost’ in folders (iOS).


Why create a mobile site?

mCommerce
Android
sites can Reach Findability
upsurge
work

Why create a
Google Play
App Shelf life mobile site?

App
App features
promotion No approval
in mobile Links
eg. Name & process
sites
icon
http://mashable.com/2012/06/06/mobile-site-mobile-app-
infographic/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Mashable+%28Mashable%29

2. Understand your users

Who are
your users?

Just I know what
browsing I want!

Impact on the design guidelines?

Prominence of search
Depth of navigation
Presentation of content


3. Content delivery - What?

Who are
your users?

Just I know what
browsing I want!

What are the primary tasks?

Web stats
Content workshops
Ask your users (FG’s, CrowdSource)


Outline

 Background
briefing?

 The future?


Background - Fit For Purpose


Background - Fit For Purpose

Navigation first content second What the audience
Avoid ‘Getting started’ and ‘Skip Intro’. wants.


4. Design with mobile considerations
 Consider the opportunity cost of each design element
 Display only relevant content.
 Keep it short and simple.
 Use the available phone features.
– GPS, camera, accelerometer, compass, etc.
 Make the design interruptible.
– Save state often.
 Make the design self-sufficient.
 Minimise the interaction cost.


Amazon - How to!

 A lot of content has been
removed.
 Amazon’s mobile site, and
the navigation has been
tremendously cut down.
 Instead of being able to
browse through Amazon’s
offerings, the user is taken to
a landing page focused on a
few book covers instead.


Amazon (2)

 Simple search box
 Auto-suggest
 Deals with misspellings
 Provides sorting/
filtering options
 Keeps checkout short
 Provide purchases process
length (e.g. step x of y)
 Registration process
unnecessary
 Transactional security


Client example: Emirates

Q: What content is required for the mobile site?

Neilsen guidelines

 Big overlap with desktop rules of thumb:

Neilsen guidelines - Unique to mobile

What makes a usable mobile interface?
 1. Meet users' needs quickly
– Mobile browsing is most often for ‘immediate’ information – directions, phone
numbers, addresses or instant entertainment.

– A usable mobile interface would make finding information ‘and using it’ a quick
simple process.

– If possible, predict the desired information, links, such as ‘call them’, email or map
links etc.

– RESEARCH YOUR USERS!

 2. Don't repeat the navigation on every page
– Page real estate is particularly precious on a mobile devices screen.

– Where as normal WebPages display the navigation options on each and every
page, this is not always a viable option on a mobile device.


What makes a useable mobile interface?
 3. Clearly distinguish selected items
– Navigation is more difficult on mobile devices, the cursor not only selects items
but also scrolls down pages - The cursor must move quick enough to travel the
entire screen at a reasonable rate for navigation, but also slow enough for the
user to be able to select items within the page

– Selected items should stand out from everything else – by changing font, colour,
size, borders etc. Don't forget the effect of background colour (and other page
design factors)

 4. Make user input as simple as possible
– Text input is limited on mobile devices and therefore
should be avoided where possible.

– Instead, offer the user the option to browse from existing
options/categories.

– Text input can be offered as a backup where necessary.


 5. Only show essential information
– As screen size is a major issue, information sent should be prioritised in terms of
what is most valued/required.

– Only essential information should be provided to allow more effective use of the
limited page real estate, but also as the rate charged for downloading page
content can vary.

– By avoiding sending unnecessary content, the desired information will be easier
to find and cost less for the user.

 6. Place basic browsing controls on the page
– As navigation is tricky, and real estate is at a premium, the navigation options that
are offered need to be as effective as possible.

– These are often website and function specific, but in general, back to homepage
/results(new search), back (1 page), next page are the minimum (and maximum)
navigation that is often required.


Information architecture
 If your app/site makes sense on the web which features
and content belong on mobile web?
– Limit categories to roughly 5.
– 10 links can map to access keys.
– Keep navigation levels to a minimum (5 max).
– Regularly update link ordering based on traffic.
– Ensure at least 1 content item per category.


App trends - Gestures


5. Test & Refine - Test rigs - ‘Sleds’


Halfords Case Study
Execution:
 Visitors browsing to Halfords.com via any mobile device are now
automatically directed to the new mobile platform, where they
can search for products, read customer reviews, make product
comparisons, locate their nearest store that stocks that
product, then choose from Home/Work Delivery, Order &
Collect (Free to Store) or Reserve & Collect.
 When using the mobile site, customers can choose to pay by
credit/debit card or PayPal, the same payment methods
supported by Halfords.com.
 Halfords was the first mass UK retailer to offer PayPal as a
mobile payment method.
 The site also has some unique touches. When browsing you are
then asked for your registration or make and model of car and
the system automatically finds the right parts for your car.

Results:
 Since the launch of the mobile site, the retailer has seen mobile
visitor numbers increase to 8% of Halfords’ dotcom total.

Outline

 Background
briefing?

 The future?


Responsive designs - What Is It?

 Neilsen: ‘Good mobile
user experience requires
a different design than
what’s needed to satisfy
desktop users. Two
designs, two sites, and
cross-linking to make it
all work.’
– Wrong!
– Why?
– Responsive Design…..


Responsive designs - What Is It?

 ‘Utilising CSS3, HTML5, JavaScript and modern
browser features to display HTML content in the most
suitable format for the viewport requesting the
content.’

I prefer…

 Your site will look good across smartphones, tablets,
small monitors and large displays using single code.


Responsive designs - Good idea?

 Responsive designs essentially hide content on smaller screens
that would otherwise be visible on desktop/laptop screens.
 This strategy implicitly assumes mobile sites should have less
content than their desktop counterparts.
 Also, it's almost always a bad idea to send a full desktop site's
worth of mark-up, CSS, JS, and images to devices that won't use
all of it and might have limited connectivity.
 What is wrong is building a site without data on how people
expect and want to use it on a mobile device.



Q: Are the tasks performed cross-platform the same?

Yes No

Responsive Dedicated Mobile
Designs Site

Factors: Factors:
Less customisation Fully customised
Reduced support Fully supported
Imperfect Design ‘Ideal’ layout



 Less Maintenance
 Search Engine Optimization
 Better User Experience?
 Conversion Optimisation
 Web Analytics / Tracking


Responsive designs - How to!

http://www.blastam.com/

http://www.bostonglobe.com/

http://www.pelicanfly.co.uk/

http://starbucks.co.uk/



 There are times when it makes sense to have a
separate mobile website.
– Your separate website is so small, it’s easy to maintain.
– You are creating a mobile only landing page.
– The mobile version of the site really needs to be that
different. Amazon and eBay?
– You really want to focus on trimming the content down for
mobile users.
– You’d like the mobile website to look more like a mobile app.


Tablet design…..well the iPad

 No need to rely on one orientation.
– Many apps only work in landscape. Natural location of the
‘home’ button.
 Do not view the large iPad screen as an invitation to
bring back all the functionality you removed from
your iPhone application.
– Ensure touchpoints are discoverable.
– Consider touchpoint size (visible vs. actual) and proximity.
 Despite CloudOn the iPad is still mostly used for email,
video, reading and gaming.

Outline

 Background
briefing?

 The future?


What’s next?

 Monetisation
 Security
 Targeting & personalisation
 HTML 5
 In-App analytics


Thank you

For further information, please contact:

Mark Westwater
Senior UX Consultant
User Vision
55 North Castle Street
Edinburgh
EH2 3QA

Tel: 0131 225 0856
Email: mark@uservision.co.uk
Web: www.uservision.co.uk


Mobile Breakfast Briefing June 2012

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Mobile Breakfast Briefing June 2012

Similar to Mobile Breakfast Briefing June 2012 (20)

More from User Vision

More from User Vision (20)

Recently uploaded

Recently uploaded (20)

Mobile Breakfast Briefing June 2012

Editor's Notes