Sustainable UX: Prioritizing sustainability vs. engagement

As a UX designer, you might not think about sustainability as intertwined in your products or daily work. I mean, they’re digital right? It’s not like you’re designing shoes that need to be manufactured, shipped, and will eventually be discarded in landfills. You might even feel like you chose a sustainable field because your job helps digitize and streamline tasks.

That said, after reading “Sustainable Web Design” by Tom Greenwood, I realized how UX design isn’t a sustainable field on its own. Non-renewable resources, like water and fossil fuels, are still used to power devices, WiFi routers, and the internet. It takes more electricity than you think to visit a new web page or for Google to store all your emails and documents:

But here’s where things get tricky – UX design is dependent on people using the internet and your products (and using it frequently). As a designer you prove UX enhancements with engagement rates such as how many users visited the website in a month, how long each user’s session lasted, or how many users converted. You want these metrics to be high because if they aren’t, you’re out of a job.

So, should you prioritize sustainability over engagement for your products? Of course you’d like to say, “Sustainability all the way,” but the answer to this question isn’t as black-and-white.

Unfortunately, UX design favors engagement for many reasons, including stakeholder pressure, but it doesn’t have to be this way. This article examines the environmental costs of UX design, how to balance sustainability and engagement, then reviews methods to execute sustainable UX.

Environmental costs of UX design

Most people spend a large portion of their days using a digital device. Whether using software on laptops or online shopping on phones, people rarely stop to think about their carbon footprint as web pages load.

The pages load quickly so it can’t use too much electricity, right? The performance speed of the internet and applications is deceptive – it hides its true environmental impact.

UX design and page weight

Although devices and connections have become more powerful to quickly load web pages, it’s not a true indicator of efficiency. The median page weight, which includes all the assets needed to create a web page (like HTML and images), increases year-by-year. According to the Web Almanac, in 2014, the median page weight of a desktop was 1080 KB; in 2022, it increased to 2171 KB:

So what’s causing an annual jump in page weight? The top five contributors based on their response size on desktop include (from Web Almanac’s HTTP Archive in 2022):

• Videos (208 KB)
• Audio (60 KB)
• Fonts (20 KB)
• Images (7 KB)
• Javascript (4 KB)

It seems content and aesthetics have caused the median page weight to increase because of visuals like images and fonts. This jump in page weight can be correlated to the increase in UX designer jobs in the 2010s, where designers focused on improving both the experience and visual-appeal.

Although UX designers don’t control everything in a web page’s design, you do have a say in most of these elements. For instance, since videos have the highest response size, the inclusion of any video in the web page should be questioned. Or if the design uses many fonts, reduce the fonts to what the design must have to communicate its visual hierarchy.

Key UX trends that impact energy consumption

So you know what assets on a web page cause the page weight to increase, but what specific UX trends impact energy consumption the most? Here are three examples below:

• Infinite scroll and auto-play — Social media apps like Instagram and TikTok keep their users engaged from the moment they open the app by auto-playing videos and offering an endless amount of content. Though this drives engagement, it has users consuming more and more content, as well as energy. “Doom-scrolling” isn’t sustainable
• AI-powered features — If a digital product doesn’t offer any AI-features, it feels obsolete. But training AI-models to personalize content or automate tasks uses a notable amount of computing power. According to the World Economic Forum, generative AI uses 33 times more energy than task-specific software to complete a task. Given that AI usage is growing on a daily basis, the energy needed to maintain AI is also surging
• Dark UX patterns — Tactics like making it difficult for users to cancel subscriptions or creating an addiction loop heavily add to energy consumption. When users must unnecessarily navigate to different web pages or feel the urge to engage with an app (e.g., to keep up a streak), they’re using energy to view needless content or to fulfill an irrelevant goal

Balancing sustainability and engagement

UX design’s focus on enhancing the product’s experience as well as its visual appeal negatively impacts the environment. You might feel at a crossroads — trying to decide to increase user engagement with more clicks and longer sessions or to create eco-friendly designs.

Although it seems like engagement and sustainability conflict with each other, they aren’t mutually exclusive. By reframing your designer mindset to account for the user experience and sustainability, you can balance both needs to design digital products that are compelling and energy-efficient. You can achieve this by redefining engagement, as well as designing only necessary user interactions.

---

Over 200k developers and product managers use LogRocket to create better digital experiences

Learn more →

---

Redefine engagement

User engagement doesn’t have to mean quantity — as in more clicks, interactions, or time using the product. It can also mean quality by doing more with less. Focusing on quality creates efficiency, helping users complete tasks quickly and smoothly, while reducing energy usage.

Instead of only concentrating on quantity-driven engagement metrics like session duration or page-views, here are examples of quality-driven metrics to use when measuring UX designs:

• Task success rate — This measures the percentage of how many users successfully completed a key task in the product, such as transferring funds between accounts in a banking app
• Abandonment rate — This identifies where users leave a page or process uncompleted–indicating issues with the user experience. A high abandonment rate results in less customers, but also causes web pages to be needlessly loaded
• Customer effort score (CES) — CES measures how easy or difficult it is for users to complete a task. Once a user completes the task in question, they’re presented a one-question survey asking, “How easy was it for you to complete your task today?” using a scale from one to seven
• Net promoter score (NPS) — NPS measures loyalty to a product by asking users how likely they are to recommend the product to a friend or family member; users can be rated as detractors, passives, or promoters

