Putting Fairy Doors Into The Design

Jared Spool

May 11th, 2006

In Ann Arbor, MI, fairy doors have started showing up at shops. According to National Public Radio, a six-inch white wooden door with a carved jamb framed by miniature bricks was the first to appear, outside Sweetwaterz Cafe. Since the spring of last year, seven more doors have appeared at businesses around Main Street.

Fairy door alongside the real door at the Red Shoes Shop in Ann Arbor, MI (from NPR.org)
Fairy door alongside the real door at the Red Shoes Shop in Ann Arbor, MI (from NPR.org)

Of course, these doors have no functional purpose. They only serve to delight customers and other folks who pass by, giving them something unexpected and different.

Little touches like this, in an otherwise mundane world, can serve to bring a smile to our faces, but they also have the ability of strengthening our bond to the attached brand. The shops, and even the city of Ann Arbor, now have something special about them: the fairies have moved in.

Finding ways to make our users life extend beyond the mundane is an excellent idea. It strengthen the bond the users have with our designs, making them that much more interested in accomplishing their goals.

What fairy doors have delighted you in designs you use? Have you put any fairy doors into your design?

Update: Jonathan b. Wright, the illustrator and creator of the fairy doors pointed us to his website. Definitely worth checking out. (I love how the kindegartners created fairy traps.)

19 Responses to “Putting Fairy Doors Into The Design”

  1. Ashley Gadd Says:

    How easy is it to put fairy doors into software without them getting in the way?

    In the real world, there is a lot of leftover space — walls with nothing on them, in this case. In software we’re frequently tasked with fitting too much information into not enough space. Do we really have room to spare for non-functional whimsy?

    I’d like to believe we do but I’m skeptical. I’d love to see examples of interfaces where this has been done effectively.

  2. Jared Spool Says:

    Ashley, good question.

    I’m thinking, in an interactive environment, fairy doors don’t have to take up space. They are just something things that bring a smile to the user. It can be as simple as a little animation transition when a button is clicked or option is chosen.

    Skype, for example, doesn’t have the usual beeps when it wants your attention. Instead, the noises are, at least to me, cute little swooshes and boops. Each time I hear them, I grin. In that way, they are a fairy door to me.

  3. Josh Peters Says:

    I think fairy doors really are tough to pull off in most designs. I think Google and Reddit do a nice job of providing that sort of thing (though I think of it more as an easter egg hidden in the open than a fairy door).

  4. Susan Curran Says:

    On the MIT campus map, cute messages come up at random while users are waiting for their selections to load.

    These were so well received that when the map was optimized to load faster, people complained that they missed the messages!

  5. Joel Flom Says:

    I think there’s a fine line between fairy doors and fairy fluff. From their home page, Sears provides a link to Sears Games in the lower right-hand corner. The current game involves mowing the lawn without running over cutesy squirrels, garden shrubs, etc.

    Where’s the value? Although customers can select a character to represent themselves, perhaps it would have been more beneficial to provide them with the ability to choose a mower from the product catalog. Then at least customers could envision themselves “enjoying” the mowing experience using a variety of mower types. Maybe even compare size, sound or style?

    Does this really engage or enlighten the customer? Will I return to Sears ready to play their newest game to break up my day? Loading the washing machine, perhaps? I think designers will need to weigh the value of fairy doors like these against the risks (e.g. customer off task) and the resources (e.g. dollars, resources, long meetings debating squirrel comps).

    Geez, maybe I should go out and mow the lawn to cool down.

  6. jonathan Says:

    Wheeeeeeeeeeeeee!!
    Glad you noticed, Jared.

    I do try and put a “fairy door” in my design…not ALWAYS literaly.

    PS. Whimsy DOES have a function.

  7. Ashley Gadd Says:

    Jared, that’s one way to rethink it. I like the idea. I also agree with the later posters who recognize there’s a fine line between, as Joel Flom said, “fairy doors and fairy fluff.”

    Whimsy strikes me as a great way to give your app character. Macs have this in spades with the little animations here and there, like the genie effect when a window’s minimized.

  8. Moe Rubenzahl Says:

    I have to disagree with the naysayers — a little whimsy takes negligible server resources and should not interfere with usability. The only hard part is coming up with them — humor is the hardest kind of writing.

    In our EE Glossary, we have several funny definitions and humorous touches in otherwise staid application notes. The CONTACT US link on each page is the schematic symbol for a a switch (a ‘contact’) — it’s an electrical engineering joke. Trust me, they laugh so hard they drop their slide rules into their Jolt Cola.

    What does it accomplish?

    Branding!

    Our company seems a bit more clever, a lot more human, and more memorable.

  9. Ben Saunders Says:

    I am very much in favour of this idea. However, I am fairly certain that the following is true: if your users are happy, fairy doors will likely make them happier; but if they are unhappy, fairy doors will likely make them even less happy.

    So (and I’m certain this is implicitly understood around here already): first make sure you build the thing right, and then look into adding stuff like this.

  10. Jared Spool Says:

    Ben, I think you’re absolutely right. This only works on top of a well-built design to start.

  11. Chris Says:

    We don’t have a fairy door at the foot of our blog. But we do have a potting shed. Will be adding mention of fairy doors later. It might catch on over here in the UK too.

  12. Fairy Stone State Park - Fairy Links Says:

    [...] UIE Brain Sparks Blog Archive Putting Fairy Doors Into The In Ann Arbor, MI, fairy doors have started showing up at shops. According to National Public Radio , a six-inch white wooden door with a carved jamb framed by miniature bricks was the first to appear [...]

  13. UIE Brain Sparks » Blog Archive » Twitter’s Fairy Doors Says:

    [...] Of course, frequent outages will continue to frustrate users, no matter how cute the messages become. However, adding a little levity into the situation does a nice job of communicating the bad news with personality. Levity and personality are two elements of a successful Fairy Door. [...]

  14. A Digital Sailor’s Diary » Blog Archive » Fairy Doors Says:

    [...] [via UIE Brain Sparks] [...]

  15. The “I Haven’t Posted” Post That I Am Posting. at doug nelson: DISENGAGE! Says:

    [...] In the meantime, I link you to UIE Brain Sparks’ brief discussion of “fairy doors” (a term I will now begin using constantly). [...]

  16. A Perfectly Cromulent Fairy Door at Flickr » UIE Brain Sparks Says:

    [...] Embiggen, a made-up word for a Simpson’s episode, found its way into an options screen at Flickr. We think that’s a perfectly cromulent fairy door. [...]

  17. Screenspace » Blog Archive » Adding Fairy Doors to your web (or other) design Says:

    [...] by, giving them something unexpected and different.” I first heard about these fair doors on the UEI Brian Sparks blog, on which Jared Spool makes this great statement regarding fairy doors and design: “Finding ways [...]

  18. » A business card with a story @ rhjr.net Says:

    [...] Fairy doors like this one can have a big impact on a user’s impression of a web site or application as well. We just need to paint a few. [...]

  19. natasha’s corner » Blog Archive » Nokia’s fairy door Says:

    [...] is a great example of fairy doors that are funny and don’t get in the way of the main goals for the [...]

Add a Comment