08
Interaction & Animation
The User Interface refers to the physical or digital surface that you interact with as a user.
What are they?
Beyond visual layout, media and colour, designers can leverage interaction design and animation to bring user interfaces to life.
But first, what are they? Give us a sec. Is there a difference between them? YES! Ok - ready - to put it simply, both concern motion, however, interaction requires user input whereas animation is a more independent feature of design.
The interactivity of an experience hones in on the relationship between humans and computers through the medium of the user interface. Animation, on the other hand, is a more emotive, storytelling device. Nevertheless, both have the potential to bring your brand to life.
There's a big misconception that media is the only way to make a digital experience impactful and delightful. Well, it is if that's the only way you know know! Feedback for users when they interact and movement that makes the experience feel smooth and fast, can say a million words about a brand, even if a picture says a thousand.
Ellie Barrett, UX Designer
These elements provide an opportunity to reduce your carbon footprint by optimising your user interfaces.
Why should I care?
Media files, such as images and videos, are energy intensive and contribute to the page weight and speed of your website unless they are optimised i.e. compressed and quality is reduced. Interaction design and animation, on the other hand, offer an impactful experience with less of an impact on the environment. Smaller animation files and interactions built into interfaces with code mean that less data is accessed on and stored by your website, thus reducing the processing power of your digital experiences.
Interaction design and animation also make decision making easier for users. Whether helping to reduce cognitive load or visually describe an affordance, motion in design is a great way to reduce users’ time on your website as well the energy used to power the experience. The use of interaction design and animation also go a long way to make your digital experience more accessible, communicating more effectively with your users.
What can I do right now?
If you’re thinking about leveraging interactivity and animation to optimise your digital experiences, make sure you consider the following:
Less is more.
Just because interaction design and animation have the potential to improve the usability, accessibility and environmental impact of your experiences, that doesn’t mean that you should litter your website with these design elements.
Less is more and provides additional clarity to your user interfaces. Scrutinise your use of interactivity and animation and consider leveraging these elements of design only when it adds value.
Compress your media.
We may be advocating for alternative design methods to help you reduce your site’s carbon footprint, but that doesn’t mean you should cut media altogether. After all, a picture can speak a thousand words and we can’t downplay the impact of images on user experience.
That said, if you’re going to use them make sure you optimise them for the web. There are a bunch of online services you can use to compress or convert your media files.
Your users will thank you, search engines will thank you, and, most importantly, the planet will thank you. TinyWow, is a tool for compressing and converting.
Use available technologies.
It might not always feel like it, but technology is our friend. Necessity is the mother of invention and all that… The constraints and challenges that the digital world throws at us means there are a host of innovations that happen everyday.
Keep your eye out for the latest solutions and technologies that will help you to implement interaction design and animation on your site, without killing the planet. Take LottieFiles, for instance; they’re a great example of a small and flexible file format, allowing you to ship animations on any device.
Sources
- Green UX: Is your UI harming the environment? / JustInMind
- Sustainable Web Design / Sustainable Web Design
Next up...
09
Carbon-Budgeting
Carbon-budgeting doesn’t have to be very different to the targets we use at work every day.