Smarter UI

Posted 4 years ago by James Utley 1 Comment

I’ve seen many UX designers create thorough work that was very user friendly, but somehow fell flat after development. While I was at the SXSW interactive conference, Gabe Martin and Robby Grant from archer>malmo pointed out exactly what was missing in their work and often in mine—rich animations. Animations are often an afterthought for a UX designer, who has a long list of considerations for their work. As Robby Grant, Director of Development at archer>malmo pointed out in his presentation at SXSW, “Animations can add life.” In Grant’s presentation, titled “Animation a Smarter UI: Tips for Motion on the Web”, he laid out the golden rule of animations and six key reasons to use them on the web.

The Golden Rule: use Animation only when it improves the user experience. It’s important that animations serve to help the user interact with the site. Overuse of animation can distract the user and even evoke a personality not congruent with the rest of the website.

The six key reasons to use animations on the web:

1. FOCUS
Animations allow the user to focus directly on what they’re interacting with; clarify an action, isolate specific content and direct the user’s attention. A great example can be found on Medium.com, when the user wants to leave a comment on some content by clicking on an icon and the text slides to the left. This directs them to write the comment and isolates this comment to this specific piece of content.
Medium.com - Comment

2. HINT
Animations can often be a polite suggestion as to what the user is able to do next. It can guide the user, suggest an action in the UI and highlight specific options. Trello does this in a real subtle nudge to the left for their sidebar, indicting to the user that the sidebar will slide out from the right to the left. It’s a nice hint to the user of the interaction to come.
Trello - Hint

3. NOTIFY
Several sites such as Facebook and Twitter use animations to alert the user specific content on the site has changed. which is especially useful in the context of social media. Animations help show the user content that requires attention, alerts for updates and informs them of new content. The example below shows how notifications animate from the top.
Saleforce - Notification

4. REACT
Simple reactions to the user give life to the web and give the user confidence that the website is up-to-date. It can confirm an action and help prove the interface is working. A great example is Spotify’s click and hold functionality, the user gets the immediate reaction of the spinning element reminiscent of a tape deck. It provides confidence the interface is working properly and invites the user to use a functionality unique to Spotify.
Spotify - React

5. ORIENT
Animations also serve to orient the user within the context of the site. It shows a user’s relationship to content, gives context, and expands virtual space. On thedailybeastl.com, the user is oriented with a side navigation that doubles as a progress bar. It indicates what article the user is reading and how far they’ve read, while allowing them to navigate quickly.
The Daily Beast - Orient.2

6. PERSONIFY
Not only do animations serve to guide the user, it also gives life and personification to the web. It can reinforce the playfulness of a brand like Tumblr’s heart animation, where the user clicks on the heart icon to like an image. An animation of a heart then pops up and if the user clicks again the heart breaks.
tumblr.com - Personify

In conjunction with the golden rule and six key reasons that Grant presented at SXSW, I’ve put together a short list of helpful links to inform and inspire your animations. Just remember, when used wisely, animations bring life. When used poorly, they may overwhelm and confuse the user. And if they’re not used at all, your site may fall flat.

http://ui-animations.tumblr.com
http://useyourinterface.com
http://daneden.github.io/animate.css/
http://dan-silver.github.io/ElementTransitions.js/
http://hoverstat.es
http://capptivate.co

Tags: , , , , , , , , , , , ,

One Response

  1. Arun Kumar says:

    There is one more point, Response. I am not sure if it is included in the point 4 (React), but often when a website deals with data , huge or small , getting fetched from external sources, a proper and timely animation can make the website responsive to the user. Various websites implement various ways of to make the UI responsive during the transition state, starting from a simple loading animation to even showing interesting tips/facts.

Leave a Reply to Arun Kumar