Peripheral vision in web
Valentine Boyev
CEO at Halo Lab ? Helped 500+ companies to raise ??revenue and investments through digital design and marketing → $500M+ in client total funding
Did you know that humans have two kinds of eyesight: central and peripheral? With central vision, everything is clear — we use it to look closely and distinguish details. But peripheral vision covers the rest of the visible field in a 180-degree range. And it's important to understand that we get most of our information about the world around us from our peripheral vision. It can easily be tested. Ask someone to stand at your side and show you a certain number of fingers, and you try to guess. Then switch and take a moment to point your middle finger in response. In a nutshell, the task of peripheral vision is to detect approaching danger. And I'm thinking now: how could you augment your vision to provide a 360-degree view angle like a horse!
Now imagine that there are people who have no peripheral vision at all. This condition is called tunnel vision. How's that? Take a piece of paper, twist it up and look through it like a tube. That's how they see. People with this syndrome very often twist their heads around, and they have trouble navigating in space.
And you're going to ask me, "Val, what are the scary things? Where's the design?" And we're going to try to combine these two topics somehow.
Think back to your behavior on news and information sites when you're browsing cursorily through a page and clicking in the points of interest — an article or a picture. Or when you endlessly scroll through Instagram or Facebook and out of the corner of your eye see who posted it by their avatar. In this process of scanning the page, two types of vision - central and peripheral - are always involved in parallel. And yes, reading news from a laptop or tablet indirectly consumes more information than from a phone due to the larger screen. But lying around with your phone is undoubtedly much more enjoyable.
We focus on what the eye sees (yes, not the eyes, central vision can read with one eye as well: you just need to shift the center and turn your head 5-10 degrees) and overload the brain with additional information. Just think, a person needs 7-10 seconds to assess the context and form an impression. There are many cases on the Internet where you can see A / B tests based on eye-tracking soft, and I just really like to periodically look through these "was-still" pictures mixed with pumped abs.
I now understand why all the essential popups pop up in the middle of the screen, how cool yellow color works, and what advantageous position animated banners took on the periphery.
A few facts I gathered from the Internet and books:
?? Looking at a computer screen, people engage their peripheral vision and usually decide which page to stop on based on the first impression their peripheral vision gives them.
?? While the middle part of the screen is vital for central vision, you shouldn't ignore what's around the edges. Make sure the information on the periphery is relevant to the purpose of the web page or site.
?? If you want users to focus on the central part of the screen, don't use animations or flashing elements on the periphery.
?? Central vision focuses better on details and colors but requires more light to work correctly. Peripheral vision can adapt better to lower light levels and is more sensitive to movement and brightness changes.
?? The human field of vision is approximately 170-180 degrees. Peripheral vision is about 100 degrees of that field (50 degrees each way from central vision).
?? Athletes always use their peripheral vision to see the positioning of players around them.
?? A chess player focuses on a particular square but sees the entire board with peripheral vision.
?? We instantly sense danger with our peripheral vision, such as a car on the road.
?? Peripheral vision helps us see at night.
And lastly, a remarkable phrase: "The eyes look, but the brain sees."