In this white paper, we give you an insight to the world of Steve Krug, an expert in web design and user experience. We combine his knowledge with our own experience in this blog.
Excellent web design: don’t make a user think
We can give you countless examples of things that visitors should not spend any time at all on. Some classic examples:
- Where am I?
- Where should I start?
- Where do I click now?
- What is important on this page?
- Why do they call it that now?
Every time a visitor has to think, he loses time and is distracted from the essentials. So your website must be clear and user-friendly. A good example of a website that limits itself to the essence is Tesla. In 5 steps and in even less minutes, your Tesla is configured and you have placed an order.
If ordering a car can be done by a 7-year-old, why do web shops often have such an immensely complex web design? This is partly due to the fact that website builders often have a different idea of how visitors use a website.
How visitors actually use your website
Something that has amazed us in recent years is how wrong we were in thinking we knew how visitors navigated through our web pages. We often imagined that visitors would be fascinated to read our passionately written texts, quietly and thoughtfully. That every click was well thought-out and every page scrutinised in detail.
In reality, website visitors can be compared to drivers driving at 120 km/h on the motorway and looking at a billboard. While designs often allow you to drive a maximum of 10 km/h to understand the message.
To keep things clear, we will assume that everyone navigates through a website in the same way. Do you want to create effective web pages? Then you need to take into account the following 3 facts:
- We do not read web pages, we scan them.
- We do not choose the most logical option, but the easiest.
- We don’t figure out how things work, we prefer to trudge through them.
Fact 1: we don’t read web pages, we scan them
We are always in a hurry. Admit it, we rarely look at a website in peace. We also know that we don’t have to read all the information to understand a message. So we scan web pages and we have become very good at it. For years, we have been scanning newspapers, magazines and books looking for the pieces we find interesting. We know that scanning works.
Fact 2: we do not choose the most logical option, but the easiest one
In most cases, we do not choose the best solution but the first solution we come across that looks reasonably okay. As soon as we find a button that looks like what we are looking for, we click. But why don’t users choose the best solution?
- We are in a hurry or want an answer as soon as possible.
- We have less to lose when we choose wrongly.
- Comparing options does not improve our chances. If we make the wrong choice, we just click back.
- Gambling is more fun and makes us feel good.
Fact 3: We don’t figure out how things work, we prefer to trudge through them
We have no problem using a tool or website without knowing how to use it. Worse still, we think we know how something works and use the website or tool all wrong! By clicking, we do arrive at a result.
A good example of this is the following: when we see that people repeatedly look up a website in Google even though they have to consult this site several times a day. Worse still, they type the full URL of this website into the search bar several times a day. A perfect example of a wrong way of working that will nevertheless lead to a desired result up to a certain level.
With excellent web design, your pages are designed to be scanned, not read
Taking into account that visitors scan through your website at a speed of 120 km/h, there are 5 important things you can do in terms of web design. This way you let them see and understand as much as possible of your website:
- Make sure there is a clear hierarchy on every page.
- Icons are always your friend, so use them.
- Divide pages into clear blocks.
- Make it extremely obvious what is clickable.
- Reduce noise.
Have a clear hierarchy on every page in your web design
Creating hierarchy is not so difficult, everything is logical. You just have to apply it. Here are 3 basic rules:
- The more important, the more prominent.
- Related items should also be visually related.
- Frame and give context to each block.
These 3 basic rules are nothing new. Look at newspapers, they have been applying this principle for decades. The most important news is prominently visible. All news items can be searched by theme and each news item is neatly delineated and gets its own title, image and introduction.
Icons are your friend
Using icons allows you to make visitors understand a lot when they don’t actually understand a word. Designers have to use icons correctly to make a site clear for everyone. Even when we don’t speak the language, universal icons can help us find our way through a website.
Take Allibaba, for example, a very extensive webshop with an immense number of options. By using icons it is even possible to navigate easily through the Chinese website. What about the shopping cart? Everyone knows what to do with a shopping cart.
Divide pages into clear blocks
Frame and delineate different sections of your website. This makes it immediately clear which content belongs to each other and avoids unnecessary confusion for users.
Make it extremely obvious what is clickable
Buttons that get lost in the design can be nice, but again: do you want to make a user who is about to make a purchase think about which button to click? Use complementary colours instead of ghost buttons. The effect on your conversion results will surprise you.
Reduce noise and distractions
One of the most common mistakes is noise on your website. These are distractions that make a visitor think unnecessarily. There are two main noise factors:
- Busy-ness: when there is too much going on on a website, the visitor does not know what to click on. He is overwhelmed by the amount of things that are screaming for his attention.
- Background noise: various small aspects of your website that do not in themselves distract the visitor, but which together disrupt the user experience.
Every user reacts differently to distraction, some people have no problems with distraction while others can’t cope with it. So, when designing a website, it is best to assume that everyone suffers from noise and keep it to a minimum. Furthermore: you can even assume that every unnecessary element is noise.
Why we prefer to make choices without thinking
We don’t mind doing a lot of clicking provided that every click is ‘painless’. So without too much effort. The rule: 3 clicks without effort equals 1 click that requires thinking. We can say that a successful website consists of clicks without thought, throughout the entire process. The visitor must know where he is going with every click.
The art of writing web texts with web design in mind
Delete unnecessary words
A sentence should not contain unnecessary words, nor a paragraph unnecessary sentences. You can compare it to a painting; all the lines together make up a work of art. Leave out the wrong line and you lose balance. Put one line too many, and you lose balance too.
Removing unnecessary words has the following advantages:
- It reduces noise.
- You put important issues in the spotlight.
- It makes pages shorter so that users can scan through a page more quickly.
Promotional text must disappear
The promotional texts you see in poorly written brochures where every company praises itself must disappear. It puts too much focus on why they are great instead of what makes them so great.
Introductions must disappear
The most important thing you need to know about introductions: nobody reads them. You need to make your website so clear that introductions are completely unnecessary.
Website navigation goes hand in hand with your web design
The basis: we are looking for something
We visit a website because we are looking for something: a product, information, you name it. We can choose to look for it ourselves, to browse, or to ‘ask’, in other words, to use the search function.
When you start browsing, you work your way through the hierarchy of a website. You look for the main navigation and it takes you deeper and deeper into the structure until you finally find the info you’re looking for. When we don’t find what we’re looking for, we end up leaving frustrated.
Browsing notes
In many cases, you can compare a website visit with visiting a department store. However, the following 3 things are very different:
- No sense of scale: when a website consists of 5 pages this does not apply. When we talk about 50 pages, it does. Here, we have absolutely no sense of how large or extensive a website is. The practical problem is that you have no idea whether you have seen everything or not. So we don’t know when to stop looking.
- No sense of direction: on a website, we don’t have left and right, up and down. We do talk about up and down, but then we mean going deeper into a hierarchy. That is misleading.
- No idea where you are: in a physical place we remember a certain route. On a website, we can suddenly jump from page A to page Z without even having seen B. A good use of breadcrumbs makes sure we always know where we are and how we got there.
The purpose of navigating without navigating
- Showing what’s available: Simply and clearly show what can be found on the site.
- Telling visitors how to use the site: When a navigation menu is constructed correctly, it tells the visitor where to start and how to navigate. These should be all the instructions you need.
- Instil confidence in the website builder: If the menu has a clear structure and hierarchy, it radiates confidence.
- Reassuring visitors: Navigation has perhaps the most important purpose of reassuring us. It does so by always being present as a handhold and a guide through the website.
Breadcrumbs
The name breadcrumb, believe it or not, comes from the Hansel and Gretel fairytale where Hansel left a trail of breadcrumbs to find his way back through the forest. They show you the path from the homepage to where you are now and make it easy to go back up the hierarchy. The best way to use breadcrumbs is as follows:
- Put them at the top: That is a logical place, just as page numbers at the bottom of a book are very logical.
- Use ‘>’ between each level: Research has shown that ‘>’ is the best sign to use in a breadcrumb. It makes a forward movement visible.
- Put the last item in bold: This way you clearly show where someone is on your website.
Test the quality of web navigation
Imagine being dropped onto a webpage like a scout in a dark forest. You are in the middle of a complex site on a page you have never seen before. If the navigation is right, you can answer the following questions without hesitation:
- What site is this?
- What page am I on?
- What are the major sections on this site?
- What are my options at this level?
- Where am I in the hierarchy?
- How can I search for something?
These questions are a good idea to use on your own website. Is there a question where the answer is not immediately clear? Then it is best to check the web design of your website or that page.
The ideal homepage: a challenge in web design
All the things you need to find on a homepage:
- Site identity and mission
- Site hierarchy
- Search function
- Teasers
- Promotions
- Time related content: new or updated regularly content
- Shortcuts
- Registration
Then you have to place all of the above in such a way that you radiate credibility and trust. A serious challenge.
Seriously, how to make the perfect homepage
All of the above elements cannot be used in a beautiful, well-organised and functional way on a homepage. The most important thing you should not lose sight of is your ultimate goal. You should be able to answer the following 4 questions as a visitor on a good homepage:
- What is this?
- What can I do here?
- What do they do?
- Why should I be here and not somewhere else?
The first seconds on a website are decisive. Can the 4 questions above not be answered immediately? Then things need to change in terms of web design because your website is not user-friendly.
Get your message right
Everything on the homepage can contribute to getting your message across, but there are three places where we expect a clear message:
- The Baseline
- The introductory text
- The ‘Learn more’ button
