Getting Smart With: Optimising Web Design for Mobile Users

It’s no secret that mobile is here to stay and that every business needs to begin thinking about mobile users. We’re no longer living in a world where people who are using smartphones are the exception. Today, there are well over 1 billion people who are accessing the web from a mobile device. That number will be even more skewed towards mobile users in the future.

There are no website owners who aren’t interested in getting more traffic. Mobile media consumption is over 30% higher than that of desktop and well over half of all web traffic is via mobile. The thing with mobile users is that they behave differently. While it is the same people who are behind mobile and desktop traffic, they do behave differently on various devices. Even though mobile users have limited bandwidth, they still consume a huge amount of visual media like short video and images.

What is interesting is that mobile users actually spend more money than desktop users. They are also conditioned to make smaller than desktop (but frequent) purchases. These users won’t be purchasing from your site if the mobile UX is poor. Surveys have showed that 90% of people switch between devices. This means that even though desktop may consist for the bulk of your conversions, people will still engage with your site via mobile at some point during that sales process. What happens is that people browse on their phones and look for things that interest them and then move to a desktop computer to complete the purchase. So, if your site can’t handle every device, you’re missing out on sales.

To capture this traffic, your site requires an optimised design. The image below shows the total percentage of mobile traffic:

mobile stats

When you look at mobile optimisation, you must treat mobile visitors as a completely different customer that behaves differently. You should keep a close eye on Google Analytics and the mobile visitor’s behaviour, the pages they view, their bounce rate, the devices used, conversion, rate, and the funnel they go through. All of these details can be really handy when you are trying to create a better experience for your mobile users. This can include adding a click to call button, changing your copy, or creating a dedicated mobile landing page.

Mobile users are often more distracted than desktop users because when they are visiting a site from a desktop computer, most often they’ll be sitting at their desk but when on mobile the context can vary a lot. They could be walking, trying to find something quickly, etc. Because the attention span on mobile is really short, you should eliminate any distractions on your mobile site.

You already know that properly designed landing pages are crucial to generating online revenue. What you maybe didn’t know is that what works for desktop landing pages is not the same as what works for mobile. Some of the principles will be the same but mobile screens can’t handle the same style you would use on a full desktop screen. Also, it’s not a secret that Google has been favouring mobile friendliness for quite some time now. So, if you want to get as much organic traffic as possible, you should really make sure that your site is mobile friendly. Google’s major algorithm update also states that they are issuing penalties for websites that fail to meet its standards for mobile friendliness. Over 90% of mobile internet access is used for various social activities. If your business is doing any kind of social media marketing, then there is a good chance that traffic is coming from mobile devices. Unresponsive and bad design can have a negative impact on your content marketing efforts and waste your advertising dollars.

Most Important Mobile Optimisation Principles

 

Even though responsive design is much better than having to pinch and zoom all the time, it still isn’t an ideal experience for mobile visitors. Responsive design will make your site look good on mobile, but it still does not address the specific needs of mobile users.

 

Call To Action Buttons

Like on desktop, your call-to-action buttons need to be obvious and easy to spot. Since the screens are smaller on mobile, you don’t want to overwhelm users with multiple CTAs. To start, think about the goal of your landing page, this could be getting new subscribers, get users to buy something, get downloads, etc. The most important thing is to make your CTA focus on that primary goal and nothing else. Taking advantage of this will give you an edge over your competition because more than half of all websites have CTA buttons that are hard for users to spot.

Easy To Find Customer Service

Even if you put in the work and get your mobile web design to near perfection, people will still have some questions. This is nothing to worry about and it’s perfectly normal. When there is a problem, the key is being able to quickly help your mobile visitors solve their issues. The first step would be to have standard customer support information clearly displayed on your mobile site. This includes support email address, phone number, and social media profile links. Anything that gives the user a way to contact support from your company will be helpful.

A good way to see how you can do that is to simply put yourself in the shoes of a mobile user who may have a question about something. Try browsing your website from a mobile device and see if you can quickly and easily contact support. This is crucial because if a user can’t reach out and get an answer in a short time period, they will most likely leave and they’ll have a bad impression.

Forms Should Be Kept Short

