Getting Mobile User Experience Right for WordPress
The argument over responsive design has been won. The sheer number of responsive themes available in the WordPress Theme Directory, as well as the plethora of plugins available for enhancing responsive sites is testament to that.
But installing a responsive theme or maybe a few plugins isn’t all there is to it. It’s important that you take some time to consider the user experience on all of the devices your users are likely to be accessing your site from.
Traditionally, we’ve tended to develop in the desktop browser (it’s easier to work on a big screen, after all) and it’s all too easy to do your testing in that same environment, checking that your site’s easy to interact with on large screens using a mouse and keyboard.
But the number of users on mobile is growing.
The sites I manage now receive more than 50% of their visits from mobile devices. So it’s essential when you’re creating a new site, whether you’re coding yourself or using themes and plugins, that you consider the user experience on mobile devices (including tablets).
In this post, I’m going to tackle four main areas of mobile responsive design:
- Touchable areas
In each case, I’ll look at the factors you need to consider, provide some tips, and, where relevant list plugins or themes that can help you with this.
So let’s start with the key feature that separates mobile devices from (most) desktops: touch.
UX for Touch Devices
Almost all mobile devices now, as well as an increasing number of desktop devices, have touch screens. How responsive (in the sense of how smoothly they react) and user-friendly these screens are will depend on the devices being used, their hardware and operating system. Some have capacitive screens (like my Kindle, which responds to the touch of anything – including, annoyingly, my duvet when I drop it as I fall asleep at night!). But most will have resistive screens, which only respond to the touch of a finger (or other bodily parts such as a cat’s paw – check out YouTube) or to certain metals.
Different mobile operating systems will incorporate different gestures that users can make use of to move between content, change the screen size, switch apps and more. Android and iOS have dozens of gestures sometimes involving complicated combinations of fingers and movements; some of these will be intuitive enough for users to make regular use of them, while others are a little more niche.
What’s important is that the design of your site ensures two things:
- It’s easy to touch the right spot on the screen, without your finger or thumb straying onto another touch area.
- Touch areas are obvious and users will know what to do with them.
Let’s look at each of those in turn.
Size of Touch Areas
Touch areas should be sufficiently large for a human thumb to touch them comfortably, with margins that prevent users from accidentally tapping the next button along. I deliberately mention thumbs here; although when you’re sitting at your desk testing your site you’ll probably use your fingers, your users holding their phone in their hand will probably make use of a thumb, especially near the bottom of the screen.
Apple recommends that buttons should be at least 44px square, but what that actually means will differ according to the resolution of the screen: so test on retina and non-retina devices as well as tablets and different operating systems where you can.
It’s also important to think about links in your text, which might be in lists (navigation in the footer, for example) or in the body of your content. If the text is small and the line spacing not sufficient, people might accidentally tap on the wrong link, or miss altogether. Which won’t make browsing your site an enjoyable experience.
Touch areas don’t always suffer from being too small, however. What’s often overlooked is that they can be too large. If you have an image within a link, which takes up the full size of the screen on a mobile device, it can make it impossible for users to swipe down past that image, as every time they touch it the link will open. I’ve often seen this happen with embedded maps. Make sure your images and maps won’t be taller than the screen height on the smallest mobile devices (realistically, 480px tall). Or just remove the link!
Intuitiveness of Touch Areas
Before people can interact with the touch areas in your site, they need to recognize them as touch areas. So it’s important that your site’s design makes buttons, links and other clickable or tappable elements nice and obvious. This doesn’t just help UX, it helps accessibility, too.
Buttons need to look like buttons; they don’t need to have gradient effects or rounded corners anymore, thanks to the rise of flat design, but they should stand out from their background. You should also make sure that the button itself is clickable, rather than just the text in it. So instead of the following code for a button:
You would use this instead:
That way, when the user taps on the button itself the link will activate.
Other clues can help people to spot such areas. Make use of the graphics and icons used by native apps, as users will be familiar with these and will expect to see them on your site.
iOS and Android both use a range of standard icons and it makes sense to use something as similar as possible in your site.
Another clue is in the placement of touch areas and interactions on your site. People will expect to see navigation near the top of the site, for example. If your main navigation is reduced on small screens, an icon or the word “menu” in an easily tappable area will make it obvious what people need to do to make the menu appear.
Don’t be tempted to sacrifice UX to design: if your menu looks pretty but is impossible to use, then it isn’t doing its job.
I’ve already touched (no pun intended) on navigation in the previous section, but navigation on mobile devices can be a particular challenge. This is mainly down to two factors:
- A full size navigation menu takes up a lot of room and can look messy.
- People reading your content will have scrolled a long way away from your header navigation menu when they’ve reached the end.
Replacing the Full Size Navigation
It’s good practice to use a different interface for your navigation menu on smaller screens.
You could either use the device’s inbuilt controls by turning your menu into a select box, or you could activate a theme or plugin that gives you a more attractive menu which appears at the touch of a link and can be styled to work with your site’s design.
A plugin like Responsive Menu will convert your menu to one that’s hidden at first but flies out from the side when the user taps on it. You can specify what’s displayed on the tappable area, and you can customize the styling.
Alternatively, you might prefer to use a theme which comes with a responsive menu bundled.
Our own Fixer theme, for example, which uses the Upfront theme framework, has a menu icon which displays the menu when tapped or clicked.
Navigation Elsewhere on the Page
When you’ve read through a long blog post on a small screen, maybe scrolling down through yards of content, it’s a pain to have to scroll back up to the top again to navigate to some other content. So make sure you provide your users with other ways to navigate to more content once they’ve finished reading, such as:
- A list of related posts at the bottom of each post, preferably with an attractive image to encourage click-throughs.
- A navigation menu in the footer, either a duplicate of your main menu or a smaller menu with the most visited content. This is easy to set up using the Custom Menu widget that comes bundled with WordPress.
- Repeat your navigation menu again at the bottom of the screen – why not?
The world wide web was invented so that people could navigate between web pages: make sure your visitors can easily navigate within your site so they don’t navigate away from it!
I still see plenty of examples of badly coded forms and form fields. Forms aren’t popular with users at the best of times, but on small screens with keyboards that make it difficult to type in lots of text, a well designed form is all the more important to keep your visitors from giving up before they’ve even pressed Submit.
Here are some tips for creating forms that work well on mobile devices as well as larger screens:
- Only include fields that are absolutely necessary. This has to be the first rule of forms. Don’t make fields mandatory unless the process that the form supports won’t work without the data from them.
- Make sure form fields are big enough for people to tap on easily and have plenty of space between them.
- Make sure the submit button is big enough for easy tapping.
- Use the correct keyboard depending on the data type: so for an email address for example, use
<input type="email">, rather than just
<input>. This will open the correct keypad on a tablet or smartphone and make the user’s job much easier. You’ll be pleased to know that the best forms plugins do this for you. There are a few different input types: this tutorial covers the most common ones as well as styling for easy tapping.
Luckily, all this doesn’t need to be complicated. The most popular form plugins (the free Contact Form 7 and premium Gravity Forms) use correct coding for form fields and have varying degrees of responsiveness in their design. My personal preference is for Gravity Forms which has a more professional looking responsive layout, as you’d expect from a paid plugin.
On a smaller screen it can be harder to know what’s going on and when interactions are available or activity is taking place. Apple has some useful tips in its iOS developer guidelines, some of which will or won’t apply so much to websites, but here are my tips:
- Ensure that links change color when they’re tapped or clicked as well as on hover. Use
a:activeas well as
a:hoverwhen styling your links.
- If a process is running, provide information to let the user know about it. Provide a ‘working’ or ‘waiting’ message or something similar.
- When the user has submitted a form, display a feedback message letting them know you’ve received the form, and make sure it’s visible on small screens. The big form plugins incorporate this.
- If users are adding data to your site, for example by adding something to their cart, display a status update somewhere on the screen (such as a number next to a cart icon). This doesn’t have to appear permanently but might time out after a few seconds. On desktop it’s easy to incorporate this sort of thing into the sidebar or header where they’re permanently visible: on a small screen these areas are generally not visible, so you need another form of feedback.
- Don’t open links in new windows. On desktop this can be a minor irritation but on mobile it means three or more taps as the user navigates to the screen listing all open tabs and then selects the one they were on before the link opened. It’s said that every time a link opens in a new window, a kitten dies! The most commonly used element of any browser is the back button: make sure your visitors can use it.
The science of user interactions and making them as painless as possible is a whole topic in itself. For more advice on enhancing user interactions on your site, you might want to check out some specialist websites such as UX Magazine or the Interaction Design Foundation.
User experience has become arguably the most important element of web design in the last year or two. As more of us are accessing the web using different devices, and we require sites to be fast and easy to use, the focus has moved away from the aesthetics of web design towards the practicalities of providing a quality user experience.
On mobile devices, there are some additional UX considerations which will enhance your visitors’ experience when they visit your site. If you follow these tips you’ll keep your visitors happy and get more conversations and repeat visits.
How do you design/develop for mobile UX? Do you keep thumbs in mind? What plugins do you use? Share your own tips in the comments below.