Design of a 404 Not Found Web Page

Posted on January 7, 2008 by Alexis Brion

Creating a custom "page not found" web page is the proper way of handling wrong or outdated web addresses. Give information to your users, use a simple design and tell your visitors that the URL does not exists any more.

"tell them that the page is not available anymore"

Please avoid to tell users that they are wrong or that they have a "bad" web address. Just tell them that the page is not available anymore and give them a link to your homepage.

Ikea, the furniture maker, has a simple, good looking and informative page not found web page design.

IKEA 1 20080107

On the other side, the Cartoon Network website does not have a customized 404 Not Found message. This could be very frustrating for users but it is also bad for the website business, I can imagine that many users don’t have idea what such a message means and they leave the site. Cartoon Network:

Cartoon Network 20080107

Horrible Login Process at 9rules

Posted on January 4, 2008 by Alexis Brion

Login process should be extremely easy as this is they way users will get into the personalized content of your website. Many users get tired and leave if they try to login a few times and they can not get into the website. Specially new users leave and don’t come back.

Avoid unnecessary information or distractions. 9rules, the social content network, tells users that the password will be emailed when the are at the login page. This is confusing as usually sites don’t send emails during the login process.

9rules Login 20080104

Making a mistake introducing the username or password takes users to the signup page. In this particular case, this is really bad as no error message or password recovery link are displayed. If you want to improve usability and your general web design, I would recommend, first to nicely tell the user that there was a mistake, and after that give an easy way to solve the problem (in this example would be a “try again” or “recover login info”)

9rules Signup 20080104

3D Button Examples, Usability Issues

Posted on January 3, 2008 by Alexis Brion

It could be a great problem if users don’t understand that they can click on a button, even worse, they might not notice that that button is actually a button. Then you have users moving the mouse around the website, trying to find something to click.

To avoid this usability flaw, try to include 3D buttons in your interface design. Most users understand the message because it represents their mental model and the real life: oh, it can be pressed!

In the example below, taken from Google Calendar, the arrow buttons are totally flat and it’s difficult to notice that they are activated.

Expedia.com, with its “Search for flights” button and Lego, with its “Search” button, give users a clear message: this is a button, is activated and you can click on it.

Expedia Search for Flights button 20080103