Take a look at all the forms you have on your site. On a computer, having a longer form is not a problem because it is much easier to type on a full-size keyboard and navigate around on a big screen, but this isn’t the case when a user is on a mobile device. On mobile, you should definitely keep your forms as short as possible and remove any lines that are not absolutely necessary. One example would be your email list opt-in where it is not necessary to ask for their phone number of home address. Also, GSP is usually accessible so don’t ask someone to manually populate their city, state, and ZIP code if you can prepopulate it for them. It is no wonder that a long and complicated checkout process with too many fields to fill in is in the top 3 reasons for shopping cart abandonment.

forms

Simple Menus

Mobile screens are a lot smaller than desktop screens and you should keep this in mind when you’re designing your menus. It’s totally fine to have an extensive menu with lots of options on desktop but this would be an overkill on a small screen. You don’t want mobile users to have to scroll and zoom in order to see all the navigation choices. Keep everything on one screen without the need to scroll and this will really help with the conversion rate.

menus

In the case of e-commerce websites, we can notice that mobile shoppers expect to be able to sort and filter listings to their liking since it’s harder for them to read a long list of items on a smaller mobile screen. On the desktop, vast filtration options are an asset but on mobile, it’s a hassle. The same way you prioritise the text on a page, you must also prioritise your menu items and filtration options.

Size Is Very Important

Everybody knows how simple it is to use a website from a desktop computer. You have your mouse for controlling a cursor and a big monitor so it’s easy to navigate around and find what you need. But browsing with your thumb on a small 4-inch screen isn’t as easy. For example, buttons need to be large enough so users can tap them with a finger but you should also keep enough space between buttons so users don’t accidentally tap the wrong one.

75% of mobile users use their thumbs to tap on the screen and interact with the site. Studies have shown that people hold their phones in one of three basic grips as shown below:

size

We know from our phone habits that we change grips frequently but in most cases, we are using our thumbs to tap. There is something called the thumb zone and while a thumb can sweep most of the screen (depending on the screen size), only a third of the screen will be an effortless territory. The green zone on the image below is the most accurate region for one-handed users and you should avoid the red zone in most cases if you can.

thumb zone

Don’t Use Pop-Ups

Everyone dislikes pop-ups as it is because they are really annoying and can degrade the user experience. This is even worse on a mobile site because pop-ups are difficult to close. The small “X” button on the top of the pop-up is usually difficult to tap so in a lot of cases users won’t be able to close the window. This can also lead to them tapping the ad while trying to close it which will take them away from your website.

They will also try to zoom in and position their screen on the close button to make it easier to tap it but then their screen will get messed up and it’s a hassle overall. If you have something that you want to advertise to site visitors, then find another way to promote it.

Make It Fast

One of the best ways to increase the site speed is to serve images that are optimised for mobile. The mobile web is significantly slower than cable internet so you need to work on stripping down the heavy media files that exist on your desktop site version (e.g. videos). Mobile device resolutions are very fragmented and range from 240×320 to 2560×1440 or above. Consider that mobile devices who are using a 3G network are still behind in download speeds and that a lot of mobile users pay plenty of money for bandwidth use.

page speed

When you take all of this into the account, you will see that it’s crucial to resize and optimise images to best fit mobile devices and their resolution and aspect ration. This will save your mobile user’s lots of bandwidth, significantly reduce web page loading times and increase their browsing experience overall.

Google’s research has shown that it takes 22 seconds for the average mobile page to load. On the other side, 53% of people will leave a mobile page if it didn’t load within 3 seconds. Needless to say, the average mobile page is terribly optimised and not meeting mobile user’s expectations. Site speed doesn’t just affect the bounce rate, it affects revenue directly. No matter what, faster is always better and removing unnecessary elements from the page is always the best.

Google says that 30% of the pages it analysed could save over 250KB by compressing images. You can use their “Test My Site” tool which will analyse mobile page speed and mobile-friendliness and give you benchmarks that you can use to compare your results with.

CONCLUSION

The sudden rise of mobile has presented a lot of new optimisation issues, many of which we’re still trying to figure out. Embracing the mobile design means ensuring that the customer journey is relevant, responsive, and frictionless. As a business, you want to help your customers and users to quickly and easily find what they need. To achieve this, you need to think ahead and understand what device and from where your prospects will visit.

Optimising your web design for mobile users will provide your business with a guaranteed and measurable advantage over your competitors who are still lagging behind. It will ensure short load times, better user satisfaction and higher search engine ranking.