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 Mobile UX Design?

Design movements like mobile first have been trying to shift our attention towards mobile for some time. By now, most professional websites work well on mobile devices. Of course, conscientious designers contribute to this. But even those who run a WordPress website often use frameworks like Bootstrap or ready-made WordPress themes. Here, the responsive display is usually already integrated. This saves developersan 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 WordPress website via mobile devices have other needs that are not necessarily satisfied by the aesthetic and technical customisation of the WordPress website alone.

User experience design is based on problem solving. The initial question here is always: what problems can users have and how do we solve that? So in the context of mobile devices, you should consider one key question: What additional problems arise when users visits your WordPress website from a mobile device?

Many of us use our smartphones especially when we are on the move. The user experience is strongly influenced by external factors: it can be noisy around us. We may also be in motion - interaction with the phone is less accurate. Light levels can change rapidly between bright and dim. Reception can change between good and bad, or even stop altogether. Visitors to your WordPress website may use prepaid plansand therefore try to avoid websites that consume a lot of data volume in a short time.

The position may be less comfortable and your users less relaxed as a result. We generally have less patience because we have less time for individual tasks. If something doesn't work in the shortest amount of time - or we have to wait too long for content to load - we are more inclined to cancel the process on the smartphone and devote our brief attention to another WordPress 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: Is your WordPress website mobile optimised? To better summarise what this means in detail, I have summarised the most important UX principles for mobile design.

13 Mobile UX Design Principles

1. Content

Visitors to your website have different goals depending on the devices they use to access your site. Long texts on mobile devices often mean a lot of scrolling to find what they came for. As mobile users , we're primarily looking for quick, concise information. Those visiting your store on mobile are more likely to want to know what products you offer than to learn more about your 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 completely: For some content, it may be a good idea to hide it completely. This may be the case if it is something that does not work on the phone anyway. Or if the data volume consumed would exceed the benefit for the user.
• Shorten content: You can use the same structure for your WordPress website, but shorten long content accordingly and link it to a subpage, for example. This way, visitors can 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.

2. Layout

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.

3. Minimalism

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:

4. Consistency

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.

5. Media

Images should have a suitable size and be displayed in this size so that nothing has to be distorted or scaled. This also helps to 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 a part of the image or specifically save your images for mobile devices. For websites with many images, you should integrate Lazy Load or use corresponding WordPress plugins. 

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.

6. Typography

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. 

There are a few other things to consider when trying to make typography more readable:

• Contrast between font colour and background: Especially because mobile devices are also used outdoors, this is particularly important. This also applies to the rest of your website. A good contrast between elements makes it easier to view your website. ContrastChecker.com analyses your colour choice and lets you know if combined colours have enough contrast to each other.
• 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 generally not suitable 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.

7. Navigation

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. But also on the desktop we increasingly see a vertical menu instead of a horizontal one. Above or below this is usually the secondary menu, if necessary somewhat less prominently. 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 in a larger size. This way, visitors to your website know what they can do on your website. And they are 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", "Submit" should also be placed at a distance from the other call-to-actions so that they are not accidentally triggered.

Hidden interaction

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.

Links

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

As with desktop, it is a good idea to use tried and tested solutions, also called UI design patterns, when creating your website or e-commerce store. Some of these patterns are cross-device, others are more specific. This e-book by UXPin has also proven to be a good guide.

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? 

However, you should be critical in doing this so that you don't copy any mistakes or "bad" UX elements. 

9. Forms

Long forms can be tiring and can quickly become confusing. In general, you should use forms on mobile devices only when necessary. When integrating forms, you should make sure that you only ask for as much data as is actually necessary and provide users with the appropriate keyboard. You do this by using appropriate HTML Form Types. This tells the browser what the input is. And the 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.

10. Feedback

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 is gone. That is something to avoid. There are common tricks for this, such as loading animations. It is important that the users 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.

12. Speed

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.

13. Accessibility

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. There you can also check your website in different device sizes. 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 on Mobile UX 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.

For more input on mobile UX design, I highly recommend Google's Web Fundamentals and this article for better mobile UX design.