Skip navigation
Help

Detection theory

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

Often designers design stuff (products/services/interfaces etc.): to fit user personas, to solve problems, to make it beautiful etc. but don’t often consider the how it psychologically interfaces with the user. Such user experience design draws heavily from human psychological behaviors that are a result of millions of years of evolution. These behaviors will not change tomorrow or even in the next 10 years, therefore we should be aware of what these behaviors are and how our designs should take them into consideration.

I was therefore really excited to stumble on this article “The Psychologist’s View of UX Design” by Susan Weinschenk which is the most comprehensive collection, I have seen, of these “truths” of human behaviors. For my and your reference, I’ve taken the liberty to summarize the list here and added a sprinkling of my thoughts.

1. People Don’t Want to Work or Think More Than They Have To
Consider simplicity, lead by example i.e. show users how it is done, provide what people only really need, and help users make decisions.

2. People Have Limitations
Remember information overload? This is where it rears its ugly head. Keep information on a need to know basis, clump and/or create visual priority.

3. People Make Mistakes
People will make mistakes, respect that and try not to make them feel stupid. Having an “Undo” is vital and the best error message is none at all. Oh, do make sure the errors, if any, are not fatal please?

4. Human Memory Is Complicated
Human memory is prone to errors and inconsistency. It’s BS to say, “oh they will remember how to use it after using it for the first time”. Susan says “People can only remember about 3-4 items at a time. The ‘7 plus or minus 2’ rule is an urban legend”. From my anecdotal experience, I agree with her.

5. People are Social
People are social animals and will listen to others for guidance even if they don’t know that person. This is probably why many companies that the 5 star rating system seriously. Furthermore, the famous 150 “friends” social limit does apply. Any greater, the bond between people weakens.

6. Attention
People are easily distracted; design for focus or for attention, not both. You will be surprised how often both things happen at the same or at the wrong time.

7. People Crave Information
Susan says it best:

People will often want more information than they can actually process. Having more information makes people feel that they have more choices. Having more choices makes people feel in control. Feeling in control makes people feel they will survive better.

Don’t forget that feedback, such as at acknowledgement chime or a message, is also considered as information.

8. Unconscious Processing
Be careful in creating the wrong associations with your design, particularly important with communication and object design. There is a lot of subtle processing that happen especially through the visual sense, and this impacts greatly on decision-making. That is why, for the longest time, aesthetics was the key driver for the definition of good design.

9. People Create Mental Models
Mental models are the reason why Skeuomorph Design is so important in user experience design. If user research cannot determine a relevant mental model, use Metaphors to help with the ease of understanding and acceptance of a new concept or technology.

10. Visual System
Despite knowing that our visual sense is the strongest sense, this insight surprised me:

Research shows that people use peripheral vision to get the “gist” of what they are looking at. Eye tracking studies are interesting, but just because someone is looking at something straight on doesn’t mean they are paying attention to it.

I do encourage you to check out the full article at UX Mag, it is well worth the read.

0
Your rating: None

The design of 404 error pages is often overlooked and underestimated. However, designed carefully, these pages can make a random visitor stay on your website, take a look around and eventually find the information he or she was looking for in the first place. Effective 404 error pages communicate why a particular page couldn’t be displayed and what users can do next. A search box and list of useful resources (possibly related to the missing page) could be helpful in this case.

We’ve already covered the design of 404 error pages in previous posts. In them, we also covered some interesting and useful ideas for designing 404 pages. Now, it’s time for a fresh dose of 404-error inspiration. This article presents 50 more examples of beautiful and original 404 error designs. Some of them are beautiful but not user-friendly, others are user-friendly but not really beautiful. Please use these examples as a source of inspiration; hopefully, this showcase has something for everybody.

Also note that some examples used in this post were suggested by our Twitter followers: please follow us on Twitter Follow us on Twitter to vote on which article gets published next, discuss new ideas, get fresh updates and suggest great ideas for our next posts. Thank you.

Beautiful 404 Error Pages

Cut & Taste
Cut & Taste claims that “Someone on the staff is to blame for this! Rest assured, the proper person will get the proper amount of blame and humiliation dealt to them.” Notice how well the search box is highlighted. Beautiful!

Creative 404 Error Page

Productplanner
Productplanner perfectly integrates its 404 error page in the overall branding of the website.

Creative 404 Error Page

Mundofox.com
A 404 error page with a not-so-eloquent Homer.

Screenshot

Duoh.com
Probably one of the most colorful and abstract 404 error pages out there.

Screenshot

Apartmenthomeliving.com
A quite unusual 404 error page from a website that helps people find apartments.

Screenshot

Chrisglass.com
Chris takes his comrades on a trip, hunting for the right page.

Screenshot

Huwshimi.com
On Huwshimi a ninja seems to have stolen a 404 error-page: “you must return when the moon has friends and the fox is borrowed”. Gorgeous!

