It’s a little-known fact that the internet has a carbon footprint greater than the aviation industry. Although each individual visit to a website is a drop in the ocean (or atmosphere) in terms of CO2 emissions, they add up fast with billions of people browsing the web and using digital services each day.
At my digital agency, Wholegrain Digital, we were early adopters of attention analysis testing in web design and have been using it for many years to improve user experience, conversion rates, and accessibility.
In recent years we have also learned about the environmental aspects of web design and become passionate about sustainable web design. In doing so, we have found that attention analysis testing can also help guide our team to create more eco-friendly solutions too.
In this article, I’ll introduce the concept of sustainable web design and then look at some ways that Attention Insight could help web teams deliver more sustainable online experiences.
What is sustainable web design?
Sustainable web design is an approach to designing and building web services that aims to reduce energy consumption and carbon emissions.
This can be achieved through both the technical and creative process, reducing the need for computation and data storage in data centers, reducing the volume and distance of data that needs to be sent through the internet, and reducing the demand for computation and screen energy on the end users device. Furthermore, it can be facilitated by a commitment to powering web services where possible with renewable energy.
Although technical optimisation is often seen as the primary way to improve energy efficiency of web services, we have found through our work at Wholegrain that the creative design process offers additional opportunities to improve efficiency that also improve user experience. It is in this creative aspect of sustainable web design that tools such as Attention Insight can help.
Let’s take a look at a few ways in which predictive eye tracking can help us create designs that are better for both people and planet.
Streamlining user journeys
Websites use energy every time a user loads a new page because data has to be sent from the data center, through the telecoms networks, to the end user. This consumes electricity at every stage. Furthermore, the longer a visitor spends on a page, the more time their computer or phone will be using energy to process and display that page.
Of course, we want people to load our websites and sometimes we want them to linger for a little while. But there are also times when our visitors are clicking into pages unnecessarily and wasting time looking for information that they’re struggling to find. It is in these cases that we have an opportunity for us to make streamline user journeys and save energy in the process.
Using attention analysis software in the design process, we can optimize the user experience of a website before it even goes live, helping us to ensure that the key messages, navigation paths and calls to action are crystal clear. In doing so we can improve user journeys to help people find what they are looking for in the least number of clicks and without wasting time feeling lost.
Optimizing bounce rate
Another concept that relates closely to streamlined user journeys is bounce rate. Bounce rate is a metric of how many people visit one of your web pages and then leave without visiting any other pages.
A high bounce rate is generally considered bad, as it can imply that people didn’t like what they saw and clicked the back button in their browser or closed the tab. However, bounce rate can be both good or bad, and attention analysis software can help us optimize it to reduce negative bounces and increase positive bounces.
In an ideal world, a visitor would find exactly what they’re looking for as soon as they land on your website, meaning that they would not need to click through to other pages (unless you wanted them to). This simple on-page user journey would be good for the environment, good for the visitor, and drive good conversion rates. Such a page would have a high bounce rate, but they would mostly be good bounces.
Attention analysis can help us optimize landing pages so that as soon as a visitor arrives, their attention is directed to the key messages and information they are looking for, confirming that they have arrived in the right place and need to look no further.
Likewise, attention analysis can help us avoid a negative bounce rate, whereby users land on a page and then hit the back button because they did not see what they were seeking. These types of bounces can happen even when the relevant information is on the page and staring the visitor in the face.
AI-based attention analysis can highlight when a user interface is too cluttered or where attention is being pulled away from the things that really matter. By highlighting these user experience problems in the design process, we can proactively resolve them before the page goes live.
This prevents visitors from being frustrated and bouncing back to Google unnecessarily. In doing so, it saves them time and reduces carbon emissions.
Creating lightweight designs
The size of an average web page has quadrupled over the past decade, from around 500kb in 2010 to roughly 2MB. Larger web pages consume more energy but also load slower and unfairly penalize visitors on low incomes who have slower devices and for whom data is expensive. This creates many good reasons to make our web designs more lightweight and embrace the spirit of “less is more.”
Attention analysis software is a powerful tool in creating more lightweight web designs, particularly using a metric like the clarity score in Attention Insight. It can guide us to think more carefully about which elements actually need to be on a page and as I say in my book, Sustainable Web Design, “if in doubt, leave it out.”
There can be a tendency in the web design process to add more and more items into designs for fear of missing out on opportunities or fear of not pleasing every possible stakeholder. But attention analysis shows us clearly that humans can only process a limited amount of information at a time. If we try to put too much on a page, visitors will miss out on more because they won’t see the forest for the trees.
Therefore, we should question the value of every image, video, icon, and piece of content to create the simplest, most lightweight designs. In doing so, we will create simpler designs that are good for both humans and the environment.
Optimizing images
The clarity score can not just help us create more lightweight designs in general. It can also play a role in art direction and help us optimize our images within a design.
Simple images with fewer details, such as photos with a shallow depth of field or images with simple shapes, can have significantly smaller file sizes than highly detailed photographs. This is because every detail has to be stored in each image file, making the files larger, so the simpler the images, the smaller the files. This helps reduce the carbon emissions of the website and improve load times.
The clarity score might not be able to predict the actual file size of an image. Still, it gives us a visual indication of the level of detail in the images within our designs and the amount of cognitive load that this will put on the visitor.
So when we see images negatively impacting the clarity score, it’s a sign that they need to either be removed or simplified. In doing so, we will make them less distracting to the user and reduce their impact on the environment.
Attention analysis for people and planet
AI-based tools like Attention Insight highlight the fact that the needs of humans accessing the web are very much aligned with the needs of the natural environment.
Although attention analysis tools are not specifically designed to help us improve environmental performance, they can do so indirectly by helping us to streamline user journeys, optimize bounce rates, and make our designs more lightweight. All of which can help us reduce energy and carbon emissions while also benefiting user experience.
