Usability and the mobile web

For some time now, anyone concerned with search engine optimization made sure a mobile version of their website was available because otherwise they ran the risk of angering the Google algorithm. Yet unlike so many other trends in the SEO world, research shows that mobile web use isn’t slowing down, even though many of the so-called mobile friendly websites are a pain to use. Not only are mobile views growing, they are blowing up. Research from Statista estimates that the amount of web traffic in the year 2019 will be around 24.3 Exabyte, up from 4.2 Exabyte in 2015.

Just to make sure you understand the gravity of that, one Exabyte is equal to 1 billion Gigabytes.

Despite evidence showing that visitors are using their mobile devices to browse the web, not everyone designs with the mobile user in mind. According to the Nielsen-Norman Group:

…there are more smartphone users worldwide than desktop and laptop users [but] the usability of mobile websites and applications is still well behind the usability of desktop websites.

Of course, not everyone wants a mobile website that is just good enough for Google. They want their visitors to have a positive experience when they land on their website, or one that they designed for a customer. So they adjust their designs accordingly.

Choose your approach

Most people associate mobile web with responsive web design because that has been the buzzword thrown around different blogs and presentations for some time now. However responsive web design isn’t the only strategy, and it isn’t always the best approach. The best choice is based on how you want your visitors to interact with the content on your site.

Responsive web design

Using media queries to change the display of the site based on the screen size, this is a fluid approach to designing for multiple devices. You design once and rely on the CSS to scale the display based on the screen.

Adaptive design

This approach relies on static pages designed for different breakpoints. When the screen size is detected, the appropriate layout is displayed. Here, you need to design different layouts to accommodate various screen sizes. Usually, six layouts are built for the more common widths: 320, 480, 760, 960, 1200, 1600.

Native application

This is when you build an iOS, Android or Windows app designed to serve up your web content to mobile users.

Understand how interactions work

You would be hard pressed to find a website these days that doesn’t offer some sort of user interaction. It could be a business website that collects information from prospective customers, an ecommerce site built for shopping, or a site that allows visitors to check-in to an event or location. In any event, the user is going to have to provide information, make selections and press buttons and you have to get into the mindset that things on a mobile device are different.

For starters, focus on important features. This might require some rearranging on your part, or you may have to cut back on some of the elements you wanted to include. Not only will this help reduce clutter, but it will allow for larger buttons and other elements that larger fingers may have a hard time engaging with. When at all possible, reduce the need for users to enter text. They may have an onscreen keyboard to use but we all know that there is a high rate of error when using these and features like autocorrect or text predict can become quite frustrating. Also, understand that there is a good chance that a mobile visitor may be interrupted or lose their connection. The less they have to re-do if they time out, the less frustration they are going to feel.

Help your visitors navigate easily

For SEO purposes, many designers have been trained over the years to incorporate complex navigation menus into their work so that the search engine spiders are able to index everything. Having everything accessible from the navigation menu also makes sure that your visitors are able to find what they are looking for. But for the mobile visitor, these overwhelming menus actually make navigation more difficult, and a properly created sitemap will send the search engine crawlers where you need them to go.

Instead of long lists of menu items, keep the choices to no more than six so mobile visitors don’t have to try to scroll down to see everything while trying to keep a menu open. Also, eliminate the submenus. That little + sign that you expect users to click to expand the options is really hard to tap unless they are using a stylus. Apple’s UI Design Basics states that the average finger requires 44 pixels left to right and up and down. Design with that space in mind.

The trend of the single page website is something to consider here as well. Designed with mobile visitors in mind, this technique allows the visitor to scroll through your site and find everything they need on one long page. This type of design forgets all about the fold since mobile users are comfortable swiping through content to find what they need.

Don’t sacrifice your purpose

When thinking about your mobile visitors, you are asked to leave out quite a bit. But what you should never sacrifice is the reason you have a website in the first place. Make sure your branding remains consistent, if you need your logo to remain prominent then use the right amount of real estate to display it. If your site is heavy on content, make sure your mobile users have access to all of it. Hiding content from mobile displays essentially punishes visitors for not being on a full-screen.

As web designers, we are used to trends in our industry. Every year there are lists that introduce us to the latest fads and methodologies that we should be paying attention to. Designing for the mobile user isn’t one of those. It is the reality of where our industry is going and they just keep adding more screen sizes for us to work with so there really is no one size fits all approach that you can take.

You, your organization, your customers and any other stakeholders have to determine what is important and structure your sites around those elements. But think about what is important to your visitors because that is what counts. User experience should never be about what we think is best or what we want to see. We can’t force people into having a great experience when they visit our pages. Instead, we have to look at giving them what they want, in a way that is easy for them to access.

So before we look for checklists or guides that tell us what a good user experience is, take the time to think about what we have to say and what our visitors want to hear.

Featured image, mobile web image via Shutterstock.

Ayrald Hubert

Ayrald Hubert is a Senior Analyst at Clutch responsible for research and analysis of New York based web design companies. Ayrald's academic background includes a Bachelor's Degree from Georgetown University in Washington D.C., USA.