Mobile traffic is a really big deal. More than half (52.7%, to be precise) of the world's internet users access the web through mobile devices. This means that, statistically, more than half of your customers are looking at your website on a small screen – potentially over a mobile data connection. Even if your website is mobile-responsive, some features could be causing trouble for your users and sending them in the direction of your competitors.
Here are a few easy solutions to help you fix the most common issues for mobile visitors.
Make your buttons bigger
When it comes to buttons, size matters. Compared to clicking with a mouse, users have far less precision when they're tapping with their finger. As a rule of thumb, Google's interface guidelines suggest that all mobile buttons should be no smaller than 48 pixels high by 48 pixels wide. It's also important to think about the space between your buttons. If they're too close to each other, your visitors might hit the wrong ones and become frustrated.
Simplify your navigation
Phone screens are much smaller than desktop screens. Large, bulky navigations with lots of different options can easily overcrowd the small viewport, making it hard for visitors to find the page that they're looking for. Keep your navigation simple and minimalistic to avoid this issue.
The easiest way to do this is to move all of your current navigation links under category pages. Your user can click the category from the navigation bar, and find their desired page from there. Categorising your pages in this way really helps to structure your website, making it easier for search engines as well as human visitors.
Forget about “hover”
There's no such thing as “hover” on a mobile device – buttons are either tapped, or they're not. If you're currently using hover elements on your website, you're limiting these interactions to desktop users. You can work around this by changing the elements to respond to tapping as well. One of the best places to bring in this design change is on your navigation bar.
Hover elements can hide themselves in some surprising places. For example, if your website uses an automatically rotating carousel for banner images. On desktop, the auto-rotation can be temporarily halted when a user hovers their mouse over a slide they're interested in seeing more of. This isn't possible on mobile, and users can only view the slide for the allotted time allowed by the auto-rotation.
Use mobile friendly field types on forms
Forms can be a massive hurdle for mobile users. Fortunately, it's possible to make filling in forms easier by designating fields for mobile devices. For example:
If there's a field for a telephone number, the visitor should be given a numerical keyboard.
If the form includes a field for a date, a date picker can simplify things.
E-mail fields should give the '@' sign on the first page of the keyboard, without the user having to navigate into the symbols section.
These small tweaks can make forms much easier (and faster) to fill out, increasing your chances of a conversion.
Position elements in reachable places
Depending on how a user holds their mobile device, certain areas are easier to reach than others. Since everyone holds their phone differently, it’s best to think about the areas that are easiest to reach from the most common positions. These areas are generally found in the middle-centre of the screen, while the top of the screen is the hardest to reach from any position.
Putting your main interactive elements (e.g. buttons and links) near the middle-centre of the screen will make it easier for mobile users to tap them from their natural hand position.