Use motion to help the brain out

You know this from real life. Surely you have been in a ZOO staring at that artificial jungle looking for that snake or lizard. You know it’s there — but you just couldn’t find it. And then it moved and no matter where you looked you focused on it almost immediately.

Motion can often be “miracle cure” to help you make users notice something. Our perception, our attention and our eyesight are all connected and it’s not just about what’s visually “strong” but it’s all about what we’re doing at the given moment. There’s an awesome experiment on attention conducted by two psychologists Christopher Chabris and Daniel Simons that’s called “The invisible gorilla” and it shows how intense focusing can make people totally blind to things that they would normally notice in a heartbeat. The study shows how intense focus can make people blind to what they would normally notice in a heartbeat. The scientists produced a video of two teams passing basketballs, one team wearing white, the other wearing black. The viewers were instructed to count the number of passes made by the white team, ignoring the black players. In the middle of the video, a woman dressed as a gorilla passed through the screen for a full 9 seconds. Kind of hard to miss, right? Guess what? Roughly 50% of participants did not see the gorilla. They were so focused on the given task (counting the passes) that their brain stopped gathering any more information. This is called perceptual blindness, a state in which the perceptual load is so heavy that the brain does not notice things in plain sight — yes, even things that you, the UI designer, claim are impossible to miss. Without getting deep into complex psychology, perceptual limitations, mental workload, working memory limitations etc. let’s just place one possible scenario that could happen when user engage in a particular task where perceptual blindness could occur.

Let’s say a person is trying to purchase a blanket on some imaginary webshop. He/she does his/her thing and gets to the checkout where he/she needs to input his/her purchase information. You’ve set up on-the-fly input validation that immediately checks for errors and displays them on top in a stylish manner. What can go wrong at that point? Well….

For some people that are not tech-savvy-done-a-million-online-purchases, placing (reading and typing) that sensitive information is all the cognitive load they can take. They become so focused on getting the numbers from the card right that they actually cannot see that mildly styled error message right above that states “You have not entered the name on the card”. And once they missed it – they just scan through it like it isn’t there! And then frustration kicks in and we all know how that can end. This is example of applied perceptual blindness on checkout process or “losing money” if you’re a webshop owner. And there are a million different situations this can occur. So, what to do? A few things actually (which we’ll cover later on) but simple animation can help a lot. As mentioned at the beginning of this section with that ZOO analogy, eyes (and brain) react to motion because animation breaks the static nature of user interfaces and draws attention — you can bet that everybody would have noticed that gorilla if it opened red smoke grenade. A bit extreme, but you get the point, right?

So, let’s apply this to user interfaces. Want to make sure that users will notice something? Make it move. Let’s be clear, I’m not advocating to create Harlem shake on your interface and destroying performance with a ton of javascript but on key messages use simple, short and mild movement. In most cases — that will do. However, be careful about the duration of the animation. Distance is again an important factor: if an object in near focus zone the 300 millisecond animation is just fine, but for objects that are distant from a focus point I would advise to make the animation just a little bit longer than 900 milliseconds. Why? Well, the average visual reaction to unexpected event is from 600–900 milliseconds, but there’s one more fact that’s worth mentioning — humans blink. Depending on users concentration level blink rate varies from 3 to 50 blinks per minute and average blink speed is about 300–400 milliseconds and this is something you should count in if you want to eliminate the fact that the user can blink and simply overlook that extremely important notification. Be careful though, long animations can make your interface look sluggish and bring a whole new set of perception issues so make sure to test it out before deployment.

On average, a human eye takes between 300 and 400 milliseconds to complete a single blink and 600-900 milliseconds for visual reaction to unexpected event. Make your animations longer then these to ensure that users won’t miss it.

Animations can be useful on drop down menus, information labels, error messages or “add to cart” actions but use it wisely. There’s a thin line between making your interface usable and making it funky.

Squarespace did it perfectly. Squarespace.com

Use recognition to help the brain out even more

“Users perceive what they expect”

Through our lifetime, we have gathered an absurd amount of experience and we have developed instant understanding for some symbols, shapes and colors. You know, arrow usually means movement, exclamation mark usually means warning, red usually means warning as well and so on… That sort of things. Use this human recognition ability to carry your message more clearly throughout your interfaces. If there’s a need to communicate some important message, don’t try to reinvent it — use the things people understand without having to explain it to them! Here’s why…

I apologize in advance for making this next read so trivial but I’m trying to compress the vast knowledge about human psychology and perception in one paragraph of text. I’m sure that you do not want a 48 hour read in front of you.

There’s something called “fast” and “slow” thinking. Nobel Memorial Prize winner Daniel Kahneman wrote a brilliant book about it called “Thinking, Fast and Slow” and even if you are not a UX or UI designer and just stumbled on this article I encourage you to read it. It really is brilliant and an eye-opener on so many levels. Among other things, it contains an excellent explanation of the ways we process and understand information. One way is the “fast” way, by which we interpret information automatically and quickly, with little or no effort; the “slow” way involves effortful thinking and complex mental activities. The designer’s goal is to activate as much fast thinking as possible so that the user perceives the interface as being “easy” and “natural.” Fast thinking is an intuitive way of thinking, and it’s formed by our prior knowledge and practices. We all have it, and it’s stored in our memory and accessed without intention or effort. This is a key reason why familiar objects, colors and signage make for an excellent user experience.

Here’s a simple experiment to help you better understand. Suppose you have a critical message that you want users to notice. Which of the following styles most clearly conveys the importance of this message?

Users will notice right away that this is really important message just by adding a familiar warning symbol and familiar warning colour.

Is there one label that you understand in a heartbeat? You need to read the first two to understand what they’re about, but you know in a microsecond from the familiar warning symbol and color that the third one is communicating some kind of problem. Why is that? There are several things going on here but recall and recognition are key factors. Or brain has a superior level of performance for recall and image recognition compared to word recognition so understanding label or button that combines icon and text is much easier to understand and process. Just make sure to give your users a good reference point so their brains will be able to successfully compare images — stick to the symbols that fit the norm. Creativity and innovation is great but if you’re oriented on usability performance don’t try to reinvent the settings icon — stick with the gear icon, users will probably understand immediately what does this section refers to. And the red color? While keeping a brand’s color consistent throughout a website is important, breaking the branding rules to emphasize the importance of a message like the one above can lead to a much better user experience and make good business sense. Hopefully, this example shows how to bring in that fast thinking, reduce cognitive load and make the user perceive your interface as being intuitive and easy. Needless to say, applying these principles could reduce user errors, reduce server load, minimize frustration, draw more positive feedback from the community and reduce support needs. Simple decisions like this move mountains.

With that in mind, it goes without saying that icons are a great way to trigger fast thinking, but do not use them without textual explanation! Since we’re all so dependent on our experiences, memory, recall and recognition it is only natural to understand that what is self-explanatory and trivial for one person might mean something completely different to someone else. Color is important too. Even simple shape modifications can make you look inside or outside the box. But you already knew that. What I want to emphasize is how understanding and the combination of these ingredients can boost the performance of your e-commerce website, cut down on your support costs, reduce the number of prototype iterations and cut down on usability testing costs.

While keeping the brand identity colors consistent throughout your product is important, disregarding it to emphasize the importance of messages like this one illustrated above can prove a much better UX and business decision. It can reduce user errors and save some server load, reduce frustration and help you receive more positive feedback from the community, reduce support team efforts which will result in a support cost decrease etc. Simple decisions like this one can move mountains.

Okay, let’s summarize all this in four simple points: