5 Steps to Improve Usability of Web Apps on Mobile

5 Steps to Improve Usability of Web Apps on Mobile

A few months ago, I stopped using my notebook for things other than work and started to use my smartphone instead.

The number of people browsing the internet on their smartphones has outgrown the ones browsing on desktops. And it continues to rise.
Even though I'm a huge fan of my MacBook, I wanted to give it a try and see it for myself what I'm missing out on.

Surprisingly, it wasn't as bad as I thought it would be.
After finding my way around doing everything on a smartphone, I noticed it saved me a lot of time. I can do otherwise boring tasks like paying the rent or booking train tickets during my morning commute. I didn't need to be at home anymore to do that.

With all the advantages, there also come the obvious disadvantages. It turns out 10 years after the first real smartphone, there are parts of the web that aren't ready for mobile yet.

Imagine you're having a lunch with friends and someone comes up with an idea to go to the cinema in the evening and watch the new Star Wars movie. You know you won't be able to buy tickets right before the movie, so you pull out your phone and try to buy them online.

And it just doesn't work.

Now, how frustrating is that? If you're like me and many other people, you'll either go to another theatre or abandon this idea completely.

Looking from the cinema's perspective, the takeaway is simple. They've just lost a client and his money. And they will keep losing more and more as the adoption of mobile progresses.

So, how do we make sure it doesn't happen? I noticed that there are a few issues with mobile websites that keep showing up over and over again.
Let's take a look at a few things to keep in mind when designing them.

Be Careful with Anything That Floats over the Website

A lot of websites use widgets that hover over the page's content.
Most common examples are social share buttons or "This site uses cookies" popups.

These things often use a huge amount of free space on the user's desktop to provide them with access to secondary features. If we want our article to be easily shareable on Facebook, we can ensure that they have the share button visible and accessible at any time.

A social widget hovering aside of an article on desktop

A social widget hovering aside of an article on desktop

With mobile devices, it's a totally different story. What seems like vast empty space on desktop is packed with content on a tiny mobile screen. Widgets that float aside of the main content on desktop often get in its way on our phones.

In some cases they take away a part of extremely limited screen area. In other, they make the main content unreadable by hovering over it. Also, they hardly ever work well when the user zooms a page, which is a common thing to do when browsing the web on a mobile.

The same social widget breaking page's usability on an iPhone
The same social widget taking away limited screen space on a smartphone

A similar thing that you should be careful with are modal popup widgets. I noticed they're often built with various hacks that cause funny side effects on mobile browsers. Common examples include popup showing up below page's content or part of it being trimmed and not accessible to the user.

Because of these issues, I'd avoid using hovering widgets in the first place. They're difficult to position properly and add unnecessary distraction to the user.
If for some reason you really want them on your website, make sure they work well on a mobile. A great way of handling it may be inlining them with the content for small screen sizes and making sure they are of proper size for such devices.

Build Responsive Sites Instead of Dedicated Mobile Versions

You've probably seen links to websites starting with an "m." or "mobile." prefix.

Creating a separate mobile website was a popular approach when the smartphone revolution started. It allowed companies to serve a lightweight version of their website, with UI cut to what people using smartphones need.

A separate version of Twitter website
A separate version of Twitter's website

When building a website from scratch choose a responsive design instead. It provides considerable benefits over having a separate website.

First of them is a parity in functionality. Separate mobile versions of websites are often built independently of the classic desktop one. Because of that, the same features might work in a slightly different manner or simply not be present.

This difference leaves users confused and sometimes prevents them from fully using our product. One of the most confusing examples I encountered was my bank having a different limit for bank transfers done via mobile version of their website. Just imagine you're trying to pay your rent at the last moment and suddenly you learn that you need to use your computer for transfers over 50 euros.

Another benefit of responsive web design is that it reduces the amount of testing that's needed - all in all, the app is built only once. We still should click through it on a mobile device to make sure it looks good, but the same suite of functional tests should give us confidence that both mobile and desktop versions of the application work fine.

