Part 3: Mobile website optimisation - 7 considerations when designing buttons on mobile websites

Wednesday, July 6, 2011 | 4:20 PM

Labels: , , ,

Cross-posted from the Google Conversion Blog

This is the third post in a series on optimising mobile websites for conversions. The previous two posts covered Content Prioritisation and White Space.

In Summary: Buttons rule on mobile devices. The rule of thumb means that big, well spaced buttons with clear calls to action will likely result in more conversions.

Before looking at how buttons can make the mobile user experience better we must first understand the way mobile users navigate. Think about the way you hold your phone. More often than not it’s in just one hand and because your fingers are gripping the phone from behind, you are left only with your thumb for navigation of the screen. The thumb is far less precise than a mouse pointer.

As you can see from this image, fingers are behind the phone leaving the thumb to do all the work


The Mobile Rule of Thumb: If it cannot be done with the thumb, it cannot be done.

The hyperlink is a poor user experience on a touchscreen mobile device because it is very hard to use with an imprecise instrument like the human thumb. If that’s not all, mobile devices are often used by people on the move, so hitting a small point on the screen is just getting harder and harder. The best way to alleviate these issues is to build your links into big buttons which allow for greater levels of inaccuracy.

Here are are a few things to consider when building button links:

Buttons Should be Big
In a recent study of iPad users, Jakob Nielsen, the father of human computer interaction studies, recommends that buttons be at least 1cm x 1cm in diameter. That’s 28px assuming the standard web resolution of 72dpi. There’s a lot of debate around this area.

Apple is recommending 44x44 at a minimum for buttons in apps.

A very interesting introduction to designing for different screen sizes on Android can be found here.

This is something you really need to test when building your site. Without a mouse or even a stylus, buttons need to be big. Put simply, you should build buttons for thumbs. And err towards large thumbs. There is also the issue of light. Many mobile screens perform poorly in daylight or bright light environments – big buttons make it easier to perform tasks while visibility is low.

Buttons Should be Isolated
How many times have you tried to click a button on a mobile device only to find that you have inadvertently clicked something else? It can be a really painful experience and is also a sure-fire way of making a user give up in frustration and go somewhere else. One way to avoid accidental clicks is to ensure that buttons have a little space between them. Call-to-action buttons especially should be isolated. Where possible, leave a little white space around buttons.

Buttons Should be Reachable
The placement of your buttons is also important. Just as we need to consider big thumbs for button size, we need to think about what is comfortable for thumbs when placing buttons. The standard navigation button is across the whole page on mobile sites so it isn’t really an issue but many mobile sites have call-to-action buttons which are shorter and sit on one side of the screen or the other. If possible, these buttons should be made longer and centred more. Not only does that make them larger but it’s easier for both left and right handed people to reach the buttons with their thumb. If you must choose a side of the screen, contrary to the right side placement often found on desktop, it is actually more comfortable for a right-handed thumb (the majority of users) to click a button on the left side of the screen.

Kiddicare found button placement on the left side of the screen was easier for users than the right
Smaller Buttons Should be Padded
Padding refers to making clickable an area larger than the button itself. This can be especially useful for check boxes or buttons that need to be smaller so as not to draw attention away from the main call-to action. The trick is to make the area immediately around the button clickable as well. In the case of check boxes, it is important to leave sufficient space between boxes and then to make the text next to the box clickable too.

Buttons Should Look Like Buttons
This might seem like common sense but it is not unusual to find links on mobile sites which behave like buttons but do not look like them. Whether it is a link that looks the same as the text around it or a button that looks like a heading, the user needs some form of visual cue to help them understand where to click. Make buttons look three dimensional and they are more likely to invite clicks. It is also important that your site clearly indicates to a user which button they have clicked. Some sites do this really well, but others are a little patchy. Touching any part of a button should result in a visual signal for the user.

Why use buttons? Imagine the difficulty of picking the right link in the example above.
So does this mean we can never use hyperlinks? Of course you can. But you should use them minimally and don’t put lots of them into the same space. As a rule, try to have no more than one link per band of text. For example, In the point above about making buttons big enough, I have spread the points with links across multiple lines to make it easier for touchscreen users to tap them on the mobile version of this blog.

