In Figure 1-5 you can see a graphical style unlike those presented before. The components on the
panel appear to float due to the drop shadows. There is a background graphic whose function is strictly
aesthetic. The layout and set of components of this dialog are well within user expectations, but the
colors and shapes used to decorate it may be completely new to them. This might be bad if the dialog
does not look like the rest of the application. Conversely, this graphical design might be a good thing if
the set of colors and shapes indicate a familiar and trusted brand.
Let's consider all changes on a screen an animation, including simple actions like replacing one panel
with another or highlighting a button when the mouse moves over it, as well as the more blatant
animations found in computer games. Each change happens for a reason, and understanding why these
changes are important will guide us in creating compelling applications.
Let's start with the simple example of a wizard for setting up an e-mail account. The first panel
might contain a few text fields asking the user for her e-mail address and password. The second panel
might contain a few checkboxes that allow her to customize how the application behaves; perhaps it lets
her select if e-mail should be stored locally or on a remote server. Each panel of the wizard will have a
number of buttons along the bottom, most likely a Cancel button, a Done button, and a Next button.
When the user encounters the first panel, only the Cancel button is enabled. As soon as the
username and password are filled in, both the Done button and the Next button would become enabled.
This simple animation of enabling the buttons informs the user of a few things. First, enabling the Done
button tells the user he has filled in the required information. Second, enabling the Next button tells the
user there are more options if he is interested.
There are other subtle animations involved as well, like when the mouse moves over a text field, the
cursor should change to a vertical line, indicating that text can be typed into the field. The mouse cursor
might also change when it moves over an enabled button, or the button itself might change. These little
cues help users perform their tasks and would be missed if absent.
In most applications that contain wizards, clicking on the Next button causes one panel to be
instantly replaced by the next one. It's easy to imagine that this transition from panel to panel could be
much livelier. Perhaps one panel slides out of the way while the next panel slides into view. Would this
animation add anything to the user's experience? It is a question that can only be answered if you know
more about the application. For example, if the application is for setting up a bank account, such frills
might distract users or, worse, make them think the app is silly or child-like. These are not attributes a
bank wants associated with its applications. However, if the application is a video game, these sorts of
flourishes are almost expected.
Apple's iPhone provides an interesting study on how animated transitions promote a sense of
simplicity. Almost every time the screen on the phone changes content, there is some sort of transition.
This is due to two factors. First, Apple made it extremely simple for developers to include these effects in
its applications. Second, Apple uses those transitions to great effect in its own applications.
Another obvious example that uses animations in an application is the progress bar. This invaluable
component gives the developer a chance to explain to the user that things are going to take a little time.
Each of the animations mentioned above is used in applications because of a conscious decision,
just like the choice of controls and the layout and rendering of the application. These elements
combined are the design of the application. The next section will discuss in some detail the advantages
of working with professional designers and how best to collaborate with them.