Stop, Look, Click: Attention-Grabbing Elements in Web Design

There are many ways of how to grab a user’s attention in web design, from the choice of meaningful words to the placement of images that create an emotional response. We want to explore some website elements that can help do an important job: grabbing the user’s attention.

There have been many studies on attention with very significant results coming from the area of cognitive neuroscience and psychology. It is an interesting challenge to translate those results into the domain of web design and use it as a tool for creating a meaningful impact.

High-impact words

There are some words that will grab the user’s attention more than others. This is highly connected to some hard wired responses that our brain will have reading those words. Words can “turn on” our self-centered mind, imply familiarity or bring us into a state of alert. Words like “you,” “now,” and “free” can draw a modest amount of attention toward them but it always depends on the context and what the user’s intentions or goals are.

Here are a few examples that use the word “YOU” with a close spatial proximity to an action button:

Southtree

myownbike.de

Pulpfingers

Exclusive Reels

Wagner Skis

Kiawah Island

“I want to see more”

How do you grab the attention of a user in such a way that he actually “wants more?” A compelling method is to reveal short pieces of information at a time, giving the possibility of a quick scan and the sensation of “show me more.” One example is the text teaser which will be short enough to fit in seconds of reading.

But we can also think of other “teasers,” little indications that show the user “there is more you might be interested in.”

The Swish Life

A nice example of how to create a text teaser is the article excerpts shown for categories. The text is small which makes the user focus better when he decides to read it and then it is cut off, which creates an interest on what’s more.

District Look Book

Lunch & Recess

Sonic Iceland

The last three examples have some great sliders that reveal part of the next and previous images on the sides.

bixal

This is an outdated website screenshot, but the slider on the Bixal website is another great example: the title being connected to the image of the slider reveals to the user that the other titles will show another image. That makes us curious to see what else there is.

“NOW” is another high-impact word that grabs our attention. Oh, and did you notice which word stands out in the main tagline, right under the logo?

Design for How People Read

Think about how users will interact with your site when planning the design. Place elements in key location on the page to help them get the most attention.

Business Insider showcases a few great examples of how users look at different items online through heat maps. Some of the key findings: People rarely look at banner ads, the top-most and even bottom-most text almost always gets read and people are almost always drawn to faces.

The landmark “Eyetracking the News” study conducted by The Poynter Institute in 2007 yielded even great detail in its findings (which still apply today). The top attention grabbing elements include directionals (navigational tools), graphics or photos, ads and headlines but you only have a fraction of a second to several seconds to grab this attention.

So how do you do it?

Combine big words with high-energy phrasing for impact in type. Use photos with large faces to connect with website users. Place important text and information in key positions on the page and make it big enough (or have enough contrast) to really be seen.

Coderwall

Cafe Evoke

Dewey’s Pizza

Digital Exploration

At the right time in the right place

Placing context-sensitive information at the right place at the right time gives the user the chance to follow his path of interest. An example for that is showing related articles or topics after or next to something that already grabbed the user’s or reader’s attention.

When buying something in an online store, you might notice the product suggestions made during the check-out process in some stores. This is a great example of placing content of interest at the right time.

Amazon.com

New York Times

When you read an article in The New York Times you will notice this slide out box that shows a related article. It’s a perfect example of how to show the right information at the right time and the right place.

Besides, there are some other important principles at work. Only one item is shown, which is very important when trying to grab the attention of the reader, since too many choices can be too much to handle, making the user/reader choose nothing at all.

Making the item slide out will also grab the reader’s attention since something is moving right in front of him. There is no way, this item get’s past the user’s attention.

Color contrast

One of the most obvious ways of getting the website visitor’s attention is color contrast. With the right color theme, a button that is of a contrasting color in comparison to the rest of the page can draw tons of attention to itself.

A very common example is the “call to action” button which can be placed and colored in very attention-grabbing ways.

The importance of balance in the whole color scheme of the website is not to be neglected: Even though the most important button might be in a screaming green does not mean that it will stand out on a website that has five other colors. If those colors are too bright or strong, the green button, even though it’s the only one, will not draw any attention.

Choose colors for your design carefully using principles of the color wheel. Colors that will create the most contrast and drama in a color scheme should be paired from opposite sides of the color wheel – that green button, for example, will really pop when paired with a red. Other opposite pairs on the wheel include yellow and purple and blue and orange.

The other trick to create contrast using color is to pair deeply saturated hues against pale tones or vice versa. A pop of a bright color against a dark background will also work effectively. Or toy using a single pop of color against black and white. Using a group of colors that have the same look and feel – choosing three pastels, for example – will not provide instant impact or tell a user to “look here.”

Wordtracker

Blogger Bake Off

Xero

Unlocking.com

Campaign Monitor

National LGBT Museum

Emotional impact and survival instinct

Sex, food and danger are our hard-wired survival triggers that can make us attentive in an instant. We see it all the time in advertisements and wonder sometimes “What the heck was this ad about?” You just saw some gorgeous pair of… well, whatever, and then you faintly remember the soda can somewhere in the picture. But don’t worry, even if your conscious brain did not get it or even remembers the brand name, you might find yourself in the supermarket one week later buying exactly that soda can.

Also, the impact of emotional information on our perception and decision making process is huge. Evolutionary, this makes sense since such information might be of importance to our survival, especially if it’s threatening.

Allianz.de

This girl doesn’t look too happy, right? Well, she should’t since she’s supposed to create an emotional response of fear (which will ultimately make you believe that you are in the need of an insurance).

On the same website we have a laughing young man with beautiful shining white teeth.

Bulletcatchers

The little frightened girl will definitely catch your eye. This threatening scenario fits well in the context of a company that provides bodyguard services.

Read more

I hope you got inspired with this dive into attention-grabbing elements in web design. There are, of course, many more principles we can apply in web design in order to rise the attention of visitors. You can find some good inspiration and information in the following books and websites:

The Psychology of Attention by Harold E. Pashler
Fundamentals of Cognition by Michael Eysenck
http://www.whatmakesthemclick.net/
The Psychology of Attention
Cognitive Neuroscience – The Biology of the Mind by Michael S. Gazzaniga et al.