Of course when it comes to a mobile site which is trying to convert visitors into customers, try not to have much text.

In summary, buttons on mobile sites should be:
  1. Big
  2. Isolated
  3. Reachable
  4. Padded
  5. Obvious
  6. Prioritised
  7. Descriptive
Buttons that have been well thought out and follow the guidelines above should help increase conversions on your mobile website.

Mobile Website Testing Tip: When you are building your mobile site, physically test it while you are in motion to best replicate the real-world user experience.

The next post will be looking at how to make conversions easier to complete on a mobile website. If you have feedback, please leave a comment.

Posted by Shane Cassells, Google Conversion Team

Lennox invests in a mobile strategy and sees lower cost per conversions

Friday, July 1, 2011 | 9:00 AM

Labels: ,

Lennox International, a provider of heating, ventilation, and air conditioning (HVAC) solutions, has seen mobile become a viable customer acquisition channel as consumers have turned to their smartphones to locate a dealer from Lennox’s vast dealer network. In line with Lennox’s innovative nature, Lennox partnered with their agency, Power Creative, to stay ahead of the curve and capitalize on the growth in mobile traffic they were seeing using Google Analytics.
Power Creative’s first step was to help Lennox build a mobile-optimized site focused on helping customers locate a dealer nearby. To promote their mobile site, Lennox and Power Creative turned to AdWords and created a separate mobile campaign to gain additional insights and flexibility for optimization (shown below).





With cheaper CPCs than their traditional desktop computer campaigns, and an increasing number of users locating a dealer on the mobile site, Power Creative quickly realized that the mobile campaign was effectively reaching purchase-ready customers at the bottom of the sales funnel.

Lennox and Power Creative then began utilizing the different extension options, such as Click-to-Call and Ad Sitelinks, to connect users with customer support and the most relevant pages of the mobile site. It was becoming clear that investing in the mobile site, along with building separate mobile campaigns, was paying off. Overall, Lennox saw an average CPC on mobile that was 86% lower than their desktop campaigns, and a cost per conversion that was 90% lower. Continued optimization has now led to separate mobile campaigns for search, display, and specific geographic locations, allowing Lennox to continue innovating with different keywords and ad text that is specific to the mobile user.

To learn more about Lennox’s success with mobile ads, download the entire case study here.

Posted by Samira Lama, Mobile Ads Specialist

CPG giant Kimberly Clark sees success with mobile ads across many brands

Thursday, June 30, 2011 | 10:06 AM

Labels: ,

Kimberly Clark, one of the world’s largest consumer packaged goods companies, was curious to see how mobile advertising could benefit their multitude of brands but also wanted to learn how their consumers searched on mobile and where they were when they did. 

To pursue this curiosity and explore mobile advertising, Kimberly Clark teamed up with media agency, Mindshare, who ran test campaigns with Google Mobile ads featuring several brand keywords, targeted exclusively to iPhones and iPads. With these very specific, targeted mobile campaigns, Kimberly Clark saw an average CPC 44% less on mobile versus their desktop campaigns. They also saw that 7% of all clicks on the brand tested were coming from mobile. The campaigns gave Kimberly Clark enough intel on mobile advertising to move forward with optimizing their sites for mobile so they could offer their consumers a better experience while exploring and learning about the brands on their mobile devices. 
Mindshare agrees that mobile search advertising can no longer be ignored and must be implemented to capture a greater share of the market, “Mobile ads are reaching millions of price-conscious consumers searching for staples while un-tethered from the desktop. And, by being early entrants in the mobile space, we were able to drive traffic at lower average CPCs and to set optimal bids for each mobile device,” said Mindshare Group Search Director, Danny Huynh.
Kimberly Clark continues to see success on mobile across many brands and is focusing on developing mobile-specific campaigns to ensure a good interaction with their brands on mobile.
To learn more about Kimberly Clark’s mobile campaigns, download the entire case study here.

