Instant Attention in Web Design

Humans are pretty judgemental creatures when you think about it. We often get impressions from people and make snappy judgements or draw stereotypes in all sorts of cases. This effect of human behaviour is just as prevalent on the web as it is in the real world (or on TV). As people visit a site for the first time, we are immediately drawn to certain areas of the screen, sometimes as a matter of impact, other times as a consequence of size or distinction. Because first impressions are central in helping people judge your site’s usefulness, we therefore need to make an immediate impact!

This article will examine how some beautiful sites get that spark of attention from users, why it’s worth giving your site a central focus point, and more importantly, how our attention is not always limited to that first glance. We often give sites the benefit of the doubt, in the hope that valuable data can be drawn from not so pretty sites. First impressions in design are important as we only get to experience them once, as designers it’s about time we made the most out of this valuable asset.

Instant Attention in Web Design

The Zero, One & Five Second Rules (of Attention)

When we talk about the rules of attention as people first visit your website, the three most popular theories are that of the zero, one and five second rules. The zero second rule applies to subconscious decision making and mental processing we undergo instinctive reactions, the one second rule holds in the immediate reaction we have to content post processing judgements we draw from memory and other factors and the final rule the five second rule relates to the average amount of time it takes for us to make a snappy judgement, taking into account our ability to cement our perspectives.

The Zero, One & Five Second Rules (of Attention)

Figure 1: The rules of attention are quite simple. You need to be fast to make an impact on users.

The “zero second rule” is one of the most primordial and quirky aspects of behaviour. It’s also a form of reactive processing that we have little control over and can’t train our users out of (as designers). As an evolved species, humans have instinctive reactions known in psychology as the fight or flight mechanism which has an impact on our everyday lives. On the web, this hardwired mechanism in our brains is never more active than when we attempt to browse a site. Cluttered sites have particular challenges in gaining attention more so because we have to as users determine whether to fight through the junk, or to run away and look for a better source via the back button.

Zero Second Rule

Figure 2: A cluttered layout can act like a twister, blowing a user’s attention all over the place.

Whether we intend to our not, our actions on the web and how we position objects on the page manifest these fight or flight reactions upon users. If there’s too much clutter, users may fail to see important information and deem the site unnecessary (or too much hard work). If violent colors are used and annoying flashing or animation occurs, our brain’s automated response is to dodge the effect. Regarding gaining the attention our sites deserve, we all know that there’s a balance of which too much or too little effort can lower usability. Sites that work hard to fix the users eyes in all of the right places and grab that instantaneous attention that leads to decisions get the best results.

In comparison, the “one second rule” actually differs because in preference to leveraging the primal behaviour of users, the main trigger of post subconscious determination is memory both active in the short term and long term status). We all know that certain colors, visuals and words can bring us a whole range of emotions and thoughts based on our experiences this is another psychological aspect pertaining to nature verses nurture. Sites that draw upon emotion and experience to give off that sense of nostalgia or impact to words through humor or context may gain a similar advantage.

Momentoapp
Sites which try to emulate a “real world” feeling or context become more memorable.

Momentoapp

With the one second rule, the way in which we leverage attention is slightly more focused on the individual subjective reactions a user may have. People like to feel trusted and draw this from brand awareness, recognising trends and feeling like they are in control of their journey. Interestingly, this rule can draw consequence from the zero second rule in that if (for example) we provide users with too many choices, the fight or flight mechanism kicks in, but when too few are given, our users feel alienation which affects behaviour differently. It’s one big domino effect we need to account for!

Finally there is the accumulation of this domino effect, the five second rule, in which the mental processes have taken place, the memory has drawn positive or negative reactions to the content on the page, and our users have to work from this knowledge to determine if the page is right for them. The five second rule effectively calculates that we have this amount of time to attract the user and gain their recognition to keep browsing further, if we cannot overcome in-place barriers, we fail.

Zendesk
Zendesk

With all of these rules in effect, we designers need to let users know what our sites are about and to indicate that they are in the right place in a very short space of time. Increasingly, users are reading less and less relying on scanning or these snap judgements and thus making an instant impression gives your work an advantage in helping users avoid wasting time or hitting the back button. Trends on the web also seem to back up this perspective. Many sites have small blurbs or less content per page perhaps even some kind of overview or declaration to aid immediate readability concerns.

