There’s a lot of focus right now on fixing mobile issues, including mobile performance issues as users continue to stay glued to their smaller devices.

Typically, these issues are tackled after a site launches, when errors start to pop up in Google Search Console reports on mobile usability. While development teams can often resolve such errors, it’s much more efficient for designers to understand and implement mobile UX best practices from the beginning.

Mobile speed is also a big factor for search engine optimization, so designers and developers have to consider how everything from animation to imagery will affect those metrics.

Focus on spacing of design elements

Spacing design elements is not just about creating a nice visual flow; it’s about making your site easy to use for all visitors, including those on mobile devices.

A common mobile usability error in Google Search Console is that “clickable elements are too close together.” 

This creates a frustrating experience for visitors on smaller devices where they are inadvertently clicking elements while trying to navigate the site.

From a mobile UX design standpoint, buttons and interactive or clickable elements need to be large enough and placed far enough apart in the design.

On a desktop, visitors are navigating with a mouse which is a very precise tool, while on mobile, most users are using their thumbs. Thumbs are typically larger than your little mouse cursor and can be a bit clumsier, especially if you are trying to navigate a site while walking or multitasking.

Therefore, you need to design enough space between buttons and elements, so that the visitor doesn’t have a frustrating mobile experience.

You also need to consider accessibility and how visitors may be holding the smaller device. Some may be holding the phone or tablet with their left hand, others with their right hand, or some with both hands. The site design needs to be easy to navigate regardless of that.

Lastly, visitors are also using their thumb to scroll on the device and go through the web page, so you’ll need to make sure there aren’t large clickable elements that they may inadvertently tap while scrolling.

Ensure the readability of text and font

In addition to spacing, another common mobile usability error in Google Search Console reports is “text is too small to read.” While a developer can adjust some aspects of font sizing, there are several UX best practices that design teams can implement from the beginning in terms of readability.

Selecting a typeface that is easily legible is the first place to start. Remember that users are often walking or multi-tasking or outside while on their smaller devices and they may be in non-ideal scenarios while trying to navigate your site.

Creating a visual hierarchy in terms of font size is another way to help those mobile users quickly scan and understand the content of the page. It also helps on mobile or tablet devices where headline texts may wrap to the next line. Utilizing the same font and sizes throughout the page can cause confusion around the meaning of the page.

In your designs, you can also increase the line height between lines of text in order to boost the readability of a page.

Once you’ve decided on the font and sizing, you also need to consider the color contrast ratios.

Since visitors may be indoors or outdoors or in poor lighting, it’s important to follow standards for the contrast between background and foreground colors.

This also plays a role in accessibility and creating an ADA-compliant website. According to the WCAG 2.1 standards, a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text is recommended.

Make sure hover overs and animation follow best practices

Most web designs today incorporate some micro-animations and interactive components; it’s a common request from clients in a redesign process.

Adding movement to a site is often a collaboration between designers and developers since animation can affect page load time and cause endless QC if not coded well. When selecting animations in the design process, you also need to plan for whether those interactions will occur on mobile devices.

Because of performance problems, it’s common to turn off complex animations and video backgrounds on mobile because they can slow down the load time of the site, especially for visitors on a mobile network. This type of alteration has been increasingly common since 2018, when mobile page speed became one of Google’s ranking factors.

In general, animation and interaction should be used in subtle ways to support the user experience and shouldn’t distract the visitor. Nor should it be an essential ingredient in helping a visitor complete an action.

Hover overs are another common design element that may look different on mobile. On desktop, a hover over refers to an object or an image that changes or reveals text when the visitor hovers their mouse over it. While this works well on large devices, keep in mind that on mobile, visitors aren’t using a mouse, meaning the visitor will have to tap to see the hover over.

Therefore, if you have a box or image that reveals text on hover over, you should make sure that the messaging isn’t critical to the visitors’ steps.

When discussing animation, you and your development team can also review Google’s best practices for web animation guidelines in order to avoid any errors regarding flash or outdated technology.

Plan-out the placement of pop-ups and third-party elements

There has always been a lot of debate over whether to use pop-up forms on websites and whether to implement them on mobile devices.

One argument for avoiding pop-up forms on mobile is that it can be harder for a visitor to close the form or message. Since January 2017, Google has warned against using intrusive interstitials that block all of the content on a page from being visible to a visitor, since they are especially problematic on mobile.

You can weigh all of these elements in discussions with clients about pop-up forms and decide on the best user experience for the form design.

When taking a mobile-wise design approach, it’s helpful to consider how elements will be placed on smaller devices. For instance, a sticky button on the right side of the screen that stays as a visitor scrolls may work okay on desktop, but these types of sticky elements can make the view space even smaller on a mobile device.

While some elements like live chat and accessibility widgets may be added at the last moment, planning for these earlier in the web design process can help avoid a chaotic interface for visitors.

Live chat has become an extremely popular tool and chat widgets are often found in the bottom right or left corner of the design. Offering recommendations on the placement of these elements by including it in design mockups will help you foresee any problems with overlapping items.

Reconsider form design and placement

Filling out and submitting a form while on a mobile device or smaller tablet can be an annoying task for visitors. That’s why it’s critical to consider alternative options to forms in the site design.

When creating the mobile menu navigation, consider including a “click to call” phone number in the header, so visitors can easily reach the business.

When designing all forms on the site, it’s a best practice for both desktop and mobile to reduce the number of form fields as much as possible – and clearly indicate what is a required field.

One tip for the mobile experience of a form is to design form labels and not just utilize placeholder text for the form fields. A visitor on a mobile device can be easily interrupted by other notifications and interactions, so they may be interrupted in the form completion process and forget what the placeholder text listed. Providing clear form labels and error messages is important for ADA compliance as well.

Lastly, placement of the form on the page and how this may be adjusted with the responsive layout is critical as form placement can impact conversions.

Conclusion

Given the increased focus on mobile performance, putting some of the above ideas into practice as you design your projects will save you time and frustration as those projects are launched. Are there additional mobile UX tips that have helped your design flow? Leave a comment below!

Next: Build out your web design skillset with helpful online courses!

Mobile UX design is just one of the many things you have to stay on top of as a professional web designer. While there’s not always a lot of time available for sharpening your skills, taking an online course is a great way to make sure you’re continuing your education.

This article offers a comprehensive list of some of the best online courses for web designers (+how much they cost) so you don’t have to spend even more time searching through all the available options!