If it doesn’t move, it is not digital.
This post is a piece of the article 10 guidelines for Kickass World Class website making.
I know some people have issues with the previous statement. But this is the actual difference between Print-Background-Graphic-Designers and Digital Designers.
Some professionals don’t give enough credit to motion, mostly because they consider them unnecessary and “noisy”. Some professionals are wrong in most some though. We must agree with the fact that it’s easy for a Designer to get carried away with animations and overdo them. I understand that. But we am not here to talk about bad experiences, are we?
Let me take you through a quick story. I remember this episode when a great friend of mine once asked me - with his impatient yet playful way of arguing - “what is so great about a couple of toys moving around?”. I laughed. It was a valid question though. So I had to give him a shot. I believed he was just lacking some context in order to understand why some Designers consider these details carefully.
I started off by emphasising the fact that animation need to be taken into account and approached as a subtle element in Design, because we don’t want to distract the user from the main experience. Also, it can improve the overall look & feel of your website/app — thus the user expectations and brand consideration.
Obviously he felt that was a purely aesthetic point of view and hasted “What else do you got?”.
He was not convinced yet. So I proceeded, “most of the time, motion principles mimic natural human behavior and expectations. That’s how the system gives you feedback and you understand what’s going on. For instance, if you write a password wrong and the screen shakes, somehow you feel that natural because you associate it with the human headshake (sign of denial). So you type it again.”
I was trying to let him see animated interfaces more as a vehicle to a conversational environment (that boosts user engagement), rather than a pure dry human/machine interaction. But he doesn’t know that. How can I argue over something the other person is clueless about?
Let me support the idea with some good examples:
Credits to UXpin: https://www.uxpin.com/studio/blog/ux-design-best-practices-refined-microinteractions/
This is a good example about transitions, micro Design and how small complementary information can be animated to help users engage with the content.
Watson DG did a great job with Amy by phasing in the body text and giving us the sense of reading — as if you were singing while Amy Winehouse plays in the background. Its sense of context is accurate enough, so it comes an interesting piece of information.
This is a more refined example about a product that uses animation to recall real-life experiences and give the user the feeling he/she is actually trying the product on a physical store.
B&O play website uses animated sound waves (on user’s call) to trigger the magnet application that allows people to stop/resume music effortlessly. So, if you click over the product, the earbuds go apart and the sound waves start moving again. You can stop the waves with the same action. At the end, you feel in control of the experience and you get the point “This product has some cool features!”
These are actually few small details among numerous examples we can pick to do our job better
My beloved friend questioned my business orientation and expertise on the matter. “Just cut the phony baloney principles. I have to sell products, not entertain people”. I gently smiled and kindly replied “smooth animations and transitions allow you to prioritise information, when and how they are shown. For instance, if you consider human motion predictability in your animations and guide me to a specific zone where I can focus, you can actually raise the chances of me hitting the button you want. That can lead to better conversion, for instance.”
I didn’t seem to care.
In all fairness, I wasn’t trying to solve a mystery or a huge business problem. These are actually few small details among numerous examples we can pick to do our job better.
Long story short, his business competitors do exactly what I tried to explain to him. They care about those details — and they are not struggling.
He is somehow.
(read the other posts on 10 guidelines for Kickass World Class website making)
