Justinmind

BLOG

Expand your prototyping knowledge

Effective animation to improve UX through interactive prototyping

Effective animation to improve UX through interactive prototyping


Animation has become a fundamental feature in improving UX in interaction design, yet we’re still ironing out the kinks in the design process. Explore 5 principles of animation in interaction design here.

Effective communication between the designer and the user has always been a challenge, but luckily, we have a remedy. Interactive prototyping to showcase animation is fast-becoming one of the most popular methods to make it easier for us to present and translate our web and app concepts to users. With Justinmind, you can build animation through a wide variety of interactions, transitions and mobile gestures in the events dialog.

Simulating the feel of native app interactive animations is complicated. It is for this reason that prototyping web and mobile applications with animation, before jumping straight into code, has really taken off. Let’s take a look at the importance of animation in interaction design and then we’ll see how we how we can effectively animate our designs and improve UX through interactive prototyping.

 

interactive-wireframe-animation-ghost

5 principles of animation in interaction design

Animation is one of the key usability principles of interaction design. According to Jakob Nielsen’s 10 general principles for interaction design, “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” An in accordance with Google’s Material Design principles: “Animation can exist within all components of an app or webpage and at all scales. From detailed icons to key transitions and actions, all elements work together to construct a seamless user experience and a beautiful, functional app or website”. Let’s take a look at some principles of animation in interaction design:

1. Engage and delight your audience: effective animation in web design should be fun, engaging and encourage the user to interact with the design. Familiarity and real-world behavior are key here.

“The most basic use of animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the obvious.” Ranzie Anthony, CreativeBloq

For example, a menu icon that becomes an arrow serves dual functions: 1) to inform the user and 2) to provoke a moment of wonder and delight in the app.

2. Always provide feedback for the user: always provide instant visual confirmation at each point of contact, or touchpoint. Animation is a great way to do this. As Linn Vizard points out: “We’re familiar with the spinning rainbow wheel, loading spinners, and for some earlier users, the animated hourglass”. She goes on to explain that although we sometimes find these animations irritating and associate them with waiting, they actually communicate to us that something is happening – the feedback that a process is going on in the background.

3. Promote accessibility. Linn explains that “accessibility is a key consideration for UX designers”. When using animations and other transitions to encourage interaction, remember to keep it simple. It’s easy to get caught up in the masses of funky-looking transitions available out there, but this can often be overwhelming for users and distracts them from the actual content they’ve come to interact with on your site or app. Context is king, so make sure that your animation complements your design and content. Most of the time, limiting your design to simple, ‘native’ animation that doesn’t get in the way and that feels natural to the user is the best way to go.

“Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation.” — Walt Disney

4. Think gesture & result: interaction requires meaningful transitions, native gestures and visual continuity and this is why animation is a crucial part of touch screen and gestural interfaces. Linn explains that ” the connection and feedback between the gesture and the animation in the interface are crucial to providing an understandable user experience“. So, ensure that transitioning between two visual states should be clear, smooth, and effortless – elements should behave in a coordinated manner and travel along should make sense and be orderly. A well-designed transition tells the user where to focus their attention. Careless, disorganized motion is distracting and can be overwhelming to the user.

 

5. Provide spatial cues: the way an interface is animated determines the spatial cues for the user, essentially explaining where something went. When building a transition, consider the order and timing of element movement and by ensuring that each motion supports the information hierarchy, you can create a path for the eye to follow. This in itself contributes to a logical, enjoyable user journey and a seamless user experience.


Download Justinmind today and start animating your prototypes

DOWNLOAD FREE


Prototyping animation with Justinmind

When it comes to adding animation to your design, a great way to get it right early on is through interactive prototyping. In the past, designers have created flat designs and have had to verbally communicate the intent of each animation to the developer. But now, designers have access to tools that allow them to animate in ways that can get used directly in a build.

A lot of prototyping tools are great for quickly showing transitions between screens. With Justinmind, not only can you do this, but you can also show advanced animated interactions within a screen. Users can build animation into their interactive prototypes without the need for any code. Below is a quick guide to the typical workflow to build animation into your interactive prototypes with Justinmind:

  1. Sketch on paper
  2. Create assets in medium-high visual fidelity using Illustrator or Photoshop
  3. Import assets into Justinmind
  4. Add animation and transition effects using the events dialog
  5. Simulate prototypes to see animation in action
  6. Publish/Review/Validate/Iterate/Develop.

Additionally, Justinmind users are able to simulate scenarios so that they can visualize the user flow of the animation in their interactive prototypes. The level of animation present in Justinmind aims at delivering high-fidelity interactive prototypes that allow users to effectively put the prototype into a target user’s hands for testing and validating how the interactions feel.

Here are a few examples of the animation that you can achieve with Justinmind

Rotating elements

justinmind-rotate-action-interactive-prototyping

Swiping elements

transition-effects-example-animation

Pinching elements

mobile-gestures-mobile-app-prototypes

Pretty cool, huh? For more information on our events system, check out our full tutorial section here. And for those of you who haven’t yet downloaded Justinmind, now is the time! Get started with Justinmind now and get to work on building awesome animation into your interactive prototypes today!download-justinmind-prototyping-tool-banner-1

Emily Grace Adiseshiah

About the Author

Emily is Marketing Content Editor at Justinmind

Comments are closed.