A Fun Approach To Creating More Successful Websites

Advertisement

As Web designers and developers, each project we work with has a unique set of goals and requirements. But one goal we have for all of our projects is that we want them to make an impression on people — we want the websites that we create to be memorable.

A fun experience is often an enjoyable one and an enjoyable experience is usually a memorable one. Therefore, it stands to reason that one of the ways to create a memorable experience is to make it a fun experience. In this article, we’ll take a look at how adding a bit of “fun” into the mix can help us produce more engaging, and hopefully more successful, websites.

The Fun Theory

Some time ago, I was sent a link to a Volkswagen sponsored project called The Fun Theory. This website featured a contest where users could redesign or rethink something they encounter in everyday life — adding some “fun’” into it. The purpose was to see if they could get more people to use it simply because it was enjoyable to do so.

While there are a number of great videos on the site, the one that I love the most is called Piano Staircase. In this video, an experiment takes place with a flight of stairs in a subway station. Beside the stairs is an escalator. As I am sure you can guess, far more people would use the escalator, rather than the stairs, during their daily commute.

The Fun Theory
Volkswagen’s “The Fun Theory” website challenges people to redesign something they encounter in everyday life by adding “fun” into it, and to see if more people will then use it.

One evening, while the station was closed, the steps were turned into giant piano keys that would make a sound when they were stepped on. As commuters exited the station the next day, they were greeted with this giant piano staircase and many of them opted to try it instead of using the escalator. In fact, 66% more people than normal used the stairs while the installation was in place — an amazing increase by anyone’s standards.

Adding Fun To Our Websites

When I saw this video, the first thing I thought about was how applicable the lesson of adding fun is to the work we do as Web professionals.

By using fun to create an enjoyable user experience, we can offer people a delightful experience that they will not only remember, but one that they may tell others about as well.

Let’s Define “Fun”

Perhaps I should back up a bit and explain what I mean by fun. I am not suggesting you turn your client’s website into a circus production (unless, of course, your client is a circus). I am simply suggesting that changes and additions that add a bit of fun into the interactions or elements of a design can go a long way in helping the websites you develop become more enjoyable to use, and more memorable overall.

“Fun” is not the same as “silly”. You can add a layer of delight and enjoyment to the user experience without making your client seem childish or unprofessional. The trick is knowing how much fun to add, where best to add it, and when to recognize that you’ve gone too far.

Let’s look at some examples of websites that do a great job of using fun to create both enjoyable and memorable experiences for their users.

Improving On The Ordinary

There are many pages common to almost all websites. By taking a typical website page or experience (such as the “about us” page, or contact form), and making it fun and memorable, you can set that website apart by improving on the ordinary.

Take that aforementioned “about us” page, a fixture on pretty much any website. Mutant Labs, a UK based design and development firm, do a great job of adding a sense of fun and personality to what too often becomes nothing more than a boring company bio page.

Mutant Labs humorous about us page
Mutant Labs adds a fun sense of personality to the typical “about us” page. Scroll over the team members to see even more fun!

The website for Get Satisfaction does a wonderful job of turning the typical “case studies” page into an interactive experience with their “Wheel of Satisfaction.”

Get Satisfaction's Wheel of Satisfaction
The “Wheel of Satisfaction” is a fun twist on the typical case studies page.

How about the “contact us’” page? When was the last time you built a site that didn’t have one of those? English Workshop, “an organisation which provides English language learning opportunities”, styles their simple contact form to look like a machine’s control panel, tying it in nicely to the website’s “workshop” theme.

English Workshop's contact form
English Workshop’s “contact us” form works great alongside the rest of the design elements from the website’s workshop theme.

Smashing Magazine’s own contact page is also an example of a fun approach. The page is fun from top to bottom, with a lighthearted, informal tone for the page’s greeting (“Hello. Let’s talk.”) as well as questions, and cartoon representations of Smashing’s management team.

By taking the common pages of a website, and finding ways to add fun to what would otherwise be a typical experience, you can instead create a unique and memorable impression upon your sites’ visitors.

Frustration = Fun?

Another page typical to most websites is the “404 error” page. By adding something new to this page and showing some personality, you can help diffuse an otherwise frustrating situation. You can see some great examples of humorous and effective 404 error pages in a previous Smashing Magazine article.

In addition to a humorous, frustration-diffusing message, a good 404 error page can also include links to key pages of the website that users are most likely looking for. Done correctly, you can make your user smile, and help them find their way back to the content they will find valuable.

Pumpkin-KIng.com's humorous 404 page
Practicing what I preach with a fun 404 error page on my personal website.

Searching For Fun

While Google may be best known for their search results, the fun that they often have in delivering those results is an important part of the Google experience.

First, you have the whimsical Google “doodles” that appear in place of the company logo on specific days. These doodles range from simple graphics to fully interactive experiences, such as a playable Pac Man game, or the tribute to guitar legend Les Paul. There are also a host of hidden gems that can be found on Google by searching for specific phrases or terms. Search for the word “askew” in a browser that supports the feature (Chrome, Safari, Firefox) and the screen will literally skew itself for you. Using Google Maps, you can search for walking directions from “The Shire” to “Mordor” to get a funny little warning that “one simply does not walk into Mordor.” There are dozens of hidden gems like this baked right into Google.

The reason Google is so effective in the fun they add is because they make that fun unobtrusive to the rest of the experience. Google puts the fun out there for you if you want it, but access to the service itself is never compromised. This is a critical key to successfully adding fun to a project — make sure it does not interfere with the normal features or purpose of the site itself.

An Over-The-Top Approach To Using Fun

One of the challenges with adding fun to websites is knowing when to stop. The right amount of fun can create a memorable experience, but too much can have the opposite effect, driving users away due to an over-the-top approach. Still, there are times when “too much” is the right amount, and when an over-the-top approach really works for both the brand and the website.

CaptainDash.com uses fun illustrations and interactions throughout their website, including a comic book-like layout for their “What We Solve” section. The experience is enjoyable and unique, and the website screams personality. But even after exploring their website for a few minutes, I found it hard to explain exactly what the company does with any kind of certainty. This is one of the potential pitfalls of going all out with a fun experience — your website still needs to quickly answer the fundamental user question of “what does this company do?”.

Captain Dash's superhero themed homepage
Captain Dash” features a fun experience, but the purpose of the company is tough to uncover with all that personality.

Meomi.com is another site that goes all out in adding fun to their website experience. The website’s entire design is filled with fun characters that move and respond as you scroll over them. The overall experience is one filled with discovery and delight as you explore. I am especially fond of the website’s footer and what lurks behind those trees (go and see for yourself). I also love the fact that as busy as the site is, I quickly knew what it was about due to the tagline placed towards the top of the page — “A little design studio dedicated to play, delight, and goodliness.” Mission accomplished!

Meomi's delightful, discovery-filled website
The experience on Meomi.com is filled with delightful surprises for you to uncover as you explore the interface.

Another great example of a website that is from top-to-bottom fun (while still making it easy to discover what the website is all about) is Two Giraffes. On the website’s home page, a sign hangs upon a wall that reads: “We design fresh interfaces backed by serious code”, clearly stating the company’s offerings while staying true to the fun environment they have created for the entire website.

Two Giraffes' illustration rich homepage design
Two Giraffes” does a great job of clearly stating what the company does while staying true to the fun environment that spans the entire website.

Using an over-the-top approach on a website can have it’s risks, but if done correctly, it can also have its rewards — creating an experience that is enjoyable and memorable from start to finish.

Making Your Message Memorable

The design of a great website will support that website’s overall message or purpose. Therefore, we can strive to use a fun approach to create not only a memorable experience, but a memorable message.

The website for the Converge conference boasts that it will “peel back the layers and examine the intersection between design, development and marketing.” The website’s design is immediately striking with its use of a cyborg Tyrannosaurus Rex, but the fun really begins when you scroll down the page; the dinosaur remains, but building on the website’s “peel back” theme, you begin to get to the meat of the content — literally!

The Converge conference's cyborg T-rex styled homepage
Scroll down the page for the Converge conference’s website to get to the meat of the content — literally!

