Thoughts on Interaction Design

I finally got myself an iPhone, …. and it is reeeaaally nice! Perhaps not the best phone on the market but using it is a real joy. One of the great things about it is that the interaction feels so smooth and sweet. It made me wonder what makes it so nice. One of the things I want to show you in this article is how this actually works in practice and what makes it such a good user experience. Have a look at this small video that shows what happens when you delete an email:

It is just a simple function that any email application has, but what is so special about the way it has been implemented on the iPhone? You have to look at the details of the interaction to understand it.

In the old days when we didn’t have any fancy animation capabilities and every time you did something in an application it would go from the initial state (email not deleted) to the final ’state’ (email deleted) instantly. Well, in most cases the application would do nothing first for a while, although it was actually deleting the email, and then all of a sudden go to the final state. State transitions were only separated by a certain amount of time. By doing an action such as a keypress or a mouse-click the application would go from the initial state to the final state where the application has performed the task and is ready to receive a new command.

One reason this is suboptimal is that visual appearance of the final state is basically the only feedback the user gets on actions done in the initial state. And if the transition takes more than a couple of tenths of a second, the application seems slow to the user or may even seem to ‘hang’. In slightly more modern interfaces the user often receives some additional feedback, for example the fact that a pressed button comes back up after being pressed. Although it confirms that the user has pressed a button, there is usually no other feedback after that until the final state is reached.

A closer look

In the iPhone example I just showed you, way more is happening. All these small animation effects give us a clue about why this interaction feels good. Have a look at this slow motion version of the same interaction:

What happens is this sequence of events:

1. When the trash can is tapped, it lights up with a glow
2. The trash can opens step by step
3. The page wrinkles up and animates towards the trash can, the title of the next article already appears
4. The trash can closes step by step
5. The text of the new email appears with a quick fade in
6. The images are loaded and the network icon rotates
7. The final images appear
8. Done!

Pfffff, a lot of stuff, isn’t it. But is just takes under a second for most of the animation stuff the be completed. You may not notice at first but these subtle animation make all the difference.

Creating more feedback

The importance of feedback is long recognized in Human Computer Interaction (HCI) but it is often understand as a ’singleton’ type of thing, i.e. an action of the user has only one feedback action by the system. For example, when deleting an item in Outlook it simply disappears and the next item is shown. The only other feedback comes from the affordances of buttons and other clickable items.

The main role of feedback is to let the user know what the application (or machine) is doing. Many established interaction guidelines contain at least one guideline that says that the user should always get immediate feedback of some sort. However, there is more to feedback than it may seem at first. It doesn’t have to be only the announcement that ‘everything it is done’, it can also be ‘received your order’ and ‘doing on the order’. I distinguish 5 states the application actually goes through after the user performs an action:

1. Received the order
2. Preparing the order
3. Doing the order
4. Finished the order
5. Ready for the next order

After the last state the initiative of interaction is again back to the user and the whole cycle can start again. It is like taking turns in a conversation. So instead of the old fashioned situation where we went from the initial state directly to the next state, there are now 5 sub-states in between them that the user can be made aware of.

Some of theses could be divided into multiple sub-states, e.g. ‘doing on the order’ can be shown as a percentage of completion, so that each percentage in effect becomes another sub-state. However, some states may not be very relevant to show because the time they consume is irrelevant, e.g. ‘preparing for the action’ may not always be very relevant and ‘done doing the order’ may be implied by only giving feedback on ‘you can give me the next order now’.

State glue

What Apple is doing in the iPhone is making all of the 5 sub-states explicitly visible by means of animation. Showing all 5 sub-states is what I call ’state glue’, the animations link the initial state gracefully to the final state in one fluid motion. Instead of going from the initial state directly to the final state, all of the intermediate states give feedback to the user about what the application is doing, how far is has progressed and whether it has completed the task. It leads to a very satisfying experience. It is this state glue that makes the user experience of the iPhone so much nicer than that of most other mobile phone interactions. The following table shows how the states have been applied:

1. Received the order:              button lights up with a glow and fades way when released
2. Preparing the order:            the trash can opens up
3. Doing the order:                     the email wrinkles up and moves into the trash can, trash can closes
4. Finished the order:               new email being loaded and network indicator spinning
5. Ready for the next order:   new email fully displayed

Using animation as state glue

The user somehow needs to be informed of the sub-states that the application is going through. The easiest way to create state glue is probably to give the user text messages about the stage the application is currently in. This is basically what progress windows, status bars or message windows do in user interfaces. It does the job perhaps but it is far from the most pleasing way to do it. Nowadays you often see animation being used to indicate the various states. You can see all kinds of special effects being applied in websites and Flash animations and also in devices such as the iPhone. It is not only used when deleting an email but it is applied throughout the entire interface. For example, when selecting an application from the main menu on the iPhone you can see this behavior:

1. Click on the icon
2. Interface shows animation zooming in on all icons into the ‘black’ background
3. The screen goes black for a brief period
4. The application menu and empty foreground fade in
5. The application foreground appears
6. Data is loaded
7. Data is faded in

The whole sequence takes just over a second or two to complete. If none of the states were communicated to the user it would be perceived as a terribly slow smart phone that seems to ‘hang’ from time to time. Many Nokia smartphones suffer from this nuisance. But with all the states being communicated by some animations and transition effects (zoom, fade) the users get a sense of ‘progress’ being made. Hence the iPhone is not perceived as slow anymore. The fact that effects such as zooming in and fading in are used gives it a very smooth feeling. The interaction is not blunt but it is graceful and smooth.

State glue makes things feel nicer

As you may have guessed by now, the insertion of state-glue and especially when combined with animation makes the overall user experience feel much nicer. It may actually slow down the whole interaction but this is well worth it. But we have seen before that slower interaction may sometimes be better. When there is feedback about all stages the application goes through people tend to feel that they know what is going on and they know exactly when it is their turn again to act. It also allows people to understand where the application fails if it doesn’t manage to move on to the next state. It helps users build a mental model of the applications workings.

In his Donald Norman re-emphases the importance of feedback in effective interaction with machines. He states that machines should behave predictable and understandable so that users can understand their state, their actions and what is about to happen. The more continuous and natural this is done the better. Apparently people have an inherent preference for machines to behave in that way.

I guess the iPhone example discussed is this article is a good example of how feedback is done properly and naturally. In normal wordings that is saying that it feels nice to interact with! In my opinion, state glue is one of the important factors in creating a good user experience. Especially when combined with animation it is very powerful and enhances interaction in a nice way.

This entry was posted on Friday, May 2nd, 2008 at 9:06 am and is filed under Interaction dysected. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.