22 / 10 / 2019

Do you sort your digital waste? UX can help!

By Jarl Lyng, UX Director, Forte Advice

Wherever I look, I see brands committing to reduce their carbon footprint. Yet, I rarely see brands taking a stand on their digital climate footprint. And that’s a thing too. In this blog post, I’ll share six tips on how to make your web design more sustainable with UX.

Of course, it is important to remember that it will always be better to send 100 emails than 100 letters. Or to arrange a Teams meeting rather than flying to meet in person. This way, one can always argue that websites as such are more sustainable than the alternative. But we can do better, and we SHOULD do better.

Collectively, the Internet accounts for 2% of global CO2 emissions. Roughly speaking, that is close to what the aviation industry emits.

Due to the energy used every time we send data online, That is, whenever you load a website or check your favourite social media etc. It all requires electricity, and data centres thus spend huge amounts of energy to support the increased digital consumption worldwide. Not to mention the production of electronic devices and batteries, which harms nature too.

For instance, in an article from June 26, 2019, the Danish news media Zetland writes:

“..An EU-funded research project estimates that streaming and downloads of the ‘Despacito’ hit required as much power as the five African countries Chad, Guinea-Bissau, Somalia, Sierra Leone and the Central African Republic spent in a year combined."

This context is where User Experience (UX) comes to the rescue. And you should pay special attention to ‘experience’. Because the user experience with your digital product or website helps create a greener digital environment.

If done right, it results in a better user experience and a healthier economy for your brand or service. And ultimately, a greener internet.

6 UX tips for complying with sustainable web design + A consideration about web design

Overall, we can call it the ‘efficient web’ because it is all about how much data we send and, thereby, how much energy we spend.

According to the Norman Nielsen group, you’ve got around 10-20 seconds to get your target group’s attention. Some even say less. So, imagine spending 5 or 10 seconds loading your digital product. That’s neither good for your business, your audience or the climate. The users just click on the next platform in line and get a bad experience with yours.

But don’t worry, I’ve got you covered with some great UX tips: 

1. Get your pictures up to speed

The images we use eat data for breakfast. Image files also become larger as our screens get better and better, with high resolutions almost surpassing real vision. Images can be a big part of the user experience, and we don’t want pixelated images on our websites, which is why high-resolution PNGs are mostly used.

But luckily, we don’t have to compromise on the quality. A high-resolution image contains several metadata, which aren’t necessary for the image sharpness. So, you can remove the metadata before uploading the image on your website or in your digital product.

TinyPNG or WPMU DEV are some services that can help reduce the size of your images without losing sharp quality.

A good rule of thumb is; that if an image should be 300×300px on your website, the size of the original image should be 600×600px and 72dpi. So, twice as big but not any bigger!

2. Use lazy loading when it makes sense

Lazy loading sounds silly, and you get the impression that it is a lazy code. Well, it actually is. But if you use it properly, you ensure that your scripts only load images when necessary. So, when a user lands on your website, the script only loads the images that are visible to the user but not the images further down the page. Data saved!

At the same time, the visible images are loaded faster because fewer images need to be loaded simultaneously. Ergo, your website is also getting faster.

Read more about lazy loading here.

3. Exploit web caching

If you have recurring users, caching is a really good idea. In practical terms, when a user visits your website, it tells the browser that it needs to store information such as CSS, JavaScript and images. The next time the user visits your site, this information does not need to be reloaded. Thereby, you save data, and at the same time, your website loads faster, which ensures a better user experience.

If you need more practical knowledge about web caching, Flywheel has made a great guide.

4. Do a spring cleaning

It's quite straightforward. For instance, if you have a Sitecore, WordPress or Drupal site, you probably also have a media library filled with images and videos that are not being used. Maybe you also have a lot of old posts or something that is not actively used. If so, make it a habit to delete these files, as they take up a lot of space and make your website load slowly. At the same time, I want to emphasize the benefits of reviewing your digital material: You can remove everything that isn’t relevant anymore and thereby improve the user experience too.

5. Optimize your information architecture

I strongly recommend making your website's information architecture or digital service a high priority, especially when discussing sustainable web.

A good example would be the navigation of your site or service. The more the user clicks around to find what they look for, the more data needs to be loaded. This example doesn’t just create a bad user experience, but it also uses unnecessary energy. In the worst-case scenario, the user never finds what she/he is looking for and ends up going to the competitor’s site, and then all the loading on your platform is wasted.

So, make sure to keep track of your information architecture. For the sake of nature too.

6. Choose a green web host

Actually, this point might be the best place to start, but it is not necessarily a simple task. In fact, my experience is that most people don’t know at all who’s in charge of their hosting or where it is physically located.

However, if you are ready to go all in with a completely green digital presence or service, a good benchmark is to choose a Google Cloud Platform hosting service partner. They only use renewable energy and maintain a commitment to carbon neutrality.

Read more about their policies here.

Take advantage of having a green hosting service. Spread the word. Inspire others to do the same. It might even positively spill over your users’ perception of your brand and platform.

And the one about dark websites

One last thing that can be a little bit difficult to figure out is the idea that websites designed in black do not use nearly as much energy because they require less light from your computer screen or smartphone. After Apple introduced Dark Mode, a trend emerged where everyone now has an opportunity to switch from a light design to a dark one, and mostly with good reason. But if we look at it from a sustainable web perspective, it’s (perhaps) a different matter.

If we take an LCD screen, it will have a very small effect that can be difficult to measure. If we look at CRT or AMOLED screens, however, a small effect can be measured but still on a very small scale.

So yes, it can have an effect, but you must also consider how it affects another important aspect: UX optimization. Will it ease the experience of your digital product, or can it have the opposite effect? I recommend you assess your digital product in its context because the dark mode is not for everyone.

If you want to dig deeper into the trend of dark mode and how it can affect the user experience, you can find more information here.

One last thing

Now that you have read the tips, you have hopefully noticed a recurring theme; efficient websites. That is websites that load fast and are easy to navigate. Start implementing my recommendations in your own digital product. It will not only become more sustainable, but you will probably also reduce your server costs and provide a better user experience—a classic win/win scenario.

If you dare, you can test your own website on the Website Carbon Calculator and discover its digital carbon footprint. And if you are in doubt about your site's load performance, I recommend Pingdom.

I should also mention that the above points are just a selection of things that can be done. Using CDN, optimized SEO, progressive web apps etc. are also some of the things you can add to the list. However, my tips above are the ones I find the most tangible and important when you start your journey towards becoming part of the green digital future.