Page 404. Design of a Meaningful Error.
Life often proves that making mistakes is just a part of progress. Errors present inevitable part of human life and the field of interaction with digital products is not an exception. It’s impossible to predict all the mistakes which can arise between the human and technology, yet testing and analysis can allow designers to find the ways how to make errors helpful or at least solved easily. Today’s post is devoted to perhaps the most frequent error on the Web, known as Page 404: let’s look closer at its definition, probable structure and design as well as a bunch of creative examples from the global design community.
What is page 404?
Technically, 404 or Not Found is the error message in HTTP (Hypertext Transfer Protocol) response code which is sent in case a user got successfully connected with the server, still for some reason couldn’t get the content that was requested. When it happens, for example in situations if users try to follow the link which has been deleted, dead or broken, the website server forms and sends the 404 webpage informing the user that the content cannot be found. Certainly, the page can have a very simple and basic appearance with just a line of copy saying that “nothing can be found here”. However, the vast majority of websites prefer to apply the customized 404 webpage. And that really could be described as user-friendly policy, also successfully supporting website or brand promotion. Correctly designed and stylish webpage, which is shown to everyone who got a mistake in the link, is able to not only inform users but also navigate them, entertain or just give a moment of an aesthetic pleasure.
What does the page 404 include?
Among widely used layout elements on page 404, we could mention:
- error message
- brand signs (logo, brand name, brand mascot etc.)
- navigation elements (links, buttons, menus, search fields)
- decorative elements (illustrations, photos, animation)
In many cases, design concept chosen for this sort of web pages corresponds to the general stylistic performance of the website to keep the feeling of integrity and consistency. It means that designers apply the same or very close color palette, style of layout elements and graphic design, typography and grid. Still, some designers choose the opposite way of presentation and make page 404 looking totally different from all the rest of the website, in this way, perhaps, supporting the idea that this sort of error is an accident and shouldn’t be associated with the rest of the website content.
Two different approaches to showing the number “404” could also be mentioned here. Some pages apply it like the central element of the composition, based on the fact that all active internet users know what this number means on the Web: quickly scanning prominent and legible number, the user will be informed on the issue in split seconds. However, there are also designers who do not make the number 404 quickly noticeable in general visual hierarchy of the page: it often happens when this page is used as the field for additional navigation and content presentation. As for the navigation elements, the examples shown below will let you see that most of them apply the error message to the user and the link or button to the home page. Nevertheless, this basic set can be effectively extended with:
- a set of links or a menu providing the user with the variety of routes instead of only the home page, right from this point
- fixed header enabling a user to get to the key areas of the website instantly
- a search field, via which the user can request the needed content without getting back to the home page
- a collection of recommended posts, which could possibly draw the user’s interest
- the advertising element or link.
Definitely, it doesn’t mention that all of these elements should be included on one page altogether: the choice and composition should be based on thorough user research. Setting the priorities, the designer can make a decision on what should be included into the layout: if users should be navigated only to the home page, then all the other option will work as a distraction. Vice versa, if users, let’s say, look for a particular product or item, they probably wouldn’t be happy to get back to home page and only there get the access to the search. The solution should depend on the target audience, its needs and wishes, the problems, solved via the platform they are at.
The error message is usually another object for consideration: the copy should be too long, the style and manner of communication (formal or informal) should correspond to the general tone and voice of the website, the fonts should look harmonic in the layout and legible. The error message needs to let the users feel that they are respected and get them informed clearly on what happened.
One more highly debatable element of page 404 design is custom graphics. In the review of design trends in 2016, we mentioned the growing trend of applying custom illustrations in mobile and web interfaces. Page 404 is one of the most convenient places to respond to this creative trend: original illustration or unique graphics can both support the stylistic performance and communication with users. No secret, people are visual creatures and a picture is worth a thousand words: it can not only inform, but also add vibes of fun, entertaining, formality etc. This approach can transform the simple web page into the source of aesthetic satisfaction, which is, by the way, the important source of positive user experience.
Collection of creative pages 404
Now let’s go from theory to practice: here we have selected a diverse set of creative web design concepts, differently applying the custom graphics mentioned above.
So, we could definitely say that in the design of 404 page diversity is a key: following the simple basic understanding what information the user needs to get from this point of the surfing, designers can find hundreds of creative ways to deliver it elegantly and helpfully.
Originally published in Design4Users
