What mobile UX mistakes should marketers be looking out for?
Here are 23 of them for a start.
The information is taken from a variety of Google resources and includes both factors that Google has explicitly stated could be detrimental to search performance, and other factors for which the same could be implied (e.g. from Google’s developer guides).
Of course, many factors are used to judge page quality and ultimately if Google judges a page to have the best quality content, it may survive these UX errors.
So, on we go…
1. Slow-loading pages
For some time, speed has been acknowledged as crucial for mobile search performance, with Google providing its Mobile-Friendly Test and PageSpeed Insights tool to help developers understand where they can improve.
Of course, Google’s Accelerated Mobile Pages (AMP) project is the latest innovation designed to reduce load times even further. In May of this year, it was reported that 125m+ documents had been indexed, across 640,000+ domains.
Adoption of AMP is increasing rapidly though 2016 among publishers, and is now starting to spread to ecommerce.
Whilst trackable buttons and other featues haven’t yet been mastered within the format, eBay is making progress, with 8m browse nodes currently live.
Eventually, the pureplay retailer wants to use AMP to help improve its site search functionality, as well as interactive elements.
An AMP eBay browse page.
The benefits of AMP can be seen in the numbers.
John Shehata of Searchmetrics told Search Engine Land that amongst his clients “AMP is about 5% of total traffic (9% of total mobile traffic), 3% of total impressions, +2% in CTR and +5.6% in ranking position.”
2. Large popups
Google has made its position on mobile interstitials clear. As of January 2017, sites ‘where content is not easily accessible to a user on the transition from the mobile search results may not rank as highly.’
Popups are one such example of this content. Google defines them thus:
Showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.
In the blog post announcing its position, Google states that banners will be deemed permissible providing they ‘use a reasonable amount of screen space and are easily dismissible’ – app install banners for example.
3. Standalone interstitials
In the same blog post, Google also cites ‘standalone interstitials that the user has to dismiss before accessing the main content.’
The illustration below shows how these interstitials typically appear.
Again, there are exceptions – legal obligations (such as cookie consent) or login dialogues (for private content) often necessitate an interstitial.
4. Main content below the fold
Not an interstitial per se, but the use of a layout which relegates the main content below the fold is also a no-no.
This is often designed for the same purpose as an interstitial, to encourage signup for something ahead of the main website proposition.
5. Low ratio of main content to supplementary content
Sticking to the subject of so-called ‘main content’, we can refer to Google’s Quality Rater Guidelines for some general advice on sensible web page layout.
Google’s guidelines use the analogy of a bad student, who may fill their work with distracting pictures, in order to disguise its lack of content.
Similarly, having an appropriate ratio of main content to supplementary content to ads is important for web pages to be seen as high quality.
6. Video elements overflowing their containers
Element size dependent on viewport dimensions can be specified in CSS, with ‘max-width: 100%’ ensuring no overflow.
If video elements do overflow their containers, users won’t be able to see all of the video.
Text on web and mobile in particular should be goal-oriented, should get to the point and be written in the active voice.
In addition, imagery can often be used to increase readability.
A Searchmetrics study from 2015 reported websites that rank in the top 30 use around 25% more images in their landing pages than in 2014.
8. Long and complicated menus
Keep them short and sweet is Google’s developer advice for mobile.
Using as few options as will make navigation quick and easy.
9. No easy route back to homepage
A long-standing convention of web design is a logo in the top left that links back to the homepage.
Without this, mobile users in particular will be frustrated.
10. Site search tucked away
Yet more advice from Google’s mobile developers fundamentals.
Site search, especially in ecommerce, is always visible on desktop homepages.
On mobile, site search may be even more important, as smaller screen real-estate means navigation can involve more clicks, scrolling and page loads, which users will seek to avoid with site search.
Therefore, site search should be visible on the mobile homepage, not located within a menu.
11. Unhelpful site search
Once users have located the site search function, it should provide them with relevant search results.
Autocomplete, spelling correction and intelligent suggestions (as illustrated by Google below) are all advantageous.
12. Hidden content
Responsive design should not lead to completely hidden content.
Users should be able to find your content, even if it is deemed low priority on mobile.
13. Launching new windows
Flitting between mobile browser windows isn’t something that all mobile users are comfortable with.
Launching new windows should be avoided where possible.
14. Lack of filters
Filters are needed, not just in ecommerce, to help mobile users refine results and speed navigation.
Other UX features can improve filters, such as numbers to show how many products/articles (etc.) each filter will return.
15. Upfront registration required
Being forced to register at checkout, instead of being allowed to continue as a guest, is even more annoying on mobile than desktop.
Offering guest checkouts the chance to register at the end of their purchase may increase conversion.
17. Incorrect input types
On the subject of forms, Google has a handy guide to HTML5 input types.
Getting these wrong causes unnecessary extra clicks for users.
The email input type, with its easy-to-access @ key.
Other boons for the user when filling out forms include real-time validation, letting you know if an error occurs before submitting and committing to a page load.
17. Repeated form interactions
Auto-fill is perhaps the most blessed UX feature of all. The relief a user feels when they only have to enter certain information once, then see it pulled through to other parts of the form is palpable.
Amazon exemplifies a retailer committed to minimising repeated interaction.
18. Difficulty sharing
Copying and pasting URLs, then sending emails or composing social posts is a lengthier process on mobile compared with desktop.
Therefore, websites should make use of share and email buttons. Ecommerce, for example, will find this encourages word of mouth online.
19. Faulty redirects
If you have a mobile website using different URLs to desktop, there should be accurate redirects in place.
For example, when a user clicks a desktop link in an email on their phone, they should be redirected to the correct mobile URL.
If a redirect is faulty and serves the homepage, for example, this is a particularly frustrating experience.
20 & 21. Zooming and mis-tapping
In November 2014, Google introduced a ‘mobile friendly’ label into mobile search results, to ‘help users find pages where the text and content was readable without zooming and the tap targets were appropriately spaced’.
This label has recently been removed from mobile search results, as Google has announced that 85% of all pages in the mobile search results now meet this criteria.
However, the other 15% will be acutely aware that until they implement a mobile optimised or responsive design, search performance will suffer.
22. Unfriendly software
Some content will be unviewable on mobile. Flash is the most oft-cited software, as it is not broadly supported on mobile.
23. Typos and bad grammar
Though this is a general complaint, not specific to mobile, it is one which Google’s Quality Rater guidelines highlight.
That means poor editing could be a contributing factor to poor search performance.
That’s enough to get the list started. What other UX bugbears do you have on mobile?