Sustainable digital design – guidelines for sustainable UX and UI

Instead of waiting until the technical implementation has already begun, sustainable digital solutions take steps to reduce the environmental impact starting in the initial concept and design phase. This is done in response to the life cycle assessment of digital solutions that reveals that client devices (laptops, smartphones, etc.) are responsible for a significant portion of the overall environmental impact of these solutions (roughly 50 per cent). Sustainable digital design has a special role to play in helping reduce this impact particularly on the client side. Likewise, many mistakes made in the design phase are difficult to undo when the solution is being implemented. I will show you how sustainable digital design works in this blog post.

What makes digital design sustainable?

Sustainable design involves two primary strategies. On the one hand, decisions are made in such a way as to keep system’s resource use and environmental impact to a minimum. On the other hand, the design offers the most potential in terms of making it easier for users to make sustainable decisions and thus support them in adopting a sustainable lifestyle. According to the job description of a digital design professional, digital design entails the use of both strategies. In addition to user experience design (that is, the definition of information architectures, etc.), conventional user interface design (i.e., the typography, colours, media) also plays a key role in determining what impact a system will have on the environment.

Sustainable design is all about keeping it simple. Systems should focus on the basics in order to consume only the resources that are necessary for and consistent with the use case. The end result is more efficient utilisation patterns that conserve resources. The amount of data transferred is also reduced, which means that the network infrastructure consumes less power. Furthermore, fewer physical storage media are needed to store the data, while the computing power required to process the data can also be reduced. In addition, sustainable design offers users options and recommendations on how to use systems in a more sustainable way. To operationalise these requirements, we at adesso have developed guidelines on what we would like to focus on when we put them into practice in projects. The following design guidelines are at the heart of the strategy.

Sustainable defaults

Sustainable design uses the most sustainable options available for selection as defaults. The configurations that users can choose from have a major influence on the environmental impact of systems. In the browser, this could be the homepage, which either displays the latest news – and therefore consumes a lot of resources every time a new tab is opened – or a streamlined page containing only the essential content. In the case of a video stream, this could be the resolution, which is often much higher than necessary or appropriate for the application. Conversely, with a web application, notifications can be deactivated by default and dark mode enabled. It is vitally important that users continue to have the option of customising the system to meet their individual needs. However, by offering sustainable options by default, users are less overwhelmed – especially during onboarding – and can focus their full attention on the problem to be solved with the system.

Optimise flow for sustainability

Sustainable design optimises user interaction paths. Having an efficient usage flow reduces the need for server queries and client-side calculations, which in turn decreases the amount of data transferred and energy consumed. The fewer pages a user needs to visit or clicks they have to make to search for information or make an entry, the lower the environmental impact of this interaction will be. A simple and intuitive information architecture also increases usability while also improving the overall user experience, meaning that the user is less likely to become frustrated.

Demand shaping based on the availability of solar and wind power

Sustainable design adapts the use of resources to the availability of renewables. The use of fossil fuels has to be ramped up to meet demand when the whole country consumes electricity in the middle of the day, when the sky is overcast or when only a light breeze is blowing. If you have the choice, you should not increase your electricity consumption during these times. Mobile devices have offered a power-saving or eco mode for years now. When this mode is enabled, all the device does is reduce the functions available to the bare minimum until there is power available to charge or operate the device. Up to now, these measures have primarily been focused on extending the battery life. However, it is also possible to adjust the settings for functions, images, videos or colours in the same way if no renewable energy is available at the moment. Applications can also reduce their resource requirements in the short term, especially when it comes to managing non-critical content, resources and functions. This pattern in practical application can be found in Branch Magazine, for example.

User enablement

Sustainable design helps users adopt sustainable practices in their lives. The use of psychological techniques such as priming, framing and nudging makes it easier for users to make decisions with an eye towards the environment. Let us explore each of them one by one. Priming means to expose to stimuli and ask users about their sustainability preferences, for example. Conversely, framing involves systems that display their own use of resources transparently and offer sustainable filter options. Finally, nudging entails praising users for making sustainable decisions – such as downloading a song they listen to frequently on Spotify – or rewarding them using gamification mechanisms. These techniques aim to make it easier for users to opt for the sustainable option.

