This week was insightful, learning though the CXL Institute.

When it comes to capturing an audiences attention, we can go back over thousands of years, to get to the point that we’re at today, the human brain has evolved systems and processes for deciding what’s worth paying attention to, and what’s not. These processes occur in a matter of milliseconds. If you can understand what these processes are, you can apply them to your own site. When you gain someone’s attention, you open the door for a meaningful impression. Gaining and maintaining attention are two separate tasks.

Failing to grab attention is your fault, not the users’ lack of interest.
It’s your job to grab site visitors’ attention and keep it. From a physiological and theoretical standpoint, know that oxytocin is in correlation with first impressions. Oxytocin, is often referred to as the “love hormone”, it is the hormone responsible for building trust in all relationships.

When it comes to first impressions, research suggests that this is more powerful than actual facts and are formed within a matter of .05 seconds. In the ecommerce world, first impressions are formed when a visitor sees your website for the first time. Every page on your site should be designed with this fact in mind.

The are four factors that influence first impressions on a website:

1. Visual Design

Researchers analyzed how different design and information content factors influence trust of online health sites. The studies performed showed clearly that the look and feel of the website is the main driver of first impressions. Of all the feedback the test participants gave, 94% was about design (complex, busy layout, lack of navigation aids, boring web design especially use of color, pop up adverts, slow introductions to site, small print, too much text, corporate look and feel, poor search facilities). Only 6% of the feedback was about the actual content. Visual appeal and website navigation had by far the biggest influence on people’s first impressions of the site.

At the same time, poor interface design was particularly associated with rapid rejection and mistrust of a website. When participants did not like some aspect of the design, the whole website was often not explored further than the homepage and was not considered suitable. Recently Google has confirmed the power of .05 seconds for first impressions in their own research. In fact, according to their study some opinions develop even within 17 ms (though the effect was less pronounced on some design factors).

The key findings from their study were that websites with low visual complexity and high prototypicality (how representative a design looks for a certain category of websites) were perceived as highly appealing. Your site’s design should be simple and familiar (follow conventions — e.g. people have a fixed idea what an e-commerce site should be like). If you go for innovative, unconventional layouts — people are less likely to like them.

2. Your Value Proposition

A value proposition tells the customer who you are, what you do, and why you’re better than the rest in a sentence or two. Typically part of the above the fold on a homepage, it’s likely that your value proposition influences many first impressions of your site. How to structure a solid value prop: Headline: State the end-benefit of your offering in 1 short sentence. You can mention the product and/or the customer. Make it an attention grabber. Sub-headline or a 2–3 sentence paragraph: A specific explanation of what you do/offer, for whom, and why is it useful. 3 bullet points: List the key benefits or features. Visual: Images communicate much faster than words. Show the product, the hero shot or an image reinforcing your main message.

What makes a really good value proposition?

  • Clarity. The message could not possibly be misinterpreted.
  • It communicates the concrete results a customer will get from purchasing and using your products and/or services.
  • It says how it’s different or better than the competitor’s offer.
  • It avoids hype (like ‘never seen before amazing miracle product’), superlatives (‘best’) and business jargon (‘value-added interactions’).
  • It can be read and understood in about 5 seconds.

3. Compelling Imagery and Graphics

This aspect is related to, and a subset of, visual design (factor one). Unless the design of your site is extremely minimalistic, it’s likely that you’ve got images on it. These can include product photos, photos of people, logos, etc. The following recommendations should be applied when deciding which images to use on your own site in order to maximize first impressions:

  • All images and graphics should complement the nature of your product. If you’re selling to an older audience, photos of teenagers on your site will be downright confusing.
  • When using images of people, they should be smiling. If the person is next to copy, they should be looking towards it. This is a natural visual cue that directs users’ eyes towards the copy.
  • Don’t go overboard. The goal is for visitors to see what’s essential and nothing more. Anything other than those essentials is a distraction. If you’re having trouble deciding whether or not to include some graphic, chances are you shouldn’t.
  • Go for professional pictures. Whether product photos, background images, or some other type of graphic, don’t settle for a low-quality image. They scream “don’t trust me”.

4. A personal “touch” that exudes trustworthiness.

People want to buy from people, preferably people like themselves. Therefore, you should use simple, common language, avoid cheesy stock photos, use photos of realistic-looking people.

Cognitive Load

Cognitive load is the amount of mental energy that is required to process something, in this case your website. By minimizing cognitive load (and therefore avoiding cognitive overload), you can maintain users’ attention span, ultimately allowing them to browse your site and hopefully make a purchase before getting overwhelmed and abandoning ship.

What is Cognitive Load?

Factors that make learning harder or distract us from the information we’re trying to pay attention to increase cognitive load. Examples range from rotating carousels that rotate too quickly, distracting/irrelevant graphics, confusing copywriting, an unclear value proposition, or poor navigation. The list goes on. Simply put, cognitive load makes things harder for your potential customers and therefore, for yourself.

History of Cognitive Load

Cognitive load theory was first outlined in 1988 by John Sweller, an educational psychologist at the University of New South Wales, Australia. Sweller built on the working model of memory, which proposed that long-term memories develop when auditory and visual information is processed (or rehearsed) to a greater degree than other everyday observations. Sweller believed that, as a result of higher cognitive load, a stimulus is more difficult to pay attention to, rehearse and remember, making learning less effective. John Sweller and other researchers have identified ways in which cognitive load can be reduced in a learning environment using more effective teaching methods, thus encouraging the formation of new memories.