Posted by Dalia Mitra, Product Marketing Manager, Mobile Ads

“Mobile”-ize your business with Google Sites

Wednesday, June 29, 2011 | 6:00 AM

Labels: ,

A poor mobile web experience can negatively shape a consumer’s opinion of your brand or your company altogether.  In a recent study, we found that 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone, and 40% go to a competitor’s.  By the end of this year, more than half of all Americans will own a smartphone. Your customers are mobile, are you?  


Today, we’re excited to announce a brand new tool to help your business get “mobile”-ized: Google Sites mobile landing pages.  With Google Sites mobile landing pages, you can build yourself a professional mobile landing page in minutes, for free -- and without any coding experience.


Why use Google Sites mobile landing pages?
  • It’s easy.  Creating a Google Site is as easy as editing a document, which means there's no markup language for you to learn -- just get started.
  • It’s free.  Google Sites is one of many free products offered by Google.
  • It’s measurable.  One-click Google Analytics integration allows you to monitor your site's traffic.
  • It’s fast.  Create your mobile landing page in minutes by starting from one of five pre-loaded templates.  You can also start from scratch with the custom template.
Restaurant            Local Business         Lead Generation              Social                eCommerce 

Watch the video below to see how “small” businessman, Bob, transformed his business using Google Sites:



Visit sites.google.com/mobilize to get started today!

Posted by Shiv Kumar, Mobile Specialist

Animal Planet leverages rich media and video advertising across platforms to engage viewers for River Monsters premiere

Tuesday, June 28, 2011 | 7:00 AM

Labels: , ,

Mobile, video and rich media advertising are changing the way that businesses capture user attention, bringing together the power of sight, sound and motion to engage audiences like never before. To build awareness for the new season of their popular River Monsters series Animal Planet, the ‘Surprisingly Human’ TV network, launched an integrated media campaign across platforms to bring the show to life with the broadest audience possible - driving more than 900k YouTube video views in the weeks leading up to the premiere. 

The River Monsters campaign ran across both YouTube and the AdMob network, bringing a sneak peak of the upcoming season to users whether they were on a desktop computer or their mobile phone. Rich media display ads on YouTube enabled the star of the show to pop out of the YouTube Channel to introduce new creatures to potential viewers, while video advertising offered a glimpse at upcoming episodes of the new season.

On the YouTube desktop website, users were able to interact with the River Monsters whether they were searching for their favorite video, watching partner content or browsing the homepage. Ads led visitors to a custom mimicry gadget on the Animal Planet Brand Channel, where the host of the show jumped out of the ad to highlight the most exciting portions of the featured video:



In-Stream Ads on YouTube are also available in the YouTube Android app, enabling Animal Planet to extend this engagement opportunity to mobile users. Including Interactive Video Ads on the AdMob network further expanded the mobile campaign - giving users the opportunity to watch a preview of the River Monsters show, share the video through social media, learn more on the show’s mobile website and watch additional videos, all from within the mobile ad.
 


To stir up even more excitement on the day of the premiere, a Rich Media Masthead on the YouTube homepage revealed clips from the upcoming episode and reminded users to tune in:
 

The River Monsters campaign was hugely successful:
  • YouTube advertising generated more than 930,000 video views on the River Monster clips
  • Nearly 2,000 users subscribed to the River Monsters Brand Channel
  • Mobile In-Stream Overlay Ads received more than 3 million impressions, with 84% of mobile users completing the video
  • Interactive Video Ads on AdMob generated another 6 million impressions, with 75,000 users engaging with one of the interactive elements in the ad creative
The combination of compelling rich media and video advertising on both desktop and mobile created an engaging experience that increased social buzz around the show and led to a premiere that exceeded expectations.

Posted by Vicky Homan, Product Marketing Manager, Mobile Ads

Mobile Insights: 33% of consumers shop for autos online using mobile devices – are you reaching them?

Monday, June 27, 2011 | 11:56 AM

Labels:

