You are not the user.
This is one of the most important mantras driving the improvement of user experience (UX). Sometimes programmers fall into what is called the “false consensus effect,” where coders think that what they believe or think will be shared by the users who will ultimately interact with a website. Sadly, this often isn’t the case. Web designers should be careful not to overestimate or miscalculate how UX feels to the actual people tapping on a keyboard or with devices in their hands.
This is especially true in the mobile environment, where over 5 billion devices are powering e-commerce, banking, streaming services, and social media around the globe. There are many complicating factors to consider for mobile UX, such as the type of device, which can complicate consistency of experience. What might look great on a desktop doesn’t necessarily translate to mobile, and since Google incorporates mobile loading speeds of a website in its PageRank, getting mobile UX right is critically important.
So here are a few chestnuts of wisdom to keep in mind when it comes to mobile UX.
Space Race
No one likes a crowd, except maybe pick-pockets and viruses. You can’t just throw everything against the kitchen wall and see what will stick. You have to plan for the spacing of your elements on a mobile page with great care, almost with a minimalist “less is more” philosophy. If you don’t heed this advice, you might get smacked with the dreaded “clickable elements are too close together” mobile-usability error on the Google Search Console.
One aspect to focus on is the “touch target,” or the portion of a button, control, or link that gets activated when a finger or thumb comes into contact with it. A 2017 study by MIT found that users got extremely angry when they tried to click on something and nothing happened because the touch target was too small. A rule of thumb (no pun intended) is to set touch targets at between 7-10 millimeters, which is about the average width of a fingertip. And you need to space targets apart far enough so that user digits aren’t clicking the wrong thing.
The key is to come up with core principles that animate your webpage and prioritize which elements speak loudest to these cores. You can’t overload your page because of FOMO. As long as you completely understand what the ultimate purpose of your design is, it will flow intuitively and users will enjoy the site.
Font Is King
Another important visual element to get right is font, both size and style. The point is to not frustrate the user, so you should pick a font with clear and distinctive letterforms—each letter is clearly defined and not easily confused with another. Google’s Roboto might be a good choice here. As for font size, that will change between devices, depending on how close the letters are to a user’s eyes. For mobile devices, 12-16 pts should do the trick, while a desktop should contain fonts at 16-20 pts.
Next comes color contrast, and here the Web Content Accessibility Guidelines (WCAG) call for a ratio of 4.5:1 for normal text and 3:1 for large text.
Avoid using all capital letters, and you’re going to want to change up font sizes so that your page doesn’t all blur together. To that end, you’ll want to keep line lengths to between 45-75 characters, because otherwise the amount of letters on the page will be difficult to read on a mobile device.
Plus, users could be indoors, outdoors, walking, who knows–the mobile experience is a hard one to categorize. That’s why you need to test different fonts on various devices at the most extreme setting. Unless you’re ready for the extremes, you won’t ensure quality UX.
Just One Screen
This might seem obvious, but the mobile experience is constrained by the fact that users look at a single screen that is considerably smaller than a desktop. That fact alone makes the two ecosystems very difficult to parallel.
Pop-ups on a desktop can be very interactive animations that make UX robust, but that same element on a mobile screen can be hard to deal with. The same goes with hovers, where a mouse will glide over an element to reveal it. Mobile users have a thumb, not a mouse, and so hovers don’t work the same way.
A sticky element might be a huge timesaver on a desktop, but on a mobile screen, it might blot out a big chunk of the content. The bottom line is that UX on a mobile device has to stay on a single window, with no new tabs or leaving the app allowed. Doing so will only add complexity and make users feel frustrated.
Plan ahead before adding live chat or widgets, so that you won’t create a helter-skelter atmosphere on your website.
Forming Forms
Filling out a form on your smartphone can become a special kind of torture, and so any best practice of mobile UX has to rethink the way forms are filled out in this space. The status quo won’t work. You need to come up with alternatives, because forms remain one of the best marketing tools you have to grow your customer base.
Make sure that you don’t have too many fields to fill out in a mobile form, and for the good of humanity, clearly indicate which fields are required. Utilizing placeholder text instead of designing form labels is pretty much taboo. Mobile users often get distracted and might leave the form and forget what was placeholder text and what wasn’t. To comply with the ADA, you need to have clear form labels and error messages.
And consider this: most users prefer touching the middle of their screen. If you use any drop-down options on your form, make sure that each is big enough to be tapped.
Get Mobile
So the end of the story is this: the mobile landscape is fundamentally different from a desktop, and your website needs to be responsive in both settings. The challenges presented by mobile are really an opportunity for you to sharpen the focus on your website and hone in on the core reasons why it exists at all. Good web designers can account for both of these environments as long as they adhere to best practices.
