I'm here today to talk about designing for a mobile mind.

About great design for a smartphone websites.

So my name is Jenny Gove and I'm a user experience researcher

at Google.

Before we get into our latest learnings

about how to design great mobile websites,

I want to tell you a story about a missed opportunity.

A mobile experience I had just the other week.

So, sometimes I get the opportunity

to go and work in New York.

And I really enjoy this because I

can take advantage of all the cultural opportunities there

are there and see some shows or see some event.

And when I was there last time I decided

to go and see this great little concert that I saw coming up.

So in my hotel room, on my laptop, I booked a ticket.

And it was kind of this venue which has small seats.

It was nearly sold out, but I managed

to get some tickets on a small table that

has, like, three seats left.

The next day at work I was talking to a colleague

and she was at a loose end for that evening.

And so I suggested she come along.

And so I pulled out my mobile phone and I pulled up the site.

And because I work on this stuff,

I was pretty delighted to see from this kind of venue,

a really nice mobile optimized site.

So I pursued that and I found a couple of buttons.

One was for the venue, to choose the best seats.

And one was for me to pick the seats myself.

Which in this instance is obviously what I wanted to do,

since I wanted to choose seats next to mine.

So I clicked that button, but nothing happened.

There was a big white page.

Very disappointing.

And as I was fumbling around the site, looking for what else

I could do to buy tickets, I was looking for like a call button,

maybe I could call the venue.

But meanwhile my friend sort of said, you know,

don't worry about it, I'll find something else to do.

So, this was, you know, such a shame

because it was such a missed opportunity for this venue.

I was about to purchase tickets and I couldn't.

The venue had done really well.

They've done a lot of work or mobile optimizing their site.

But they haven't done well enough.

And I wanted to spend my money and I couldn't.

So effectively they were throwing money away.

So why are we talking about this now at I/O 2014?

Well, we know that there is amazing smartphone growth.

We heard just yesterday in the keynote,

some incredible stats .

Let's recap those stats that Sundar started his keynote

with yesterday.

So the industry shipped over three million devices

last quarter.

And they're on track to ship well

over a billion phones each year.

The number of 30 day actives for Android is over a billion.

It's been doubling every year.

And we have people checking their phone 100 billion times

each day.

So to put this in perspective over the last few years,

the media have kind of made comparisons for us.

One of those ones they made is, you

know there are more mobile devices, and mobile device

subscriptions than there are toothbrushes in the world.

So these kind of stats put it in perspective for us.

Mobile growth is phenomenal.

This very recent graph shows a dramatic growth

in mobile usage of the percentage of web usage.

This is page views.

Just from May last year to May this year.

The growth is strong everywhere.

And all this growth is great, right,

because using our devices is always such a great experience,

right?

Just like this, just like we see in the marketing.

It's so easy, these people don't have a care in the world.

They're happy smiling people.

They don't have any frustrations.

They don't have frustrations while they're

trying to check out on their mobile.

All the type is legible.

Well, as a user experience researcher,

I spend my time observing people's use

of phones and mobile websites.

And in the last few years I've heard a lot of things

like this, from previous studies,

I've heard the mobile websites feel like they're cut down.

They're harder to navigate.

They're sparser in features.

They're smaller, poor in design, and unfamiliar.

So some of these things have been true in the past.

Sometimes companies have not put all of their inventory

on mobile.

And people are confused because they

know they can purchase these things from a company.

Or they know that they can get particular information

from a company.

And they just can't find it on mobile.

People can be worried that they might miss something.

They often have a sense of time urgency on mobile.

So to get some more context, here's

a participant quote from a shopping studies

that I ran, where one of our participants

described shopping for a birthday gift

on a mobile phone.

And I'll quote her.

She said, "I was worried I would miss something.

I was worried about screwing something up.

And you know her birthday was coming up quick."

So I think this really nicely illustrates this quote.

It illustrates that people are just

trying to get stuff done when they tend to mobile sites.

So we want to fix the poor experiences you've heard about.

And the good news is, we know it can be done, because there are

some examples of really great sites out there

that are engaging users.

So we at Google have been pretty vocal in the last few years

about the importance of creating a great mobile site.

But given those things we've heard users saying

about mobile experiences, we think

we need to do more to help you make

those great mobile experiences.

So we decided to put resources into creating materials

and guidelines to help you.

And there's compelling evidence we should do so.

If we look at some case studies--

So the Huffington Post redesigned their mobile site.

And that work led to great success for them.

It resulted in 50% time spent on their mobile device.

37% more unique visitors.

And they managed to reach 29% of all US mobile users.

So, in a different vertical, Plusnet's Telco, in the UK,

they redesigned all their sites through the creation

of responsive site.

And they had a tenfold increase in mobile conversion.

And their time to convert decreased 40%.

One more example here.

This is the Cancer.org, it's the American Cancer Society.

And they went mobile and that resulted

in 250% increase in mobile visits in one year.

A three times increase in mobile revenue,

that donations in the case of Cancer.org.

And they saw higher rates of mobile access

to key areas of their site.

And I love the quote that came from the principle

of digital platforms at Cancer.org.

She said she wanted to distribute Cancer.org

experiences as widely as possible,

to as broad an audience as possible.

And it was mission imperative to mobilize

all the Cancer.org content.

And I think why this is so compelling

to me is because this can go for,

kind of, any company really.

If you don't pay for your mobile users on the web,

then you're missing a bunch of your users.

Mobile web can be a gateway to your business.

So we're focusing on this now because mobile usage

is growing so rapidly.

And because mobile provides an increasingly important gateway

to your business.

And we want to put you in a position

where you can create a better experience for users.

We want to develop a better ecosystem for the mobile web.

And we want to tell you how the designs of sites that

provide a really good experience differ

from those that have user experience flaws.

And we want to do this on the basis of data versus expert

opinion so that you can have confidence in the information

that we give you.

So I decided to run a study.

I wrote a research plan.

And then we teamed up with AnswerLab,

which is a user research company.

And they have to scale.

And they helped us to really make this happen.

And we examined how a range of views

is interacted with a diverse group of websites.

So I'm going to tell you briefly how we set up the study.

We studied user interaction on a 100 different mobile sites,

and these ranged from really large retailers,

to service providers, and sites that had information on them.

We also included some lesser known websites

that been growing in recent years

to make sure we weren't only capturing

what those big companies were doing.

Participants brought in their own iOS or Android devices

so that they were familiar with the phone.

And this study focused on smart phones.

So there were 119 participants.

And although those numbers don't seem big by Google scale,

this is the usability study, so each participant came in

for a separate hour, so that's 119 hours of the study.

And so really, it was a very large usability study.

And participants worked through tasks for each of these sites.

The method we used was traditional usability testing

with think aloud protocol.

So they spoke aloud as we had them

go through different tasks on their sites.

This provides us with insight into understanding

the details of where there were problems with sites

and where the experience was really, kind of smooth

and seamless.

And they also provided ratings for the site.

The result of this large usability study

were collated to form 25 mobile web design principles.

And these key findings are intended

to help you build better mobile sites,

and increase engagement and conversion for your business.

So we've categorize these into five sections.

These are mobile homepage and navigation, site search,

commerce and conversions, optimizing form entry,

and site-wide design considerations.

So these principles are all about

creating a better experience for users,

enabling them to have a trouble free experience on your site,

whatever kind of site that is, information, retail,

e-commerce, or lead generation.

So we're going to look at some examples

from these 25 principles.

And we're going to talk about the guidance based

off the study results.

So let's start with mobile homepage and site navigation.

So the first and the foremost important thing

to do for your business is figure out

the primary purpose that your site exists.

In our study we tested interfaces

similar to the one on the left and the one on the right.

When users got to the one on the left

they had a particular task in mind,

but the only action available to them

was for them to learn more.

It was kind of vague and they really

didn't have the confidence that they

were going to be able to get to what they wanted to get to.

In contrast, in the Progressive site

on the right, lead generation site,

they've made it really clear that users can get a quote,

they can find a local agent, they can make a payment.

One women's magazine site that we saw had buttons at the top.

And they were labeled specials and looks.