The mobile web is broken - but it doesn’t have to be
Roughly a 2 minute read by Simon
The state of the mobile web, from a user experience point of view, is largely broken; page weights are high, adverts fill our screens left, right and centre, and information consumption is generally more cumbersome than it needs to be.
What are we doing wrong?
Page weight
Over the years, content has become more and more media based - be that images, video or audio. The desire to push such forms of content comes at a cost; the more information and data that’s on a page, the more the user in turn then has to download to view a page as a whole. While download speeds have improved across the country, it’s important to remember that not everyone is so fortunate to be on a 4G mobile network, or have super-fast fibre broadband. It’s also important to note, even those users who are on 4G networks will likely have a data usage limit - and they really won’t appreciate your website using 5% of their monthly allowance - no matter how fancy your website is. The average page weight for a website is now creeping above 3MB.
6 of the top 10 news-based websites (ranked according to Alexa) have pages above 3MB. These include, but are not limited to:
- Reddit - 3.4 MB
- The New York Times - 6.0 MB
- The Guardian - 4.9 MB
- Yahoo News - 3.1 MB
- Washington Post - 3.0 MB
- Forbes - 3.5 MB
*Note: The following sites were removed from the list for either being unavailable, or their focus is primarily high quality assets: India Times, Shutterstock.
How can we fix it?
Simplify
As a starter for ten, and it may sound overly simplified, but you just need to remove anything that’s not really adding to the user experience. Got some big flashy animations that require really huge sophisticated libraries? Get rid of or simplify them. In terms of information, instead of providing an abundance of content, streamline what’s important.
Lazy loading
Need to have a lot of media (image and video) on your page? Lazy loading can be a great ally here. Lazy loading, if you’re unfamiliar with the concept, involves delaying the loading of content until the user scrolls down the page and actually needs to view that content. On an image-heavy article, this can substantially reduce initial page weight and loading times. The majority of the examples listed above load all of the content on their respective homepages, regardless of whether the user scrolls to it or not. If a user clicks on the first featured article, without scrolling, so much precious data has been wasted. Native lazy-loading will soon be coming to Chrome (from version 75) - so implementing this useful feature will be even easier for developers.
Slow loading content and user flow
In direct relation to the points above, slow loading content can be incredibly disruptive to the user. At the end of the day, the user more than likely wants to go to a source for information, get that information, and leave. As such, when a user lands on your website, they want to start consuming information as soon as possible. What’s currently happening on a lot of websites however does tend to hinder the user achieving this in a hassle-free way. As the user begins to scroll down the page, having read the first paragraph or so, suddenly a slow-loading image or advert further up the page has now loaded. This image or advert has now pushed the content the user was reading further down the page. This can lead to frustration as the user now needs to re-find where they were in the article.
Some websites guilty of this:
How can we fix it?
With the advent of the responsive web, we moved away from defining exact widths and heights of images. This quickly became a problem; without knowing the space required for an image, a slow to load images can start shifting content around as it loads in. The concept of a placeholder class is that it’s an element that reserves a ratio of space within the page that the media will then fill - this means that even if the image takes 10 years to load, the content below it will never shift.
Disruptive user prompts and cookie banners
Reading an article and thoroughly enjoying it? How about when you get halfway through the website throws up an obnoxious box asking you to sign up to something such as a newsletter or an advert. Once a user has made their decision to read an article, there are absolutely zero good reasons to disrupt this intention - it’s extremely disruptive and is likely to stop users from visiting your site in future. Users may even begin to find ways to prevent such behaviours by installing advert and popup-blockers.
Another disruptive user prompt is the sudden influx of cookie consent banners. The web agency is likely to have tried their hardest to deliver a slick user experience and tried to ensure that their first experience is a good one. We’re now finding more and more websites where the first thing a user sees is a hideous popup box that asks the user to consent to cookies.
How can we fix it?
This one is very straight forward. It’s as simple as waiting until someone reaches the end of the article before you ask them to perform any kind of action. The end of any article is the perfect time to guide the user to other interesting content, or anything else you have to offer.
Cookie banners can be subtle - they don’t need to take up the full screen.
In summary…
We hope these quick and simple tips will help you to build an improved user journey on your next project. Your users will definitely be thankful, even if they don’t realise it.