GRADUATION THESIS, VISUAL/INTERACTION/MOTION DESIGN
USER INTERFACE ANIMATION
For my graduation subject I chose User Interface Animations because since 2012/2013 articles popped up about using UI animations and it is relevant to my own interests. Seeing animations more often in interfaces I thought how do you use these without annoying the user. And do they have any purpose or are they just eye candy?
After reading articles, papers, books, listening to podcasts it was time to put the theory in practice. The design agency (Redkiwi) were I was doing my internship had an old dashboard system for their clients. In this system they could report incidents, join workshops, see their financial status and do a lot more. After a survey and interview with the clients I realized that the current system was cluttered and incoherent. So I decided to make a complete new system (prototype) with UI animations.
To design useful animations it is important that you implement them as soon as possible in the design process. An example is the login screen. When making wireframes you always have to keep in mind that the user fills in the wrong user name or password. When this happens you have to give the user feedback that it's the wrong data. Normally you show this in a error message. But by implementing animations while wireframing you can come up with something else. For example the shaking login screen below. During A/B testing a few participants where confronted with the shaking screen, in which they immediately responded "must have put in the wrong password" and tried again. No cluttering textual error message, a simple shaking login box will do.
This is were animations really help the user understand the interface quicker and better. Purposeful animations are animations that are used to give the user feedback on their interactions as well as system initiated interactions. Applications like Facebook, Typeform and Google Now make use of these animations. Without them there is the risk that the user will become disorientated or misses them. In the A/B test that I performed it was noticeable that some interactions in the non-animated version were not noticed by the participants. Resulting in a needless double check by the participants if their actions really was saved.
I found out (with the help of A/B testing, a expert-interview and reading literature) that exaggerated animations are more forgivable in storytelling and product websites than it is in a dashboard page. Were a lot of bouncy animation can work on a toy-product page to communicate fun, in a dashboard this will be perceived as annoying and unnecessary attention seeking. So no animations for dashboards then? No. In a interface like a dashboard it is important to split the interactions. Frequently used interactions (these require subtle and purposeful animations) and rare interactions. With the rare interactions you can exaggerate the animation more, and give them a personality, without it becoming annoying. Below you see an example, someone joins a workshop and gets an exaggerated bouncy response. Because this is a rare interaction, you won't join a workshop every day, it does not irritate the user.
During my research I did multiple tests. One was a multivariate test that determined which classic animation principle created what kind of personality, the other was an A/B test of an animated and non animated product page, and then there was the big A/B test. The big test was my prototype of the dashboard made in Axure. One version had animations and the other did not have any animations. This prototype was tested by clients of Redkiwi. I already did user observations and interviews with them, so it was easy to make another appointment.
A/B TEST RESULTS
The difference between the animated dashboard and the non-animated were very clear. Participants said that the feedback in the animated one was better, in fact there were system initiated interactions that were only noticed in the animated version. The result of that was that the participants experienced the animated version as more obvious. Also most of the participants stated that they liked the animated version more because it is more lively and fun to use. Though I thought that the animated version would be the more popular one, I never would've guessed that the votes were unanimous in favor for the animated version.
UI animations are very difficult to design when you have no experience with them. You must learn the basics of animation (12 principles of animation), be able to translate them to a UI, understand when enough is enough, implement them when wireframing, practice you're timing, test them with users and ten+ more reasons before you can make a good animation. In the final A/B test I certainly did find the right balance between fun and purposeful animations. The teachers and supervisors also agreed so they gave me a great grade which resulted in graduating ;)