Ui design considerations from a biological point of view
We can all agree that eyesight is important when viewing interfaces, but there's on more thing 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 need to understand is how to set things up in a way that human brain figures it out in the way we want to.
There's a small portion of our eyesight that actually sees sharp image called the foveal vision. The view size is about a 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 and fills in the blanks with our knowledge and expectation and tricks us into thinking that we see sharp images. This is just a simplified explanation of what’s going on in there. 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 such as CTA buttons with marketing copy, warning and info messages with forms or checkout options. They all need to be close to each other to minimize eye movement and to decrease the chance to end in a blind spot.
Most of us have been in a zoo staring at that artificial jungle looking for that snake or lizard. We know it’s there but we just don't see. And then it moves and no matter where you looked you focused on it almost immediately. Motion can often help us 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 about what we're doing at the given moment. Christopher Chabris and Daniel Simons ran an experiment called "The invisible gorilla." 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. Almost 50% of participants did not see the gorilla. They were so focused on the given task of counting 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.
Let's apply this to user interfaces. Want to make sure that users will notice something? Make it move. 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 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. Also take into account that 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, long animations can make our interface look sluggish and bring a whole new set of perception issues so make sure to test it out before deployment.
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 too distracting.