Google I/O 2014 - より良いモバイルウェブのためのデザイン原則 (Google I/O 2014 - Design principles for a better mobile web)

字幕表動画を再生する

Hello.
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.
These were very vague, and participants really
didn't know what they would get.
So mobile users really want their information here and now.
And figuring out what those key calls to action are
is the primary thing you need to do.
Secondary content and calls to action
can be accessed either further down the screen
or behind the menu icon.
The next thing is to keep menu's short and sweet.
So we saw a number of extensive menus on mobile,
and nobody is going to scroll through them.
But we kind of analyzed the sites,
and we saw that some sites have done
a really good job of moving from desktop to mobile,
and reconsidering their menu structure for mobile.
So Macy's does a great job of this
if you take a look at their site.
Consider how you can present the fewest menu items possible,
but still keep those categories really distinct.
You can do some user testing to help you with this.
Do users understand the different menu items
you're offering, and do they know
what would lie beneath them?
When mobile users navigate through your site,
they want an easy way to get back to your home page.
For example, perhaps they want to get back
to do another search, or perhaps they
want to start a new browse experience through your site.
In this study the users expected tapping the logo
on the top of the page, on the left
to take them back to the home page.
And they became really frustrated if it didn't work.
So this is a really good example of the principle in action.
1-800-Flowers does this well here.
So let's summarize the homepage takeaways.
Keep calls to action front and center.
So, even if you're developing a responsive site,
you need to think about how that should be designed for mobile.
Keep menu's short and sweet.
Make sure you're not having to scroll a great deal on mobile
through your menus, and that they're distinct.
And make it easy to get back to the home page.
Next we'll look at the importance of mobile site
search.
So along with the home page that focuses on calls to action,
our study showed just how important
it is to provide good, clear search functionality.
So the design on the right here, is great.
You can see when you do your such immediately.
There's a nice big search field.
Now, it might sound surprising to me,
you know, like, Google says search is important, you know,
wow.
Well, I can tell you that in our team
we actually had quite a bit of discussion
about this before we actually ran this study.
The thought being that, people often find it difficult,
so we heard, to type on mobile.
So maybe navigation is the primary thing
that we should be doing on mobile devices.
But we found search to be really important.
It's all to do with users having that sense of urgency,
and wanting to get to their content, sort of immediately.
So we found that, particularly in retail sites,
search is hugely important, and on many other sites too.
And often on other sites when users couldn't
find that key call to action-- I think
they're having a football match next door.
They will turn to search next.
OK.
So, often it's tempting to put the site search behind an icon.
We found that it was much more noticeable and visible
to people when the site search was an actual field,
and people found it more difficult to find search
behind an icon.
And I feel like, you know, if site's like Home Depot
and Macy's can do this well, so can the rest of us probably.
So to really scaffold user's tasks,
the search needs to be smart.
And signs of smart search include
providing auto-complete in the search field,
suggesting search terms and filters,
correcting misspelling, and providing related matches
and search results.
So all of those things together in providing great search
is about getting users to the relevant results as soon
as possible.
Now, the site search results need to be relevant, of course.
And this goes for search results as well as auto-complete.
So, you can see some differences here.
Too often we saw results such as those on the left.
In that example the word kids is surfacing
lots of different things, but things
are particularly useful for people in a clothing
store in terms of logically grouping the responses.
On the right, Macy's do a good job here.
They lead you to different categories of clothing.
So kids sweaters, kids boots, kids shoes, kids jeans.
On other occasions, in the search results themselves,
we saw lots of irrelevant results.
And people really don't have the patience
to scroll through multiple pages of results.
If the first few results aren't relevant,
they might leave and go away and then
you potentially lost that user.
One way forward with this might be
to consider using Google's custom search
engine in your site.
So, filters go even further to helping
users find the results they need.
In some cases in our study we found
that even though companies had gone
to the extent of making filters available, unfortunately
they weren't discoverable.
So, this is a mock-up as you can see, on the left-hand side.
But it's an example of an actual site
we found where people were searching for clothing.
And they had to scroll through about six pages of results
in order to eventually find the filters to narrow their search.
And they had thousands of search results.
So this was really, really painful.
And we found lots of people abandon this task in that case.
Note that the user should never inadvertently
be able to filter the results to a null set, of course.
But we did see that in the study.
As the user's use controls, make sure
that you can do things like provide them
with the number of results that they're going to see.
And that gives them an idea of, you know,
is this the kind of results that I want to see?
If it's got 20 items, or if it's got two items.
Now another way to assist users in narrowing the results to get
to what they want is in what we call a guided approach.
You can think of these are kind of like, pre-filters,
or simple questions to provide more of a guarantee
to your users that the search terms they eventually put in,
or the navigation they do here will lead to the results
that they need.
So in this example, imagine you're
selling a limited set of products,
like shoes, bags and accessories.
After asking the user which of these their interested in,
you might upfront ask, you know, whether they
want women's shoes, men's shoes.
You might also ask the size.
And then the user knows they're going
to get perfectly matched search results.
And for you, you're making your user more satisfied.
The thing that you're doing here is
you're pulling away a lot of your content,
so that it doesn't sort of infiltrate the things
that they want to look for.
I can give you a really nice example of this in one
of the sites we studied.
It was the fight for providing care.
It provides things like senior care, after-school care,
and pet care.
Now the last thing that somebody wants
when they do a search for senior care
is to find pet care in their search results.
And so they had a guided approach like this.
And it made sure that whatever search they did,
they weren't going to end up with after-school care
in their senior care, or pet care in their senior.
So a few questions up front for some businesses
can really help ensure that those users get
more relevant results right off the bat.
And it's particularly useful if there's
one to three key attributes that you
can ask upfront to get them there.
So let's look at the take-aways for site search.
Make site search visible.
That nice, clear field at the top.
Ensure that the results are relevant.
Implement filters to narrow those results.
And guide users to better search results
if you're able to do that with your content.
There were a number of ways that we discovered
the design of site can help people towards confession
on mobile.
People really want to convert on their own terms,
very definitely.
So we want sites to work with people,
rather than work against people.
And unfortunately in the study we
saw quite a few examples of sites themselves
being barriers to that engagement and to that use.
So, firstly, beware of making enemies at registration gates.
Don't require custom account registration upfront.
And you'd be surprised at the amount of this we saw.
We understand that getting access to customer information
and preferences can be really integral to your business,
but don't ask for it too early.
Many of the sites that user's rated the lowest
were those where they were forced to create an account
upfront in order to continue.
Users want to explore and browse content,
perhaps get some of their tasks down
before they commit to providing their personal information.
And similarly, let users check out as a guest.
If you're enabling people to purchase something,
or perhaps they can send off for information
you want to aim for that option to enable
users to check out as guests.
This is because, in our study we found that participants really
perceive the value of this.
And it's because, while they're doing their tasks,
they're thinking, I want to purchase this thing,
or I want to get this information.
I don't want to stop and have to think of an email password,
or whether I want to connect to my particular social network
to this account, and whether that's OK.
So, if you wait until afterwards,
enable users to do their tasks, then you
can also have another opportunity
to ask them to register and you can offer them
tangible benefits as well, such as perhaps,
tracking their order.
And remember you don't want to negate
the benefits of purchasing by having
a process that isn't smooth here.
All browsers allow the ability to auto-complete in forms.
So make sure you don't turn that off.
Users really like the benefit of auto-completing.
So just let the browser do it's job at that point.
And there are other ways to convert users too.
And there you can see the check-out.
So, picking up where you left off.
Now, we've talked about this quite
a lot at this conference already.
And providing users with the opportunity to do that
was really helpful.
Within this study itself, we saw a number of users
want to pick up on things later on.
After all, in this particular situation
they were in a usability study, they often
found things they wanted to see later.
Now this can happen in real life too, of course.
Perhaps you want to look at something on a bigger screen.
Another goal.
Perhaps you're distracted at this moment,
you have to do something else, and you
want to just pick up on this thing later.
So we painfully observed several users
copying and pasting the URL, which
is really quite hard to do mobile.
Then going and opening their email client, pasting it in.
It was really, yeah, it was really quite painful.
And then, of course you have the issue
that you might lose that user because they've
kind of gone to do something else.
So the best practices we saw here at this present time
is to offer users opportunities within the site itself
to pick up where they left off later on.
So, I've seen opportunities for people to pin things.
I've seen opportunities for people
to email within the site itself.
You keep all that within the site,
but they can email themselves.
And obviously, postings on various social networks.
Often at the moment, this is used for sharing,
but we saw a number of examples of people
using this for themselves to pick up where they left off,
for themselves at a later point and time.
And related to this, you need to create
a consistent URL structure on your site.
So that when people do share URL's
from their mobile or their desktop they can use them.
So on that note, our recommendation
is to build a responsive site that
enables that consistent URL structure
rather than resorting to an m dot site
where they have be redirected for users between sites.
And if anyone saw Paul Lewis' talk today,
where we saw the hit that redirect causes in terms
of time lag to load that mobile page.
So let's review the commerce and conversion take-aways.
So let users explore before they commit.
You can always fill that registration
in at a later point.
Let users purchases as a guest, and enable
users to pick up where they left off.
Optimizing form entry.
Forms, don't you love filing in forms on mobile?
It can be really painful, I know.
And you know, it's arguably the most painful thing
that you can do mobile.
So let's look at a few of these things.
Now I should say before I start, we actually
learn a lot of these things on desktops.
But somehow when we moved to mobile we forgot a lot of them.
So these are just often general good design principles,
but they matter even more on mobile.
Yet that form on the left.
Design a form that's efficient for the user to fill in.
And not overwhelming like that one on the left.
We saw more forms than we'd have liked
to have seen in this study that looked like that.
One thing we found was, it's really good to chunk the form.
Again, this is a principle that's
taken from our experience with forms on the desktop.
And it's helpful to make sure that those chunks in the form,
are of equal size, and equal difficulty.
So you can see this example here.
There's, I think five different steps to this form.
And the user on the Progressive site
can easily see what they're going to have to fill in.
So make sure your forms look more
like the one on the right-- Think about your site now.
Then the one on the left.
Another useful way to streamline the conversion experience
for users is to know and use what already exists
in terms of information the user has already provided.
We found that auto-filling, whenever possible,
was of huge benefit to users.
It's a bit sad to have to tell you this,
but when this happens, when auto-complete and auto-filling
worked, the users were surprised and delighted.
Of course it shouldn't be that way, but that's the way it was.
Because they're so used to struggling through forms.
So they would either struggle through the form
or they'd abandon their task and try to do it a different way.
So it's just frustrating for users
to have to put it in twice.
We've all been there, it's kind of horrible.
So for registered users, remember and pre-fill
their preferences.
For new users, offer third party check out,
and sign-in services.
One specific example is to check that you don't require users
to, for example, enter billing or shipping
information that has already been entered,
that already exists in their third party check out account.
Now every tap counts on mobile.
For submitting information, users really
noticed and appreciated websites that would automatically
present number pads for entering zip codes,
using the contextual keyboard in the right way.
Or automatically advance the number
fields as they entered them.
It can be really painful for users when that happens.
So the experience that people are left with
is a really poor one.
And you know, two forms can look very, very similar.
We tested two pizza delivery forms,
and they looked incredibly similar.
But the number of taps it took on each form
was very different, because one of them
wasn't doing things like surfacing
this contextual keyboard.
So seek out any opportunities to eliminate
any wasted taps in your form.
And here is some additional information and technical help
that you can get on choosing the best input type.
And this is part of the web fundamentals materials
we've been talking a lot about at this conference.
So, good labeling is really important.
If forms aren't labeled according to best practices,
and again users can get totally blocked and they can't proceed.
So, they can be labeled, of course outside the field.
And it's becoming more and more popular to label them
inside the field, but just be careful how you do it,
and make sure that if users back out of that, then
the label becomes visible again.
Because we had a user in our study
who was entering their email address, and then they got
distracted, and then they came back, and went back,
saw the word address, but didn't see
that it was email address and started
entering their home address.
So this labeling needs to be really clear.
Now working with dates.
The recommendation here is to provide visual calendars
where you can.
Because users often need more context
when scheduling appointments, and travel
dates, and things like that.
Provide them with a calendar because if they don't have one
they are often unable to figure think
about what day of the week it is.
That's often the primary information people need,
like, I'm going to leave on a Friday.
And so figuring out what the actual date is, can be complex.
And we saw users, again, come out of the tasks
that they were doing, and go to find their calendar app.
You know, again, you've got the possibility
that you could lose them.
We found on travel sites, that it was problematic
when users had to choose an outward date and a return date
within the same calendar.
That seemed to be like an experience that
was very difficult for them.
It wasn't smooth, and so the best practice there
is to provide two calendars, one for the outward date
and one for the return date.
Note also that there are system ways of dealing with dates.
But on the mobile at this time you
don't get control of styling in the custom chrome browser.
Now remember that I mentioned that completing mobile web
forms was arguably the most difficult experience on mobile.
Well I may have been wrong.
Because what's more painful than that
is having to do it all over again
because you did it wrong the first time.
Yeah, lot's of nods.
OK.
So, there are standard best practices,
of course, when it comes to helping users
recover from, and correct their errors.
We need to provide clear error messaging, not cryptic error
messaging, and we need to highlight
the fields that need to be corrected.
We need to make sure that the error message isn't just
at the top of the screen, and nothing
is highlighting the field.
But really, the best way to address submission errors
in web forms is to avoid them altogether.
If we can combine those clear descriptions
with real-time error validation.
This was the most effective combination
for enabling users to just go through that form
once and get it done.
And there were examples, but not very many
of sites out there that were doing real-time error
validation, and it was by far and away the best experience.
So let's summarize the takeaways about optimizing form entry.
So designing efficient forms, chunking them like we saw.
Using pre-existing information.
Streamlining that information at entry.
Go and test your forms on your websites.
See how many taps it takes.
See if you're using those contextual inputs.
Minimize form errors with labeling.
Provide visual calendars for dates,
and real-time validation of forms,
so that your users only have to go through them once.
Now there are a number of site-wide design principles
that we uncovered during the course
of doing this study on multiple users.
And we're going to look at this now.
So one of the main reasons that you make a mobile site
is because it's painful to do all that pitching and zooming
when desktop sites appear on mobile.
It's hard to pan and zoom around on mobile, especially
in multi-dimensions.
And it often leads to trouble with users viewing your images
properly or viewing your text property.
Some really frustrating experiences that users had was
when the home screen loaded fully zoomed in.
They had no idea where they were.
And when a user zooms in on a screen
you really lose control of your design,
increasing the likelihood of discover-ability issues.
So make sure, even if you feel that you've mobile optimized,
or made your site mobile friendly,
make sure there aren't any aspects of that site that
require users to pan and zoom.
Now images on mobile, while we're talking about that,
they can be very small and people often
want to see details when they're purchasing something,
for example.
So, the best thing to do is make sure those images are
tappable and expandable.
On retail sites, customers really want to see the texture,
they want to see the details.
And participants got frustrated if they
weren't able to see these.
A good example of tappable expandable images
is provided by JCrew on their site,
so I suggest going and having a look at that.
Now location.
We saw some examples of GPS location information
being badly applied.
So the example on the left is going to be problematic.
And the reason is, because the user doesn't really
understand what you're going to be doing with that.
They kind of need to see the context of how you're
going to be using their GPS location.
In our study, when users were asked to book a hotel
room in Boston for a conference, that's the task we gave them,
on a particularly popular hotel's website,
they were prompted to share their GPS information
immediately after tapping the find
and book call to action on the home page.
Accepting the request resulted in the location field
automatically populating with the user's current city.
But we saw that several users automatically
accepted this request.
They didn't really think about it.
And one user became particularly frustrated
because they were trying to book their hotel in Boston,
but it kept bringing up hotels in their home city.
And we also saw UI issues.
For example, where a site had a field that
said current location, it looked to the user
liked they needed to tap that, and they
needed to interact with it.
And then they thought that their current location
would be populated.
But it wasn't the case on this particular site,
if they left it alone, which is what the developer intended,
this would result in their current location
being detected.
But the user just couldn't tell, and got very frustrated.
So a better experience is to make sure the user always
understands why you're asking for location information.
And then it's helpful to let the users choose
to populate the location field at the appropriate place
in the flow, and to a clear call to action,
something like find near me.
Now this point about thinking about keeping users
in the single browser window.
We've already looked at that a little bit.
We've looked at it about, in terms
of sharing information and also picking up where you left off.
But you need to think about all the reasons
that users might leave your site.
Because it's not really what you want them to do.
You want them to stay, you want to potentially
have them convert on purchasing something or getting
more information.
Having the user switch between browsing windows
can be problematic because they do have this tendency
to go off and look at other things.
So think of all the ways, one of those ways
might be that they go and look for coupon codes.
So we found some good examples of sites, this site here
and then I think we saw some pizza sites, and other sites
where they decided to provide coupons of their own.
To kind of stop users doing this and to keep them in their site.
So try and do everything you can to ensure that your users stay
in the browser window.
Address those reasons consumers might leave.
Now many of the websites we tested,
and the companies we were looking at also had apps.
And all of them promoted their apps in some way.
Not surprisingly, participants weren't at all
pleased with the situation that happens on the left hand side.
I think we've seen this all too often.
This has being described as the door slam.
The user came to your site to get
some experience of your company, or to do some task.
And they didn't appreciate anything
that hindered them from doing that.
In some cases this was where there
was perfectly adequate, very good mobile optimized UI right
behind it which users could actually use.
And so, in this situation, you're
losing the opportunity to engage with users.
So this full page overlay or interstitial
is not a good idea.
It annoyed all but the most loyal and familiar customers.
Many sites promoted their sites as banner
along the top or bottom, and users
were fine with these banners if they
were reasonably sized and dismissible.
They weren't too happy, however, when the banner
started taking up too much space and wouldn't go away.
In landscape orientation, think about that
too because the banners can take up
really valuable vertical screen space.
So both Android and iOS users were
used to seeing these banner promotions,
and they were quite happy if they could dismiss them,
or perhaps they would want to use them.
But the thing I really want to emphasize here
is that mobile web is an opportunity for you
to engage your users.
You might end up with a great pool
of committed, engaged users on the mobile web.
It's a gateway to your business, but you also
might have a population of users there.
So make sure that your promotions are not
getting in the way of your key call to action.
And this is one of the most important principles.
It's about taking all these design practices
and creating a mobile optimized site all the way through.
Our study clearly illustrated how much
uses preferred mobile optimized sites over desktop sites viewed
on mobile.
Many things, we saw lower user ratings for desktop sites
on mobile, lower task success, much more errors,
all the things you'd expect.
However, we found that some sites
mixed mobile friendly pages with desktop sites.
So you start off really, really well.
You like, yeah, I can do this on this site.
Hit a button, and there you go, the text
is too small, it's a desktop page, terrible experience.
And we found that those actually rated the worst of everything.
And it's because it really stopped users in their tracks,
right.
They're trying to do their tasks,
and it's even more of a disappointment in a way
because it was more unexpected.
So optimize your site for mobile,
and you need to optimize the entire site.
I know some of the sites can be really humongous efforts,
and their can be thousands of pages to make mobile friendly.
So in those cases, if you can only do it, sort of in chunks,
I really advise thinking about the main navigation parts
that people have to go through to make sure that you're not
providing them with that experience of going
from a friendly page to a desktop page.
You can look, of course, at your analytics traffic
to try and work that out.
So the site-wide take-aways.
Don't make users pinch and zoom, at all on your site.
Provide expandable, tappable images.
Be clear why you need the user's location for them,
so that that can be used wisely.
Keep your user in a single browser window.
So think about all those reasons that they might leave.
Don't let promotions steal the show,
and optimize your entire site for mobile.
So that brings us to the end of the principles we're reviewing.
And we hope these things that we've gone through
are going to be helpful to you developing a better mobile web
experience.
And I know you're unlikely to have
to memorized this presentation.
So the good news is, that all these 25 principles
are available in a white paper for you.
And that white paper explains what you need to do.
We also have web fundamentals, which
is an online resource that tells you
about how to do some of these things on the multi-device web.
So if I've just covered the what to do,
which is the white paper, you can
think of web fundamentals of that as a how to do it.
It covers a lot of the technical guidance,
how to avoid the common pitfalls that people
make when building sites.
And it advocates for responsive design.
And we have a number of performance tools.
The primary one is the PageSpeed Insights tool.
And it's available to you.
It not only gives you insight into the speed of your site,
and how that loads, and what you can do to improve that.
But it also has some user experience feedback.
Another easy way that you can help yourself make a better
site is simply to have users go through it.
This is actually in our usability lab,
but you don't need any fancy equipment.
You can just watch a few users, perhaps set
some time to do that each week.
See where the main problems are.
And honestly you just watch a few users
and you'll come across those issues.
You'll probably see some of the things
we've talked about today.
And everyone can use analytics, so trust that data
and incorporate it with your user testing.
And then you'll explore a pathway
to getting more conversions on your site
and improving the experience for users.
So, creating a mobile website is really imperative these days.
And what I want to say is it's not just
about shrinking desktop to mobile.
Responsive design is a great underlining technology.
You've got the one code base, which in the long term
will make things easier.
But you do have to think about how those elements of your site
are going to surface, and what's important
at the different device sizes.
The different context that users are using those in.
So I want to conclude with, now is the time
to really make improvements to your mobile site.
Think about all of the resources and the effort
that's being put into creating desktop sites.
And think about applying that same resource and effort
and putting that into your mobile site.
So to get going on mobile sites, we have the principles,
we have web fundamentals, and we're
going to develop a better experience with more
conversions, so that you can have happy and more engaged
users.
So thank you for your time.
And I'd be grateful for hearing from you.
So feedback on the presentation will be a great.
Please check out the principles.
And I'm going to be around for discussion and Q and A
after this talk.
Thank you.