Screenshot

ilovetypography.com
A typographically beautiful (of course) 404 error page from ILoveTypography.com.

Creative 404 error page

Newspond
Newspond uses a very strange illustration on its 404 error page. The circle defines the limits of the website, and the small image at the top is a miniaturized Newspond logo. A click on the image leads to the home page of the website.

Creative 404 Error Page

Brightkit
“404 Fowl Not Found.” Brightkit shows a missing owl on a milk carton. Unusual and, therefore, memorable.

Creative 404 Error Page

jhuskisson.com

Screenshot

Gog.com
“404: oh noes, there’s nothing in here.” (sent by @Chamb via Twitter)

Creative 404 Error Page

User-Friendly 404 Error Pages

RealMacSoftware.com
An excellent 404 error page, functionally speaking, that contains a site map of the website.

Creative 404 Error Page

InspirationBit
InspirationBit presents an overview of popular and recommended articles.

Creative 404 Error Page

45royale
This error page contains links to popular posts and a cool illustration of a pretty freaky monkey.

Creative 404 Error Page

Ma.gnolia.com

Screenshot

Have Fun With 404!

Yes, fun! Because 404 also is a place where you can show your sense of humor. You have the opportunity, so use it well!

www.techkultura.com
On Pawel Opydo’s blog: “Golden Rule of the Code of the Samurai: If this isn’t the page you were looking for, you have to do Seppuku.”

Screenshot

Abduzeedo
Abduzeedo suggests ideas for finding the right article and lists popular and recent blog posts as well as a tag cloud.

Screenshot

Habrahabr
An illustrative image (sent by sabugao on Twitter).

Creative 404 Error Page

CSS Remix
This fellow is quite scared (sent by @dezignMusings on Twitter).

Creative 404 Error Page

Pattern Tap
Don’t get angry, and don’t cry. Pattern Tap will take on the burden of the missing page.

Screenshot

New Yorker
The New Yorker magazine has been published since 1925, but it is definitely with it, with its own 404.

Screenshot

Frye/Wiles
Frye/Wiles Creative Agency.

Screenshot

Heinz
The 404 for the best-known ketchup.

Screenshot

Chelmsford Library
OMG, Smashing Magazine is missing in the Chelmsford Public Library!

Screenshot

Craigslist
An ASCII 404 error page from Craigslist.

Screenshot

The Truth
Is this really the truth?

Screenshot

Wulffmorgenthaler
Blame that weird beaver on Wulffmorgenthaler.

Screenshot

Henrik Hedegaard
Henrik Hedegaard seems to like the Simpsons.

Creative 404 Error Page

NotaNiche
Refresh and see the next funny picture. A blog by Alexander Frison.

Screenshot

Daze of Our Lives
“Whatever the Dickens a so-called “Error 404″ is I haven’t the foggiest idea, but one has occurred. You can’t trust this wretched technology, can you?”

Screenshot

Limpfish
Wanted: a Web page.

Screenshot

Orangecoat
“Despite that song in your step and sense of purpose, you’ve hit a little bump in the road. These things happen. We’re going to do our best to make sure you keep dancing in the right direction.” Orangecoat gives a 404 error mind map.

Screenshot

Kochatelier Berlin
404 bread on the website of a cooking agency.

Screenshot

Dawdle
Mario occasionally entered the wrong castle.

Screenshot

CSS-Tricks
Chris Coyier takes a closer look at the code.

Screenshot

Niki Brown
Niki Brown encourages her visitors to “Have no fear” and shows them a beautiful mouse illustration.

Screenshot

Twitter
Twitter uses a minimalistic yet attractive 404 error page.

Creative 404 Error Page

Livadaru
Homer on the blog of Cristian Livadaru.

Screenshot

ARTTHUG Studios
Homer again, this time at ARTTHUG Studios.

Screenshot

Cubeecraft
Error Cubee (which you can download and make yourself) at Cubeecraft.

Screenshot

d20 SRD
A brutal error at d20 SDR!

Screenshot

HomeStar Runner
Oops! You had it coming at HomeStar Runner.

Screenshot

Animation? Sure!

404 doesn’t only have to be about graphics. Below, you’ll find 404 examples with animation.

Mark Fennell
On his 404, Mark Fennell offers… a game!

Screenshot

Project Euh
Project Euh? Just click and go to a random website.

Screenshot

Total Insanity
Total Insanity shows us what insanity really means.

Screenshot

Herr Nilsson
This 404 error page fetches 404 Tweets and displays them in real time (sent by eelay on Twitter).

Creative 404 Error Page

Cricket Feet
The 404 error page on Cricket Feet talks to you!

Screenshot

Bluedaniel
Daniel Karcher’s film design studio.

Screenshot

Sources and Resources

About the author

Sylwia Besz is a project manager who loves blogging and photography. You can find her 404 error page here.

(al)

0
Your rating: None