How to Create Compellingly Simple Websites

Paul Boag

We need to create compellingly simple websites if we are to have any hope of engaging people. Users are almost always distracted when using our site.

We are horrendous at multitasking, yet we rarely give anything our full attention. Using the web is no exception.

We are almost always surrounded by distractions, from a busy work environment to children demanding our attention at home. Also increasingly we are accessing sites while out and about; walking down a street, sitting on a bus or in a snatched moment while waiting for our Starbucks order.

As I covered in my last post, all of these distractions add to our cognitive load, which in turn undermines our ability to use a website. That means we need to keep our sites as simple to use as possible. But how?

How do we simplify to create compellingly simple websites? How do we focus users on what we want them to do? The most obvious starting point is to reduce distractions.

Simple Websites Reduce Clutter

If you have read my post on cognitive load, you will know how quickly distractions can reduce the chance of somebody spotting a call to action. Every element on your site has the potential of distracting users from what matters.

Of course, some page elements are crucial for convincing users to complete a call to action. Otherwise, most sites would contain nothing more than a colossal ‘buy now’ button. But, equally, many websites are full of page elements that don’t significantly help move the user towards your ultimate goal.

To fix this problem, organisations need to adopt a new mindset to their websites and implement a rigorous process for reducing clutter.

Organisations need to implement a rigorous process for reducing clutter.

For a long time organisations have had the wrong attitude towards websites. Because the cost of publishing a page online is zero (outside of labour costs) companies have adopted a somewhat cavalier attitude to online content, posting large amounts of copy on the premise that somebody might find it useful.

The problem is that the more content we publish online, the more content users have to process, and the higher the likelihood they miss what matters.

That is why our mindset needs to change. If we want to improve conversion, we must make every UI element and piece of content justify its inclusion. Instead of our mantra being “why not publish this” it needs to become “why publish this”.

To implement this new attitude, it will be necessary to adopt a three-stage review process for every element you publish online. That involves answering three questions:

  1. Can I remove this?
  2. Can I hide this?
  3. Can I shrink this?

That begins with the question “can I remove this?

1. Remove Clutter

For each element on our website we need to ask, “what would happen if we removed this?” If the consequences of doing so are low, then it makes sense to remove the item from the site. If the answer is, “we don’t know” then remove it and monitor what happens.

That kind of monitoring should be a critical part of running any website, and is something I cover in my post on conversion rate optimisation.

Waitroses homepage.
Yes, a royal endorsement does add credibility to Waitrose, but it also distracts from the site navigation and clutters the interface. It could be removed.

If removing a particular screen element will have a damaging impact on the business and yet the feature is not directly related to your call to action, you should ask the second question – “Can I hide this?

2. Hide Secondary Content

Some of the content on our websites is aimed at a secondary audience or exists because of some legal requirement. Material of this nature has to be online but is not particularly helpful in creating simple websites.

One way of preventing this content from distracting users is to hide it in some way. That might mean placing it lower in the site’s information architecture or hiding it under a tab or concertina. Whatever the solution, the aim is to prevent it from increasing the user’s cognitive load.

Tescos navigation simplified.
Tescos could potentially simplify their navigation by hiding less popular categories under a more option.

But even hiding some content can prove damaging. Content that informs the decision-making process, but is a secondary consideration. In these cases, we should ask our third question – “Can I shrink this?

3. Shrink Supporting Elements

If we cannot remove or hide content, we can at least visually shrink it in comparison to more important content. That makes it clear to the user that this content is secondary and creates an impression of simplicity.

Visually shrinking content does not necessarily equate to making it smaller, although that indeed works. Choice of colour and position on the page also help to deemphasise content as I explore in my post on designing calls to action.

Shrinking content in this way is effectively a method of creating a visual hierarchy on a page. That is a useful technique when creating simple websites.

An example of creating simple websites using strong hierachy.
A strong visual hierarchy is an effective way of create simple websites.

Simple Websites Have an Obvious Hierarchy

Creating an obvious visual hierarchy on a webpage helps the user to see other glance which screen elements are essential and which are not. That reduces cognitive load and so simplifies the experience.

Creating this kind of visual hierarchy is second nature to most designers, but the need for structure is not limited to user interface elements. We also need it in our messaging.

Hierarchy of Messaging

It can be challenging to provide a user with all the information they need about your product or service without overwhelming them. We often have far more to say than a typical user is willing to read. The result is long pages of copy with no way for a user to quickly parse that information.

By establishing a hierarchy in our messaging, we help the user to identify the most important things they need to know, while still providing them access to the secondary content.

Typically this is done by breaking copy into headings, subheadings, lists and pull out quotes. That allows users to quickly glance at a page of text and understand the key messaging by just reading titles and pull outs. If one of those messages grabs their attention, they can drill into more detail by reading the content within that section.

We can also further help the user spot critical messages by ensuring that we emphases them early on the page and indeed the site as a whole. Too often crucial information is either buried too deeply in a website or not addressed at the beginning of the copy.

Regarding what the hierarchy of the messaging should be, the emphases should always be on what the user wants to know, rather than what we want to say. There may be a unique selling point that helps sales, but you first need to address any questions the user has if you want them to be receptive to hearing that message.

By structuring messaging, you will create an impression of ease and simplicity that will improve the chance of users spotting what matters. The problem is that we are not always clear in our minds of what does matter. That is where a hierarchy in our calls to action becomes essential.

