From Our Digital Agency

Home Blog Fallbacks, errors and 404 pages: put them in your Functional Design!

Fallbacks, errors and 404 pages: put them in your Functional Design!

“This page no longer exists”, “Something went wrong while completing the form”, “your order could not be completed”. As a user you would rather not have to deal with error messages. However, as an administrator of a site, shop or app, it is better to have thought about it in advance. Because if things go wrong, it better look good, clear and well-organized.

If you are in the process of making one Functional design for your website, you don't always realize that some elements don't work quite as you had in mind. The interface may not be intuitive enough, causing the user to take an action that you do not expect. The biggest consequence is that the user does not achieve his goal on the site and leaves.

But other errors can also occur. An incorrect internal link that does not exist, for example. And then it is nice if there is a good safety net for the user.

It is wise to think during the FO phase about what to do if something does not go well on your site. Below we give you a number of things to think about.

Design a 404 page

You will be surprised how often people “forget” to draw and design a 404 page. This is usually not done on purpose or consciously: many software packages often already have a standard 404 page baked into them. So there is not always a need to design one separately, because there is already a 404 page.

And yet it is worthwhile to think about your 404 page at a much earlier stage. It sounds crazy, but it is a very nice moment to 'shine' with your customer. To poke fun at yourself a bit and show that you can also be vulnerable as a brand. If something goes wrong on your site, it's better that you give it a nice, positive twist. Customers, visitors and users appreciate this enormously. But the goal is also important: give the user tools on the 404 to continue navigating the site!

404 page

Design a 'no results found' page

Many sites have search functionality built in. Very useful for the user because they can find information better on your site and useful for you because you know exactly what your user is looking for. But it can of course happen that the user is looking for something that is not there. How do you catch that?

Also consider the search results page carefully in the FO phase. And also consider the possibility that there are no results. Design ways in which the user might find what he was looking for ("did you mean...") or provide an overview of the most important pages on your site so that the user is most likely to be helped properly.

no search results

Provide feedback in advance

A website or webshop often has several forms, for example to contact us, but also to place an order. Some forms are long and require a lot of information, which increases the chance of errors. In the FO phase of your site you should already think about the way the user leaves information and how you can help him with this.

You do this by providing feedback from the very first moment on how the user should complete something. For example, if there are special requirements for entering a zip code, make this known to the user immediately. For example, put “1017XS” above the input field to make it clear that there are no spaces between the numbers and the letters.

Provide feedback afterwards

We've talked about this before: make room in your functional design for feedback to the user when something goes wrong. For example, error handling for incorrectly completed forms. Don't just mark the fields where something went wrong, but also tell the user how the field should be completed. Make that feedback clear so you don't have to look for it.

The thank you page of an online store is also a great opportunity to provide the user with feedback. In addition to a “thank you for your order” you can list all order information again there. This provides extra security and a good feeling for the person who placed the order.

feedback afterwards

Design the breadcrumb trail

You don't really design a breadcrumb trail in case something goes wrong, but it is nice to have one. If the user gets stuck somewhere in your site (for whatever unforeseen reason), there is always the option to easily navigate to another level in the site.

It is essential for a breadcrumb trail that it is clearly visible. So in the FO phase, think carefully about how much space is needed for the path. Because if there are titles in a breadcrumb trail that become very long, you may run out of space. Insight into the content that appears on the site is therefore also useful here.