Transition

by Zack on May 24, 2009

transition_logo

Every application does more than one thing. There are supporting tasks like logging in and save, ancillary tasks like managing your account, or mashup tasks that let you edit and share your work. It is very easy to get lost between these tasks if your UI doesn’t have sign posts to help you through the transitions. Let’s start with a simple example of transition from one type of data to another.

wired

The website for Wired magazine separates their content to make it easier for users. If this were a printed newspaper the stories above the black divider would be above the fold in the middle of the front page. Wired wants to let you know that some stories are a little larger than others. They use a larger font a different layout and then they transition to the smaller stories using the black divider. They take full advantage of the space to make the transition useful by itself.

Transitioning on your desktop

In desktop software there are many classic transitions.

Closing a dialog lets you know you’re returning to the main window.

Pressing next on a wizard tells you to expect the next page of data.

Closing a window signifies a transition to another application.

These well known transitions guide you through the application and the operating system. They let you know where you are and what you should expect. Without them you’d be lost.

Transitioning on the web

The most common web transition is changing to a new page. You click and a link and watch while the browser reloads with a new UI. We’ve all been trained to understand this transition and what it means. You would never expect Google and Yahoo! to look the same just because they are both in your browser.

Now that more websites are using AJAX the transitions are more complicated. The great part about AJAX is that it can get data without refreshing the browser and the worst part about AJAX is that it gets data without refreshing the browser. Without the visual queues users don’t know that data is being fetched. And sometimes that’s OK.

google_maps

The gray squares on Google Maps are the only indication you get that something is happening, but your browsers is constantly loading data as your drag the map around. It works well because your not transitioning. When I drag the map from Boston to Cambridge I’m still looking at the same type of data and interacting with it in the same way.

Transition trouble

With poor transitions trouble comes quickly. In this early version of the expectations article from this site the article data and the comment data have no transition.

bad_transition

Reading an article and commenting on it are two very different tasks, but they look that same here. The problems is even worse because the article contains interactive elements (the open button) and you aren’t really sure if the comment fields are part of the article or not. The confusion this makes leaves users unclear about what’s going on and less likely to leave comments.

The transition was fixed in the final version of the article with the addition of color, spacing, and larger fonts. The techniques of contrast are tools in your toolbox when you create transitions.

Strong transitions are road sings that tell the user where they are and what to expect. Weak ones leave the user feeling lost and likely to just go home.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: