If you’re anything like me you’ll have used websites on your mobile that are basically fine, except for when you try and click a link or button. Often the main reason for this is that tapping a link with your fingers will never be as precise as clicking with a mouse.
Striking a balance
A key question will be should you have a separate mobile site and simply leave the desktop version as it is or, or should your current desktop site be tweaked to be more mobile-friendly. This will vary on a case-by-case basis depending on your priorities and the type of visitors your website attracts. The best place to start is to have a look at some industry guidelines.
Above are some industry recommendations for target sizes for links and buttons. As you can see Apple are the most generous to chubby-fingered techies like me, recommending 44×44 pixels. Nokia on the other hand recommend a daintier 28×28, with Microsoft hedging their bets in the middle.
Google Redesign vs. Bing examples
Google’s recent re-design has included a set of buttons for selection that are really easy to click and absolutely finger friendly. As you can see the links are large and have icons. Not only that, there is a generous amount of space around them meaning that there is less chance of clicking a nearby link by accident.
In comparison, the Bing example above is less finger-friendly. With links hidden in drop-down menu and with only a small gap between them. In fact the drop-down over the main listings could easily lead to attempting to select shopping and hitting the top link in the search results beneath.
This type of thinking leads to important tweaks to even the simplest areas of the site, such as the pagination links. Below are screenshots from the two sites that clearly shows difference. This attention to detail shows that Google have clearly taken target-size and mobile platforms into consideration in their latest design.
Manchester Uni. Wi-fi Login page – Example
For the last nine months while I was studying I have been regularly furious at the design of the Manchester University wireless login screen and I’ve finally found my opportunity to vent my anger … except that it now appears they have fixed the main problem! And while this cruelly robs me of my chance for a little closure, at least they’re making it better.
In the screenshot above you can see that in order to gain access to the login fields you need to check the checkbox (highlighted). Until recently the last three words of the sentence were in fact a link to the Acceptable use policy. As you can see they have now placed this link above, which is a major improvement. It was a common occurrence for me to attempt to select the checkbox on my iPhone and ending up selecting the link instead. However much I wanted to read their acceptable use policy in full, it was just never the right time!
However the improvement only goes so far. If you remember back to the size recommendations before there was a basic agreement that between 28×28 and 44×44 was a finger-friendly target size.
However the checkbox here is still only 10x10px. Considering space really isn’t an issue on this page, an even greater improvement would be to have a large button with a call to action, such as ‘Accept and Log-in’.
Best practice tips
So to recap, what have we learned?
- A finger is significantly less precise than a mouse
- Space around targets is important. Placing links or buttons too close together will frustrate users.
- There are widespread applications for this type of finger-friendly improvement, even down to the spacing of the pagination links.
- Why not make some simple changes to spacing around links and split test it? Be sure to check your mobile conversion rate for improvements.
This article on finger-friendly design was particularly helpful while writing this post.