A lot of attention is being paid to solving mobile problems right now, such as performance problems, since people are still glued to their smaller devices.
Most of the time, these problems are fixed after a site goes live, when mistakes start showing up in Google Search Console reports on mobile usability. These kinds of mistakes can often be fixed by development teams, but it’s much better for designers to know and use mobile UX best practices from the start.
Mobile speed is also a big part of SEO, so designers and developers need to think about how everything from motion to images will impact these numbers.
Focus on how design spacing
Spacing design features isn’t just about making the site look good; it’s also about making it easy for everyone to use, even people on phones.
It’s a common problem in Google Search Console that “clickable elements are too close together” when it comes to mobile usability.
This makes the experience difficult for people using smaller devices because they click on things by accident while trying to move around the site.
In terms of mobile UX design, features that can be clicked on or interacted with need to be big enough and spaced out far enough.
Visitors use a mouse, which is a very accurate tool, to move around on a PC, but most mobile users use their thumbs. Thumbs are usually bigger than the little mouse cursor and can be a little less precise, especially if you are walking or doing other things at the same time.
So, make sure there is enough room between elements and buttons so the visitor doesn’t have a bad time on their phone.
You should also think about how easy it is for people to use the smaller device and how they might hold it. Some people may have their left hand on the phone or computer, their right hand on it, or both hands on it. No matter what, the site design needs to be simple and easy to use.
Lastly, visitors scroll through the page and scroll their device with their thumb, so you should make sure there aren’t any big clickable elements that they might hit by accident while scrolling.
Make sure the words and font are easy to read
Along with spacing, “text is too small to read” is another mistake that Google Search Console often sees on mobile devices. Some font size changes can be made by a writer, but design teams can also make the text easier to read from the start by following some UX best practices.
The first thing you should do is choose a font that is easy to read. To make it easier for people to use your site, keep in mind that they may be walking, doing something else, or outside while using their smaller devices.
Making a visual order with font size is another way to help mobile users quickly read and understand what’s on the page. It also helps on phones and tablets, where headlines may go to the next line. Using the same fonts and sizes all over the page can make it hard to understand what it’s about.
Increasing the line height between text lines can also help people read what they’re reading on a page.
You need to think about the color contrast ratios after you choose the font and size.
It’s important to follow rules about the contrast between background and foreground colors because guests could be inside, outside, or in low light.
This also has something to do with making a website accessible and ADA-compliant. The WCAG 2.1 guidelines say that the contrast ratio for normal text should be at least 4.5:1 and for big text it should be at least 3:1.
Make sure that animations and hover overs follow the rules
It’s common for clients who want to update their websites to ask for micro-animations and interactive parts to be added to their new designs.
The people who create and build websites often work together to add movement to them. This is because animation can slow down page loads and require a lot of quality control checks if it’s not coded correctly. When you’re designing, you need to think about whether the motions will work on mobile devices when you choose them.
It’s common to turn off complicated animations and video backgrounds on mobile because they can make the site load more slowly, especially for people on a mobile network. Since 2018, when mobile page speed became one of Google’s ranking factors, this kind of change has become more usual.
Most of the time, animation and interaction should be used in a way that doesn’t draw attention away from the guest. It also shouldn’t be an important part of getting a person to do something.
Overlays are another popular design element that might look different on a phone. On a desktop, a “hover over” is an object or picture that changes or shows text when the guest moves their mouse over it. Although this works well on big screens, keep in mind that guests on phones don’t have mice, so they will need to tap to see the hover over.
If you have a box or image that shows text when you hover over it, you should make sure that the text doesn’t get in the way of the guests’ actions.
When you and your development team talk about animation, you can also look over Google’s best practices for web animation rules to make sure you don’t make any mistakes with flash or old technology.
Plan where to put pop-ups and other third-party content
Pop-up screens have always caused a lot of disagreement about whether they should be used on websites or on phones.
People may find it harder to close pop-up forms or messages on their phones, which is one reason to avoid them. As of January 2017, Google has been telling websites not to use annoying interstitials that cover up all the information on a page. This is because these ads are especially bad on mobile devices.
When you talk to clients about pop-up forms, you can talk about all of these things and choose the one that will give users the best experience.
When designing with mobile in mind, it’s good to think about where things will go on smaller screens. On a desktop, a button that sticks on the right side of the screen while a visitor scrolls might work fine. But on a mobile device, this kind of element can make the view space even smaller.
Some things, like live chat and accessibility widgets, may be added at the last minute, but planning for them earlier in the web design process can help keep the interface simple for users.
Chat widgets are often found in the bottom right or left corner of the design. Live chat has become a very common tool. By including suggestions for where to put these parts in design mockups, you can see ahead of time if there will be any issues with things overlapping.
Think about where and how the form is designed
For visitors, filling out and sending in a form while on a phone or smaller computer can be annoying. That’s why it’s important to think about site design alternatives to forms.
When making the mobile menu navigation, you might want to put a “click to call” phone number in the header so that people can easily get in touch with the business.
When designing the site’s forms, it’s best to keep the number of form fields as low as possible for both desktop and mobile, and make it clear which fields are needed.
When making a form for mobile use, it’s helpful to include form labels instead of just blank text in the form areas. Visitors on mobile devices are often interrupted by other messages and interactions. This means that they might forget what the placeholder text said if they are in the middle of filling out the form. For ADA compliance, it’s also important to have clear form titles and error messages.
Finally, where the form is placed on the page and how it can be changed with the responsive style is very important because form placement can affect conversions.
Conclusion
Because mobile speed is getting more attention, using some of the above ideas when planning your projects will help you save time and trouble when they go live. Are there any other mobile UX tips that have helped the flow of your design? Write something below!
