Web development isn’t just about functionality – although that’s certainly a highly important piece of the puzzle. It’s also about user experience: ensuring visitors are able to easily navigate your website and get where they need to go.
Let's say you're given the responsibility of a new website and enthusiastically take your computer – or pen and paper – to start planning. At this point, it's very tempting to creatively invent new things, to differentiate your site from any competitor. This is okay to do… when it comes to content. But keep it simple and clear when it comes to the functional elements of user experience.
5 essential elements to improve user experience
Before you start using the latest color combinations or animations, it's important to start with a good design system as foundation. These five elements are most essential on any page, and on the website in general:
A label is an element on a page which you use to give more information. Keep it as simple as possible when choosing names for labels. Make sure that they're recognizable to the user; avoid technical words or professional jargon: after all, you want your audience to understand the label. So make sure you know who they are – and adapt accordingly.
While you can use buttons for multiple reasons, their ultimate purpose is for the user to take action and click them – so they have to stand out on the page. To achieve this, you can use striking colors, interesting shapes or even animations. But here the same principle applies as with labels: make sure that a button still looks like a button. You can limit yourself to two different types. You can use a 3D effect by working with a shadow, for example, or you simply underline the relevant term. This last option is not only the simplest, but also the most obvious to most users.
It's perfectly possible to put several buttons on the same page – as long as you can clearly say which one will be highlighted. If you consider all of them equally important, there's something wrong with the content structure of the respective page.
In other words: whenever multiple buttons are present, the most important one needs to stand out – in most cases, the button that results in conversion.
A lot of tests of user behaviors on a site always show the same result: users don't read web pages, but only scan them. They don’t have enough patience to read every word, and in most cases, they’re simply looking for an answer or solution for a problem. It's up to you, as IT team and as content authors, to make content scannable.
In terms of form, it helps to use a hierarchy in the titles (main title, subtitle etc) or to split up content by using dividers, for example. The different sections on a page must be visually distinguishable from each other. This allows the users to scan more quickly in which section they can find the answer they're looking for.
In order to make a page pleasant to read (did I say read? I mean scan, of course), the use of whitespace is key. You can use as many titles and dividers as you want, but if they're too close to each other, the user will perceive them as one block of content.
With the correct ratio between whitespace and content, a page is easier to read. Don’t be afraid to add those extra pixels between the different elements, as long as the elements of the same section visually form a whole.
Small side note here: make sure that you apply one clear pattern over the different pages of your website. Do you use dividers? Then stick to them for each web page. If you try a different method on each page, your site as a whole will look very unstructured.
Not only should web pages have an obvious structure, but even more so, this applies to the site as a whole – in other words, you need a clear information architecture: how logically are the pages arranged, relative to each other?
Basically, there are two kind of hierarchies possible when it comes to websites: flat hierarchy and deep hierarchy. But which is best for your project? It all depends on what you want to share and how much content you have.
In general, flat hierarchies are a good solution when you have clearly defined categories within your website. If you’re not sure where your target group expects certain information, you can use card sorting to find out.
But once you notice that there are simply too many categories, or if they're already very specific, it's advisable to opt for deep hierarchy. This means you'll divide the pages into logical groups.
All in all, there's no easy answer to which hierarchy to use. Start by observing the visitors' behavior, as finding out how they search and what they're looking for is key.
Use all your creativity for your content and non-functional elements. But be careful when it comes to the functional elements of user experience. Don't try to reinvent the wheel: stick to these basic guidelines. This keeps the elements recognizable for the visitors and won't cause confusion, which often prevents them from finding what they're looking for and can result in loss of interest. Following the above tips, however, can help prevent that from happening.