Your application is like a ballet performance
Why all developers who build user interfaces should understand motion design.
A lot of developers might disagree with me but it is my belief that if you are a developer who is building user interfaces, you should understand and respect motion design.
When we add transitions and animations to our UI components, we are doing it for a few different reasons. Some of them are:
- Guide the user’s eye and attention.
- Create a feeling of continuation of where you were and where you are going.
- Explain possible interaction.
- Apply physical characteristics to our objects.
- Appeal.
Whenever I think about motion design in UIs I imagine a ballet performance. Your view is the stage and your buttons, titles, images etc are your performers.
Like in a ballet, every performer has a role to play. They exists inside the stage. But also every performer needs to appear at the right time so that there is a flow that the audience can follow.
Now, imagine that you go to see a ballet and all performers walk onto the stage, just stand there and then they just leave. Boring right?
But, what if those dancers would gracefully come onto the stage? Wouldn’t that be less boring and a bit more beautiful?
OK, the performance begins. Suddenly all the performers at the same time appear on the stage and they start dancing. The audience probably won’t know where to focus. More importantly the performance starts to feel chaotic and not graceful.
That leads me to my next point; timing is everything. For me timing means two things:
- How fast something should happen.
- When should it happen.
When performers appear on the stage, they usually do it in a specific order and manner so that the audience can keep up with what is going on and follow the story. Also the speed of which a performer is moving and dancing gives specific characteristics to that person. For example, if a performer is moving fast then we get a feeling of urgency, importance. You should try to apply the same rules everywhere in your application.
Another important thing is how we interact with our UI components. You should think of a button as a performer. You wouldn’t want to interact with different performers and have them do nothing, right? By creating a UI component that reacts to the way you interact with it, we give it physical characteristics and we help the user understand what to expect from that component. Plus we make it more interesting and appealing.
Finally, every performer has some physical characteristics. Each one has a size, mass, friction etc, and all of them affect the way it moves and behaves on stage. Same applies for your components. Next time you want to animate a UI component, think about these characteristics and how they will affect the animation.
We should all try and bring to life our applications. Always think of every button, image etc as a living organism with physical characteristics that the user can interact with. Build interesting organisms that help the user understand how to interact with your application. Use these organisms to guide the attention of the user and don’t forget to have fun while doing so!
If you like to learn more about design in motion then you can have a look at the following resources:
- http://www.ui-transitions.com/#categories
- http://www.smashingmagazine.com/2012/10/30/motion-and-animation-a-new-mobile-ux-design-material/
- http://www.slideshare.net/antoniodepasquale/design-in-motion-the-new-frontier-of-interaction-design
For inspiration:
