Delightful Design

There’s a feeling you get when you go to a particularly delightful website, when the designer has put more into it than an engaging logo or some trendy jQuery. There’s a feeling of fun that people will remember and have an emotional connection to.

What do you mean, emotional?

There’s a sense of thrill around these websites; a want to find little easter eggs. This is different than finding a site that’s pretty or easy to use. It hits us at a lower level than that. If you’ve ever smiled quietly to yourself while on a website in your small office cubicle, you know what I’m talking about. There’s just something about that site that’s uniquely intriguing.

But who cares?

Everyone does. This isn’t just a gimmick, this is a tool. That feeling of delight leaves an impression in the visitor’s mind. That impression will last and they’ll remember and revisit your site. Studies have shown that emotion invokes memory. If you can convey a fun or pleasant emotion, it will be remembered pleasantly. In contrast, a difficult or painful emotion (such as your local DMV’s website) will invoke a distinctly opposing memory.

So how can I do that?

Look at your site. Is it well designed? Do you have a cool beta tag on your logo? Great. Now, what can you do to make that fun instead of just pretty?

Try thinking about motion and depth. Consider interactivity where you have static elements. How about making something come alive that is currently just sitting there? How about a subtle joke? You need to have a certain sense of humor and playfulness to design for your audience’s emotion. After all, these are the emotions you’re trying to hit, and they have the same effect on you that they’ll have on everyone else.

Prerequisites

All this is fun, but you can’t even begin this process if your site is hard to use, slow and poorly laid out. That all comes first. Think about a geocities site. Now give it parallax scrolling. Now die a little inside.

Is anyone actually doing this?

Lots of people. Here are a few:

• Panic uses interactivity to show off features for Transmit.
• Shaun Inman uses magnetism and momentum to show off his portfolio.
• You can see a parallax effect on the vines at the top of Silverback’s page when you resize your browser window.
• There’s a great story told by Frank Chimero’s site when you scroll down.
• Kaleidoscope uses animation to very subtly rotates the colors on their logo.
• I thought Ben the Bodyguard was a game at first. They use scrolling as the timeline for a movie-like trailer. Turns out it’s a secure storage app.

Take a look at these, start keeping a list for your self, but don’t just mimic what you see. People can tell, and it won’t have nearly the same effect. These aren’t standards, they’re proposals. They say, “come see why I’m different than everyone else”. And that’s exactly what you want.

Further Reading

Designing for Emotion is a great book that looks at this concept and many others in much more depth. It’s highly worth the read.

The Little Big Details Blog collects examples of these details from all over the web.