When we think of interaction design and animation in user experience, it’s easy to mistake it for the fancy stuff: the bells and whistles, or the random flying objects that “give a website the wow factor”. It might bring short-term delight, but it can soon become irritating for regular users.
To combat this type of futility, we’ll take a look at the core principles of designing meaningful interaction, how it can solve common design challenges and how you can introduce it to your design systems and process. Interaction should no longer be a finishing touch that gets dropped from scope as a “nice to have”, but an integral part of the overall user experience.
Four Key Principles of Meaningful Interaction Design
1. Avoid Creating Obstacles
Interaction or animation should never create barriers for the user.
Think of a “hamburger menu” that takes two or three seconds to animate full screen. Every time a user wants to navigate the site, they have to wait. Creating longer task times for the user is a guaranteed way to bounce them all the way to a competitor’s website or app.
There are however, some instances where delaying progress of an interaction can benefit. When the interaction is complex, slowing it down can give the user better context and feedback. Here are some examples of when you might delay interactions and animations:
- On-boarding new users to a new interface. Make sure you reduce the obstacles with the skip option.
- Drag and drop interfaces that show cause and effect. Too fast and users may wonder where that file went.
- Adding a product to cart. This shouldn’t create a prolonged barrier to checkout, but it should give the user enough feedback so they know their task was successful.
As a rule, simple interactions should be quick, and complex interactions should be delayed just enough so the user understands the context.
2. Match the Motion to Message
Interactions should always sit comfortably within the tone of the brand.
If Apple decided that all of their interactions on iOS were going to be fast, sharp, in your face and do loads of spinny things, would it feel like you’re using an Apple product? If you were using the Alton Towers app and saw slow fading animation and an abundance of Ken Burns-style transitions, would it feel like a magical place of fun and excitement, or an M&S TV advert?
The way an interaction animates should always represent the tone you are aiming for that feels right for your users – it makes the experience more immersive and consistent. If it’s an entertainment site for children, then it can be a bit wacky and garish. If it’s a high-end boutique then keep it slow, sophisticated and tasteful.
3. Give It Purpose
If it doesn’t help the user or elevate their experience, do you need it?
Interaction design has so much potential to elevate a user experience, which is why it is so tempting to overuse and use without a purpose. Remember Flash websites?
Scroll a little further and take a look at the eight challenges that interaction design can solve. If your interactions don’t follow these patterns, there’s a good chance it doesn’t have a purpose other than to delight users.
4. Make It Invisible
The best interaction design is invisible and should enhance the experience without users even noticing.
That sounds quite heartbreaking given the time invested in designing the interactions, but if it goes unnoticed, it’s probably because they’ve done an awesome job. We tend to pay more attention to using a piece of technology or an interface when it’s going wrong or something feels clunky. When things are smooth, the user can focus on the content.
The amount of interaction design consideration on widely used apps and websites such as Facebook, Pinterest, Twitter and Google products is incomprehensible. And yet, you’d never really notice until someone pointed it out to you. They make design invisible so you can enjoy the experience and build a stronger emotional connection with the product, service or content.
Six Design Challenges That Interaction Design Can Solve
1. Orientation & Context
Interaction design can help users get a sense of where things are, even if they cannot be seen.
This is a particular challenge for mobile design when screen space is limited. Show everything in the open and the user is cognitively overloaded. Showing vital things and hiding less critical things is what we strive for; however, it conceals a proportion of the experience. So by using meaningful interactions, we can visually teach the user where things live, so it’s easy to remember and intuitive.
Here are a couple of examples of creating context by using interaction:
2. Demonstrating Cause & Effect
Using interaction and animation can help show the user what is happening and what they can expect.
A classic example of this is a drag and drop interface. When you pick up a media object and move it to the “drop zone”, there should be feedback for the user to tell them they’ve picked it up and they’ve moved into the right place to drop the item into. Once they drop it in, there should be validation to tell the user they were successful in their task. This can be done through colour changes, positive validation messaging or even sound effects.
3. Providing Feedback
Interaction can offer positive or helpful feedback to inform them of the status of a task.
For this example, let’s take a payment button. How many poorly executed ecommerce gateways have you experienced where you click that nice, shiny “Pay Now” button, only to be met with confusion as to whether you’ve clicked it or not because it’s processing? It didn’t say that was what it was doing. So, interaction can change the status of a button and with a bit of animation, it can tell the user that “payment is being processed”, and then tell the user when “payment is received” before relocating to an order confirmation page. No more wondering what’s happening for ten seconds and questioning if you’ve broken the internet.
4. Highlight Key Information
Animation can promote and draw attention to critical information better than a static content.
When some content is of a higher priority within the same screen view, the use of colour and typography to promote it can break the consistency of your design system or look out of place if over-used. Interaction can help accentuate important content without compromising the layout.
Think fitness apps: when you first load your dashboard, you want to see today’s primary activity and stats. Using simple animation can bring this content out without diluting the amount of things shown on the screen.
5. Create Perception of Performance
Interaction design can psychologically make the user feel that a website or app is performing better.
Speed is a hot topic and for good reason, as it’s a common factor associated with bounce rates. There will be cases where you’ve maxed out on-page speed optimisation and it’s still taking a bit of time to load the page. There are alternatives to showing the user nothing, or show a loading icon.
Skeletal loading can be used to show a predictable layout in wireframe form so before the page loads, the user knows roughly where to look and how they might interact with the interface. Psychologically, it feels like the page has loaded faster in comparison to not seeing anything happen, but in reality, it loads in the same time.
You can also use loading times as an opportunity to educate users on what is happening and what is about to happen with friendly messaging that diffuses the waiting time.
6. Adding Brand Personality
Interaction design and animation can set the tone of a brand and create a closer emotional connection.
Character-led brands can benefit greatly from introducing interaction to bring personality into the experience. You can leverage the mascots’ human characteristics. When you don’t have anything visual in your brand you can still add personality by using speed and frequency. Think Google and their quirky dot pre-loaders or voice command activation that bring a friendly and fun approach in a simple way.
Building an emotional connection with the user is a great way to get regular visits. Interaction design can make technology feel more human-centric – which is always good to aim for.
Introducing Interaction Into Your Design Process
Low Fidelity Sketches & Comps
Communicate your ideas quickly and collaborate with developers through quick sketches and annotations to discover the best ways to implement the interaction.
Interaction Design Tools
There is an increasing number of interaction design tools on the market and they are becoming more advanced in terms of the style of interactions you can create and prototype before building them.
- Keynote: If you’re looking for crude and simple to get your idea across, Keynote is the quick win.
- Adobe Animate: Keep it all within Adobe and seamlessly crossover with other tools. This is ideal for illustrative animation.
- Tumult Hype: If you’re familiar with the Sketch interface and know your way around timelines, you’ll be right at home with Tumult.
- Principle: With a nice Sketch link up, Principle is becoming the go-to for interaction. It’s relatively simple to learn, and what you can achieve in it is great.
- Atomic: Add data, logic and variables to make your interactions as practical as the final build. This is for the advanced designer that has some coding knowledge.
- Invision Studio: It’s still early days, but Invision Studio has some great capabilities and similarities to Principle. Time will tell if this will be advanced enough to dominate the prototyping and collaboration market.
Detailed Handover Notes
There are plenty of collaboration tools that incorporate interaction.
Leaving developer notes is a bone of contention if you’re in a highly collaborative environment, but if you’re working remotely, detailed notes against your ideas and prototypes with a good handover can ensure your interactions are factored into the build.
Compile a Library of Demos & Inspiration
Add It to Your Design System
Interactions are often the first thing to be cut from scope, which is why your pattern library and design systems can save the day.
If you’ve successfully solved a common issue (properly tested) with interaction, then get it into your design system or pattern library to reuse in similar scenarios without the time investment to do something else from scratch.
For help with web design and user experience (UX), get in touch with us today.
Powered by WPeMatico