Seamco’s website states that they build “efficient bottling and packaging lines for liquid products.” The website reinforces this message by integrating a wonderful animation of bottling line efficiency. From the top of the website’s design (where the bottling begins) all the way to the bottom (where a delivery truck makes frequent trips to deliver cases of the product being added to it), the entire website is both fun and memorable in service of the website’s main message.

Seamco's bottling line efficiency animation
Seamco’s website reinforces their main message through a fun animation that spans the entire design.

Storytelling And Fun

Another way to get a website’s message across is through storytelling — and a fun approach can help ensure that the story you tell is a memorable one.

The website for the Combine conference uses the location of “America’s heartland” in Indiana to tell a fun story that transpires as you start to scroll from the top of the website… a farm machine works in a field as a giant ear of corn is being pumped full of radioactivity, into the middle of the page — where the radioactive corn begins a rampage of destruction, to the… well, I don’t want to ruin the fun. Visit the website and see the story for yourself!

The Combine conference's storytelling website
The website for the Combine conference uses storytelling to tell the tale of a rampaging, radioactive ear of corn.

Another great website that uses storytelling is one that details the Bright Future of Car Sharing. Presented with vertical navigation, you can use your keyboards’ arrow keys to “drive” through the website’s scenery and learn more about car sharing. Along the way, there are dozens of elements that you can scroll over or click on to learn more about, accessing extra content, while the website’s message is told in an engaging and interactive way.

The Bright Future of Car Sharing's interactive experience
The Bright Future of Car Sharing” as told through a fun, interactive website experience.

Some Websites Cannot Be Fun… Or Can They?

When I talk to fellow Web designers about the benefits of adding fun to the websites they are creating, the argument I most often get against this practice is that the projects they are working on have no place for fun.

Yes, it’s true that there are projects where adding “fun” is a tough sell, but sometimes even websites that don’t instantly lend themselves to a fun approach can be made more effective by using the same principals covered in this articles’ previous examples.

SlaveryFootprint.org is a website that “allows consumers to visualize how their consumption habits are linked to modern day slavery”. It definitely doesn’t sound like a place where “fun” would work, but if you visit the website and select the red “what?” arrow, the experience begins. Scroll down the page and illustrations of colorful, cartoonish hands add pieces of content to the page one block at a time as the website’s message is told. That message ends with a prompt to “take the survey”, and the same methods used for that initial message — cartoonish illustrations, a sense of anticipation, and fun interactivity — turn what would’ve been a simple Web form into a memorable and powerful experience.

SlaveryFootprint.org's powerful, and fun, survey form
Slavery Footprint” uses illustrations and fun interactions to make a point about a very serious topic.

Another good example of a serious topic presented online is the Dangers of Fracking. It uses many of these same techniques and principals, including the “storytelling” approach, that was previously highlighted. The website uses illustrations and storytelling to detail the process and effect of hydraulic fracturing — essentially creating an interactive infographic in the process. The result is an experience that delivers this message in a much more effective way than any simple paragraphs or static graphics could ever do.

The Dangers of Fracking interactive infographic website
By creating an interactive infographic, the “Dangers of Fracking” uses illustration and storytelling to get their message out in a memorable way.

There are certainly websites whose sensitive subject matter will make it difficult to add fun into the mix. But as these next two examples show, you can use many of the same solutions that other “fun” websites use to create a memorable experience without jeopardizing the seriousness or importance of your message.

Designing For Emotion

In his excellent book Designing for Emotion, Aarron Walter illustrates the benefits (and potential pitfalls) of emotional design. The book covers designing for a range of emotions; including trust, hope, surprise, delight — even love. And many of the examples offered use a bit of fun to elicit these emotions.

Design for Emotion by Aarron Walter
Many of the examples in Aarron Walter’s “Designing for Emotion” use a bit of fun to elicit the appropriate emotional response.

A selection from early on in the book provides an excellent call to action for using emotional design in the Web experiences we create:

“We’ve been designing usable interfaces, which is like a chef cooking edible food. Certainly we all want to eat edible foods with nutritional value, but we also crave flavor. Why do we settle for usable when we can make interfaces both usable and pleasurable?”

Designing The Memorable

