The error page! A user's worst nightmare and yet it seems to be all the rage around the design community. The objective is simple -- create the most friendly and usable solution for the must undesired experience; easy right? The error page can be a great outlet for a creative designer; it is clean, minimal, direct and whose messaging demands the highest level of care and creativity -- or at least it should.
When working with the team at mixx -- our objective was to design an elegant, intuitive, and engaging experience. We were determined to do just that and leave no stone unturned; including the infamous 404 error page (and its cousins). We created three error page concepts and put significant thought into their design and messaging.
Remember, the objective is to keep it friendly and usable -- the user is interacting with an unexpected and undesired page. The first step is to attempt and remove tension and frustration in a two-fold approach; be clear about what is happening and ensure that message is light, witty and humorous. The old adage applies, "the customer is always right" -- always take responsibility for an error and attempt to explain and/or resolve the issue.
404 Error Page -- A Lost Page
The 404 error page is without a doubt the most famous of error pages; probably because it is also the most commonly seen of the error pages. The user tried to go to a page that doesn't exist; oh no, what do we do? Well, we try and be cute while informative -- a little magic themed messaging to lighten the mood. Now that the issue has been explained, the next step is to help the user get back on their feet and re-engaged with the site. Search is a must have for any 404 error page; thanks to Google, searching for something has become the go-to action when lost on the web. Search isn't the only answer though -- a list of common and applicable navigational links is provided to help guide the user in a specific direction.
500 Error Page -- A Temporary Site Hiccup
The 500 error page is never a great page to hit -- it means the site had a hiccup and isn't working the way it promised it would; whoops! As rock solid as you build these beautiful web applications; sometimes hiccups do happen and the 500 is there for just that. Generally with a 500 error hiccup, its a small and temporary issue thats gone before the error page has even finished loading. Again, we try and keep the messaging cute, informative and applicable. The strategy on this page is slightly different -- we are going to assume the error is very temporary; so how do we keep the user engaged on the site just long enough to let the hiccup pass? Let them watch a short funny video of course! We present the user with a short two minute video clip of babies eating lemons and the adorable faces they make in disgust. In theory, once the video has passed, the user can be up and running again. We recognize time is valuable and patiences can be short and the fact that cute baby videos aren't for everyone -- so a quick "try again" link was added front and center (top and left actually).
Site Maintenance Error Page -- The Site Is Intentionally Down
Site Maintenance, it's a reality that large web applications with significant growth need to be ready for -- it's one of those good problems to have. However, the user doesn't see it that way -- they want to know your site is always up and running in prime shape regardless if it is 2:00am on a Tuesday. How do you tell your users that you've intentionally taken your site down for maintenance? Well, you do so carefully and elegantly. Again, we stuck with the cute baby theme and made the site feel a bit more human by explaining that it is "napping" rather than "down". Machines and technology are expected to run 24/7 while we understand humans need a break; making the site feel more human makes it being down more understandable. But wait ... we know the site is down, there is no way to keep the user engaged with the service if the service isn't working; or is there? We can try! Instead of simply telling the user we are sorry and come back later -- we give them something (regardless of how small) that they can interact with; we even make it applicable to the service.
All of the error pages share a similar minimalist design extension of the mixx visual brand. It is clear the user is at mixx, but the experience is different enough to attract attention and notice.
Jaan Orvet
November 28th 2007
Being a fan of good error pages (does that sound weird?) I enjoyed reading about your thinking behind the Mixx pages.
What is your take on the level of copy cuteness and “i’m your buddy”-ness in general? I am a tad apprehensive. Sometimes being faced with cute or overly friendly copy adds to the frustration. It can come across as not taking the experience of the error “seriously” enough. The site’s tone and audience is of course the key.
Of your three pages I think the 404 works the best in every regard. 10 outta’ 10.
The 500; I like the first part of the copy. Good tone, informative. Then maybe a bit to cute and buddy-ish. Video suggestions? Nah, I’m ok w/o them, but I can see why it can work very well on a site like Mixx.
The last one – cool.
Big fan of your work in general. Keep doing it. the DC area needs you.
Martin Ringlein
November 28th 2007
Jaan, thanks for the comment and kind words. We love being a part of this growing community here in DC.
I agree with you — the cuteness factor of an error page is debatable. It all depends on your demographic and nature of your content. Mixx is a fun, social and community oriented site; so they can get away with a bit more in that regard.
I’ve been in a front of a few users when the babies don’t mixx 500 error came up during the initial beta testing — it was funny to watch them go “hey, wait, what was that”. Its not often an error page can be fun — I think the overall objective was to ensure the site is consistently engaging, friendly and usable.
Jaan Orvet
November 28th 2007
Hi Martin,
> the overall objective was to ensure the site is consistently engaging, friendly and usable.
Cool, it does a very good job of that. Those of my non-tech biz friends that have looked at both Digg and Mixx prefer the latter hands down.
Martin Ringlein
November 28th 2007
Again, the comments are much appreciated regarding the Mixx design. Glad to see your friends are enjoying; especially over Digg.
ML
November 28th 2007
I admit, I’ve left this stone unturned since I began designing. But I have been a fan of error pages that were branded and consistent with the website. It gives you the feeling that the site owner cares enough to go the extra mile. For that reason, I think they work great. But I agree, getting an error page and viewing something cute might get you more upset confuse you. But the well designed error page with search and additional options to help the user along is a great benefit. Good post.
Martin Ringlein
November 28th 2007
Thanks ML — there have been many studies where technology errors that can relate to human behavior resonate better with users (on and off-line). I think “cute” and that appropriateness depends on the site and its messaging/demographic.
However, being humorous, friendly and a bit human on your message is a constant that I think most application error messaging can benefit from.
Candidly, most people who don’t like playful takes on error messages are the developers of the platform — because they are in the know and a white screen with a “Error 404 – Not Found” means something to them. The reality is that to the masses, “404” doesn’t mean anything!
ML
November 28th 2007
Martin – yeah, I totally agree in that the message on your error page should be approriate and consistent with the overall message of the site and it’s demographic. Also, just took a glance at the Mixx site – just want to say you guys did an awesome job there.
Martin Ringlein
November 28th 2007
ML, thanks for the compliment — if you are new to mixx, try it out; its pretty cool!