User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
These days you see it more and more. You click a dead link on a website and before you know it you're looking at a beautifully illustrated page with the code 404 written somewhere. Here are such examples:
Now don't get me wrong these are great illustrations, but they seem to have nothing to do with the content.
Are there some benefits to using illustrations for error screens? Does it minimize stress for the user?
Donald Norman (one of the founders of the Nielsen Norman Group) talks about Visceral Design:
It’s a reference to the concept of “gut instinct”. It’s a subconscious level of reaction to certain experiences....The visceral reaction is the one triggered by the initial sensory scan of the experience. It’s immediate and often beyond our control.
So by adding humor to the 404 page you can tap into this gut reaction to convert a frustrating situation into surprise or delight for the user.
A good 404 page would offer that delight paired with:
By using an unexpected element it becomes easier to create a surprise moment and tap into that gut reaction.
I think it's done because of a couple of reasons.
Error 404 never occurs in a situation where everything is alright. The same goes for connectivity errors, server down, etc.
You'd see marketing, forum-based, social and shopping websites doing this the most. Enterprise-level software or websites never do this. The reason being, these websites try to be appealing to the user at every step of the way. I can't tell you how much the Amazon error page made me want to keep coming back to it (see screenshot below)
Such designs help keep the users engaged even during a possible "diconnection"
An error page is a sign of loss of connection, misplaced url or an issue. By virtue of its existence, it means a lack of continuity in the web-surfing flow.
An attractive design not only keeps the theme and likeability of the page at-par with the rest of the website, it also makes it feel seamless. The Please Try Again, Go to Homepage, Go to Previous Page buttons seem less obtrusive and feel more like guides if a funny character or a cute doggo is sitting beside it
I also feel that the emergence of more creative Empty States and understanding that they are important have added to this trend
(As someone who volunteers as user support on a hobby site:) When users run into errors, they don't always think to inform us of the specific error number they ran into, but they're much more likely to mention the strange dinosaur or other illustration on the page. This only saves a bit of time by skipping asking the user what error message they saw and waiting for a response, so I'm not sure it's enough to motivate a design choice, but it is a minor benefit of unique images for each error page.
There are a few reasons for this:
The typical 404 Error page that we see these days is a result of the emphasis (and some might even say over-correction) on the user experience of website navigation and interactions.
For those of us that can remember what these pages look like, the default display and content reflected something that was more suitable for the developers that have to diagnose or debug what the issue might be.
Nowadays, what most of us see is a combination of:
That results in a number of different experiences, which aim to:
So it is really the combination of visual, text and interactions that work together to achieve the intended/desired outcome for the user, rather than the specific use of the image (which is just one aspect of the entire design). Some designers/teams combine them better than others, while other examples are less than ideal and the image can create the opposite effect.
I personally arrive to the conclusion after seeing your example images that the main reason why the error pages are accompanied by illustrations is to show that this error belongs to the page itself, since each illustration has the same graphic style than the page to which it belongs. This somewhat reassures the user because:
These illustrations only show an internal error of the page on which the user is browsing.
I think the idea of exaggeration for the 404 page became outdated, most of the people now became mature enough to recognize that they need to try again the moment they notice the number 404. For me it's nice to put some explanatory image or illustration, but not going too far to invest more in creating such creative illustrations, since the stay in such page will not extend more that 2 sec.
So I suggest to make straight forward illustration with BIG clear message button such as: Try again, get back home, refresh again, will be more meaningful and gives hope that this will not be repeated again.
Because I think the big illustration work sometimes gives opposite message for the user that you reached the end of the way, and you have few chances to get your request, and this will let them move away from your app or webpage.
The summary on MDN describes 404 Error as;
The server can not find requested resource. In the browser, this means the URL is not recognized. In an API, this can also mean that the endpoint is valid but the resource itself does not exist. Servers may also send this response instead of 403 to hide the existence of a resource from an unauthorized client.
Since we're dealing with browsers, it means the URL is not recognized by target server or server's hiding the existence of a resource from an unauthorized client. Either way, it's not a desirable situation since it gives user trying to reach a source deprecated or somehow something happened.
In a world of web and/or software development, it's practically almost unavoidable to build and maintain something unbreakable as an experience. Because things are evolving as user needs, so the products eventually. To make a bit clarification on this, either firms are seeking growth in order to grasp more amount of money or the products are evolving with the personalization of users needs via technology, there's always a room for improvement.
Even I was perfectionist before I started to work as a developer, it's not possible to command a server's reaction or internet connection at least. One should take into consideration every improvement and bug fixes to be covered within documentation to be able to get a smoothest UX and development within UI, while backend, DB, and system part should provide these details in a different manner somehow disciplined as the same above.
Like the evolution of the democracy wasn't in perfect form, the need for this redirected error page also wasn't the idea of UX-origin people and not represents the clearest point of view appearantly. It's more clearer from the text below with the provided link above,
Many web sites customize the look of a 404 page to be more helpful to the user and provide guidance on what to do next. Apache servers can be configured using an .htaccess file and a code snippet like the following example.
It was started with developers or server management firms to handle unsatisfaction of their customers but using a general error page instead all of the other errors would make it more appealing for developers and firms creating values in that sense. So rather than solely for 404, it's used as an error page for all kind of HTTP Status Codes.
Well, I don't know of any research on this topic but I'm also on the side of using it, instead of a blank page in a point whenever it's inevitable. It's better rather the page is fed with the information according to the user's need like re-routing, re-direction, why it has happened if possible, go back or vice versa rather than fancy visualizations.
One sentence: Increase the attention (because user is in an error state and app is not working at that page –besides with text illustration increase the attention), and lover the frustration.
