Sustainable web design: how UX impacts sustainable product design

The environmental impact of software and web technologies is set to grow exponentially. That’s why it’s essential to change the way we think about and implement design. Here we look at concrete approaches and simple user experience (UX) choices that can open new perspectives for sustainable design that is both user-friendly and sustainable.

What is sustainable web design?

Sustainable web design is an approach to designing digital products that prioritises the needs of people and planet. Digital products, including websites and online services, have the potential to positively impact society and the planet, which in turn can unlock business opportunities. But only if these technologies are implemented and used in a human-centred, principled, and responsible way.

Sustainable web design advocates for this transparency, openness, and efficiency – principles that are codified in the likes of the World Wide Web Consortium's (W3C) Web Sustainability Guidelines.

So, what are some of the ‘easy wins’ we can realise through website UX to unlock more sustainable digital products?

How colours and fonts impact sustainable web design

Let's start with something very concrete and ask ourselves: How can we optimise our designs sustainably through the choice of colours, fonts, and media? While it's no surprise that using rich media like videos quickly consumes large amounts of data and energy. The relationship between colours and fonts and sustainable web design is less obvious, but both can have a significant impact on energy consumption.

Based on the wavelengths of colours, the rule of thumb is: black is more energy-efficient than red, which is more efficient than green and blue. Meanwhile, white consumes the most energy. Think of a rainbow; the further out the colour, the more energy-efficient it is.

But the amount of energy we can actually save through the choice of colours in our web designs also depends on screen technology. LCD screens generally have a light source that illuminates all pixels, making the choice of colour less significant compared to OLED screens, where individual LEDs operate autonomously. These screens particularly benefit from darker colours, as LEDs in black areas are turned off, so don’t consume any energy.

So is it worth paying attention to colours? According to Google, the colour blue uses 25% less energy than red and green. A dark mode, depending on the app, can save between 21% and 43% energy. So yes, even small changes, like using off-white instead of pure white, can make a difference when it comes to sustainable web design.

The right choice of font can also improve the sustainability of a website or digital solution. Here, it's advisable to use fonts already installed on all computers, such as Arial, Times New Roman, Helvetica, or Verdana, as they require less loading time and therefore less energy.

So, to return to videos and rich media, the proper use of media also has significant potential to save energy. The simple yet effective rule of 'less is more' should always be critically evaluated by designers. It’s important to determine whether the use of media content is actually needed in the first place. And, if so, to scrutinise how much is needed, and whether autoplay is really required for videos.

Beyond this, consider whether you can adjust the format and compress videos and images. Compression is generally effective and can reduce energy consumption significantly while maintaining quality, according to Ecograder.

Improve sustainable web design with the right data solutions

Our consumption of digital content and services generates tonnes of data each year. These vast data volumes require large amounts of computing power and energy, contributing to carbon emissions. We need to counter this with sustainable and energy-efficient solutions.

Reducing media, compressing files, and adopting a logical navigation architecture can reduce data consumption significantly. Here are some other ways with the potential to reduce the environmental impact of data and improve sustainability:

• Strategic use of analytics tools. Tools like Google Analytics are often used to collect large, non-targeted data volumes – simply because it's possible. This consumes more resources than necessary. When collecting data, define exactly what data is needed, and for what purpose, to avoid unnecessary energy consumption and keep data volumes manageable.
• File downloads. To avoid unnecessary downloads, companies can make information, such as opening hours or organisational charts, directly available through their website or app, rather than offering them in PDF or Word formats. This saves data traffic and energy and facilitates access for users.
• Autoplay and endless scrolling. While features like video autoplay and infinite scrolling can increase user engagement and advertising revenue, they also come with associated mental health issues (such as addiction risk) and lead to high data consumption. Designers and companies should implement such features with care and consider the possible unintended negative effects on users and environment alike. ·
• Ecograder. Ecograder is a very useful tool and rates websites based on their CO2 emissions and data consumption, making the issue of data consumption more tangible. This kind of analysis is helpful for understanding where websites can be optimised for a more sustainable user experience, helping companies reduce the environmental impact of their digital offerings.

Sustainable nudging: a nudge in the right direction

Our decisions on the use of data, images, fonts, and colours play a significant role concerning sustainable user experience. In addition, digital solutions can be realised in a way that helps users adopt more sustainable and environmentally conscious behaviours – so-called sustainable nudging.

An effective method for this is to ensure that the default settings happen to be the most sustainable options. For ecommerce websites, for example, this might mean setting collection points as the standard delivery option or defaulting to the most eco-friendly shipping method. Other easy fixes include set a ‘dark mode’ theme as standard and deactivating autoplay and endless scrolling.

What’s more, it’s important to present complex information simply and understandably. A great example of this is the investment app Inyova which visualises the CO2, water, waste, and deforestation savings a user is contributing to through their sustainable investments. Enabling users to clearly see the positive impact of their decisions can be highly motivating. Meanwhile, the option to filter and sort products by their ecological footprint helps to facilitate informed and conscious decision making.

Sustainable design: perfectionism is the enemy of good

Sustainable UX is a comprehensive, complex, and still relatively new topic within the larger theme of sustainability. Guidelines such as W3C’s Web Sustainability Guidelines can be a little overwhelming at a first glance, but they also offer several useful starting points for sustainable design. Crucially, they illustrate the impact and effort of our goals and emphasise that every small step forward is a valuable one. And that each pixel, colour, and element can contribute to a more sustainable world.

To learn more about this topic, do check out this LinkedIn article: ‘Life-centred design, not just human-centred design’. As a Gartner-recognised vendor for sustainable business, we’re helping diverse organisations to accelerate their sustainability transformation. At the same time, we’re committed to improving the sustainability of our own operations – and sharing our learnings along the way.

Talk to one of our sustainability experts today to explore how sustainability could advance your organisation.