Update - some links:
Pauls deck/audio (needs a bit of time to buffer)
Standard live blogging alert
I’m here at GumTree offices in Gumtree, thanks kindly to @cyberdees++ letting me know about this lunchtime talk. Paul Annett (@nicepaul) just gave a fun talk about “oooh that’s clever” design, which contains lots of fascintating ideas and examples around the subtle things, the hidden and unexpected and often functionally pointless, that delight people and get them talking.
Is this Stuff Relevant? 13 Million People Can't be Wrong
To demonstrate how people are fascinated by little secret details, he begins talking about his magic trick he posted to youtube, “This’N’That magic trick” with no less than 13M views. The interesting thing is the attention to detail people have, where the most commented thing is the few frames in which the third “magic card” is exposed. It’s like they have now discovered a little secret they can tell their friends about.
Offline Examples
You see similar things offline too: (sorry no links - I’ll just let you google these)
- The hidden arrow in the FedEx logo.
- The hidden bear in the Toblerone “mountain” logo.
- The Aerosmith logo, which still says Aerosmith upside-down.
- Darren Brown’s Trick or Treat logo, where the Trick is the Treat logo upside-down.
- The “truce” logo, where another “truce” fits into it.
- The Venetian Snares logo.
- Mickey Mouse symbols - Disney hides them in different places, e.g. a silluoette in a picture, a figure in a man-hole cover in the theme park, and even a field on Google Maps.
- The bottom of an Innocent Smoothies carton, containing various messages.
- The inside of Moo card packages, which contain little hidden cartoon figures when you dismantle them.
Hardware and Software Easter Eggs
This has been going on a while in technology with easter eggs. There are hardware easter eggs such as a cheetah on a microchip. Look at the glow an Apple Mighty Mouse makes. An irregular pattern? No…it’s definitely a real mouse outline. And of course software easter eggs, e.g. “about:mozilla” in Firefox, the saga continues.
The parallax employed on the Silverback website is a well-known example of this. (In fact, @psd talks us through it on I Can’t Believe It’s Not Flash.) Parallax has been used elsewhere since then. The holding page for twequency used it nicely. Tweet1 also has some lovely effects like this, and also has an easter egg figure (at least one) appearing. A lot can be done with parallax, e.g. you could use it jumble sites around. The effect here is just a demo, but could be expanded to something more.
It adds to the brand of a large company when you see it has a sense of humour, e.g. zooming into Google Moon would give you yellow cheese. Try “ascii art” or “recursion” searches.
dConstruct site had a nice easter egg where the hidden top bar would switch different stylesheet. Some people said it detracts from the experience, breaks proper design principles, etc.; but the point is, no, users can still get everywhere, it’s just a bit of a delighter for people in the know.
Transparency
There are many interesting uses of transparency:
- Modernista has a funnny iframe idea. Good example of transparency, which is a concept that’s under-used. Skittles also did this, much controversially, partly because they copied the idea from modernista.
- This trailer shows fake browser with things breaking out of it to promote the movie’s 3-d ness.
- fatuus.de
- CSS Zen Ocean (zen garden project)
- webleeddesign.com
- Wario Land video breaks your expectations of YouTube, such a well known site structure. Good example of a commercial application. Likewie, iPod Touch ad on Yahoo! Games.
- HEMA similarly breaks your expectations of an e-commerce site.
What's the Point of All This?
Kano Model of Customer Satisfaction: 2 dimensions. Customer satisfaction and Execution. “Performance needs” tend to improve both at the same time, e.g. quick hotel check-in; quick e-commerce delivery. “Basic needs” where execution is higher won’t delight (ie improve satisfaction) but they are just expected and their absence will cause negative satisfaction. “Excitement needs” - e.g. these little design features we’ve been talking about.
These change across time. What excited you last year becomes expected this year, i.e. as enough time passes, the expected need becomes a basic need.
Q&A
I asked paul about how to get these features known, when you obviously don’t want to just blab about them on your blog. With big sites, you can rely on people to discover these things by accident or investigation, but with little sites, they could sit for years without anyone spotting them. He mentioned it could be as simple as telling a few friends and see where that goes as one route. A more technical trick is positioning some text outside the document. Users will see it when they zoom out, and it would also be interesting to experiment with an image at the edge of a document turning out to be something unexpected when you zoom out to see the whole thing. “View Source” is another common thing you can play with. Tangentially related are playful copyright messages and 404 pages.
Someone mentioned “contextual delighters”. Things specific to certain users. e.g. “Welcome fellow Reddit user. Could also do the “styling visited links” hack to freak people out. Who’s going to make a site where your website tries to log into other websites using the same username and password, then says “actually you used the same password on flickr, so please change it”! (Paul urges us not to try this at home!)
