UX forms multiple skillsets into a practice – user research, behaviour analysis, testing, wireframing and design – but a growing discussion point is how we can use motion to re-enforce and support a user. By giving indications of interaction and creating moments of delight, we can guide a user through a process efficiently and encourage them to return.

While wireframes and design are an essential part of the process, these are the extreme states of what we design for. There are many states in between where elements show and hide, input fields send and images load, where we can show the user something is happening, that their input has not gone un-answered and they are on the right path.

UX choreography is a term originally developed by Rebecca Ussai, describing how we can give each element on a page it’s time to shine. By drawing influence from Disney’s own Principles of Animation, there are five key principles of UX choreography which we can use ourselves to enhance any online experience.

Interact with the examples below to see how simple implementations of Interaction Design can enhance the User Experience of your website.

Principle 1: Feedback

By demonstrating a result for a user’s input, users can instantly be told if progress is being made, if something has an error or even if it has been successfully selected. By incorporating movement, what used to appear as static elements come alive and seem to react naturally to a user’s input.

The key with the feedback principle however, is that it has to be very obvious. Even if it feels slightly over-exaggerated while being developed, when it is looked at by users the connection between input and result will be clear and is more likely to be understood.

In the example below, the initial visual state is the same for both the static and the animated option. However in the second example, adding a subtle shake to the button implies the button is shaking it’s head to say ‘no’, re-enforcing the disabled messaging and that the action is not possible.

Principle 2: Feedforward

Feedforward is a method of hinting to the user that something could happen to an element, but it requires interaction. Giving a cue can encourage interaction and help them know what to expect to happen on the page. Users can be put off by big changes of state, so providing a subtle hint warns them of the change that will happen.

Feedforward is also useful as it can provide a way to sign-post the user’s journey through a process, helping to avoid confusion. Aspects that help signpost and hint results to the user are often very subtle, such as a slight glow or bounce so it catches the eye but is not too intrusive. These details are often not recognised or remembered by the user, but can play a key part in taking the user through a process.

For this example, a subtle glow effect suggests that the text is interactive and provides a hint of the effect that takes place when clicked. Both elements have the same outcome, but by providing a bit of direction to the user, interaction is encouraged and new aspects of the site are shown.

Principle 3: Spatial Awareness

Guiding a user helps them to discover features, understand functionality and follow a process. This can be during an on-boarding session, where tooltips appear as the user needs them, or it can be through micro-interactions to help a user focus on the task at hand.

By clarifying state changes and adding subtle emphasis where required, users are more likely to achieve an objective. State changes do not necessarily only happen to the item interacted with. Sometimes the background behind an object may react to give a greater focus, a strategy often adopted for contextual controls and navigation.

Spatial awareness is often achieved with the showing and hiding of elements, but in this example spatial awareness is shown by the background reacting to the button’s placement. Each button changes the background colour, but the added detail of having colour animating from the side makes the design more interesting and the site’s behaviour more predictable.

Principle 4: User Focus

Guiding a user helps them to discover features, understand functionality and follow a process. This can be during an on-boarding session, where tooltips appear as the user needs them, or it can be through micro-interactions to help a user focus on the task at hand.

By clarifying state changes and adding subtle emphasis where required, users are more likely to achieve an objective. State changes do not necessarily only happen to the item interacted with however; sometimes the background behind an object may react to give a greater focus, a strategy often adopted for contextual controls and navigation.

With images becoming larger and layering of elements more popular, user focus can be key to helping the user know how the site is reacting to their interaction. In this example, fading out the background means that the user can access information easier and helps guide them to their next action.

Principle 5: Brand Tone of Voice

Tone of voice is where a brand’s personality can really shine through. Brands are no longer constrained by flat images and text to communicate and can use animation to bring their webpages to life.

The most enjoyable online experiences are often ones that have aspects that make them individual, with small details that delight. By emphasizing these moments, we encourage users to return so they experience those moments of delight again and again.

An example of adding some personality is shown below. With one flat and static implementation of TJ peering over a rectangle, and another where he reacts to mouse movement and clicks. This is subtle and would not be stumbled upon by most users, but works to make those who do see it smile.

Conclusion

These five principles give an insight into how we can enhance online experiences and guide users through a process. By looking at the stages between the extreme states of ‘start’ and ‘finish’ we can craft an experience that delights and encourages advocacy and retention of users. Through making sure information and intent is clear, intriguing and memorable, users are more likely to understand a website and we can encourage users to return to a site.