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.

Add a Comment

Your email address will not be published. Required fields are marked *