Oh behave! Understanding how humans behave on websites

Jun 22, 2020 · 4 min read

Designer, Frank Chimero wisely said, ‘people ignore design that ignores people’ . At Orchard, we aways strive for brilliance. We look for ways to surprise end-users; whether it be through novelty, triggering a wry smile or making the experience that little bit more memorable. But to get to brilliance, we need to acquaint ourselves with the basics. We need to understand first, how humans behave on websites before we mess or impress with the rest.

Here is a sample of what we’ve learnt through building websites for the last 13+ years:

Lesson 1: People read in F shaped patterns

Thanks to a study conducted by the Neilsen Norman Group in 2006 where they looked at how 232 users viewed thousands of different web pages. The research concluded that consistently user’s read in an F-pattern layout. So what does this look like in practise you ask?

  • First we read across the top of the page and skim the important headlines
  • Then we read down the left hand side of the page, skimming numerals or bullet points
  • And then lastly we read across the page to read anything in bold text or sub headlines
Source: F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile), Nielsen Norman Group, 2017

Lesson 2: Left to right

It may sound obvious but western cultures commonly read left to right, this is also sometimes referred to as “reading gravity”. Thus, when we design with “reading gravity” or according to the Gutenberg diagram, we ensure that information hierarchy and visual emphasis is considered, based on how users read a website.

Source: Gutenberg diagram

There is a general pattern whereby users give more attention to what is placed in the top left corner, hence why the logo is often located here. And as you design down the page often important visuals and content will be placed in the top right, which is a strong fallow area, whilst the bottom left corner (known as the terminal area), is the place where your eyes take a breather, and most often the location where a call-to-action can be found.

Of course, sometimes we throw caution to the wind, but it is always decent a starting point.

Lesson 3: Don’t make the user think

The godfather of usability Steve Krug had a simple lesson for anyone looking to design a website, don’t make the user think. Generally, people don’t like to puzzle over how to do things . We are innately lazy creatures, I would know, I’m one of them!

If you make finding simple things like information, purchasing a product or contacting a person, difficult - you erode my trust or confidence in your service.

So, when we design, we need to make everything obvious for the user. They shouldn’t have to think about where they will click, as we have directed them there.

Source: Don’t Make Me Think: A common sense approach to web usability , Steve Krug, 2000

Lesson 4: Colour can increase conversions

Colour has the power to delight, calm and even soothe people. And just as we use colour psychology to create a certain mood to a room or a restaurant, so too, can we use colour to increase conversions on a website.

The colour red can be used to create urgency. It is a stimulating colour which means its a great tool when a brand is wanting to promote a clearance sale.

The colour blue is calming and soothing and can be associated with dependability and trustworthiness. Thus you will often see it used by large corporations or government departments where trust is critical to adoption. On the other hand the colour blue can curb appetite appeal , so you will rarely see it used by brands trying to elicit crave.

Orange can elicit excitement thus its often used for call-to-action buttons, white can communicate virtue and is often used by healthcare brands and brown can trigger appetite or feelings of crave and mostly used by quick-service restaurants.

As you can see the use of colour is a critical consideration in web design. It contributes so much more than just aesthetics, it can trigger emotion.

Photo by Anton Darius on Unsplash

Lesson 5 : Know the rules, before you break them

Whilst understanding the conventions of web design is critical, so too is knowing when you can mess with them or push the boundaries.

So, once you’ve designed with human behaviour in mind, go ahead and break a rule. Monitor the change, understand the impact and see if defying a category convention leads to uplift.

As Katherine Hepburn said, ‘if you obey all the rules, you miss all the fun’.

Invent Better is a publication of Orchard

Invent Better

Your daily dose of genius.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store