This is the fourth post in our Mobile Insights series featuring expert views from our mobile ads team. Our guest contributor is Carrie Steele, Senior Mobile Ad Specialist at Google. Carrie shares her thoughts on mobile marketing from last week’s Think Auto 2011 (photo below), Google’s annual gathering of auto industry executives.



Nikesh Arora at Think Auto in Mountain View, CA

13 million people will fall in love with a new car this year. Most people are open to buying a car from one of several manufacturers. How will you connect with them? Increasingly, the link occurs on mobile devices.

The automobile sales funnel hasn’t really changed: it follows the path from brand awareness through consideration and purchase. But consumers are experiencing auto brands, researching cars and trucks and purchasing them in new and different ways--and mobile devices are playing an important role.

eBay sells 2,000 cars each week on mobile. And during the last Super Bowl, when Chrysler ran its TV commercial there was a spike in mobile searches. According to Google, data mobile queries on “Chrysler” increased 102 percent.(1)  Clearly, there’s a shift going on.

Many searches are happening right on dealers’ lots. In July and October 2010, 40% of AutoTrader’s users accessed AutoTrader Mobile on a dealer forecourt to find out more information about a car. This January, the percentage increased to 45% of users. When people are close to making a auto purchase, they compare makes, models, reviews and pricing, and then pull up maps to locate the dealer with the best offer. It’s a new point of purchase model for automotive.

I’m personally in the market for a new car, and I use my Android to Voice Search different makes and models. Back home, I continue my search on my tablet, looking for additional information to make an educated decision.

Although I’m a single data point, research shows I’m not alone. Last year, Google determined that over 33% of consumers went to manufacturers’ websites to shop for autos – 55% were comparing features and 44% were sizing up prices. (2)

Volvo is just one example of a company that has had great success with mobile. To promote their new S60, the Volvo team used the Google AdMob platform to target smartphone owners using a combination of banners and interactive video ads.  According to InsightExpress, Volvo achieved significant lift across the funnel including more than 240% increase in brand favorability.

To achieve results of this caliber, having a mobile-optimized site is vital. Make it easy for mobile consumers interested in purchasing a new car to learn about features, read reviews and compare pricing. Provide the ability to configure a car and schedule test drives. Use local ad targeting to immediately point out the closest dealer. Make it simple for mobile consumers to engage with you.

The bottom line: don’t be intimidated by mobile. It’s virtually the same marketing activity as always, but it’s coming from a different channel. Don't just test drive mobile as a “nice to have” add-on. It’s where consumers are, and it requires your attention if you don’t want to be left in the dust. To see what’s possible right now in mobile search for auto, check out this video.

Posted by Carrie Steele, Senior Account Executive, Mobile Search Ads


1) Internal Google research, 2010 
2) Google Auto Shopper Study, Compete June 2011.  

Join us on Wednesday 29th June to watch our Think Mobile event streamed live from London

| 9:43 AM

Labels:


On Wednesday, 29th June at 2pm UK time, we will be holding our flagship mobile event in London. We’ve hit full capacity with a truly amazing amount of sign-ups so we’re streaming some of the key sessions live to give you the opportunity to tune-in - no matter where you are in the world.

This thought leadership event will look at why the rise of the mobile web represents one of the most dramatic consumer behavior transformations in history and what this means for marketers.  The streaming includes the keynote sessions from: Charles Dunstone, Co-Founder & CEO Carphone Warehouse; Rory Sutherland, Vice President Ogilvy Group; and Ian Carrington, Google Mobile Advertising Sales Director.  During the stream you will see, for the first time in-depth, our latest research on mobile usage in the UK, the global launch of a new mobile product from Google and gain insights into what really works for businesses on mobile.

The live stream lasts for two hours, including a break, and can be accessed on 29th June at 2pm on the Google
Think Mobile YouTube Channel.
 
For full details visit our Think Mobile event website or watch it on your Android or iPhone here.

I hope you can join us for what promises to be a session full of mobile insights for marketers worldwide.

Posted by Matt Brocklehurst, Product Marketing Manager, Mobile Ads