Design necessary user interactions

Not only can you prioritize quality over quantity-driven metrics to measure engagement, you can ensure all interactions serve a purpose in the user’s journey. All elements on the page should be used to guide the user from one step to the next; not confuse or distract users. For example, Google’s search page is designed with only the essentials–the logo and the search input:

Google’s search page only includes the necessary elements for users to complete a task

Not only do intentional interactions reduce the interface’s cognitive load, but improve usability and end-value. Implement these strategies to design for the essentials:

• Use clear navigation — If users can’t easily find what they’re looking for, they may needlessly navigate to multiple pages within the site. Each time the user loads a new page, more energy is used. With logical and plain names for navigation, users can understand where to go to achieve their goal quicker
• Eliminate distractors — As a designer, you want to make the user’s journey easy, while also remaining visually-appealing. But in this process, you may add assets like decorative images or too many fonts. While this increases a design’s attraction, it negatively impacts usability and page weight. Unless the asset is necessary, it should be removed
• Use lightweight assets — Assets ruled as essential to the design should be lightweight, while still maintaining quality. For example, the WebP image format is web optimized to compress image sizes, but keeps the quality. There are also best practices for selecting sustainable fonts, such as using system or variable fonts

Other methods for sustainable UX

Now that you know how to better balance your engagement metrics with a sustainability mindset, review these additional methods to implement sustainable UX design in your projects.

Minimize UI designs

• Limit animations — Animations and micro-animations can add visual-appeal and reinforce the brand’s tone when done well, but should be used with purpose to reduce energy consumption and user distraction
• Implement lazy loading — Only load the essential content when the user lands on a web page versus pre-loading everything. For example, if a web page includes many images, loading them simultaneously strains both performance and electricity
• Future-proof designs — Avoid UX trends that require redesigns and updates to the product; instead, prioritize minimalism and standard, user-centric interactions to reduce development and user costs
• Reduce HTTP requests — Though this is less in control of designers, you can advocate for your products to use caching (temporarily stores copies of web content), combine multiple CSS and javascript files into one, and avoid heavy plug-ins

Implement mindful engagement

• Add pauses in the user’s session — Instead of instantaneously allowing the user to continue viewing more and more content, add a delay or confirmation to ensure they want to view more. For example, think of Netflix’s prompt, “Are you still watching?”
• Provide ethical notifications — Push notifications are typically used to draw users back into a mobile app, but can be more manipulative than helpful to users. For example, Duolingo will send notifications like, “Your Spanish lesson won’t take itself.” Instead, notifications should show relevant content and only be pushed to users who participate
• Use environmental-impact metrics — Show users the impact of their digital actions in the product (this is especially useful if users opt-in to “low data” modes or lower resolution content)

Provide “green” user preferences

• Use dark mode by default — If your product supports both light and dark modes, provide the dark mode option open by default. Dark mode reduces eye strain for users, but also uses less energy and device battery life due to the darker color palette
• Offer “low-data” modes — Create simplified interfaces as an alternative option for users who want to opt-in for low-bandwidth web pages–boosting loading speeds and reducing required energy
• Encourage user behaviors — Prompt users to make sustainable choices, like asking users to delete old files or opting in for lower-resolution images. For example, WhatsApp’s “Manage storage” feature helps users find and delete large files or content to reduce the user’s storage as well as the server load

Include metrics to measure sustainability

• Page weight (KB or MB) — You can use tools like DebugBear to measure your website’s pages. According to WP Rocket, the ideal page weight is under 1 to 1.5 MB
• Time to first byte (TTFB) — TTFB measures how long it takes for the browser to receive the first byte of a web page from the server after making a request. A low TTFB (ideally under 800 milliseconds) means the web page loads quickly–decreasing energy consumption and improving the user’s experience. Tools like Google’s PageSpeed Insights can help you track this metric
• Energy consumption (kWh) — This estimates the electricity used when loading and running a web page. This metric is a beneficial metric to monitor regularly to see how much energy your product needs to function. Use tools like Ecograder to get a free sustainability report

Conclusion

Although powerful devices and WiFi connections make it seem the internet’s efficiency is improving, the average web page’s weight is increasing annually. This is caused by websites using heavy assets like videos, images, and fonts. UX designers choose these assets to enhance the experience and visually-appeal, but they use more electricity to transfer and render the data. Not only that, UX trends like infinite scroll and AI-powered features demand more energy than traditional web experiences.

It feels like engagement and sustainability can’t overlap when it comes to UX design, but there are ways to balance both aspects. You can do this by redefining what engagement means in a UX project, such as measuring quality-driven (task-completion) over quantity-driven metrics (session duration). Also, only designing the essential interactions in a user journey, while removing the distractions, improves both usability and energy usage.

Ignoring sustainability harms the planet and your users. Designing for sustainability decreases the amount of energy required to power your products, and optimizes the user’s experience with faster loading speeds and reduced cognitive load. You can help normalize sustainable UX practices, like minimizing UI designs, to end the annual increase in page weight, as well as reduce your product’s carbon footprint.

LogRocket: Analytics that give you UX insights without the need for interviews

LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.