Using Simple Animation to Improve Visibility

using simple animation
26 Sep 2014

The title of this post may strike some as a bit contradictory. After all, websites with moving bits and pieces are perhaps best known for creating user confusion, not preventing it. In the world of web design, fancy looks often belie a site that is, upon closer inspection, downright maddening to use.

This post, however, is not about using animation for “fancy looks”. Rather, it outlines some of the more subtle ways it can be used help site visitors get things done quickly and easily. The goal is not for the user’s inner dialogue to ask, “how did they do that?” Rather, we want it to say, “ah, this is how all websites should work”.

Example 1: Hide and Reveal

Demo
Scroll to the bottom of this page and click “Post new comment” (note that you don’t actually have to add a comment to try this out).

Explanation
There are two alternate ways the “post new comment” link could have worked:

1. It could have loaded another page with the comment form — in fact, that’s probably what you expected to happen. One problem with this approach is that you have to wait for the page load. Even if you don’t have a slow connection, this is always at least a minor nuisance. Aside from waiting, however, there is also always a slight uncertainty involved in clicking a link: sometimes links don’t take you where you were expecting to go (think page not found errors, interrupted connections, popup windows, etc.).

2. The form could have been shown when the page first loaded. This would have solved all the issues described in #1, but it would have introduced a second: there would always be a huge comment form taking up space on the page. This creates a nuisance for everyone who doesn’t want to leave a comment (i.e. the vast majority of visitors).

These are fairly subtle points, but they make a huge difference. If you weren’t at least a little pleased when the comment form opened rather than redirecting, go ahead and fill out the comment form and let us know.

Example 2: Move to a new place on the page

Demo
Go to our portfolio page, scroll down about half way, then click “Back to Top” next to one of the portfolio pieces.

Explanation
Admittedly, the use of a “back to top” link here is a bit gratuitous, but that’s beside the point: what’s important is that after clicking the link, you know exactly were you went. This stands in stark contrast to the traditional anchor link (e.g. one that brings you to the top of the page or to a certain point partway down) that moves you to a new part of the page in a dizzying instant. Often it’s hard to tell whether you moved up or down, or whether you’re on a new page entirely rather than just lower down. With the animation, however, it should be crystal clear (to the point where you save much more than the extra few tenths of a second it takes to get there).

Example 3: Submitting a form without a page refresh

Demo
Go to the Alpenglow Expeditions website and scroll to the bottom of the homepage. Where it says “Sign up for our email newsletter”, enter the word “test” in both fields and click “Sign Up”.

Explanation
Okay, this is actually not animation per se. It is, however, another example of a fancy interactive website component that actually makes things easier for users. Do you really need to be taken to another page just to have it tell you that “test” is not a valid email address? Of course not. Note that if you did enter a valid email address (feel free to do so if you actually want to subscribe to Alpenglow’s newsletter), you would still stay on the same page and get a “thank you for subscribing” message in the form box so you could continue browsing the site where you had left off.

Remy Denton
Project Manager

RSS Feed