How and When to use Animations in Prototypes
Prototyping tools have evolved over the last couple of years, enabling us to test almost anything — from low-fidelity wireframes, right through to high-fidelity animations. Being able to prototype intricate interactions saves us lots of time coding, and gives us the chance to test different types of motion, and animation timing, ensuring we create something effective:
At UX studio, we often use animations during the prototyping phase — but only if it’s necessary. As highlighted by Usability.gov, the use of animation in a prototype can depend on the stage a design is at, the amount of iterations between phases, and what exactly it is you’re trying to communicate.
In this article, I’ll provide a run through of our design process, and how we decide when it’s worth using animations in prototypes, followed by how best to create them. Before we can start even thinking about prototyping though, we first need to build a good relationship with our client, and gain a solid understanding of the business domain we are designing for:
Understand the domain 🤔
We work in teams at UX Studio. A designer, and a UX researcher work together on a project. Believe it or not, everything starts with workshops and client meetings. We need the right information to start building our prototype from. What type of information do we need to design something effectively? Here’s what we start with:
● Business goals. Of course, we have to get an understanding of the business we’re building product for. You cannot build anything without first exploring the business domain for context.
● Personas. Who’s going to use the product? What do we know about them? Who are they?
● Content. Content creation is part of the design process. If your client doesn’t give you any content, you shouldn’t use “Lorem Ipsum…”. In this case, you have to create realistic content. As well as other parts of the design, all content has to be user tested too.
Paper sketches
After spending long hours with clients, collecting information and creating content, we can finally open up Photoshop, and start creating awesome designs. Unfortunately not!
We can, however, sit down with a piece of paper (or a bunch) and start sketching. On paper? Yes.
The reason is to explore as many possibilities as we can. Paper enables us to try out radically different ideas for the same problems, really quickly. We can sketch flows, and try different layouts, whilst also improving on the visual hierarchy. At this early phase, we needn’t be distracted by specifics such as layout proportions, branding, colors, spacing and type-face.
Low-fidelity wireframes
The next phase are the low-fidelity wireframes. The purpose of these wireframes is that they can be tested. During this phase we do some of the following:
- Create user flows (user journeys) — not just screens as we did at the paper sketching phase
- Design menus and site/app navigation
- Add proportions and test some colors
- Introduce some copywriting
The overall aim of this phase is to try things out — test different hierarchies and structures. We start the actual user testing at this point of the design — and we do lots of iterations to see what works best with our users.
High-fidelity wireframes 📐
At the high-fidelity wireframe stage, we use almost the exact measurements that we are going to use in the pixel perfect design.
Whilst we start using grids and functions for all features, there is still no branding and color, which are still unimportant. Despite that, we continue preparing everything to create a pixel perfect design to the best of our knowledge. And of course, we still do iterations.
It’s time to test animations
So, you just became more familiar with our prototyping methods. All of the previous rounds of prototyping and user testing has helped us to validate our designs, leading to the final stages of our process, where we prototype animations and interactions.
What is the purpose for using animations in prototypes?
Animations are just complements of the design and the interactions, so we at UX studio prefer animations when they help user interactions. The best advice that we can give you is:
Don’t overuse animations.
They just have to serve a purpose in design, so if they don’t have any a useful function, then please, don’t use them. They have to make your product easier to understand for your users.
Animations help communicate to developers
Animations are useful for developers too, and so you can look at your prototypes as one of your best tools of communication. You don’t have to write thousands of papers filled with detailed instructions about the features and movements of the animations.
By prototyping animations, and sharing them with your developers, they will be able to see exactly how you imagined the product. The same can be said for any stakeholders. They’ll be able to see moveable screens even, when there is no existing product. And trust me, my friend, they will love them.
How do we use animations at UX studio?
There are three prototyping tools we like to use for creating animations:
● Axure
Basic Animations with Axure
We like to use Axure during the whole wireframe process for adding basic animations. The users can see the flow and process, and it can be more comprehensible if you use animations in the correct way. Obviously, they won’t be fancy animations, but you can test basic concepts. Here’s a good example:
Higher fidelity animations with Principle
You can create nice animations at the UI phase in Principle. Show your flashy animations to the developers and stakeholders for them to take your imaginative ideas in more easily.
Takeaways
Animations can be helpful from a UX point of view. But they have to be tested. So please, only use animations if it’s necessary, and learn to use them properly.
Test your prototypes with and without animations at the same time.
If you are not sure, you can test your prototypes with and without animations at the same time, and there is also people out in the UX community who can give you worthy feedback on your ideas.
Or you can ask us. We are more than happy to share our thoughts with you! 😀
We are also very curious how you use animations. Please share your thoughts with us! 💬 Are there any tools we should use to help improve our process?
