How Users Really Perceive Interfaces: Psychological and Biological Approach to User Interfaces.
Part one — Human eyesight, perception and recognition
When designing a web or user interface, designers tend to… Ok, stop. You’ve probably started to think “Oh, another designers-do-this-designers-do-that” article and started to look for more interesting reading. It’s not that kind of an article so stay with me for a few minutes — perhaps it will help you to understand exactly what goes on in the minds of your users when looking at your products. Perhaps it will even help with those fancy business words that seem to show up everywhere these days — conversion, ROI etc… In this article I’ll try to use a bit different approach , the one that contains facts about us — humans.
The Human Eye and the Brain
We can all agree that eyesight is important when “view-ing” interface (LOL, duh) but there’s on more thing to it that’s even more important — the brain. Our brain is actually the processor that interprets all things that enter our eye through pupil, lens and optic nerves and as with any type of processor it has a unique way of interpreting things. What we, the UX designers, need to understand is how to set things up in a way that human brain figures it out in the way we want to.
Ever started analysing about your eyesight? How it really works? There’s this fovea and macula and retina and optical nerves and bunch of other eye parts but let me simplify and sum thing’s up quickly here. There’s a small portion of your eyesight that actually sees sharp image called “foveal vision”. How small? Imagine about 1.5-2 cm circle. The rest of it is peripheral vision which has not so great resolution. And since the peripheral vision has poor resolution our brain “steps in” (between rapid-always-occurring eye movement) and fills out the blanks with our knowledge and expectation and tricks us into thinking that we see sharp-ish. Crazy, right? This is just a simplified explanation of what’s going on in there but if you wish to further explore into the subject there’s a list of excellent references down below.
So basically, there’s no way users can see your entire website at once — not even the half of it. Knowing this is extremely important when building interface elements that relate to each other — CTA buttons with marketing copy, warning and info messages with forms or checkout options. They all need to be close to each other to minimise eye movement and to decrease the chance to end in a blind spot.
There’s no way users can “see” your entire website at once
— not even the half of it.
To understand more how will interface look like to users I have developed a primitive mockup system that mimics what goes on with our eyesight in that split of a second when our foveal vision focuses on something. It’s basically a different set of blur intensity depending on the distance from foveal area and it looks sort of like this.
And here a slow motion of the same screenshot when users scan the page. Even when focused on single item other “sale” items are emphasised just enough to be noticeable in peripheral vision thus increasing the chance for eye detection. MANGO did an excellent job here, key items are well structured and emphasised throughout the entire website.
And here’s a bad example. The screenshot was taken from a Croatian job-listing website. I stumbled on this issue while trying to log in with the wrong password. Can you notice where the error message is before the screen changes? I couldn’t find it at all. After several failed attempts to log in, I just assumed the server had a problem. The “page flick” didn’t help out either; there was no visual cue or reason to look so far away from where my attention was focused.
One could point out a lot of problems here: the lack of cues through iconography (a simple warning icon would have made all the difference), the unclear color associations (the header and some buttons look identical in color) and so on. But distance plays a crucial role here. Putting the error message closer could have been the hint that compelled me to read what it says. Proximity is important, wherever feasible.
So remember, use that proximity Gestalt principle, structure information as “logical units” and keep the relevant information and options in the same unit. This is really important when dealing with complex interfaces with lots and lots of different data. It will ensure less scanning or searching time for users and consequently you will create more usable interface and better user experience.
Yes, proximity is really important. If it can be achieved.
But let’s be fair. When dealing with large amounts of data on not so large canvas — there has to be some compromises. Not everything can be next to each other. What then?
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.
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?
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:
- Think about human eyesight limitations
- Think about human attention limitations — think hard on what are your users doing exactly at any given point and adjust the interface or process accordingly
- Think about human memory and recognition — use visual clues that have a higher “recognition chance”
- Use motion to capture someone's attention — make your most important and crucial elements animated
Obviously, this article just scratches the surface of human biology and psychology of user experience in UI design, but I’m hoping that it will help you out at least a little bit when building your next website or interface.
So, that’s it for my first Medium article. Hope it was worth your time. In my next article I’ll be presenting the users needs, expectations and feelings (Khm, yes. Feelings and emotions.) and we’ll go through basic behavioural patterns when using websites and various interfaces. Thank you.