Draw Attention and First Impressions

The first method to ensure that your site meets these rules of attention is (of course) drawing user attention to a single focal point of the page and gaining that first impression in a positive manner. Avoiding clutter that may distract or confuse is the order of the day, calls to action are welcome and those introductory messages that explain what’s going on are also welcome. Whether it’s something a bit comical, a well designed logo or just an immediately obvious feature, getting the user to pay attention from the offset has become a challenge, and many succeed using clever “set pieces”.

Glitch
Glitch makes use of a tangible woodland theme, animated characters and glowing text.

Glitch

Versionsapp
The guys at Sofa use striking imagery with large bold text to reinforce the apps branding.

Versionsapp

Yaronschoen
Reinforcing your message with some clever wording evokes a sense of emotional inclusion.

Yaronschoen

A site that looks professional, draws from positive experiences and meets user needs.

Direct Actions to Avoid Illusions

Once you’ve gained their attention, to ensure that a user is invested in the experience, it pays to have them undertake an action and get involved in the process of using what you offer. Reading a lengthy document isn’t traditionally the best route to accomplish this as it demands that users dive in at the deep end from the offset. Clicking links and navigation is a very basic way to instigate action and having clever functionality aids the process (as long as you ensure that mistakes aren’t punished in addition to ensuring the act helps the user, rather than hinders them). This action helps to cement the site in their memory and can lead to positive impressions (it’s about being unique and useful).

20thingsilearned
Google takes its users on a unique journey by providing a page turning effect on links.

20thingsilearned

Zennaware
Cornerstone reinforces their logo with calls to action for both downloads and purchases.

Zennaware

37signals
37Signals proves that if you map your links out correctly, it’s easy to browse a site.

37signals

Short, Snappy and Dark Detailing

While actions are helpful to defining a journey through a site, and helping the user accomplish their set goals (which is what most adults use the web for), the use of actions to invest the user into the experience is only one part of the process. You can have them click and be wowed with useful stuff all you like, but if the content or result of the feature doesn’t help them, it may as well not exist. All content within the experience should aim to be short, snappy and free of complications. How many of us refuse to read a license agreement? Most of us, why? Because it causes information overload!

Youzee
Youzee uses a mixture of large images, scrolling effects and icons to grab attention.

Youzee

Defaulterror
Default Error doesn’t waste time - it just links straight to this person’s social profiles.

Defaulterror

Awesomejs
Hover effects help this website avoid littering its interface with heavy content.

Awesomejs

Return Visits and Clever Effects

Once the first impression has been made with users, never forget that while first impressions can make a real difference, they aren’t the end of the story. As visitors return to your site, it’s important to keep that sense of excitement and discovery alive. While fresh content is critical in ensuring that this occurs, many designers go out of their way to give an experience clever effects that either take place in the first instance (inspiring people to revisit the effect) or with an effect that may change once users come to approach the site again in the future (think of it as a memory refresh trick).

Seufelipe
Seu Felipe’s design changes its back colors upon each visit to retain its uniqueness.

Seufelipe

Group
Go Up reinforces its brand name with a stunning and unique parallax scrolling effect.

Group

Benthebodyguard
By blending a cartoon and scrolling effect, this site certainly has a unique selling point.

Benthebodyguard

Make Your Mark and Make it Count

Examine your own site and see how you can better the situation for users. Perhaps you could reduce the amount of fluff on the homepage or landing page, increase the amount of visuals which attract younger users (and help older users memorise complex ideas), or you could simply bait the users’ attention by giving them a visual or block of text which really impacts their emotional, or memory state (such as using humor, relatable quotes, clever wording or a well formed, meaningful message).
Getting the user’s attention is a complicated affair, every user comes with their own experiences and preconceptions of our work. Ensuring that your site is branded effectively and portrays your work to the best extent possible is critical to being a better designer. Users want to have a fun, engaging and useful experience, and if we take the time to understand their needs and fulfil their immediate need for attention, making this a reality. Impressions are instant so it’s up to us to ensure they’re positive!

Questions

How do you make an impression on your site? How do you maximize the available space within the viewport? What sites do you think do a wonderful attention grabbing job? Let us know in the comments and share your experiences of making the best first impression with website visitors!