A Web experience that is simply “usable” is no more memorable than a meal that is merely edible. Just like a master chef strives to create a menu that is truly exceptional, so should we, as Web professionals — endeavor to design and develop experiences and interfaces that are unforgettable. Hopefully this article has shown that one of the ways this can be achieved is by adding a bit of fun to the projects we are designing.

Whether you are firing up Photoshop to work on that new design, or building website templates with HTML and CSS, I encourage you to consider the examples and lessons shown in this article. You want to create amazing and memorable experiences? Try following a simple piece of advice:

Have some fun.

(jvb)

↑ Back to top

Jeremy was born with six toes on each foot. The extra toes were removed before he was a year old, robbing him of any super-powers and ending his crime-fighting career before it even began. Unable to battle the forces of evil, he instead works as the Director of Web Development for the Providence, Rhode Island based Envision Technology Advisors and teaches website design at the University of Rhode Island. His portfolio and blog, at Pumpkin-King.com, is where he writes about all things Web design.

  1. 1

    After reading this article the word ‘fun’ has now lost all meaning and sounds silly to me. Fun, fun….fun FUN….it almost looks like a swear word now. :)

    Great read!

    4
  2. 2

    Great article, although my opinion may be a bit far from it.
    I truly believe that every website has place for fun.
    The same as every website has place for being serious, mad, colorful and so on.

    I think that you can’t say that a website should be fun or not just by what it is (in most of the cases anyway).
    Careful analysis will direct you to the correct path over time.
    I am sure that there is place for fun in a bank website, the same that I believe that is place for seriousness in a game website.
    It all goes down to the core values of the client. The decision will be much clearer then and you will know if “fun” works or not.

    8
    • 3

      Excellent response. There is indeed room for seriousness in fun sites the same way there is room for fun in serious sites. It’s not one or the other and how you apply either, with the values of the client and the goals of the project in mind, will be what is truly important.

      2
  3. 4

    There was some fun in this author’s bio :)

    0
    • 5

      There sure is – and when I meet people who have read it, they often remember me because the bio made them laugh, which is exactly what I am going for! Fun = memorable.

      5
  4. 6

    Well-written and inspiring article, Jeremy! I recently thought about exactly the same subject and came to a conclusion that *fun* can come in many forms.

    I find it fun if I can somehow be part of the website, like filling in something that changes the website’s behaviour or colors for example.

    It’s also fun to see a very familiar website offering something (positively) unexpected every once in a while. It doesn’t need to be a technical trick or fancy graphics although the two are probably the most commonly used.

    PS. Wikipedia has also one cleverly embedded fun factor, the random article -link. Sometimes I just go there to push it in hope to discover something I wouldn’t possibly stumble upon otherwise. (Which leads to StumbleUpon service)

    1
    • 7

      Excellent addition – allowing the user to personalize the experience in some way is certainly a way you can engage them further and help them remember the site since they did something to “make it their own.”

      0
  5. 8

    Great article! We all get caught up in the normal boring process of setting up a site. A lot of us have forgotten why we got into this craft to begin with, to have fun! That’s why I do it, for the fun of it, solving problems and enjoying myself.

    0
  6. 9

    Fun e-commerce/shopping cart examples please!

    1
    • 10

      The book that I mention at the end of this article, “Designing for Emotion”, gives a good example of an ecommerce site that uses fun – PhotoJojo. The cart icon is sad by default, but add something to your cart and watch what happens!

      On the individual project pages, you can also click the “do not pull” lever for another surprise that adds a memorable bit of interaction to the site.

      1
  7. 11

    What an excellent article! Some people have forgotten the meaning of the word fun; it’s great to see someone spreading it once more! The web can become a stale place, but some of the designs you’ve featured here are truly inspiring and remind me that the web is in fact a wonderful place!

    1
  8. 12

    Sounds fun.

    -5
  9. 13

    Thanks for the article! Have fun, damn, for god sake!

    0
  10. 14

    The ‘fun theory’ certainly works in most cases. As a web developer, it’s great to see someone went ‘the extra mile’ and tried to engage their visitor. I dislike funny 404s because they’re a bit cliche. Why not offer a search-box, or a site-map to bring the visitor elsewhere?

    Most everyday joes don’t know what a 404 is, so the least you can do is guide them, not have a geek-out message.

    A great example of the fun approach is on this site:
    The SXSW Beercamp scroll parallax site: (2011.beercamp.com)

    I imagine it took serious bravado to pull that off, as not many people upon first visit would know what the hell is going on, but for me it paid dividends, as it kinda forced me to read the site, as I very rarely read large blocks of text anymore.

    (Twitter has bite-sized my neurons). Which brings me to the final conclusion:

    Unless you dare to be different, fun, and engaging, your visitors will not pay attention to your message.

    Also, shameless plug of my own: http://www.davidhiggins.me/ has a mario brothers 1-up booster mushroom that zips back to the top of the page. For a very basic and plain site, it is a small token of my appreciation for the fun of everyday life.

    3
  11. 15

    This has me thinking that there are a lot of lessons here for nonfiction authors who can integrate design elements into their works as well. My sense is that we have a lot of possibilities for creative communication, especially with the growing E-book market.

    0
  12. 16

    I would like to add from what you’ve said “Unless you dare to be different … pay attention to your message.”: it can be fun and at the same time the amount of work required is a lot more. Unless of course the practice of efficiency is applied – the photos above are the best examples – simple & straight forward design structure which works best with simplistic websites unlike Wikipedia and such (the average human, I presume, is not yet capable of handling massive amount of data as in Wiki articles and have fun at the same time reading it).

    I would like to see an attempt of Wikipedia ‘Fun-alized’. I think Smashing Magazine is somewhat like a Fun-alized Wikipedia actually.

    1
  13. 17

    I have been critical of Smashing Magazine in the past, (as well as I have been full-of-praise) I think for the most part this was of a noble intent, however, I guess I am ready to admit, I might have been -at times- just being a hater. I have let my imaginary lats get the best of me and rejoiced at an opportunity to set an article aflame with a comment. Me, an authority on design and development? Ha!

    But I am not the type to hold a grudge. Not even against myself. :)

    Anywho, what I would like to say is, I very much enjoyed this post. Sometimes I push the boundary too far ( For example, I cannot help myself from adding :) happy faces at the end of happy sentences, even in professional emails where I know I probably should not. It’s a compulsive thing now. If I get the idea to add a smile I really HAVE to add it.) never the less, I am very much a fan of the FUN approach and factor in web design. I am glad to see the idea embraced by one of the most influential design and dev related websites. (Refraining from adding ‘yay!’ with a smilie face at the end of that sentence is a challenge to my self control at this very moment.)

    [In case you were wondering, NO, I am not being facetious. I really am this much of a weirdo!]

    Of course it is not appropriate in all settings. But in so many- it is, and very effective no less. When a website is actually fun in some way, it’s just friggen fun. And I am always impressed with a creative, unusual or innovative element of fun in a website. The kind of thing that doesn’t make you want to wretch, but comes across as organic and achieves the desired effect.

    ( To answer your next question about me XD, yes, as a matter of fact, I do attempt to interject a little bit of fun on my site pixel-vixen.com .

    Okay, now I am being entirely too silly. But if you catch my drift, it’s a lot of fun.

    BTW- Jeremy Girard, loving your site. Thoroughly pursuing and off now to read more of your blog articles.

    1
    • 18

      Thanks for the kind words on the article and my website. Personally, I think adding a smiley face to an email, business-related or not, is fine. If that is who you are, then embrace it! If someone will take offense to you having some fun, do you really want to work with them anyway? Of course, there is a balance that needs to be struck. You don’t want a professional email to transform into such a loose, informal communication that the importance of the message and your work is minimized, but if you are happy about something and wish to express that joy with a smiley – I say go for it.

      As you said – fun is “just friggen fun” and we can all use a smile (or a smiley) from time to time. :)

      3
  14. 19

    Thanks for everyone’s comments so far – especially the other examples of “fun” websites and experiences.

    Keep them coming – I’d love to see some more examples!

    3
  15. 20

    Hey, I’m a fun guy, but I HATE humorous 404 pages. It’s the wrong time for humor. I feel like the company is laughing at my failure and doesn’t take their customer service seriously.

    It’s like I’m a waiter and I bring the wrong order out to you and say “Aw snap, I guess i goofed that one, ha ha ha. Not funny.

    -1
    • 21

      Indeed. And what’s with the designs that incorporate classical styled graphics? Why are we rolling back 50 years of technology? Does that mean we’ve accomplished gibber for the past 60 years as it proves that the graphics in the 50s were a lot more fun to see than what we have today? Get with the times.

      0
  16. 22

    As much as I love fun in websites, I’m still not sure all websites should be fun or memorable. When what you want to do is get attention, then be fun and stand out and be great for doing that!

    But the more we move our lives online, the more we do everything online, including the benign, monotonous things like banking or shopping, we don’t want these things to be fun or memorable. We want to get them done and forget about them.

    I’m not sure I want GMail or Google Reader or Basecamp or Mint.com or Amazon or any of the other places where I get work done to be fun or memorable. Very few of the tasks that these sites take care of are fun, and trying to make them so is patronizing, like if your bank put a trampoline in it’s waiting room.

    I want those sites to be memorable for being forgettable. I want them to be memorable in that the process of using them was so fluid, painless, and easy, that I forgot about it the minute I was done.

    If all our daily tasks were memorable we would need to remember a lot. Likewise, if all our daily tasks were fun, we would get fun-sick pretty soon.

    It’s like cutesy 404 pages. We all want those to die right?

    0
    • 23

      Oh, I forgot to add: Great article. You’re an awesome writer, and I like the stuff you do. Even if we do disagree on this one point :)

      0
      • 24

        Thanks – I’m happy you enjoy my writing, and I don’t think we disagree really. I agree that not all websites should be fun. You’re right, I don’t want “fun” to be what I think about when I consider my banking site – I want it to be easy to use and incredibly secure. I want it to be memorable because of how easy it was to get my banking done quickly.

        My point is that all websites CAN have fun added to them as one of the ways to make them more memorable. Fun is a tool we have at our disposal – but like all tools, it has its time and place.

        Going back to your bank example for a minute. I agree that putting a trampoline in the lobby of the bank would be out of place and silly, but what about some free coffee and a plate of cookies? How about the bank teller greeting you warmly when you get to the counter and addressing you by name if you are a regular customer? These are all small touches that make your banking experience more enjoyable. I certainly would rather be greeted with cookies and a smile at my bank instead of a dour looking teller who barks “Next!” when it’s my turn in line.

        So taking this online, while that bank’s website may not utilize cartoons and animation like some of the examples in this article, it should tap into the same sense of warmth that they use to greet visitors to their physical location to create a pleasant experience for their online users – while remaining easy to use and secure.

        It may not be “fun” in the strictest sense, but I think that creating an enjoyable, warm, and yes sometimes a fun experience, can make even the most benign and monotonous web interaction more enjoyable to use.

        0
        • 25

          Agreed. I suppose the line that struck me as off was “But one goal we have for all of our projects is that we want them to make an impression on people — we want the websites that we create to be memorable.” I’m still under the assumption that not all sites or site experiences should be memorable.

          0
          • 26

            That’s where I disagree. I think all sites should be memorable, even if that memory is simply that is was an easy site to use and you got what you needed done quickly. That ease of use has made a positive impression on the user, which means that will say good things about it if asked. I can’t see how that would ever be a bad thing?

            Positive word of mouth is perhaps the best type of marketing out there. Show me a site that DOESN’T want to attract users or have positive word of mouth marketing and then, maybe, that site would not want to be memorable – but can you name any sites that would fall into that category of NOT wanting to attract new users or business?

            0
  17. 27

    Thanks for featuring Two Giraffes! Fun was exactly the image that we were going for!

    0
  18. 29

    Great post. I’m all for taking the dull out of websites… even the more formal ones.

    0
  19. 30

    You’ve spelt Aarron Walter’s name wrong… it has two Rs :)

    0
  20. 31

    Nice post.

    We just did the same thing on the redesign of our page (mice, scientists, labs).

    We wanted something fun and cartonish :P

    1
  21. 32

    These are great designs. We are definitely seeing a swing in businesses understanding the great web design is important for future business growth.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top