How can you make using your website a pleasant mobile experience? What does user experience mean for mobile devices? What design principles can you apply? You'll find answers to all these questions in this article. Let's take a closer look at the best practices for mobile UX design!
Why should we care about mobile UX design?
Design movements like Mobile First have been trying to shift our attention towards mobile for some time. Most professional websites now work well on mobile devices. Of course, this can largely be put down to diligent designers. But even people running websites often use frameworks like Bootstrap or prefabricated WordPress themes. Here, the responsive display is usually already integrated, saving developers an enormous amount of time.
When you use Bootstrap, WordPress themes and the like, you run the risk that the design was designed for desktop – and then just adapted for mobile devices.
Why is this a problem? Visitors who view your website via mobile devices have different needs. These needs aren't necessarily met by just adapting the aesthetics and technical side of the website.
User experience design is based on problem solving. The starting question here is always: what problems might users have and how can we solve them? In the context of mobile devices, there's one central question to consider: what additional problems arise when users visit your website from a mobile device?
Smartphone use in Germany
According to Statista.com, 97.5 percent of households in Germany had one or more mobile phones in 2020. This results in a share of 80 percent of mobile internet users. Of these, 24.1 percent used a prepaid contract. For 2023, an increase from 66.5 million to 68.6 million smartphone users is forecast.
Many of us tend to use our smartphones on the move. The user experience in this context is strongly influenced by external factors. We might be in a noisy environment. We could also be in motion so interacting with the smartphone is less accurate. Light levels can switch rapidly between very bright and very dark. Reception can change between good and bad, or even stop altogether. Visitors to your website may be on prepaid plans and therefore try to avoid websites that eat into their data plans.
The position might be comfortable and your users more tense. We generally have less patience because we have less time for individual tasks. If something doesn't work straight away – or we have to wait too long for content to load – we're likely to cancel the process on the smartphone and devote our already limited attention to another website.
The will to read or scroll through a lot of text is also smaller. We look for clearly structured information in small chunks. We may also only have one hand free.
The reasons for surfing the internet with a smartphone are very different from those of desktop users. On mobile, we're either looking for specific information or we're trying to kill time.
When I go to a commercial website on my smartphone, I'm probably most interested in the basic information:
- What's the address?
- How do I get there?
- What are the opening hours?
- How can I get in touch?
- What products are offered?
- How much do they cost?
The only question that remains is whether your site is optimized for mobile? To give you a clearer idea of what this means, I've summarized the most important UX principles for mobile design.
Mobile UX Design: 13 principles to implement straight away
Depending on the device they're using, visitors to your website have different goals. Long texts on mobile devices often mean a lot of scrolling to find what they came for. As mobile users, we're looking for fast and concise information. People visiting your shop on mobile devices are more likely to want to know what products you offer than to learn more about your profile and background.
Content therefore needs to be adapted. The hierarchy on smartphones and tablets is different from that on desktops. There are several possibilities here:
- Omit content entirely: For some content, it may be a good idea to hide it completely. It could be something that doesn't work on a smartphone anyway. Or if the data volume consumed would exceed the benefit for the user.
- Shorten content: You can take over the structure of your website but shorten long content accordingly and link it, for example, to a sub-page. Visitors can then decide for themselves whether this information is relevant to them or not.
- Change the arrangement of the content: You can revise the structure of your content and arrange it differently on mobile devices. The products could then be in first place and the shop history could come later. This way you save unnecessary scrolling, but still display all the content.
In the following example, I've adapted the content of a restaurant's website (left) to make it more user friendly. I shortened the text and linked to a subpage with a CTA (right). I also adapted the typography – more about that later.
In his article Design for Fingers, Touch, and People, Steven Hoober reports on the results of his extensive research on smartphone use. The thumb technique is often used as a guide. Here, the radius that the thumb can make across the screen counts. It's often suggested that the upper corners are absolute taboo zones that users cannot reach. According to the results of his research, however, this is not entirely true.
The six most common ways smartphones are held:
This results in the following optimal division of elements for smartphones:
The result: the most important information should be placed in the centre of the screen on mobile devices.
A minimalist design approach is never wrong. But especially on a smaller device, we feel cramped and confused by too much content and too little whitespace. It becomes unclear where what information is hidden and how we get there.
The mobile version of Streetartnews appears structured and clear. On the content pages, there are only the most necessary elements and easily readable serif fonts with appropriate line spacing:
It's important that your website is consistent across platforms. Google has solved this in a really elegant way. No matter which device I use to access Google, I recognize the Google brand immediately.
Your brand should therefore also be reflected on mobile devices despite its minimalist design. If your website has a user area, changes made must be adopted accordingly on all devices.
Images should have an appropriate size and, in turn, be displayed in that size so that nothing has to be distorted or scaled. This also helps avoid unnecessarily long loading times. The transition between landscape and portrait format can be the most difficult. Depending on the content of the image, you should either show only part of the image or save your images especially for mobile devices. You should integrate lazy load or use suitable WordPress plugins for websites with many images.
Optimize images in WordPress: 6 plugins for image compression
Optimizing graphics and images for your WordPress website is an easy and important step to improving your load time. In another article, we show you six popular WordPress plugins you can use to take all the hassle out of compressing your images.
The same applies to videos. Here, too, the setting changes from landscape to portrait. Videos should also be set to mute and shouldn't start by themselves. As a general point, videos should be optimized for the web anyway but it's especially important for mobile devices.
More important than the appearance of your website is always its functionality. This includes text that is readable. The standard text size in HTML is 16px. This size is used unless you specify otherwise. Depending on the font, however, your text may appear larger or smaller.
All about web typography and fonts
There are a few other things to consider when trying to make typography more readable:
- Contrast between font color and background: Contrast is particularly important as devices are very often used outside. This also applies to the rest of your website. A good contrast between elements makes it easier to view your website. ContrastChecker.com analyzes your color choice and tells you whether your combined colors have enough contrast between them.
- Spacing: If your text is too close together, it becomes increasingly difficult to read. The line spacing for desktop and mobile devices may be different.
- Centering: My basic rule is never to use justification on websites. Justification may look nice at first glance, but it ensures that the flow of reading is interrupted. Centered text has a similar effect. Text sections on mobile devices should therefore only be centered in special cases.
Here is the example from EggShop again. To make the text (left) more readable, I increased the font size to 16px and set the line height to 1.7 (right). In addition, I centred the text on the left and reduced a few spaces at the top and removed the double heading. In the desktop version, the double heading makes sense. On mobile phones, it only creates unwanted whitespace and duplication.
You could go a bit further and make keywords bold. This would enable users to skim through the text even more quickly and still pick up relevant information. Some fonts are unsuitable for small screens because they lose their readability when scaled. Light fonts that look elegant on a desktop may also be less legible on a smartphone.
The navigation of your website should be as intuitive as possible. When creating your navigation architecture, it's best to use existing structures as a guide. This makes it easier for users to navigate through your website. Intuitive is, for example, scrolling up and down to navigate through a website, but not necessarily to the left or right.
A vertical menu has prevailed as the primary menu on mobile. And even on the desktop, we increasingly see a vertical menu instead of a horizontal one. Above or below this primary menu is, if necessary and less prominently, the secondary menu. Alternatively, it can also be at the bottom.
Secondary menus can be, for example, language settings or social media links. If a tertiary menu is necessary, it's placed as a fold-out menu. This could be, for example, a login or logout.
If your website is more than a one-pager, it's especially important that visitors can always easily find out where they are.
CTAs & links
Interactive elements should be displayed larger. Visitors then know what they can do on your website and they're able to click on what they want. The arrangement of the elements also plays a role. Enough space must be left to reduce the risk of accidentally tapping the wrong link or button. Buttons such as "Log out", "Delete", "Send" should also be placed at a distance from the other call-to-actions so that they're not triggered accidentally.
It's quite common to allow interaction through multiple channels. As long as there's a way for new visitors to use your website anyway. This allows you to offer shortcuts to returning users without making it difficult to get started.
If you want to add more features to your website, it makes sense to use existing systems – instead of programming new ones. For example, when using the user's email client instead of a contact form. Or when integrating directions through the user's favorite app. It makes it easier for them to use your website because they can use apps they already know to solve certain tasks.
8. UI design patterns
When creating your website or e-commerce store, it's always a good idea to fall back on tried-and-tested options, also known as UI design patterns – the same as you would with desktop. Some of these patterns are cross-device while others are more specific. This e-book by UXPin is a respected and suitable source.
Small screens offer little space for navigation. Unstructured and confusing websites stand out particularly negatively.
Similar to the UI design patterns, I recommend taking existing websites and successful web apps as a guide and analyzing them:
- Where is the menu usually located?
- What does it look like?
- What happens when I press it?
You should, however, proceed critically so you don't end up copying any mistakes or "bad" UX elements.
Long forms can be tiring and can quickly become confusing. In general, you should only use forms on mobile devices if necessary. When integrating forms, you should make sure that you only ask for as much data as is actually necessary and provide the user with the appropriate keyboard. You can do this by using suitable HTML form types. This tells the browser what the input is and an appropriate keyboard is provided.
Alternatively, you can integrate automatic completion or content suggestion. Or use a social media login instead of a lengthy registration process.
We use mobile devices with our hands and so we expect to get real feedback, i.e. feedback that's based on real objects. This can be, for example, a button that appears to be pressed when we touch it.
If this kind of feedback doesn't fit into your concept, it's still important to give some feedback. Who hasn't pressed a link or button many times in a row and been unsure whether it simply doesn't work or the internet connection has been lost. Such experiences can be avoided. There are common tricks for this, such as loading animations. Users need to know that their interaction has worked and that something will happen.
11. Error handling
Mistakes are made. You accidentally press the wrong link and end up on the wrong website. Or you send something that wasn't ready yet. It's key that mistakes have no (or as few as possible) negative consequences. You can integrate, for example, undo functions and back buttons. The home button is also incredibly important here, it's the anchor if your users get lost. With it, they always know how to get back to the start page.
The loading time of your website can also be a problem on mobile devices. Especially if you want to access from unstable networks, the waiting time should not be so long that it deters visitors.
WordPress accessibility: How to create an accessible website
Accessibility in WordPress is an important component when creating websites. But how accessible is WordPress actually? Why is accessibility so important? And how can you make your website accessible to everyone? If you're asking yourself these questions, check out our accessibility guide for some tips and advice.
Accessibility is a cross-platform issue that's finally gaining more and more importance. The basic idea and mission: the web must be accessible for everyone. This is especially relevant for people with disabilities that can affect the way they access and use the web.
If you ignore the issue of accessibility, you're already excluding 20 percent of the world's population from being able to use your website. In short, neglecting accessibility is not good for your business. But more importantly, it's terrible for creating a more just and fair world.
Tools for UX testing
Depending on how your website is structured, you may have the option to edit the mobile view directly. Generally speaking, however, a few manual CSS adjustments will be required. Several options are suitable for testing:
- Inspection tools in the browser: The most common browsers allow you to inspect your website with the so-called Developer Tools. You can also check your website in different device sizes using these. Other good tools for website testing are Responsinator and BrowserStack Responsive.
- On the device: The most effective way to see your website is on the device itself. Always make sure you test your site on your own mobile phone or tablet. It would be very expensive to own every type of device so you can use so-called emulators to test your website instead.
- Emulators: This software is provided by the operating system manufacturer itself. You can develop there and see your results directly in the browser – tailored to the size of the device and the respective operating system such as Android or iOS.
Conclusion: Best practices for mobile design
By implementing these tips, you can improve the mobile experience of your website and attract more customers. And maybe the examples and best practices will help you develop new ideas for your website. Mobile remains, unfortunately, an often neglected aspect on websites. In turn, this has a negative impact on the conversion rate of mobile users.