You can’t go more than 5 seconds on a phone or PC without seeing some kind of web animation. Bringing the content to life, making things pop, and providing a utility function tied with an enjoyable aesthetic, web animations are more challenging than those outside the business would first assume. Able to improve the experience of the user, getting your web animations down will dramatically improve how people interact with your website. One exciting way to do this is by understanding a few basic principles in neuroscience. In particular, let’s take a moment to discuss how attention and memory can play a big role in improving your design.
Understanding Sensory & Iconic Memory
Sensory memory is the leftover experience we remember after an event has passed. For example, if we traveled through a busy marketplace, then our sensory memory would be us thinking back to the sounds, sweet smells, colors, and vibrancy of people we witnessed. Our brains automatically store things as sensory memory in a split second after we experience them. The fast storing time is due to evolution, where we as people required rapid responses to our environment as a means of survival.
Sensory memory gathers all kinds of information. However, we as people are particularly good at recording and identifying movement. Navigating with our sight was the primary means through evolution that we stayed alive and dealt with the wider dangerous world around us.
This is where Iconic Memory comes into play. Helping us to understand better what we are seeing, Iconic Memory is responsible in part for the after image we see when looking away from something we were previously staring at. Iconic memory can work with our talent in pattern recognition to perform some neat visual tricks. For example, it is easy for humans to see a circle out of a spinning rope because the after image continues the shape while pattern recognition completes the picture in our own mind. When you get right down to it, we people are pretty incredible!
How We Can Use These Principles In Neuroscience To Aid Our Design
Let’s be real for a moment. People are not the best at remembering things, especially when the list begins to grow. We are more designed for speed and quick reaction times. This is why a lot of web animation focuses on improving speed and quick movement visuals over other factors. The amount of sensory time we have is relatively short, making web speed more about our basic needs as people and less about any sense of entitlement.
Your goal as a web designer is to decrease the cognitive load of the person using your app. The more a person has to work against instinct and what comes naturally to navigate animations and links you create, the worse the experience will be perceived. There are three things you can do to decrease the amount of mental energy is required and create a more fluid experience as a result.
So how will all of this help you? Well, visualization that connects views will improve the chance that people stay on your site. Quick speeds and relevant animations will keep individuals engaged in the right content. A typical example of how this knowledge affects web design is through persistent animation. Take the Logo for Twitter as an example.
The icon that you click on a mobile device opens you into a program where that image is now the background that you are doing your business over. This function keeps continuity throughout the experience, providing a sensible process that our brains more easily understand. Another interesting effect is that it makes the app appear as if it loaded faster than it actually did. A persistent animation is easy to do and can be deployed in a number of different ways to improve the overall experience.
Precursor to Fast Actions
Another way that neuroscience and memory interact in how we perceive web design is when it mimics the real world. For example, things rarely happen out of the blue in nature. Every fast change has something else that leads up to it. For example, take a tree falling in the woods. Before the tree suddenly falls, you hear the wood creaking and breaking. It prepares you for the fast experience that is about to happen. Things that occur fast visually without having something come before it is typically seen as alarming.
When it comes to your web design, having a visual that ‘speeds up’ into the animation or otherwise gives your brain a second to process the change will dramatically improve the experience. It decreases the mental load caused by the sudden change and leaves your user with a smoother overall experience.
It is common in our lives where reversing an action is simple. For example, you can raise your fork off the plate after putting it down, close a dresser drawer after opening it, etc. Persistent actions in web design provide continuity in the experience of the user. More to the point, it is what people will naturally expect and what the sensory memory will more easily identify as fast and free flowing. As a typical example, take exiting an app. Making it similar or the same as entering provides a great experience to the user and improves how they will remember the experience.
As a final consideration, consider the concept of the ‘central path’ in Buddhism. Your goal is not to overdo it but rather find a happy medium where you incorporate these principles into your design. Good luck!