Why is Digital Sustainability Important? (Pt 2)
Building Digital Products for a Greener Planet
by Anastasia Moneva, UI/UX Designer at Whitespectre
Focusing on digital sustainability is a win-win for both the environment and the user experiences we create. In Part 2 of our series on digital sustainability, we dive into the importance of conscious interactivity, tidy code, and device longevity.
In Part One of my series on digital sustainability, I wrote about my journey to realising the big role digital plays in the emerging climate crisis, and why it’s important to view our digital environmental footprint in the same way we do our physical footprint. But a mindshift change is only the beginning. As digital designers and product owners, we possess the tools and the playground to build a much greener and inclusive digital world. In Part One, I touched upon using imagery scarcely and with purpose. In Part Two, I will write about the importance of conscious interactivity, tidy code, and device longevity.
How Interactivity & Motion Impact the Environment
One way to understand how digital interaction impacts the environment is to consider how much content users consume online. In his book “Sustainable Web Design”, Tom Greenwood states “With the average web page weighing in at nearly 2 MB, every page load consumes a lot of data, and with it, a significant amount of electricity.” So, the more web pages someone visits, the higher the environmental impact.
The good news is that a significant focus of our roles as product creators is to get our users where they need to be quickly and efficiently through a solid information structure and a clear UI. In addition to thinking about the most simple path for users — which should require fewer web pages — we should also think about maintenance. If we get into the habit of “spring cleaning” our websites and removing outdated content, it would not only decrease the load on data centres and reduce the use of electricity for our users, but it would also create a leaner user experience and better brand perception. And if we do it right, it would result in low bounce rates, happy users, and a positive impact on the environment. So, it’s a win-win!
Now, let’s drill down into the page level. All interactive elements on a page contribute to page load, such as carousels, share buttons, embedded maps, video, and all of the engaging interactive techniques modern websites use (for example, in this Gift Giving Campaign by Gucci). As with imagery, these should be used sparingly and for the purpose of enhancing the user experience and driving a business outcome.
One of the most mind-blowing statistics in McGovern’s book is this: “The music video for ‘Despacito’ set an Internet record in April 2018 when it became the first video to hit five billion views on YouTube. Scientist Rabih Bashroush calculated that ‘Despacito’ consumed as much electricity as Chad, Guinea-Bissau, Somalia, Sierra Leone and the Central African Republic would use in a year.”
Crazy, right? Cisco’s estimates that by the end of 2021, total internet video traffic will reach 80% of all internet traffic with 56.3% of that in high definition (HD). Of course, we can’t just stop consuming video, using it in our products, or producing it. Video is an important part of many people’s lives; for example, life in the pandemic feels a lot less claustrophobic thanks to the vicarious adventures available on Netflix. However, as always, it’s about making conscious choices, having awareness of the physical costs of video, and thinking about whether it’s the best solution to a business or user problem.
Greenwood shares a great case study to demonstrate the impact of making conscious decisions as a digital creator. His agency was working on a project for a renewable heating supplier who wanted an animated explainer video on heat pumps. Instead of going straight for the good old MP4, Greenwood and his team decided to create an interactive web animation. Not only did they save 94% in file size and improve accessibility, users were also able to take the driver seat and explore the experience at their own pace. However, if video is the best choice for your project, it’s important to optimize, optimize, and optimize some more to reduce the file size and also avoid autoplay, which is bad for accessibility and drains more data.
Another sneaky culprit for high data usage is ad-driven websites, which include many third-party scripts to show ads and track its users’ browsing behaviors. This article from The New York Times argues that more than half of data used by mobile news websites comes from ads and content filtered by ad blockers. My quest to find statistics on how many ads are viewed daily led me to another article from The New York Times from 2007, which estimated that city dwellers are exposed to a daily average of 5,000 ad messages across digital and physical mediums. I can’t even begin to imagine how many more ads we see today, in the midst of a pandemic and a boom in digital usage. I also wonder what that does to our attention spans, wallets, and the environment. We all know that ads are here to stay, and sometimes are key means to keep a business afloat. However, as with everything, they should be used with measure. A healthier alternative to so many ads is a subscription-based model, which a lot of businesses are embracing.
The Importance of Tidy Code
I already touched on the importance of making our web pages lighter. However, once a page is downloaded onto a device, the domino effect of energy consumption begins. The page needs to be processed in order for it to be readable by our machines, which is achieved via HTML, CSS and JavaScript code — all requiring data. McGovern stresses the importance of tidying unnecessary and outdated code. He states, “By cleaning up its JavaScript code, Wikipedia estimated that they saved 4.3 terabytes a day of data bandwidth for their visitors” (which, in turn, saved us from having to plant 700 trees to offset that!).
Before the developers reading this article add me to their bad list, I have a confession to make. While I do have some basic coding skills, I’m not a developer. Luckily, at Whitespectre, I’m surrounded by talented developers who offered their expertise on how to achieve tidy code. Here’s what they shared:
“In my article 12 Core Principles for Premium Quality UX Design, there are three principles that relate to digital sustainability that can be applied not just to UX but to code as well: Consistency, Reusability and Performance. These principles are essential to keep your code clean and tidy. If you want to dig deeper into Performance specifically, I suggest you to read the Front-End Performance Checklist 2021 by Smashing Magazine to learn all the nuts and bolts.”
- Ivan Pla (Whitespectre UX Designer)
“DRY — Don’t Repeat Yourself. Reuse existing code for the same functionality across a system. It helps save time for developers because we don’t need to reinvent the wheel. It also helps testers because they already confirmed that the original “wheel” works. And maybe most importantly, it helps the end user, because they need to download the “wheel” only once, and when they encounter it they are already familiar with it!”
- Rafal Baron (Whitespectre Ruby on Rails Developer)
“Although code sometimes needs to be verbose to make it easy to understand for developers, we use several tools to reduce the served code to lessen bandwidth and improve performance. Minification is a must for JS, CSS and HTML; and when using libraries, tree shaking helps us add only what we use to the build, instead of the whole library.”
- Daniel Albornoz (Whitespectre Frontend Developer)
For more information on green web development, energy-efficient languages, optimizing font files and JAMstack, and much more, I highly recommend “Sustainable Web Design” by Tom Greenwood.
Why Device Longevity Matters
As a quirk of many product creators, we are fascinated by new technologies that solve long-standing problems. For example, Face ID was developed to resolve users needing to remember the thousandth password in a row — yes, please! Technology can solve issues we never even knew we had, like chatting with a voice-activated refrigerator rather than searching the shelves for what we need. “Pass me the cheese, Bixby! (Oh, and give me the stats for its carbon footprint while you’re at it).” Even work-related tasks such as testing products on the latest mobile devices, or keeping up with software updates, all require regular device updates. While there are many good reasons to keep devices updated, here are three rules we should live by from Reduce, Reuse, Recycle Magazine:
Reduce
Reduce the amount of device upgrades you make.
“In 2020, there are 7.7 billion mobile phones in use, with a total footprint of roughly 580 million tonnes CO2e, which is roughly 1 percent of global emissions” — in How bad Are Bananas”
“416,000 smartphones are thrown away globally each day” — Inc.com
Be mindful of battery life, don’t overload your device, keep the screen and ports clean and protected, update your operating system regularly, and always try to differentiate need from want. For things like user testing, use emulators or borrow a friend’s phone. And if you wish, get some cool stickers to make your device jazzier.
Repair to Reuse
Is the device battery broken? Replace that rather than the phone. Repair or refurbish your electronics whenever possible, because the production of new devices consumes a significant amount of resources (i.e. their embodied footprint).
“Making a phone accounts for 85–95 percent of its annual carbon footprint because manufacturing its electronics and mining the metals that go into them is energy-intensive” — Anthropocene Magazine
Recycle
If your device is beyond salvation, then carefully research local certified e-waste recyclers.
“80 to 85 percent of e-waste finds its way into landfills or incinerators where its toxic metals including cadmium, mercury, lead, chromium and nickel are leached into the groundwater or released into the air, poisoning people and animals” — inc.com
For years, I threw away everything into general waste without thinking about it — “out of sight, out of mind.” But the more I read, the more I began to imagine that almost every product I throw out will eventually impact the people who handle it or the ground it’s dumped on. I imagined my waste turning into a chemically-fuelled zombie that would live forever. And with that in mind, I’ve trained myself to become much more conscious of everything I throw away.
* * *
To sum up, let’s focus on user value by creating efficient and meaningful experiences, built upon strong, lean code. Let’s keep our devices for longer — there’s nothing like a good old pink Panasonic G51 (ah, the good old days!). And pass down your devices or recycle them.
I hope you enjoyed Part Two of the series, and if you still haven’t checked out Part One, please do! Next up, in the final part of this series, I will cover green hosting, data centres and storage, and key takeaways. Stay tuned!
Originally published on whitespectre.com/ideas on April 1st, 2021.