Hierarchy in Calls to Actions

When working on a website on a long-term basis, it is often easy to lose perspective as we concentrate so hard on one challenge that we overlook the bigger picture. That can negatively impact the simplicity of a site as we end up sending users mixed messages about what we want them to do.

For example, it is not unusual to encounter a website that has so many competing calls to action that the experience is overwhelming. The site is pushing users to buy a product, while at the same time encouraging them to sign up to a newsletter or share on social media. That undermines the effectiveness of any individual call to action and also the sense of ease and simplicity.

The solution to this problem is for organisations to be very clear about what they want users to do and when. There needs to be a clear hierarchy in the calls to action so that the site can be designed to guide, rather than confuse users.

For example, a large lightbox overlay asking users to sign up to a newsletter gives the impression that this is more important than users purchasing your product or service.

Overlays for newsletter sign up give users the impression this is the primary call to action when often it is not.

Knowing what calls to action are relevant when, requires a strong understanding of the user’s journey, a subject I cover in my post on customer journey mapping. But for now, all you need to take away is that you need to communicate what you want users to do at any one time if you’re going to create a sense of simplicity and reduce cognitive load.

But we should consider also our sites responsiveness if we want to make it feel simple.

Simple Websites Provide Instant Feedback

Have you ever clicked on a link or a button online and wondered whether it worked? Nothing seemed to happen, and you are left thinking you did something wrong. Or have you ever endured a slow loading site where you have to wait while each page refreshes? Neither of these scenarios leaves you feeling a sense of ease or simplicity.

Responsiveness has a significant impact on perceived simplicity and the creation of simple websites. It is also one of the reasons why users routinely abandon slow sites.

In fact, according to Bing, a 2-second delay in load time will lead in average to:

  • 4.3% loss in revenue per visitor.
  • 3.75% reduction in clicks.
  • 1.8% drop off in queries.

Other research suggests that nearly half of users expect a site to load in 2 seconds or less. They are also likely to abandon a website that hasn’t loaded within 3 seconds.

79% of users shopping online won’t return to a site and buy again if they experience issues with performance. In fact, 44% of them will go on to share that bad experience with friends.

Performance is a critical factor in how simple a website feels.

In short, performance (or at least the sense of speed) matters enormously to users. Slow sites feel hard to use and that increases cognitive load, encouraging them to abandon the site.

Despite these figures, and even the fact that Google penalises poorly performing websites, companies routinely under-invest in performance.

If we want to create findable, simple websites we need to prioritise performance. That means:

  • Reducing image size.
  • Limiting the number of web fonts.
  • Optimising CSS and Javascript.
  • Investing in a content delivery network

And a whole load of other technical techniques I won’t get into here.

Admittedly you will feel like you spend a lot of money for a difference that you cannot see, but users will feel the difference and when it comes to creating simple websites, perception matter.

Another way to create a feeling of simplicity is to ensure you conform with expectations.

Simple Websites Support Design Axioms

As I said in my post on cognitive load, if users have come to expect specific user interface patterns, because they have seen them across multiple sites, you should think carefully before deviating from that. These expectations are referred to by Joe Leech as design axioms. They include expectations such as:

  • The way site search will work.
  • The icon associated with a shopping cart.
  • The position of navigation.
  • The location of login.

It is not enough to tell yourself people know your site is different. That is because of our weakness in remembering facts.

To deal with this shortcoming in our capability, we use mnemonics. That is to say; we break down the fact we are trying to recall into a process or system. For example, in the UK, we use a mnemonic to remember the points on a compass (“never eat shredded wheat”). We find it easier to remember the saying rather than the fact. Psychologists call that procedural knowledge, and we use it all the time on a website.

Take for example searching on a website. We don’t remember the location of every search box on every site. Instead, we have a procedure that usually provides results:

  1. Go to the top right of the page.
  2. Look for an input field.
  3. Enter our search query.
  4. Press the button next to the field.

If the site doesn’t conform to that procedure, then the user faces more cognitive load as they are forced to search for the right approach. That is why we should avoid breaking with normal conventions if we wish to create simple websites.

However, there is one more way we can simplify the experience; we can group related content.

It is a simple thing, but one that is incredibly effective and yet so often ignored. Grouping related content in your user interface makes it significantly easier for people to process and thus creates a sense of simplicity.

Navigation is an excellent example of the need for this. I often come across sites that have navigation peppered across the screen. Horizontal main navigation, side sub navigation, links in the body and a footer at the bottom. Users are forced to pick through the page attempting to find content that is relevant to them.

We also routinely have vast numbers of options in navigation instead of grouping them into more manageable chunks. Ecommerce sites are particularly bad in this regards. Often these sites have not categorised products at all, or there are so many categories that scanning through the list requires considerable concentration.

It makes more sense to take these long lists and break them down into subcategories of related content. That is called chunking and is a useful technique for helping users remember the options available to them.

By breaking a complex list (such as a credit card number) into manageable chunks it becomes easier to remember.

Thanks to isak55 from Shutterstock for allowing me to use this image.

You only need to look at your credit card to see this in action. Remembering this 16 digit card number is nearly impossible, but by breaking it into four chunks of four, it becomes much easier to process.

Of course, chunking information into groupings only works if those groups make sense to the user. They need to match our mental model, which is a topic I hope to cover in an upcoming post. But for now, the key is to remember that simplicity will reduce cognitive load and encourage users to focus on our primary calls to action.