Something that is often disregarded when we design for web is that we design for people to use our designs. The concept I want to talk about today is greater than user experience, what I am talking about is the physical restrictions of the human perception. Being aware of the pros and cons of our perception and how our eyes and brain biases us, we can present a more effective designs to our users.
First lets learn the basics on how we see:
A good way to explain it is to think on a photographic camera, there is the iris (the lens) that will adjust to the levels of light, and there is a retina (a sensor or a film). Now we need to understand a little bit better how does our retina work. The retina keep most detail right on the center and it is inaccurate at the edges. For example, in peripheral vision, sometimes the interprets vision when there is none. The interesting thing is that the human visual system makes you "think" you have a clear image of the entire area, this works because at the time something in the peripheral area catch your attention, your eyes point right at it and the specific are turns into focus. The brain makes the work of putting together all these sharp images to display us with a sharper image than what we are actually capturing.
OK, now that this is clear, how does our retina capture the information? There are actually two kinds of captors, cone cells and rod cells. Oyster's textbook (1999) cites work by Curcio et al. (1990) indicating an average close to 4.5 million cone cells and 90 million rod cells in the human retina. There are three kind of cone cells (red, green and blue), therefore humans are trichromats and only one kind of rod cells and that one can only see shades of gray. The cone cells are mostly place on the center of the retina (foveal area) and the rod cells, mostly on the peripheral area of our retina. Also, as you can see we have twenty times more rod cells than cone cells.
Just as a side note, there are two unconfirmed cases of human tetracromats, just imagine how much detail could a tetracromat capture from reality (probably great design doesn't look that great on these peoples' eyes).
Apart of the different shades of gray, the rod cells also capture luminosity of the different areas of the image, this is why our vision is optimized for edge contrast not for brightness. A classic way to show this example is the image 1. You see The stars in the image appear having a different color because their background is different but they are in fact the same.
To conclude this with a more extreme example, image 2, Edward H. Adelson from the MIT, developed an incredible image where the gray colors are the same in different squares of the image. It might seem incredible but those gray colors are exactly the same.
This is one of the reason many web designers convert their key pages into black and white to check contrast to make sure the important calls to action are visible for the human eye.
On the image 2 I show you an example of an old landing page. You can see how the action we want from the users is very clear, and on a second hierarchy level there is the three step process with the illustrations.
We will expand this topic in the future with details on peripheral vision and why do we need to know this when designing for the web.