UI tools
Illustration by Natasha Remarchuk from Icons8
The most basic actions you can do fall into 2 categories (or buckets):
- Do good UX
- Think stuff through
Do good UX
What do I mean by that? Exactly what it sounds like. It’s 2020 and there’s loads of products which have kind-of-OK UX - usually they follow a couple of best practices, usability heuristics and so on, but that’s it. It’s still just a design glitter on top. And from the point of view of environmental responsibility that’s not great either. If you want to shorten the time of how long do your users use the product you have to make it effective in solving their needs.
1. Understand your users
Get to know them, do a proper research Know what they want to achieve and know their Jobs to be done. And after you make your solution effective in solving them.
2. Time on Task
One metric that can help you a lot. How much time do your users spend on solving their problem or needs? What’s the average time? And what are the lowest and highest times? And why are the so low or so high? You can also use similar metrics such as number of steps needed to complete a task, number of clicks,… you get the gist. Keep this number as low as possible.
3. Make stuff accessible and understandable
Many accessible concepts are transitively very environmentally friendly as well. And not just by the logic - what’s accessible is more usable, therefore more effective therefore less damaging. Solutions with great accessibility also tend to be simpler and perform better.
Think stuff through
And now for something completely deifferent. Even well meant actions and design decisions can have big consequences. Especially when they scale up. Therefore it is better to think about the possible turns some of them might take. Here's a couple of examples of everyday but impactful design decisions you'd might want to think through if you wish to address the impact of your product:
1. Performance.
Yeah, it’s not just something the developers or engineers want. You don’t want a slow and hiccuping product for your users either, right? Performance is another beautiful transitive solution. And by transitive I mean - If you get this right it will help you to get other things right as well. What does it mean practically? For example - don’t clutter your products in order to be beautiful. There’s this great example of the users’ pyramid of delight. As you can see - the base are the core needs: reliability, solving the need, etc… Use fancy UI blows and whistles only if they effectively support these needs.
2. Page weight and load time.
This one is very closely connected to the first one. Again it might seem simplistic, but small changes compounded 10 000 or 100 000 000 times make the change. The logic here goes - if your page is smaller or loads fast it consumes less resources, ergo does less damage in the end. If you’re creating websites there are even tools that can help you evaluate your page weight or how much CO2 every load approximately generates. And they also give you tips on what can you do better next time 😉 You can check them all out in the evaluation tools section.
3. Be very conscious about the assets and images you use.
A real gold mine UXer or front rank pixel-pushing UI designer wishing to reduce the page size! In this case you will really count bytes and kBs. For example be very conscious of how you approach icons in your products. Will you use .pngs? . svgs? icon fonts? css icon sprites? Each has its own specific usage. However, there are some good and some less than good options. If you can, do avoid pngs - they just add weight and use svgs instead. If you have a bigger collection of icons that needs to be maintained periodically icon fonts and css sprites are both good solutions since they stay cachced after the first load and therefore do not bloat the page size in the future. The same goes for images - UK sustainable Wordpress pioneer Hannah Smith has a great presentation on this Take this just as an example of mindset and a question you should consider each time you’d like to include something that could potentially bloat and induce page-size obesity of your product.
4. Be conscious about use of in-the-middle infrastructure.
Do you really need that complicated CMS for your simple, static presentation website? Do you really use all the tracking and the data you obtained by it or are you just storing it “just in case”? Chances are that that data is part of the 93% of analytics that will never be reviewed. Do you really need to use the another fancy .js library in order to provide 3 simple animations that could be done by CSS or HTML5? Again - food for thought.
5. No autoplay.
There’s the annecdote that just by not making autoplay immediate by default Netflix saves couple of petabytes of web traffic daily. And I tend to believe it. There are very few occasions when it is useful and even polite to automatically start streaming something in the background. This rings true especially for any kind of loading screens etc... Unless you provide true value, just wait until the user asks for the content. And of course the same goes for any kind of automated attachments - be it in mail or other communincations. Make every larger file transfer to be on-demand, not automatic.
6. Green hosting.
Well, why count grams of emissions if you can avoid them altogether, right? There are many hosting options providing guarantees that their data centers operate solely on renewable resources. This might be a great option in your sustainable toolset, but it might be more suitable and feasible for smaller, agency style projects rather than big enterprise applications. However most of big cloud providers such as AWS, MS Azure etc. offer green or greener alternatives. However do not conform to feeling that this is a silver bullet. There is much much more you can (and should) influence as a designer.
7. Pixel lvl consumption.
This looks like it’s for the hardcore enthusiast among designers right? Not necessarily! Every pixel on every device consumes energy. There are cases you might consider especially while designing for mobile devices, when some color combinations tend to consume less power (on OLED displays) than others. And there’s a trendy wave you can surf right now. Dark mode is not just a fad and something that’s easy on your eyes when you’re browsing socials late at night. It actually uses less power. So if you can, definitely do include this option. You can save some tiny fraction of a watt per device, but when scaled… you get the gist 😉