Translation: David Lee
In an August 2012 study at Google, researchers found that users could judge the beauty of a website’s design within 1/20-1/50 of a second, and that sites with high visual complexity were consistently rated worse than those with simpler design references.
In addition, sites that were highly “prototyped” — that is, those that had a similar layout to similar sites — and were simply designed were voted the most beautiful across the study.
In other words, the study found that the simpler the design, the better.
But… Why is that?
In this article, we will explain why cognitive fluency and visual information processing theory can be decisive factors in simplifying web design, and how simpler design can lead to more transformation in products.
We’ll also look at some examples of sites that have used simple design to see how they’ve increased conversion rates, which will give you some guidance as you try to simplify your design.
What is a prototype site?
If I say “furniture,” what image will pop up in your mind? If you’re like 95% of the population, you think chairs. If I ask what color represents “boy”, you will say “blue”, girl = “pink”, car = car, bird = better bird, etc…
Archetype – the basic image created in your mind when it needs to categorize all the things you have experienced. Whether it’s furniture or a website, your brain creates a template that defines the look and feel of those things.
On the Internet, prototypes are broken down into more subdivided categories. For social networks, e-commerce sites and blogs, there is a completely different but unique image in the brain that describes it… When these unique sites are missing some of the information in the image, consciously or unconsciously, you will reject it.
For example, “an online clothing store for trendy 20-somethings,” you might immediately imagine something like:
These sites are unique and do not copy each other. Instead, they conform to what you’d expect an e-commerce site to look like.
What does cognitive fluency mean?
The basic idea behind cognitive fluency literally is that the brain likes to think of things that are easy to think of…
That’s why you enjoy browsing websites… They follow your instincts, and you naturally know where everything is and what to do next.
“Fluency puts our mind in a state where you can’t even feel it working, and it affects us in any situation when there’s a lot of information to consider.” — Uxmatters.com
Cognitive fluency actually comes from another concept, known as the mere-exposure effect. The basic idea is that the more you expose something to it, the more you like it.
The same principle applies to the Internet.
For example, the options on the right sidebar of a blog are “familiar”, an eye-catching headline with a close-up of a large hd image on an e-commerce site, or the company logo at the top of the left-hand side of the screen.
If visitors to your site are familiar with some of the must-have features of similar sites and think they are the norm, deviating from these criteria can cause them to subconsciously put you in the “not good-looking” category.
Here are some e-commerce sites. See if you can notice any similarities.
Note: However, don’t take what I’ve said as “just do what everyone else does.” If you’re not careful, you could get hurt.
On a similar site, it’s important to know what kind of design is a “prototype,” but it’s even more important to find evidence to support design decisions to improve the final result.
There are plenty of designers who make bad choices. If you don’t do any research, you’re more likely to fall into the same trap. For example, many sites use auto-switching images to display products, but studies have shown that auto-switching reduces conversion rates.
What happens when you confront your basic expectations — a case study
Looking at the three images above, this is pretty much what you would expect from an e-commerce site. Even if you’ve never visited one of these sites, good design gives you a sense of “credibility.”
Because of the high level of flow, a site feels so familiar that visitors don’t have to spend much time examining the entire site and focus on the most important things they have to do.
However, you can sense it right away when the experience isn’t smooth. Visit the online retailer, Skinnyties.com. Their website didn’t look like an e-commerce site until it was redesigned in October 2012.
Revised front:
After the revision:
The treatment of some key points leads to a big difference between the two versions:
Follows the layout theme of the “prototype” e-commerce site
White space makes pages more “open”
A feature shows only one item, and uses high definition pictures and contrasting colors.
Click here for a full case study of the redesign, and as this article shows, it’s entirely possible to upgrade your site while making it better “fit” into common prototyping standards.
The redesign has yielded surprising results after only 2.5 weeks online
The redesign itself was fine, of course, but it wasn’t groundbreaking. It is precisely what people expect from a popular online clothing store. It is “open”, responsive, and uses a common design language across all product pages.
When we compare it to the old page, it’s clear that the lack of these common elements is what keeps users from paying on the old page.
What kind of visual information processing do we go through in the face of complex websites?
Connection of the study subject, by Harvard University, university of Maryland, Colorado state university to complete together, the researchers on the subject, “beautiful” to study the crowd of different district, found the strong and in math is very rigorous evidence – for example, has a doctorate in special fancy website for testers don’t like, of course, If we’re talking about visual appeal to the masses, this isn’t useful.
The only universal truth we can get is that the more visually complex a site is, the less visually appealing it is.
Why is simple information scientifically easier for the brain to process
A large part of the reason that sites with low “visual complexity” are considered more beautiful is that less complex sites don’t require the eyes and brain to compile, store and process this information.
Initially, your retina converts real-world visual information into electrical impulses. These pulses then take specific routes to the corresponding photoreceptors, where light and color information is transmitted to the brain.
The more light and color changes on a page (visually complex), the more the eyes have to do to get information into the brain.
“… The eye receives visual information and then interprets this information into electronic neural activity, which completes the “storage” and “compilation” in the brain. This information can be used by other parts of the brain to correlate with other brain activities such as memory, insight and attention.” – Simplypsychology.org
Each element conveys a subtle message
When designing a website, you must keep in mind that every element — font, logo and color choice — conveys a subtle message about the brand.
When these design elements fail, smug designers try to compensate by adding random elements and graphics, which adds to the visual clutter of the site and contributes to the overall aesthetic.
Optimizing a page by thinking about visual information processing first — especially to simplify the flow of information from the eyes to the brain — requires expressing as much information as possible with as few elements as possible.
While this article is just a case study of their brand’s design, the MailChimp logo is rethinking its redesign.
But you can see that when they decided to grow their brand, they didn’t add something like, “We’ve got 3 million loyal users since we got into email in 2001, that’s why we’re cool.” That sort of thing.
Instead, they kept the font tight, removing the simple “Make emailing better” line from the top of the site’s headline — and adding a terse explanatory animation for the core product.
While this is only part of a massive volume strategy, the results have been stunning, with more than 1 million new users added since the new logo was first introduced in June.
“Temporary Memory” & the Holy Grail of conversion
Because visual information travels to the brain more quickly, we can see the benefits of simplicity.
A famous study by George A Miller, A psychologist at Princeton University, showed that, on average, an adult brain can store between five and nine “heaps” of information, called temporary memories, for A short period of time.
Temporary memory is a part of your brain that stores and processes information temporarily for a short period of time. It’s temporary memory that helps you focus, reduces distractions, and most importantly, guides you to make decisions.
So far, everything we’ve said has been about reducing distractions so that temporary memory can work smoothly.
A “low complexity, high prototyping site” has only a limited amount of content that temporary memory attempts to process, such as quality assurance, product description, price or bid information. Trial and error and problem solving are faster when temporary memory can focus on what really needs to be done.
Small deviations make all the difference
When your site doesn’t match your expectations — the price is higher than expected, the color and alignment are bad, the site doesn’t load fast enough, the photos aren’t high enough — temporary memory processes that information instead of what’s really important.
That’s because temporary memories call up permanent memories and do things in ways we already know. When permanent memory doesn’t provide enough help to process information, the whole process is interrupted and temporary memory takes over to continue the task.
That’s why it’s crucial to understand the exposure level of all content for users of your site — not just sites in your category, but for all web design — if you want to hack their temporary memory with good design.
The blogs they read, the websites they shop on, their browser, age, gender and geographic location, all these clues will affect their first impression of you and how familiar you are.
conclusion
When users can’t rely on past experience to use your site, they don’t see it as innovative. They just walk away, wondering why they didn’t put the messages and buttons “where they should be.” If you want to sell something, this is not the best way to do it.
Bonus: 7 things to do for a clean website
1. Research your users and the sites they use the most. Look for case studies of the changes to the site design described above, and see how those changes helped them make progress on key data.
2. Use these “useful” parts to build a framework for your own website.
3. When you do layout design, follow the rules of cognitive fluency. Put everything where users are used to seeing it.
4. Rely only on your own colors, logos, and fonts to communicate your message clearly and subtly. Don’t add random objects or images unless it communicates to the user what they really care about.
5. Keep it as simple as possible — use one big image instead of a bunch of small ones, one table instead of three — and use white space as much as possible.
6. Double-check, make sure your site meets public expectations for price, beauty, and speed of loading.
7. Remember that “prototyping” doesn’t mean that every part of your site should conform to the rules.
Don’t think of your website as a one-of-a-kind piece of art like a snowflake, think of it as a collection of all the best design.
Your users will love you for it.