Mobile Website Optimisation: 'Big, Well Spaced with Call-to-action' Buttons Result in More Conversions

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. The Mobile Rule of Thumb: If it cann't be done with the thumb, it cannot be done."Hyperlink is a poor user experience on a touchscreen mobile device […]

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. The Mobile Rule of Thumb: If it cann't be done with the thumb, it cannot be done.

"Hyperlink is a poor user experience on a touchscreen mobile device because it's 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," noted Shane Cassells, Google Conversion Team.

"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. Of course when it comes to a mobile site which is trying to convert visitors into customers, try not to have much text."

Buttons that've been well thought out and follow the guidelines below should help increase conversions on your mobile website:

Buttons on mobile sites should be:

  1. 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.

    Note: Due to the light issues, many mobile screens perform poorly in daylight or bright light environments – big buttons make it easier to perform tasks while visibility is low.

  2. Buttons Should be Isolated
    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.
  3. Buttons Should be Reachable
    If possible, 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's actually more comfortable for a right-handed thumb (the majority of users) to click a button on the left side of the screen.
  4. Smaller Buttons Should be Padded
    The trick here is to make the area immediately around the button clickable as well. In the case of check boxes, it's important to leave sufficient space between boxes and then to make the text next to the box clickable too.
  5. Buttons Should Look Like Buttons
    Make buttons look three dimensional and they're more likely to invite clicks. It's also important that your site clearly indicates to a user which button they've clicked. Touching any part of a button should result in a visual signal for the user.

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.

[Source: Google Mobile Ads Blog]