Reduce notifications to a minimum

Sustainable design only sends notifications where absolutely necessary. This involves reducing redundant or unnecessary notifications, pop-ups, newsletters and transactional e-mails to a minimum. The pull principle, defined as the user making a consciously decision to open a notification only as needed, should take centre stage. This allows them to decide for themselves when and which notifications they want to receive, and which are not worth receiving due to the impact they have on the environment. Nobody likes it when unsolicited e-mails or messages appear in their inbox or on their home screen. By reducing the number of notifications that are sent, we not only conserve bandwidth, storage space and computing power, we also reduce the cognitive load on the user. Demand shaping can also be used when it comes to notifications, especially if they are more for informational purposes and they are not time-critical.

Use media sparingly

Sustainable design utilises data formats and versions of media content that use less resources. Every bit that is not transferred saves energy on several levels, be that in the network infrastructure, on physical storage devices and for data processing (when carrying out an analysis, for example). The savings quickly add up, especially in the case of images and videos shown in high resolution with three colour channels. To save energy, greyscale images, blur at the edges or pictograms can reduce the amount of data that is transferred without any loss of quality. Media should also be stored in modern formats in order to minimise the data load. It is better to use efficient file formats such as MP4 instead of GIF, WebP instead of JPG and audio tracks instead of videos.

Opt for static content

Sustainable designs put the focus on static content. This requires less computing power to render it, which reduces the load on server resources and drives down energy consumption on the client side. Instead of moving, rotating and other dynamic content that is animated using JavaScript, sustainable design focuses on keeping it simple. This also fosters transparency and improves accessibility, in addition to reducing the environmental impact.

Choose fonts and colours systematically

Sustainable design focuses on the use of existing fonts and colour saturation, since special fonts such as Google Fonts are frequently loaded from external servers, which consumes resources. The effect achieved using saturated colours is similar to the effect achieved using dark mode. The darker a pixel appears on a screen, the less energy is needed to increase the brightness of this pixel.

Guidelines for environmentally sustainable design at adesso

The recommendations for sustainable digital design encompass the following: defaults, flow, demand shaping, enablement, notifications, media, dynamic content, fonts and colours. We have a responsibility to offer sustainable digital solutions because we provide and operate digital solutions. This starts with the design and extends all the way to support for users in making sustainable decisions. As with our guidelines on sustainable software architecture, the sustainable design guidelines were developed in collaboration with colleagues who serve in the relevant roles in projects. Thanks to everyone who contributed to the project.

Conflicting goals

‘But will the user experience suffer as a result?’ or ‘Will it look good at all?’ are common concerns expressed when it comes to sustainable digital design. We at adesso have put this to the test. We tested the same application at different levels of maturity in terms of digital sustainability with a group of users in various experimental setups. The results are in. ‘We can design websites that reduce the load volume by 75 per cent without any drop in user acceptance.’

There will always be people who have doubts and concerns, who see the main problem in one or the other measure described here, for whom the most important thing is what time the newsletter goes out. Websites are optimised to keep visitors on the site, not to solve problems. Along with that, the brand identity is sacrosanct, meaning that deviations will not be tolerated. There will always be arguments for sustainable design and arguments against it, insisting that the right strategy is to stay the course. The art of sustainable design is in taking these concerns seriously, while also offering alternatives that are just as good. If necessary, this could also include scrutinising previous incentive models and KPIs. If there is reliable data to underpin the claims regarding sustainable alternatives (as in the example above), this will help dispel any doubts and concerns about whether sustainability is compatible with the goals of a commercial enterprise.

Would you like to find out more about exciting topics from the world of adesso? Then take a look at our previous blog posts.

Also interesting

• Our blog posts for tpoics around sustainability