Perception is our sensory experience of the world around us. It includes the five senses; touch, sight, smell, taste, and hearing, and also proprioception which allows us to detect changes in body positions and movements.
Web page design greatly affects our perception of the site, and determines whether or not we like it. Shaun Thing wrote an article about five different studies that influence the way web pages today are designed. Here are the summaries and takeaways from each of them:
- Gregory’s visual assumption theory
- Richard Gregory thought that visual perception relies on top-down processing, which is when we form our perceptions from the main idea to the small details, and make the best guess of what we observe based on expectations and previous experiences.
- To apply this to web design, use a meaningful headline to set key expectations, and support visuals with meaningful text.
- Sanocki and Sulman’s Color Relations Experiment
- Similar colors are perceived as pleasant, while contrasting colors are seen as chaotic or bold.
- In four trials, participants were presented with a set of color pattern, and another set to compare to after. Participants were then asked to rate whether patterns were the same or different.
- Found that people remember harmonious, simple color combinations better then contrasting ones.
- To apply this to web design, reduce color on complex content, use harmonious theme color, and use disharmonious colors smartly.
- Binocular rivalry experiment
- Researchers found that when our eyes see two different images at the same location, they compete for dominance until the images converge.
- To apply this to web design, don’t clutter content, use themed icons, and highlight the important points.
- Influence of Typography and Aesthetics of reading
- Researchers found that participants underestimate the amount of time they spend reading when they typography is better, and that they are also more likely to be able to solve problems.
- To apply this to web design, use easy to read font types, space out text and visuals, and place sufficient white space between characters
- Castelhano and Henderson’s Perception of Scene Gist
- Researchers found that people can quickly get the meaning of a normal scene, and color helps us understand scenes better. Colors define the structure of objects, so as long as they are not too off from how we normally perceive a scene, we’ll be able to understand its meaning easily.
To apply this to web design, layout content in proper sequence, and use standard colors on important objects.
The findings from these studies may seem obvious, but that’s because we’re so used to seeing webpages designed the way they are today. However, they weren’t always designed as well as they are now. Check out how these popular sites looked in 1996:
As you can see web page design has come a long way; today it is much more visually appealing.
The internet is full of viral visual perception phenomena, the most well known being ‘the dress.’ Many people have seen a picture of the dress, but few know why the dress is perceived differently by different people. Some see it as black and blue, while others see it as white and gold. In case you’re not familiar with the dress, here’s a picture:
The controversy over the color of the dress started when the mother of a bride took a picture of this dress, the one she was going to wear to her daughter’s wedding. She posted the image on Facebook, where her Facebook friends disagreed on the color of it. Personally, I see white and gold. However many people only see black and blue.
A friend of the bride posted the dress to her Tumblr blog, where it peaked at being viewed at 14,000 times per second. It then quickly spread to Buzzfeed and all other forms of social media. On Twitter, the hashtags #whiteandgold, #blueandblack and #dressgate started trending. Even celebrities like Taylor Swift, Kim Kardashian, and Justin Bieber starting weighing in on what they saw.
The illusion sparked a lot of debate, and neuroscientists and psychologists were asked to explain why not everyone was seeing the same colors in the picture. Eventually the dress was confirmed to be blue with black lace in real life, made by Roman originals. After this fact was discovered, the company’s website experienced a surge in traffic, and the dress sold out after 30 minutes. The company then made a single white and gold dress, which they sold in the Comic Relief Charity Auction.
The explanation of the dress is pretty easy to understand, and it has to do with our perception of light and color. Our perception of color is influenced by the context around it. The lighting in the photo of the dress is ambiguous, causing people to falsely perceive the picture. If the dress is interpreted to be in a shadow, the observer is more likely to see the dress as being gold and white. The opposite is true if the dress is interpreted to be brightly lit; the observer is more likely to see the dress as being black and blue. The difference cannot be seen between white and blue, or black and gold unless we have some independent info about the wavelengths of light illuminating the dress.
The dress may be the most famous illusion on the internet, though it is certainly not the only one. Check out the Lotto-Barnhart illusion:
What color do you think the circled tiles are? I see brown and purple on the top, and orange and white on the side. Believe it or not, the pairs of tiles are actually the same; what looks like orange on the side is the same color as brown tile on top, and the what looks like the white tile on the side is actually the same color as the purple tile seen on top. Since the two side tiles on the side are perceived to be in a shadow, our brains unconsciously adjust for the darkness and the tiles appear orange and white, just like how our brains adjust the image in the dress picture.
Another similar illusion is the Adelson Checkerboard Illusion:
Tile A looks grey, while tile B looks white. In reality, they are both grey. A shadow is cast over tile B, and again our eyes adjust and we perceive the tile to be white. If you look at the tiles side by side, you will see that they are actually the same shade of grey, demonstrating the same principle that is seen with the dress.
Many people today worry that the internet is making us distracted and rewiring our brains, but Professor Gernsbacher sets the record straight in her in her lecture on the topic, making the following points:
- Every technological invention has been feared to distract our attention and ruin our memories, if not morals.
- It’s true that everything we do affects our brains, but it’s unlikely that the internet is rewiring our brains.
- There’s no scientific evidence that our attention spans have changed over the past several decades.
- Specific efforts to train attention usually results in only specific gains on the specific skill being trained.
- Other human inventions such as reading (which has been around considerably longer) have not rewired the human brain.
- Millennials are no better at multitasking than baby boomers, millennials are simply better at many single tasks.
- People who think they are good at multitasking usually aren’t.
- The more similar two tasks are, the more difficult they are to do together.
- Texting and walking both require visual attention which is why they are not good candidates for multitasking.
- Texting and driving are even worse candidates for multitasking.
- Taking short, controlled breaks on the internet doesn’t harm attention, but actually improves it.