Think for a moment what the term ‘user experience’ means to you. Most folks who work on digital products, specifically web-based applications or sites, are familiar with the term user experience or UX. For many, the first thing that comes to mind when thinking of UX considerations are user interface (UI) elements, yet others will think about research that involves surveys, interviews, and observational studies. While it is true that all of these ideas definitely qualify as being important to UX, let’s bring attention to a different UX focal point – performance. Specifically, performance as it relates to sustainability and a digital carbon footprint – a UX footprint.
Not one of the traditional UX thought patterns
UX performance for a digital product often considers parameters such as load times, latency, device type (mobile vs. desktop), and page weight. Traditionally, performance considerations solely focus on making things fast for the end-user, which is great – the web should be performant and load quickly for everyone. However, speed is not the only thing that performance impacts. More performant digital products may also have a smaller overall carbon footprint.
There are several ethical reasons for making proper UX choices during the design and development process. Arguably, one of the greatest ethical choices is to consider not only the user of the product, but to also consider the environmental and global impact of the product that you’re building.
What is the value of having a small UX footprint?
If you are building a product with sustainable choices in mind, the result will be that you deliver a quick and efficient user experience for your customers or clients. The benefit of knowing that you have made ethical choices to minimize your digital product’s carbon footprint and reduce climate change should be reason enough. But, if you want more, you can showcase your success in this area to make sure your customer base knows the effort you have put into making these decisions. One approach is to run an assessment of your web app or site on Website Carbon Calculator, where you can earn a badge, which can then be used on your site. This proves to your audience that not only do you care, but you have taken action and can demonstrate how you compare to the rest of the industry.
You may achieve improved Web Core Vital scores, something which is important to Google with considerations for search engine optimization (SEO) and rankings. As many of us already know, Web Core Vitals is very zeitgeist to the web industry at the moment.
Lastly, you might add value by actually saving your users money; this is especially true for mobile users. While there are many unlimited data plans offered by mobile service providers, it is always important to remember that not all of your users will have the luxury of having such a plan. There are still a great number of people who pay for mobile data by the amount they use. Reducing the amount of data required to use or interact with your product can make a difference. Imagine if the use of your product caused a user to exceed their allotted monthly usage, resulting in an unplanned and more expensive bill for that period. Don’t risk losing users in this demographic because your product consistently causes them to exceed their data plan.
Astute observers may argue that some of these arguments become a null point after the first time a user accesses your product – as their browser will cache fonts, images, CSS, JavaScript, etc. While this might be true, it is dependent on your caching policies, which are under your control, but also subject to end-user preferences for privacy and caching, which are beyond your control. Regardless, reducing the overall weight for all visitors, especially on that first use or visit, provides value for all.
How do I determine my UX footprint?
There is no single formula for calculating the sustainable impact of your UX, design, or development choices. Rather, you will need to research how your product is most efficient and what areas require improvement. If you are considering evaluating one of your existing products, you can run a series of audits to help uncover these items. There are several free tools and resources available to get you started. Consider using tools like Google Lighthouse to audit your product’s performance, and it will also provide suggestions and tips on how to improve it. A quick online search should yield many other options for running audits on your product, ranging from free to paid – do your due diligence to see which product best fits your needs.
How can I offset my existing UX footprint?
Well then, you have read this far, so what actions can help offset carbon with your UX choices?
- During the early product development stages, establish a performance budget and strive to stick to it as your team defines the technical requirements.
- Be sure to consider the weight and impact of using frameworks and libraries, and how you implement them.
- Aim for maximum effort during build time rather than runtime – yes, there are costs associated with the build on your end, but those are probably more efficient and sustainable than including a script tag in your document making a request at runtime, even if it is served via a content delivery network (CDN).
- Pay special attention to things like graphics and images. How many images are used? Are they truly necessary? Can you use SVG instead? Try to use AVIF or WebP if possible, but be aware that these file formats may not always be backward compatible with legacy browsers.
- Do you absolutely need to use a custom font library? System fonts can cover many use cases today, but understandably, many products have brand and design guidelines that call for custom fonts to set them apart. When selecting a custom font, look for variable fonts if possible; this can reduce the number of requests for several versions of a font (normal, bold, italics, etc.). You can no longer rely on font libraries being cached, even those that historically were promoted as being efficient due to distribution via a CDN. For instance, changes in Google’s privacy policies now require Chrome to make a new Google Font API request for every site, and cached resources are no longer shared for privacy concerns (Kitamura, 2020).
- Utilize Can I Use to see if features will be available on different browsers. Please carefully consider choices that ensure good usability for your audience and then investigate what options exist for achieving those goals. Then, once you have narrowed your options, compare the technical differences and select features based on where energy requirements can be reduced the greatest.
We’ve merely skimmed the surface of building sustainable digital products that will help minimize climate impact. There is an active online community that fosters these same beliefs and offers a wealth of resources for achieving the goal of building such products. Search online resources for guidance, such as Sustainable UX talks, Sustainable Web Design strategies, or Google Dev resources related to Core Web Vitals to ensure that you stay abreast of technological advances and developments. Always test and validate, especially before releases. Build these values into your product development culture and encourage your team to be ambassadors of this concept to ensure you maintain your performant edge for the entire product lifetime and not just for a few releases.
Even if we are merely shaving kilobytes off any given request, collectively, it all adds up. And, in this use case, less is truly more.