And finally, it doesn't need any sort of redirects or special links for smartphone users.

A mobile version of a NY Times website in desktop Chrome
A mobile version of a NY Times website in desktop Chrome

Have you ever found yourself accidentally using a mobile version of a website on your desktop? This happens quite a lot if someone sends you a link from their smartphone.
If there's only one version of your website, you make sure the user gets the best experience possible.

Let the User Access the Website, Even If They Have Our App Installed

It's pretty awesome if a lot of people install and use your mobile app, but sometimes they may have a good reason to access the website instead.

Imagine you want to borrow your friend's phone to check the status of your order at an online store. Signing them out of their shopping app can take a bit of effort, so you decide lurk into web browser, hoping to sign in to the store's web app, check the status and sign out.
Unfortunately, the store automatically opens the mobile app once you enter their website, without giving you a chance to do things the way you wanted to.

What works well is a small banner displayed over a mobile website, telling the user that they can use the mobile app instead. It gives them an useful hint, but also leaves them in control of what's happening.

iOS can determine whether the app is already installed
iOS can determine whether the corresponding app is installed

Also, a few companies use a more aggressive way of promoting their mobile app. For example when logging to the mobile version of Gmail, you have to go through additional page trying to convince you to install their native mobile app instead. When designing such things, keep in mind that users often access mobile websites in a hurry and sometimes on a slow connection. You're far from helping them with adding another step.

Accessing Gmail's mobile website requires to additional step

Make Sure That the Mobile Version Has a Proper Visual Hierarchy

Over the last months I came across a few websites that had a fully functional mobile version, but when porting it to tiny mobile screen, the designers lost track of what's most important on the page.

For example, when trying to order a train ticket on Polish Railways' website, you'll see this.

*Promotional content appearing at the top of the website can confuse mobile users*

At the first sight, it seems like the page doesn't work.
In fact, it is the page that allows to buy tickets, BUT the user needs to scroll down. When building responsive websites, pay special attention to how their content folds on smaller screens and ensure that the main content of the page is visible right after the user opens it.
Due to a limited amount of visual clues, elements like navigation can give them impression that they got to the wrong page.

Input Is Difficult Enough, Make It as Easy as Possible

Typing on mobile devices is slower than on full-sized keyboards. The most interesting case is entering emails, phone numbers or website addresses. In order to type characters like @ or numbers, the user needs an additional one or two keypresses as such characters are hidden by default.

Fortunately, you can help them by marking input fields as special input type. This way, iOS and Android will display a variant of keyboard designed specially for providing emails or phone numbers.

Left: A regular iOS keyboard, Right: iOS keyboard for fields marked as e-mail
Left: A regular iOS keyboard, Right: iOS keyboard for fields marked as e-mail

Speaking of typing, iOS tries to help its users by enabling autocorrect by default. It works fine most of the time, but sometimes it gets in the way, especially in login forms. Unless e-mail fields are properly configured in the page's markup, it will try to correct them as well.
And since those are often mashups of people's names, there's not much point in fixing them.

Mobile Is Now

The growth of mobile brings a lot of opportunities to connect with our users. They can access our services when they really need them, no matter where they are at that moment.

However, these are just opportunities. You can easily miss them by making bad design and user experience decisions.
People using our services via smartphones are often in a hurry, on slow internet connections and in places where they cannot spend too much time to figure out how to use a website.
They need to put more effort into typing and the amount of information they can see at a time is very limited due to small screens of their devices.

In order to compensate for that, we need to take special care of them and make sure that our websites work well in that environment.

And there's no point in denying that we need our apps to be mobile-friendly. If no one uses smartphones to access our website yet, sooner or later someone will do it.
Let's make sure they come back.

Did you like this?

We write about building software products, no fluff included.
Leave your email and we'll let you know when we publish a new post.