Invent Better
Published in

Invent Better

Oh behave! Understanding how humans behave on websites

Photo by John Schnobrich on Unsplash

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




Brought to you by Orchard: Creating Customer Experiences for a Modern World.

Recommended from Medium

The bigger picture of products and services

Creativity for Healthcare Professionals: The Summit Board

What's My Biggest Inspiration

Top Mistakes To Avoid During Responsive Web Design

E-Commerce Store — Bicycles

How to conduct In-Person Safe research during the COVID-19 Pandemic in Kenya.

Artist Interview: Jakub Kowalczyk

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


A creative and technology business based in Sydney & New York. Blending creative & technology to invent better outcomes that make a difference.

More from Medium

Deceptive design for online purchases — human-centered design process

Beyond Points — Learning from Game Development from a Service Design Perspective

A guide to running a great ideation workshop for UX Designers

Service design for smarter planning — The importance of putting the user first