Different Forms of Cognitive Load

First, is the intrinsic cognitive load. This type of cognitive load refers to the complexity of the information at hand. The load exerted on a learner depends on the how complex the task or concept being presented is, and a learner’s ability to understand the new information. Building a rocket ship is harder than building a bird house.

This type of cognitive load is, by nature, impossible to eliminate: you will always find a difficult, new activity (e.g. solving a complex equation) more challenging than a simple task (e.g. adding two small numbers together). However, cognitive load can be significantly reduced by breaking information down into small, simple, clear steps. Instead of feeling overwhelmed by the seemingly impossible task at hand, the learner takes steps in a clear direction that lead them towards the goal.

Next, is extraneous cognitive load. Extraneous cognitive load is produced by the demands imposed on learners by the teacher, or the instructions that they are asked to follow. This type of cognitive load is increased by ineffective teaching methods, which unintentionally misdirect students with distracting information or make a task more complex than it needs to be. Effective presentation methods reduce cognitive load, allowing the learner to stay focused on their mission, whether that be learning anatomy or deciding which pricing plan to go with.

Some types of information are more easily understood when illustrated in a diagram than via written instruction. The rotation of the moon as it orbits the earth, a relatively abstract idea to comprehend, is made simple when demonstrated visually, using a model of the solar system or a video. The visual presentation of concepts such as the solar system means that a learner doesn’t have to retain ideas explained early on in a paragraph in order to understand the final sentence. Instead, they can be referenced simply by looking at the illustration and no extraneous information needs to be filtered out.

Next, is the Germane Cognitive Load. This third type of cognitive load is produced by the construction of schemas and is considered to be desirable, as it assists in learning new skills and other information. A schema is a developed framework of an idea or object that tells us what to expect when we encounter it in the future. Schemas allow us to identify and differentiate between objects in the world. We use schemas constantly. We form schemas for people, household objects and ‘script’ schemas for routines and events such as our morning routine, as well as schemas for particular ‘roles’ that we find people enacting, which tell us what kind of behavior to expect from them.

When a stranger approaches you on a city street, your mental schemas tell you whether this person will be asking you for directions to the nearest tourist attraction, or for spare change. As a more relevant example, we all have (probably similar) schemas for what a trustworthy website looks like, versus a less trustworthy one.

We have schemas for products, websites, and all the other things that we now use on a daily basis. To provide positive user experiences, it is important to consider the expectations or schemas users bring with them when they are using your products. Otherwise, people must maintain a higher-than-usual level of attention and concentration when using products, to ensure their prior experience does not inhibit or negatively impact on their current experience. source

How Distracting are Banner Advertisements on Home Pages? A Case Study
We were recently asked about the effects of ads on website clarity and visitor perceptions. This first study explores ad distraction by looking at the effects of banner ads on message communication, performing five-second tests on the same site with increasing numbers of ads. A follow-up test will look for differences in user perceptions in a case study between internal promotions vs. third-party advertisements.

If a website homepage is cluttered with irrelevant information, first-time visitors may become distracted or overwhelmed. More time is spent trying to simply figure out the purpose of a site and, if the page is confusing enough, visitors will abandon a website when this task becomes too difficult. This issue can lead to short and long-term decreases in sales.

Do advertisements count as “clutter”? Do ads actively distract users and detract from their initial understanding of a site?

This study attempts to get actual data on how distracting ads can be. As always, we recommend considering the limitations of this study, predominantly that the specific ads/brands we tested may have played a major factor in this test.

Study Report
Data Collection Methods and Operations:
We tested the existing homepage of Colonial Candle because, while offering one clear product (Candles), the homepage doesn’t instantly communicate this product except in the name. Additionally, the company is not widely known enough that participants would immediately recognize the brand.

Participants — Using, we ran five-second tests on 1200 participants (400/variation).

Participants had five seconds to observe the website homepage.

Here are the variations tested where you can see the addition of banner ads:

1 banner ad

2 banner ads

3 banner ads
The site’s purpose was more apparent than we expected. When asked, “what is this website selling?” 66% of respondents mentioned candles (though there were a lot of “Candles?”).

We found that adding banner ads significantly decreased the percentage of correct responses [X2 (2, N=1200) = 6.774, p-value = 0.034]. However, there was only a difference between the first variation with one ad (71% correct response), and the other two (63% for the two ads & 64% for the three ad variation).

Key Takeaways: While it’s not a very surprising discovery, these results do provide data supporting the idea that advertisements on a website homepage are clutter and interfere with first-time visitors’ initial and immediate understanding of the site’s purpose.

If we had designed our treatments so that the large Mercedes ad was the third, final ad, the results may have been different. Instead, it was the second ad shown, while the third ad was another smaller, less noticeable one. This attention-grabbing ad likely contributed to the small differences between correct responses for variations two and three. This also means that the large Mercedes ad was especially distracting.

The specific ads that we tested are a factor as well. Ideally, we’d replicate this study with lots of different types of ads in different places while maintaining the amount of change in ‘real estate’ used. Colors, brands, and position might play a part in the overall distraction of an ad. We’ll look to do this in a subsequent test.

The website we tested (Colonial Candles) also has an impact here. While we chose this site for specific reasons (see methods), the results don’t directly apply to other verticals or site layouts. For instance, if the site had a huge graphic saying “100s OF CANDLES”, it’s likely that more participants would’ve understood what the site was selling within five seconds. If the site was more nuanced and sold many different products, participants may have had a more difficult time discerning what the site was selling.