But adding joy isn’t just about making your users smile – apps that properly delight users are more engaging and more likely to be recommended than those that don’t. Delightful experiences can also become part of your brand, helping users associate your company with positive experiences.

Ben Yoskovitz put it well in a blog post about delighting users:

Let’s take a look at how we can effectively create joyful user experiences:

Easter Eggs

Easter eggs are hidden (or not so hidden) elements within the website or app that users “find” and are surprised and delighted by. A great example is the “Google Tilt” effect on mobile devices. Another example is MailChimp‘s chimp mascot popping in to tell you a joke or share a youtube clip. These easter eggs are charming and unexpected, which helps them engage users. They can also add a distinct human touch – users understand that a real human went out of their way to add something delightful to the site or app.

Though easter eggs may be delightful and engaging, it’s important that they don’t hinder the user experience. Easter eggs are best used in small doses. Over used easter eggs quickly lose their novelty and may even become annoying.

Gamification

Gamification is exactly what it sounds like: adding game mechanics to non-game related things such as websites or applications. Just to be clear, this does not mean that you turn your site into a video game. We all engage in game mechanics virtually every day, in all different areas of our lives. Game mechanics appear on the web in many forms. Foursquare and Gowalla make good use of game mechanics with their badge and mayorship systems. Some applications have features rooted in game mechanics that you probably don’t even realize. The Twitter follower count is a game mechanic, as is Digg’s voting system.

I believe the simplest (and arguably the most effective) game mechanic to implement is the mechanic of collection.  Any time your users stand to collect something (badges, followers, likes…) you are employing a powerful game mechanic.  As humans, we instinctively like to collect things. Martin Lindström put it best in his amazing book “Buyology - Truth and Lies About Why We Buy:

Lindström explains that collecting makes us feel more safe and secure and even in more control of our lives. Apps with collection mechanics also create powerful loss aversion in users. If you have collected a bunch of “badges” for example, you are far less likely switch to a competitor because on the current site you have collected something with “perceived value”. Personally, I love the Gowalla app, the ux and visual design, the vastly superior feature set… but I use Foursquare because of my “badges” and “mayorships”, and because I’m afraid of missing check-in deals. Perceived Value + Loss Aversion = Highly Engaged Users.

What can users collect in your app that will give them that sense of collection? What will make them fear the feeling of losing their collection?

Delightful Interface Elements and Flawless User Experience.

An obvious way to delight users is to make your UI and UX perfect (easy, right?). A great jQuery animation here or there can delight your users by making them feel like a god. Flipboard is a great example of this in action. The experience of using the app is so delightful that I find I consume far more content just because I love tapping and swiping through the interface.

Well designed, intuitive apps are more engaging and make the user feel in control. This is a good thing. If your app isn’t intuitive, users will be frustrated and the delight disappears. A colleague recently told me about his frustration with Mailchimp. To him, the app is unintuitive and frustrating. Because of this, no amount of funny MailChimp Easter eggs could help salvage his experience with the app into a delightful one. It’s important to remember the basics before branching out into more advanced delight tactics.

A few interesting links on the subject

• Gamification Framework for Interaction Designers – uxmag.com
• What’s in a game? – Nadya Direkova

Tour pages come in many forms. In my research I found several ways of naming tour pages. The most common were Tour, Take a Tour and Features, but others exist as well. Tours can also exist in different areas of a website. They can be displayed on their own page, on the homepage or other parts of the site. Regardless of the name or location, a tour page is an important tool for acclimatizing your users and building trust in your product. Let’s take a look at some best practices for designing Tour pages.

Showcasing Features

Strong typographic hierarchy is important on tour pages. Users will likely skim the page quickly to gauge the quality of your product or service.

In the example above from Squarespace they use three buckets with strong headings to explain simply what the service does. Try to draw your visitors attention to three to six key features of your product. Focusing on too many will overwhelm and frustrate users who are looking for a brief overview. Additional features can be listed (see example below) but keep them away from the main points you are trying to get across. As with most areas of design, less is more.

Some sites that showcase complex products use tabs to help simplify the number of features they display. This allows sites like Mint.com (below) to display a larger number of features while keeping a relatively low number key headings on each page.

When it comes to showcasing features, keep it as simple as possible. Visitors aren’t looking for a list of every little thing your product does. They just want to get and idea of what your product does and how easy it is to use. Don’t make it hard for them. Also, make sure your headings explain what problem you’re trying to solve. Figure out what the pain point is that your customers are desperate to have fixed and design your heading accordingly.

Show the #%!?ing product!

It’s amazingly important to show users the product or service you’re are giving them a tour of. It sounds obvious but many sites fail to display adequate screenshots of the thing they are trying to sell. A number of sites I came across either had tiny screenshots or useless snippets of the user interface. Some sites had no images of the product at all, which makes me wonder what they’re hiding.

The example above (Virb) does it right with big, clear screenshots and simple explanations of the interface. Not only are we introduced to the product but we also get a feel for how we interact with it.

Apple always predominantly displays screenshots of their products, like on this tour page for the Mac App Store.

Video

What’s the next big mainstream trend in web design? Many of the pros will tell you it’s video. Video is engaging, it’s as simple as that. You want your tour page to as engaging as possible.

As with your page headings, the points in your video should be clear and concise. Also, keep your video short, a minute or less is possible.

Call to action

A call to action is essential for any tour page. The number of tour pages I’ve visited without calls to action is shocking. After you’ve enticed a user with your amazing tour page it’s time to lead them to the next step.

Your call to action can prompt visitors to sign up for a full paid service, a free service, or a limited trial.

Examples

Mac App Store

Basecamp

Virb

Box.net

Campaign Monitor

Huddle

Kaleidoscope

Launchlist

Mint

Pulse

Squarespace

Things

Upload Robots

Conclusion

There you have it: Best practices and examples for designing compelling, simple Tour Pages. Please let me know of other great examples to add to the list. Any other comments are also welcome!

Let me share a few “features” of this site.

Simplicity and Minimalism

I set out to build something that was simple and clean but still accomplished my goals for the site. I did my best to focus on taking away anything I didn’t need instead of adding things.

HTML5/CSS3

I knew that I wanted to make a full HTML5 site before I even started wire-framing and I’m glad I went in that direction. This site was a ton of fun to code and I can’t wait until HTML5 becomes the dominant format on the web. I also added some CSS3 effects which I’m very happy with.

Tidbits

I wanted a place to share links, videos and pictures that I collect around the web. I was looking for something more permanent than a tweet so I came up with my “Tidbits” section. Take a look (on the right sidebar of every page) and let me know what you think!

New Blog Posts

I’m so excited to get back to blogging, I can barely contain myself! I plan on writing a lot more about design, branding, the tech startup scene and business in general. I will still be writing about social media but along side a greater variety of other posts.

Old Blog Posts

All of my old posts from my last site appear on this site

That’s about it. Thank you so much for checking out my site. I’d really appreciate hearing about any feedback or issues you come across.