Despite the somewhat provocative title, you shouldn’t really stop designing aesthetics.

Gradients and colors and contrast are all good, but there’s a more important side to web design that many people overlook most of the time: Designing emotions.

Discussing emotion in design is a bit of a hot topic at the moment, it seems to be popping up in more and more blog posts and speaker sessions. In fact I saw at least three different web designers say that it was the subject of the talk which they had recently submitted for next year’s SXSWi.

So what’s all the fuss about? Today we’ll take a look at what that means, how you can do it and why you should. This is taking design to the next level, beyond the norm.

Emotion Design

1

Emotions are important in design because emotions are important in absolutely everything.

Everyone is trying to make their brand, their website, their name the most memorable thing possible but how are they going to accomplish that? Think of the most memorable times in your life, right now, go ahead.

I’ll wager a good amount of money that the three to four things that you just thought of all involved a lot of emotion. The death of a loved one, the birth of a child, your wedding, the day you bought your first car. We remember the things which instill powerful emotions within us.

In his book, The Alchemies of The Mind, Jon Elster emphatically states that “Emotions matter because if we did not have them nothing else would matter. Creatures without emotion would have no reason for living, nor, for that matter, for committing suicide. Emotions are the stuff of life…. Emotions are the most important bond or glue that links us to others…. Objectively, emotions matter because many forms of human behaviour would be unintelligible if we did not see them through the prism of emotion.”

Using Emotion in Web Design

2

As a web designer, it’s very easy to get caught up in just the design of the graphics. Of course the next step beyond that which everyone gets stuck on is usability.

So many people talk about usability like it’s the be-all and end-all of web design. As one speaker at the Future of Web Design in London succinctly put it this year: “Designing a website to be usable is like baking a cake to be edible. It’s simply not enough. A usable website should be the minimum requirement, it should go without saying that a website should be absolutely usable. It’s time to look beyond that.”

At the most basic level of considering your users’ emotions, you can consider letting them choose how they want your site to work. What content do they want to see on the home page? What order do they want to see it in? What’s their favorite color? Allowing users to customize your site to their preferences (without having to sign up for anything) creates and emotional attachment to the site with which the user is interacting. They’ve just invested time, however little of it, to make this site perfect for them. They’re going to remember that. Check out the BBC website if you want to see this in action.

What about making users happy without them having to do any customizations though? What about creating something that is so naturally pleasurable to use that people can’t put it down? Well, allow me to introduce you to my good friend: The iPhone.

The iPhone isn’t actually the story here, it’s the touch based device, regardless of who it’s manufactured by. As human beings we live in a real world, touching real things, moving them with our hands. In fact, if you think about it, computers are incredibly unnatural to use: We move one thing on our desk that moves another thing on a screen, and we spend hours pushing complex button combinations with our fingers whilst looking in a completely different (vertical) direction.

People are enthralled with touch based devices because they make computers work in a way that we’re naturally programmed to understand. We see something, we touch it, and it responds in some way. I recently watched a three year old girl navigating her way around an iPhone with absolutely no problems at all. The best part? No one had ever taught her to use it.

Touch based devices create emotions within us: joy, intrigue, and surprise. We understand them perfectly and yet they still thrill us because they’re so clever.

 

Creating Emotions

3

So how can we create emotions for users of our websites outside of the UI? Well, to an extent you need to put your marketing cap on here. You need to think about people, not design.

You need to think about perception, not composition. If you can ask yourself a few vital questions about how your users are feeling, then you can go a long way to pleasing them.

Consider FreeAgent for a moment, a fantastic piece of accounting software in the UK, they know that typically people who visit their website are angry, frustrated, and fed up with trying to do their accounts (and failing). Their website is targeted almost solely at cheering you up and telling you not to worry, there’s an easier way to do things. They win.

 

Desire

4

But what about creating emotions at more of a root-level? Apple (yes Apple, no article about design would be complete without some mention of them, so we might as well get it over with) create astonishing levels of desire and jealousy amongst their customers.

Despite producing over-priced, under-performing, over-rated products they still retain unprecedented success, constantly. Apple are the biggest fashion label of the tech world. That’s not an insult by the way, sex sells, and everyone else needs to catch up. Apple makes desirable products.

“Thin, beautiful, portable, durable, accessible, powerful, unlimited, magical, revolution.

Sound familiar? All of those words and sentiments were used in Apple’s 30 second advertisement for the iPad, and not a single one of them has anything to do with what the product does.

 

Sympathy

5

Another common case study of companies creating emotions in customers, and this is going to be a controversial one, is with charities.

Charities instill sadness and sympathy from deep within you, in order to make sales. Think of every advertisement you’ve ever seen for a charity… most of them go like this: “Sally is a [starving child / stray dog / person with a terminal illness], she’s all alone. Her parents died just after she was born and she’s been living on the streets like this ever since.”

The cause may be just, but don’t mistake the marketing tactics as legitimate sentiments appealing to your moral integrity. The people who create those advertisements know exactly what they’re doing. They’re making you sad, they’re making you sympathetic, and they’re making you want to reach out and help – with your wallet.

 

Anger

6

Possibly the most interesting way to look at deliberately instilling emotions in users is from the perspective of anger.

Now, this has been suggested before, but to my knowledge never confirmed. What do we consider to be great customer service? Usually it’s when a company gets something really wrong, they own up to it, give you a full refund and treat you really well.

It’s unexpected and we absolutely love it. It may be cynical, but is it really unreasonable to think that companies may now be screwing up your order on purpose? If I was running an ecommerce store I would deliberately screw up about 5% of all my orders – then give the customer a full refund and send them the product anyway.

You can’t buy publicity like the way they’re going to talk about that to all their friends.

For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that we’ve stopped having to think about how it’s done… that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all.

These experiences are not just frustrating for us, but are bad for businesses as well. How bad? User Interface Engineering’s analysis of a major online retailer found that 45% of all customers had multiple registrations in the system, 160,000 people requested their password every day, and 75% of these people never completed the purchase they started once they requested their password.

To top it off, visitors who are not logged in do not see a personalized view of a website’s content and recommendations, which reduces conversion rates and engagement. So, log-in is a big deal — big enough that some websites have started exploring new designs solutions for the old problem.

Is This You?

Gowalla’s sign-in form (below) looks pretty standard: enter your user name or email address and your password, and then sign in. There’s also help for those of us who have forgotten our password or are new to the website. In other words, all of the most common log-in user-interface components are accounted for.

Fig1-gowalla in New Approaches To Designing Log-In Forms
The sign-in form on Gowalla.

But Gowalla has taken the time to include a few more components to help people log in with more confidence if their first attempt hasn’t worked. If you attempt to sign in with a user name (or email address) and password that do not match, the website not only returns an error but returns the profile image and user name of the account you are trying to sign into as well:

Fig2-gowalla in New Approaches To Designing Log-In Forms
A log-in error on Gowalla.

Including a profile picture provides instant visual confirmation: “Yes, this is my account, and I may have forgotten my password,“ or “No, this isn’t my account, so I must have entered the wrong user name or email address.” In either case, Gowalla provides a way to resolve the problem: “This isn’t me” or “I don’t know my password.”

The Q&A website Quora takes a similar approach, but it doesn’t wait until you are done trying to sign in before providing feedback. Quora’s log-in form immediately tells you if no account is associated with the email address you have entered, and it gives you the option to create a new account right then and there:

Fig3-quora in New Approaches To Designing Log-In Forms
Quora instantly lets you know if there are no matching accounts for the email address you have entered.

If the address you have entered does match an account on Quora, then the account’s profile image and user name will appear to the right of the log-in form. This confirmation is similar to Gowalla’s but comes right away instead of after you’ve submitted the form.

Fig4-quora in New Approaches To Designing Log-In Forms
If the email address you enter on Quora matches an account, you get visual confirmation instantly.

Instant Sign-In

Quora’s log-in form also includes an option to “Let me log in without a password on this browser.” Checked by default, this setting does just what it says: it eliminates the need for you to enter a password when re-logging into Quora. All you need to do to enter the website is click on your profile picture or name on the log-in screen.

Fig5-quora in New Approaches To Designing Log-In Forms
Quora’s one-click log-in page.

To go back to the standard log-in screen, just click the “x” or “Log in as another user,” and then you can sign in the hard way: by entering your email address and password.

While one-click sign-in on Quora is convenient, it doesn’t really help you across the rest of the Web. For that, many websites are turning to third-party sign-in solutions.

“Single-sign-on” solutions such as Facebook, Twitter, OpenID and more have tried to tackle log-in issues by cutting down on the number of sign-in details that people need to remember across all of the websites that they use. With these services, one account will get you into many different websites.

Fig6-signinoptions in New Approaches To Designing Log-In Forms
A sampling of single-sign-on solutions.

Logging in this way is faster, too. When someone connects their Facebook or Twitter account to a website, they simply need to click the “Sign in with Facebook (or Twitter)” button to log in. Of course, they need to be signed into their Facebook or Twitter account in order for it to work with one click. But with 50% of Facebook’s 750 million active users logging into Facebook on any given day, the odds are good that one click is all it takes.

You can see this log-in solution in action on Gowalla (screenshot below). A Gowalla user who has connected their Facebook account needs only to click on the “Log in with Facebook” option in order to sign in — provided they are already signed into Facebook, of course. If they’re not signed into Facebook, they’ll need to do that first (usually in a new dialog box or browser tab). After doing so, they will be instantly redirected to Gowalla and logged in.

Fig7-gowalla in New Approaches To Designing Log-In Forms
Gowalla provides an option to log in using your Facebook account.

New Log-In Problems

But with these new benefits come new problems — usually in the form of too many choices. When faced with multiple sign-in options on a website, people do one of the following:

  1. They remember the service they used to sign up (or that they connected to their account), and they log in instantly. This is the best case scenario.
  2. They assume they can sign in with any third-party service (for which they have an account), regardless of whether they have an account on the website they are trying to log into. The thought process for these folks goes something like this: “It says I can sign in with Facebook. I have a Facebook account. I should be able to sign in.”
  3. They forget which service they used to sign up or if they used one at all, and thus hesitate or fail to log in.

To make matters worse, if someone picks the wrong provider, instead of signing in to the service they’re trying to use, they might end up signing up again, thereby creating a second account. While a website can do its best to match accounts from different services, there’s no completely accurate way (that I know of) to determine whether a Twitter and a Facebook account definitively belong to the same person.

So, while third-party sign-in addresses some problems, it also creates a few new ones. In an attempt to solve some of these new sign-in issues, we’ve been experimenting with new log-in screen designs on Bagcheck.

Our most recent sign-in screen (below) is an attempt to reduce confusion and prevent the types of errors I have just described — admittedly, though, at the expense of one-click sign-in. In this design, people are required to enter their user name or email address to sign in. We use instant search results to match their input to an existing user on the website, so someone needs to type only the first few letters of their name to find their account quickly. This tends to be much faster than typing an entire email address. But because more than one person is likely to have the same name, we provide the ability to sign in with an email address as well.

Once someone selects their name or enters their email address, then their options for signing in are revealed. No sign-in actions are shown beforehand.

Fig8-bagchecksignin in New Approaches To Designing Log-In Forms
The current Bagcheck sign-in screen does not reveal any log-in options until you select your name or enter your email address.

True, in this design people can no longer sign in with one click, because the sign-in buttons are not visible by default. But this may be a trade-off worth making, for the following reasons:

  • We keep people signed in until they explicitly sign out. So, hopefully people will rarely need to go through the sign-in process. Remember: the less people need to log in, the fewer sign-in problems you’ll have!
  • The added amount of effort required to sign in is small: just start typing your name and select a search result, or enter your complete email address, and then click the sign-in button. It’s not one-click, but it’s not a lot of work either.
  • Trying to sign in with an account provider that you have not set up on Bagcheck is no longer possible, because the log-in buttons don’t show up until after you have selected your name. This cuts down on duplicate accounts and confusion over which account you have signed up with or connected (especially on different browsers and computers where a cookie has not been set).

On mobile, however, these trade-offs may not be worth it. Logging into a website on a mobile device by typing is a lot more work than just tapping a button. So, in the Bagcheck mobile Web experience, we’ve kept the third-party sign-in buttons front and center, allowing people to log in with just one tap. It’s just another example of how the constraints and capabilities of different devices can influence design decisions.

Fig9-bagcheck in New Approaches To Designing Log-In Forms
The Bagcheck mobile Web experience keeps one-tap sign-in options visible.

Since launching this log-in experience on Bagcheck, we’ve gotten a lot of great feedback and ideas for improving the interactions. Many people have suggested using browser cookies to set a default sign-in option for returning visitors. While this might help people who return to the website using the same browser, we’ve seen many more sign-in issues when people use a different browser or computer. In these cases, a browser cookie won’t help.

Another common question is whether allowing anyone to search the list of Bagcheck users by name or email address reduces security. While this design does somewhat reduce the security of a Bagcheck account (compared to our previous log-in screen design), it’s no worse than many websites that let you sign in with your public user name, like Twitter.

And because all Bagcheck profile pages are public, users can be searched for on Google and on Bagcheck itself. Despite this, we’ve seen a bit of increased concern over this same search capability being on the sign-in screen. So, if you’re thinking about trying this design, make sure your profile pages are public, and be aware that people may still be a bit sensitive about it.

We’ve All Got Email

Although signing into a service with one’s name may be too new for some people, logging in with an email address is common practice for most. Using a solution that brings together a lot of the ideas outlined in this article, Google’s Identity Toolkit and Account Chooser allow people to sign in across the Web using just their email address:

Fig10-google in New Approaches To Designing Log-In Forms
Google’s Identity Toolkit allows people to sign in with a number of email verification options.

When multiple accounts have been accessed in the same Web browser, each account is listed as a sign-in option, making account selection easier. If you want to try out this sign-in solution, you can opt in on Google’s website or implement it on your website with Google’s Toolkit.

Fig11-google in New Approaches To Designing Log-In Forms
Selecting from multiple accounts on Google’s experimental sign-in page.

The Little Things Matter, Too

The Bagcheck and Google examples we just looked at try to rethink log-in pages in big ways. But not all sign-in innovations need to be so comprehensive. Even small changes can have a big impact. For example, I mentioned earlier that inputting text precisely on mobile devices can be harder than on full keyboard computers. Coupled with obscured password fields, this can make logging into a website on a mobile device a challenge.

Facebook’s mobile Web experience tackles this in a small but useful way. If you enter an incorrect password when trying to sign in, the website will change the password field to plain text so that you can actually see your input. Facebook also offers an alternate way to log in, using your email address or phone number (screenshot below). It’s a small enhancement but one that can go a long way on mobile.

Fig12-facebook in New Approaches To Designing Log-In Forms
Facebook does a lot to help you log in on mobile.

It’s Not Over

As these examples illustrate, even the most common interactions on the Web (like logging in) could benefit from new ideas and design improvements. Not every idea I’ve walked through here will become part of all the log-in forms we encounter on the Web — chances are none of them will. But without trying, we’ll never know.

So, if you have some new ideas for signing in or any other Web interaction we’ve come to take for granted, try them out and let the rest of us know what you’ve learned!

Google+, Hipster, Connect.me and Instagram! They all hit a gazillion users in no time at all — and you can even read all about it in everyday media today. This is every product creator’s dream. Ok, granted, Google already had their users well before the launch of its social extension. But how did the other ones succeed in building such a strong fellowship in a few months (or even days)?

Turns out that many of these services’ creators were very busy bees and made small details about their product’s launch addictive. It even turns out that many start-ups were indeed able to launch to a strong following (not much unlike Google+) through collecting interested users, email addresses, Twitter followers in any way they could well ahead of their public appearance using a combination of very common and old marketing strategies with clever launch pages.

In this article, we’ll outline some best practices and examples of successful viral launch pages. Let’s define a viral launch page not only as a “Coming soon” landing page, but also as a usable beta page or even in some cases a finished product page.

Fundamentals Of The Viral Launch Or Landing Page

The first rule of viral is of course that you must build something that other people would actually be interested in for one reason or another. Let’s emphasize this, using the words of Robert Scoble: “The best launch is if you have a product that other people like using so much that they tell other people about it.” The users you target need to know at least one bit of information in advance that will make them care. Then, only then, can you move on to the next step, which is to facilitate and encourage sharing.

Normally, you’ll want to (1) let visitors know what you’re doing, and then (2) spark some interest. Then you should (3) make use of that interest by giving them a chance to subscribe to your news updates, doing so with a bright call-to-action button. Lately, so-called stealth start-ups have become quite popular because of the interest they are able to generate. They typically won’t tell you what they’re doing, which means they’re ignoring step (1), but somehow they still manage to grab your attention.

Here are the basic elements a launch page should have:

  1. A clear value proposition that interests people. (What problem will you be solving?)
  2. If your strategy is stealth, then why should people care? (For example, are you Jack Dorsey?)
  3. A notification form, with a bright call-to-action button.

Examples of Basic Launch Pages That Spark Interest

Even very basic launch pages can do a great job of advertising the product if they are memorable, viral in some way or desirable to visitors (or all of the above). You can read more about these characteristics in the recent Smashing Magazine article “Building An Effective ‘Coming Soon’ Page for Your Product.”

Stripe
Stripe has a simple landing page ready for visitors, with one concise sentence: “We’re making it easier to accept payments online.” This is followed by a simple call to action: “Get notified when you can use @stripe”. The app’s name is also the company’s Twitter handle, so you can opt to subscribe to updates through Twitter. This implementation is very minimalist and suggests that the service does one thing very well. Who wouldn’t want an easier way to accept payments online?

Stripe-screenshot in Elements Of A Viral Launch Page
Elements: slogan; notification form; call to action; Twitter handle in copy.

Milk
Milk doesn’t tell you what exactly it’s building, but it makes sure the team can reach you once it has something to say. What makes this landing page so successful? It’s the new venture of Kevin Rose (Digg’s founder). Also note the subtle “pleasantly infrequent updates” for email, Facebook and Twitter, which puts us much more at ease with subscribing.

Milk-screenshot in Elements Of A Viral Launch Page
Elements: slogan; notification form; call to action; Facebook and Twitter handles.

VaultPress
You may need to give more information up front in order to get the message across. Here is how Automattic launched VaultPress, a back-up service to give WordPress bloggers peace of mind. The text does three things:

  1. It sets your expectations of what VaultPress will do (which is to keep your blog and server safe).
  2. It collects data from those who fill out the sign-up form (data that will validate their idea).
  3. It creates a sense of exclusivity, because not everyone can join immediately.

Vaultpress-screenshot in Elements Of A Viral Launch Page
Elements: copy that explains what VaultPress does; an integrated sign-up form.

Sumazi
Instead of focusing on the product itself, Sumazi tries to get you to follow it on its social profiles and to share the news with your contacts. Registration is done through Facebook. It’s a first attempt to add a small viral loop to the launch page.

Sumazi Landing in Elements Of A Viral Launch Page
Elements: simple copy; integration with social networks (for sharing).

Let’s see how other start-ups have used the viral loop, and how this effect has sparked real enthusiasm for start-up launch pages.

Additional Elements That Can Make A Launch Page Go Viral

In addition to the basic elements covered above, start-ups have recently been using some of the following elements to make their landing pages more enticing:

  • Viral loop,
  • Exclusivity and scarcity,
  • Glimpses of the beta,
  • Social proof,
  • Viral content.

You will find all of these in the examples below. Many of the elements are often combined in meaningful ways.

Adding a Viral Loop

The viral loop is a kind of “sharing cycle” or “multiplier effect” that is built into the launch page. It’s an incentive for people to share news of the start-up and to share the sign-up form with their friends and followers. Forkly’s landing page was one of the first to successfully tap into this effect .

Forkly
Forkly is an innovator in this popular viral invitation system. If you want to be notified of Forkly’s launch, you can leave an email address in the form on the landing page. Once you hit the “Go” button, the page reloads and gives you a personalized link that you can share with friends and followers. If at least three of your friends join, then you will get early access to the service. And the more friends who join, the earlier your access will be (Update: they’ve just launched their app to the public) .

Forkly Landing in Elements Of A Viral Launch Page
Top: a simple informative landing page. Bottom: a simple viral loop.

Add an Incentive to the Sign-Up Process

Forkly’s incentive to share is a strong one: you’ve signed up to use the service anyway, so why not share it with a few friends so that you can gain access even earlier. This was a smart move and has been copied repeatedly since. But there are countless other ways to incentivize sharing.

ResourceGuru
ResourceGuru is giving away an iPad 2 to one of the people who share its link. Who doesn’t want an iPad 2 these days? Think about it: would you subscribe to ResourceGuru if it had only used Forkly’s strategy? Would you subscribe if an iPad was (potentially) waiting for you? These incentives are most effective when the item has an aspect of exclusivity. That’s why you see so many give-aways close to the launch dates of Apple gear, when no one yet possesses the gadget.

Resourceguruapp Landing in Elements Of A Viral Launch Page
ResourceGuru throws in the prospect of winning an iPad for sharing a personalized link.

Alternative Ways to Subscribe

In some cases, you might want to offer other ways to subscribe to your news, particularly if your users are mainly on Facebook, Twitter or Tumblr and like to consume news in ways other than through email.

RumpelDealSkin
RumpelDealSkin offers various ways to get the inside scoop: email, phone, text message, postcard. Additionally, there are links to its social profiles.

Rumpeldealskin Landing in Elements Of A Viral Launch Page

Stealth Start-Ups

Lately, the “stealth start-up” method has been quite popular, due to some spectacular successes (including Hipster, Connect.me and Kohort). It’s a way of making something publicly known without actually letting people in on what you’re doing. This could elicit another level of interest in your start-up, but let’s face it: it’s a tough ride. Are you able to leak as little info as possible but still make people genuinely excited?

Hipster
Hipster is a good example of a stealth start-up. Hipster managed to gather 10,000 addresses in just two days after its public marketing launch. And it happened before anyone knew what it does. The cool name and slogan (“Something cool is coming to San Francisco”) turned out to be the perfect marketing mix. The story was picked up widely and quickly by bloggers and media alike. People wanted to know what it is, and they left their email addresses in bulk and shared the links happily with their friends (Hipster used the Forkly approach) to be among the first to see the service.

Hipster Landing in Elements Of A Viral Launch Page
Elements: intriguing name; fitting slogan; fitting background image; call to action.

Notice the value proposition that complements the name. Then there’s the simple call to action button, and the background that would appeal to San Francisco residents and others. (Wouldn’t you want to know what you’re missing out on?) This happened in January 2011; as of this writing, Hipster is still building its service which will be some kind of local Q&A. But take a moment to check out the hiring page to see how it’s still using its name to tell a story.

Supyo
Supyo has received a lot of attention as a result of its founders, long-time collaborators Shawn Fanning and Sean Parker. They have set up nothing but a splash page for now, which means they cannot collect addresses. (Update: they’ve just added an email notification form.) Shawn Fanning and Sean Parker will create buzz even if only for their Web celebrity status.

Supyo-screenshot in Elements Of A Viral Launch Page
Elements: logo; social proof.

Amen
The same is true for Amen. Their landing page doesn’t sport anything but a cryptic (and interesting) message of what it is going to be: “The best place for having an opinion in the World”. Rumors of what the service will be and the fact that Ashton Kutcher and Madonna’s manager invested here keep the interest alive (also the first Twitter engineer Florian Weber is a co-founder).

Amen Landing in Elements Of A Viral Launch Page
Elements: explanation of what it does; Similarly to Hipster: an unconventional branding.

Allow People to Reserve User Names and Integrate With Social Networks

Connect.me
Connect.me is another stealth start-up with an incredibly viral sign-up page. Apart from its memorable domain and brand name, it communicated almost no information on what it’s about; an “About connect.me” link appeared in the bottom-right corner, but it didn’t really explain what the app would do.

Connect Me Landing in Elements Of A Viral Launch Page
Top: reserve your user name; get early access; register only through social networds. Bottom: revamped landing page with the same structure but with an explanation of the service.

Unlike the services mentioned above, Connect.me did not ask you to leave an email address. You could only register through Twitter or Facebook. Also, did you notice that instead of something like, “Invite friends to get early access,” the copy says, “Reserve your username to get early access”? This makes it clear that early adopters will have dibs on vanity URLs. This can be very effective with people like me, who have common names and want to register a good URL.

If you went through with the registration, the app would automatically tweet or post a simple message on Facebook: “Reserve your Connect.me username [link].”

This simple approach generated roughly 20,000 sign-ups in a short span of time and even provoked fears of a scam in the blogosphere shortly after. When you visit the website now, you’ll find a landing page (in green) telling you exactly what the service does. The “Reserve your username” is still there, but it has been turned into a central call-to-action button.

The success of strategies like those used by Forkly, Hipster and Connect.me have even led to the creation of a start-up that takes care of the sign-up process for you. LaunchRock does all the heavy lifting, leaving you to concentrate on building the actual software.

LaunchRock
Once you’ve submitted your email address, you’re immediately given the option to do a few things with your link: tweet it, share it on Facebook or email it to friends. The tweet is pre-written and contains a lot of important elements:

  1. Your brand name, and an announcement that you will be launching soon;
  2. Social proof: “Follow me! I’m first in line.”
  3. Your personal link;
  4. Your brand’s Twitter handle.

Launchrock Landing in Elements Of A Viral Launch Page
LaunchRock will take care of your viral launch page.

Even if you don’t use LaunchRock as a service to launch your product, it still has a lot to be inspired by. I would even argue that now with so many newly unveiled LaunchRock sites you would do your launch a disfavor for looking like another me-too.  LaunchRock’s blog provides a good analysis of the viral “Coming soon” page.

Especially Twitter Integration

Many services that succeed in generating some idea or product that people want to share on Twitter (and Facebook) experience a hell of a growth rate. This was the case with Threewords.me and Turntable.fm, which recently became the most shared music start-up on Twitter, because people love to announce what they’re doing at a given moment (check out the real-time search results of Turntable.fm’s hash tag). Let’s look at two examples:

Shuush
Shuush is a Twitter reader that scales back users who tweet too often and amplifies people who don’t tweet as much. As a byproduct, users are assigned Shuush levels that they can tweet out. Users like to share facts about themselves, which we’re seeing over and over again.

Shuush Twitter Integration in Elements Of A Viral Launch Page
Elements: explanation of the service; sign in with Twitter only.

Instagram
Instagram has no conventional landing page (and didn’t have a conventional viral launch page when it launched). Rather, its viral circulation comes from people sharing their images on social channels, mainly Twitter. You can instantly recognize these images by the branded URLs, like of this image by Justin Bieber, http://instagr.am/p/IMhuj/, which made the service literally explode on July 21st.

Instagram Twitter Integration in Elements Of A Viral Launch Page
Elements: landing page has a call-to-action “Download” button; the viral loop comes from people who share the service’s output (images) on Twitter and other services.

Sell a Half-Baked Product for Half the Price

Minecraft
Minecraft is an online gaming phenomenon, and its adoption has been mind-blowing, with 2,932,884 licenses sold in the beta phase. People are willing to sign up early, especially if a discount is offered because the product is not yet ready. When Minecraft is finished, it will sell for €20.00. Right now, at 25% off, you can get it for €14.95. Discounts for early adopters are a no-brainer.

Minecraft Landing in Elements Of A Viral Launch Page
Minecraft offers a discount during the beta stages. As the product advances, the discount shrinks.

Lifepath
Lifepath turns this approach on its head. The service is invite-only, and because people might very well want to use it, the company invites visitors to buy an “entrance ticket”. The closer the service gets to completion, the lower the entrance fee gets. Note that registrations fared better when the fee was $10 than when it dropped to $3 . This is an interesting insight that the creator Dustin Curtis shared on Twitter.

Lifepath Landing in Elements Of A Viral Launch Page
Elements: exclusivity; call to action.

Exclusivity

Exclusivity can be a powerful way to convince people to join. Facebook, which started out as private to one university, now has the biggest following of them all.

Sugarhigh
When you receive an invitation to this invite-only newsletter, you’re redirected to the landing page, where a counter displays the time you have left to register.

Signup-screenshot-88 in Elements Of A Viral Launch Page
Elements: invitation only; sign up within 24 hours of being invited.

Turntable
Turntable is the red-hot music start-up that allows you to join rooms and DJ along with other people, mainly friends. The landing page says, “If you have a Facebook friend already on Turntable, you’re in!” This enables the company to grow the service organically, making sure that only like-minded people join and slowly adjusting and scaling up its servers. If you know no one on the service, you can leave your email address.

Turntable Landing in Elements Of A Viral Launch Page
Elements: exclusivity; social proof.

Tell a Story, Add Personality

Telling a story is a powerful way to interact and tell people about your product (and has a clear psychological aspect). Stories can captivate an audience, which is exactly what you want for your launch page.

Evertale
Evertale is an Android app that automatically scrapbooks your life. The creators explain this very visually as you scroll down the page. Your path is marked on a map, and when you reach the bottom you’ll see a call to action, where you can leave your details.

Evertale Landing in Elements Of A Viral Launch Page
Evertale gives its elevator pitch as you scroll down the page.

It turns out that scrolling is a useful technique for making information engaging and telling a story. Check out these other services with slightly alternative approaches:

  • Ben the Bodyguard
    A Frenchman protecting your secrets is the theme of the viral launch page for this iPhone app.
  • Nizo
    Another launch page for an iPhone app. Notice how the page elements move around.
  • Kaleidoscope
    The landing page for a Mac OS app. Each major feature is given its own section.
  • Ala
    The landing page for a Swiss illustration and interface design studio.

The Last Rocket
Telling a story has a lot to do with authenticity and staying true to one’s purpose. The Last Rocket is 8-bit at heart and conveys it well on its launch page.

Last Rocket Landing in Elements Of A Viral Launch Page
Story told exclusively in 8-bit.

Social Proof

Social proof (one of six “weapons of influence,” according to Robert Cialdini) can be a powerful and compelling way to get people to sign up for your service (or at least for the launch news). In a nutshell, the concept states that people will do what they see other people doing. We have seen this demonstrated with the viral invitation system used by Forkly and the social network-only system used by Connect.me. A complementary feature would be to showcase your sign-ups or Likes front and center on the home page.

Gidsy
Gidsy is an online marketplace, and as such it needs the trust of the community. Therefore, the company shows the love it’s gotten from real users on its home page, along with two key elements: a few explanatory words, and a sign-up form with a call-to-action button. You’ll find a button labelled “Host an activity” in the header, although the service is not yet fully operational. By checking it out, however, a lot of people will be convinced to come back once it’s ready to go.

Gidsy Landing in Elements Of A Viral Launch Page
Elements: copy with slogan; subscription form; call to action in the header; social proof.

Fellody
Fellody has taken quite an interesting approach with social proof and exposure. If you’ve signed up and uploaded an image to your profile, the picture could be included in the background of the home page.

Fellody is a music social network with dating elements, so showing off its members to prospective users makes sense.

Fellody Landing in Elements Of A Viral Launch Page
Elements: social proof.

Honestly.com
Right after you sign up (through Facebook), Honestly.com sends you an email showing your friends who have already signed up. It establishes trust in those few moments after sign-up, while helping you find people you know on the service.

Honestly Notification in Elements Of A Viral Launch Page
Elements: confirmation email (social proof, instead of the usual gibberish).

Fab
We saw earlier with Justin Bieber on Instagram how social proof from celebrities can create an instant surge in traffic and sign-ups. Ashton Kutcher, who actively invests in start-ups, knows this well. Whichever start-ups he invests in get not only funding but an instant push in visibility. Fab is a start-up that recently pivoted from Fabulis and has gotten funding from Kutcher among others. TechCrunch even did a celebrity endorsement face-off between him and Kevin Rose.

Fab Landing in Elements Of A Viral Launch Page
Element: social proof from celebrities.

Sharable (i.e. Viral) Content

Another strategy for gaining traction ahead of launch is to create sharable or viral content. This could be anything that people want to consume and that solves a problem they have. (KISSmetrics covers the topic in depth on its blog.)

BestVendor
BestVendor shared a statistical document on its blog (“The Startup’s Toolkit”) that was picked up widely in the blogosphere and start-up world, which is exactly the market it is targeting. Its launch page, however, is a simple sign-up form for collecting email addresses.

Bestvendor Landing in Elements Of A Viral Launch Page
BestVendor shared its document “The Startup’s Toolkit.”

Visual.ly
Visual.ly spread around its video explaining what its service is about, along with its “Coming soon” page. The video was well done and for that reason was shared by others.

A good video is enough to get attention.

Fake Readiness and Skip “Coming Soon” Altogether

Recently, doubt has been cast on the effectiveness of these viral launch strategies. Some of the criticism questions how much a sign-up is worth if people don’t really know what they’re signing up for. Turning someone who has signed up into a user after launch could prove very hard. So, you could skip the “Coming soon” approach entirely and make it look like you’re ready for users to sign up. Make the launch page look like an actual landing page for your product.

By skipping the “Coming soon” page, you can test your idea on visitors directly. The goal is still to get as many sign-ups as possible, but in the process you are gaining validated insights into your start-up. Is your page ready, but no one is giving you their address? That’s a good sign that you need to clarify your vision.

Joel Gascoigne, who launched his start-up Buffer that way, has this to say:

“Treat your idea as a hypothesis that needs rigorous testing, and treat the emails as people who are happy for you to get in touch to discuss your product idea further in order to validate that it would solve a real problem for them and that they might actually pay. I don’t think the idea of having a conversation with the people who give you their email comes into the minds of new start-up founders enough.”

EyeEm
EyeEm currently has an Android app out in the wild. And if you browse the company’s landing page, you might assume that the iPhone app is ready to download, too. But if you hover over the iTunes button, it lets you know that it’s “Coming soon,” and then you can leave your email address on the dedicated iPhone launch page. You sign up for an email notification by setting up an account, so once the app is out, you’re already registered and ready to use the product (you will no longer see this, since the launch has now been done).

Eyeem Landing in Elements Of A Viral Launch Page
EyeEm’s App Store button tricks you into thinking that the iPhone app is available.

The OpenFeint Bluff
The developers behind OpenFeint, the social gaming network for iPhone, started with a bluff. They sent a press release to TechCrunch and got the blog to cover the story, which claimed that they were almost done and would be releasing the product soon. Only after many people signed up did they decide that building out the concept was worthwhile; till then, they had not written a single line of code. So, they worked away at it for 45 days straight. The company later sold for $104 million.

Websites That Respond to Visitors

Thermo
Thermo, the landing page for an iPhone “pocket thermometer,” does a great job of telling you what the app does and being responsive to you. It tracks your location, fetches the temperature there and then displays it in a graphic on the left. Moreover, the developers allow you to tweet the results (not unlike what Shuush does), thus gaining even more exposure.

Thermo Me Landing in Elements Of A Viral Launch Page
Thermo responds to your location and temperature.

Sign-Ups as a Qualifier

Joel Gascoine proposes taking the conversation with prospective users to the logical next step. Whenever someone signs up or tries to sign up, you could give them a few questions to answer. There’s a thin line, though, between annoying visitors (and thus driving them away) and making them feel valued.

Monotask
Monotask asks subscribers key questions that will immediately inform its product decisions before launch.

Monotask Landing 1 in Elements Of A Viral Launch Page
This looks like a normal, simple launch page.

Monotask Landing 2 in Elements Of A Viral Launch Page
After you sign up, Monotask asks why you subscribed and how it can build a great product for you.

Joshua Porter analyzes Monotask’s implementation more in depth in this article “Using Your Sign-Up Form as a Qualifier.”

Make It Easy for People to Love You

The last and simplest advice is this: make it easy for people to love you. This love could be for any number of things: your design, your ideas, your approach. Or perhaps they just love that you make their lives easier in some way. Visitors will always reward you for that.

Akismet
One detail on Akismet’s home page is a good example of making people’s lives easier. When you right-click its logo, a window opens that asks you, “Looking for the Akismet logo?,” followed by links to download it. How many bloggers and journalists try to copy logos into their articles? I don’t know how many, but everyone will love you for such attention to detail and for making their life a little easier.

Akismet Logo in Elements Of A Viral Launch Page
When you right-click the logo, a pop-up lets you download files in different formats.

Conclusion

The strategies listed above provide a glimpse of how launch pages could be made more intriguing and shareable. Many of the start-ups we’ve analyzed have made use of various strategies to grow their numbers. Most importantly they built a service that people were interested in and they managed to share their vision among the right people making use of the viral loop.

But the list is by no means exhaustive and certainly the launch page was not the only reason the services took off. A well thought out placement in blogs, social media and among friends is often a necessary accompanying move. However: the launch page is always the first thing a potential user sees of a new idea and it would be wise to cater for the best possible conversion right there.

It’s hard to imagine a form that could be simpler: two fields, two buttons, and one link. Yet, it turns out this form was preventing customers from purchasing products from a major e-commerce site, to the tune of $300,000,000 a year. What was even worse: the designers of the site had no clue there was even a problem.

The form was simple. The fields were Email Address and Password. The buttons were Login and Register. The link was Forgot Password. It was the login form for the site. It’s a form users encounter all the time. How could they have problems with it?

The problem wasn’t as much about the form’s layout as it was where the form lived. Users would encounter it after they filled their shopping cart with products they wanted to purchase and pressed the Checkout button. It came before they could actually enter the information to pay for the product.

The team saw the form as enabling repeat customers to purchase faster. First-time purchasers wouldn’t mind the extra effort of registering because, after all, they will come back for more and they’ll appreciate the expediency in subsequent purchases. Everybody wins, right?

“I’m Not Here To Be In a Relationship”

We conducted usability tests with people who needed to buy products from the site. We asked them to bring their shopping lists and we gave them the money to make the purchases. All they needed to do was complete the purchase.

We were wrong about the first-time shoppers. They did mind registering. They resented having to register when they encountered the page. As one shopper told us, “I’m not here to enter into a relationship. I just want to buy something.”

Some first-time shoppers couldn’t remember if it was their first time, becoming frustrated as each common email and password combination failed. We were surprised how much they resisted registering.

Without even knowing what was involved in registration, all the users that clicked on the button did so with a sense of despair. Many vocalized how the retailer only wanted their information to pester them with marketing messages they didn’t want. Some imagined other nefarious purposes of the obvious attempt to invade privacy. (In reality, the site asked nothing during registration that it didn’t need to complete the purchase: name, shipping address, billing address, and payment information.)

Not So Good For Repeat Customers Either

Repeat customers weren’t any happier. Except for a very few who remembered their login information, most stumbled on the form. They couldn’t remember the email address or password they used. Remembering which email address they registered with was problematic – many had multiple email addresses or had changed them over the years.

When a shopper couldn’t remember the email address and password, they’d attempt at guessing what it could be multiple times. These guesses rarely succeeded. Some would eventually ask the site to send the password to their email address, which is a problem if you can’t remember which email address you initially registered with.

(Later, we did an analysis of the retailer’s database, only to discover 45% of all customers had multiple registrations in the system, some as many as 10. We also analyzed how many people requested passwords, to find out it reached about 160,000 per day. 75% of these people never tried to complete the purchase once requested.)

The form, intended to make shopping easier, turned out to only help a small percentage of the customers who encountered it. (Even many of those customers weren’t helped, since it took just as much effort to update any incorrect information, such as changed addresses or new credit cards.) Instead, the form just prevented sales – a lot of sales.

The $300,000,000 Fix

The designers fixed the problem simply. They took away the Register button. In its place, they put a Continue button with a simple message: “You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.”

The results: The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.

On my answering machine is the message I received from the CEO of the $25 billion retailer, the first week they saw the new sales numbers from the redesigned form. It’s a simple message: “Spool! You’re the man!” It didn’t need to be a complex message. All we did was change a button.

In this article, we’ll review a few techniques that will help Web designers and UI professionals improve their error pages in order to engage visitors and improve the experience. As C.S. Lewis said, “Failures are finger posts on the road to achievement.” Website designers should take this to heart.

We’ll focus on error and maintenance pages, from both a tracking and usability perspective. You’ll find examples on how to use analytics and defensive design in order to optimize the user experience on those pages.

First, let’s go over error pages and how to optimize them. We’ll try to answer the following questions:

  • Does your 404 page succeed in engaging visitors, who are already frustrated from not finding what they came for?
  • How do you decrease the number of people who arrive on your 404 page?
  • How do you monitor 404 page traffic efficiently?

After, we’ll discuss techniques for improving conversion rates, even when the website is under maintenance. Here are some of the questions we’ll consider:

  • How to time maintenance periods wisely?
  • How to increase visitor engagement using a maintenance page?

Monitoring 404 Page Traffic

How often do you check the traffic to your 404 page? Most of the companies I have worked with never did, even once. Yet it is hard to overemphasize the importance of consistently monitoring it. For example, if a prominent blog links to your website but the link is broken, this will make for a very poor experience for users (who will not find what they expect) and for search engines (which will not crawl the right content). Below are a few tips on tracking those pages seamlessly using Google Analytics. (The screenshots were taken from the new Google Analytics version, which is still in beta, so your mileage may vary.)

Create an alert on Google Analytics.

As seen in the screenshot below, you can set Google Analytics to alert you each time 404 traffic reaches a certain number of visits a day. This way, you have to do the work only once, but you’ll be alerted every time there is a problem.

1create-an-alert-screenshot in Optimizing Error Pages: Creating Opportunities Out Of Mistakes

This is where you create a custom alert to track 404 page views.

Track your 404 page as a goal.

Setting the 404 page as a goal on Google Analytics will yield important (and otherwise unattainable) information. For example, you’ll be able to see the three steps that visitors took to get to this page. In addition, setting this goal makes it easier to find traffic sources with broken links.

2general-information-screenshot in Optimizing Error Pages: Creating Opportunities Out Of Mistakes

Create a goal to track 404 page views in your reports.

Add the 404 content report to your dashboard.

Every report in Google Analytics can be added to the dashboard. By adding the 404 page, you will be able to constantly monitor visitor trends on the page.

3-add-a-widget-screenshot in Optimizing Error Pages: Creating Opportunities Out Of Mistakes

Add a 404 goal to your dashboard.

Check your navigation summary report.

This will help you understand what visitors do upon leaving this page, which is important for knowing how to optimize it.

4-next-page-screenshot in Optimizing Error Pages: Creating Opportunities Out Of Mistakes

The navigation summary for a 404 page on Google Analytics.

Track internal searches from this page.

If your 404 page does not have a search box, seriously consider adding one. From searches performed on this page, you will be able to understand what people were expecting to find, and you will get an idea of what links to add to the page. Below are the metrics you will be able to track with this feature:

  1. Total unique searches
    The number of times people started a search from the 404 page. Duplicate searches from a single visit are excluded.
  2. Search result page views after searches
    The average number of times visitors viewed a search results page after performing a search.
  3. % search exits
    The percentage of searches that resulted in an immediate exit from your website.
  4. % search refinements
    The percentage of searches that resulted in a new search using a different term.
  5. Time after search
    The average amount of time visitors spend on your website after performing a search.
  6. Search depth
    The average number of pages that visitors viewed after performing a search.

Decrease Your Errors (Fixing Broken Links)

Monitoring 404 pages is important, but that alone won’t do you any good unless you act on it. Taking action means doing all you can do to decrease the number of people who reach the 404 page and improving the experience of users who do reach it (see the next section). Below are a few tips on finding and fixing both internal and external broken links.

Check the navigation summary report.

This will show you the route that visitors took on your website to get to the 404 page (and thus tell you which pages contain broken internal links). You will see the percentage of visitors who arrived on this page from internal sources as well as from external sources; and the internal sources will be listed in this report (see the navigation summary screenshot above).

Check the sources of traffic that lead to the 404 page.

This will clearly show which websites have broken links to your website. With the list, you should either contact the sources or create 301 redirects to the correct pages.

5-landing-page-screenshot in Optimizing Error Pages: Creating Opportunities Out Of Mistakes

Traffic sources that lead visitors to a 404 page.

Usability Tips to Improve 404 Engagement

Basically, usability practices for error pages are not much different from general usability practices. Below are a few tips to help you increase the conversion rate of your 404 page. For our purpose, conversion is essentially the click-through rate (CTR), because our main objective is for visitors to find what they’re looking for.

  1. Be simple and focused.
    Appealing images and an original design are important, but a clear focus is critical. Users are already disoriented from landing somewhere they were not expecting, so make their lives easier by presenting a clear action to take.
  2. Know your visitors.
    Many 404 pages use humor, including geek humor. Keep in mind that you are not your visitor, and jokes can be misunderstood, so use humor wisely.
  3. Let the visitor decide.
    As I said in “Web Analytics Process”: “Customers should tell us what to do, not consultants, friends or feelings; data and online surveys are the place to look for customers’ needs.” The best way to understand what works for visitors is to present a few page versions and let the best one win. (See the review of advanced A/B testing techniques by Paras Chopra.)

Optimizing Maintenance Pages

Not long ago, I worked on a website that had weekly downtime for maintenance, about one to two hours a week. The owners chose the day with the least traffic for maintenance, but I believe they did not completely understand how this affected the website and, more importantly, how they could have optimized the user experience and taken advantage of the downtime. In a post on Smashing Magazine, Cameron Chapman provides a good checklist for designing effective maintenance pages:

  1. Keep the maintenance page simple and useful.
  2. Realize it’s an inconvenience to visitors.
  3. Don’t be afraid to use humor.
  4. Give the page the same look and feel as the rest of your website.
  5. Let visitors know when the website will be back up.
  6. Recommend content.
  7. Invite visitors to return when the website is online again.
  8. Inform visitors about the progress of the maintenance.

Two other rules are especially important to satisfy and engage visitors…

Time Maintenance Periods Wisely

Common practice for timing maintenance is to choose the time of day or day of week that has the lowest traffic. But this overlooks an important point: websites should be optimized for performance, not for traffic. By choosing the maintenance time based on visitor count, you could be optimizing for traffic and not for dollars. A better way to decide would be to run an hourly report and check what time of day or day of week has the lowest conversions.

Increase Visitor Engagement Using Maintenance Pages

Increase visitor engagement while the website is in maintenance mode? Yes, you read that right. While in maintenance, you have a great opportunity to promote your other marketing channels: offline stores, Facebook fan pages, YouTube channels and Twitter accounts.

Maintenance-page-example1 in Optimizing Error Pages: Creating Opportunities Out Of Mistakes

The maintenance page for Online Behavior.

Call me a heretic, but I hate FAQs. I understand that the FAQ has become de rigueur for websites, and I get that users expect them as a conventional content type. I even acknowledge that the FAQ has a venerable history. I don’t find them helpful, however: no one ever seems to ask my questions.

So I have questions about FAQs: Do they really work, or are they just a snake oil remedy for poor content? What does it mean when I can’t find my question in the FAQ? What do I do when the FAQ fails?

Do FAQS improve usability?

FAQs often read like a catechism, a fictitious back-and-forth conversation between the eager, inexperienced user and the wise, venerable expert, covering all the basics from the beginning, and urging purchase at every step:

Q: What is this product?

A: It’s a widget. It’s the best widget you’ll ever find. You should buy one.

Q: Is it hard to use?

A: NO! It’s the easiest widget on the market. You should buy one…

On the whole, FAQs like these patronize users. (Incidentally, the Greek root of catechism means, literally, to “talk down” to someone.)

While there isn’t much research supporting the usability of FAQs, they are a frequent topic among experts. Their advice includes:

  • Include real frequently asked questions. Jakob Nielsen addressed FAQs as one of the “biggest usability mistakes of 2002.” He said, “Too many websites have FAQs that list questions the company wished users would ask. No good.” Most FAQs seem to constitute a basic instruction manual or else call attention to selling features, making them only marginally useful to users with real questions.
  • Make sure you really need a FAQ. David Hamill offers a variety of tips, but cautions against having a FAQ for FAQ’s sake. “If your FAQ page is answering questions that the rest of the website should answer, then you have a problem with your site content.”
  • Show you care. David Coyne says that users appreciate a well-constructed FAQ because it shows you care about their time.
  • Keep it short and simple. Many other authors offer FAQ pitfalls and how-tos, and they are generally in agreement: Organize your FAQs in sections; make them simple, skimmable, and prominent; and ensure that they reflect the questions your users really do ask frequently. Feedback Army sums up their FAQ approach like this: “The trick is to make it easy to skim, keep it short, follow the right format, and stock it with questions people ask.”

The best case I’ve found for FAQs comes from Jonathan and Lisa Price in their book, Hot Text: Web Writing That Works:

When guests get stuck they most often turn to the FAQ, because the style seems friendlier than the average help system, and the genre promises answers to real questions from users, rather than a stonewalling corporate pile of documentation.

They surmise that the form originated in the pre-web world of the ListServ. Regular participants, weary of answering the same questions again and again from newcomers, would put their collective wisdom into FAQs and then admonish the uninitiated: “Yo, Noob! Read the FAQ before you post!”

I see their point. FAQs work on ListServs and Forums because their content comprises a spaghetti stream of topical, threaded conversations. A website—or any redacted document, for that matter—is different. The content on a website is composed, planned, and edited. If it doesn’t answer people’s questions, then it has only itself to blame.

Are FAQS still in my future?

A good FAQ is like insurance for your users: There when they need it, but hopefully they never will. If you decide that FAQs have a place in your content strategy, then I suggest the following:

  • Collect, track, and analyze your users’ real frequently asked questions. You need a way to gather your users’ questions and comments, so that you can sort through them and look for patterns.
  • Sales inquiries: When people call to ask questions about your products or your website, document precisely what they ask. Not only will this suggest content areas that are missing or unclear, but you’ll better understand your users’ decision-making process.
  • Support requests: Troubleshooting and frustrations give you a rich field of user feedback. If you have a call center, listen to recorded calls and ask your customer service representatives to pay attention to recurring questions. If you have a support request system on the web, study your support tickets.
  • Ask directly: If you do have a FAQ on your website, include a form that says, “Didn’t find your question here? What would you like to know?” Doing this creates a record of the questions you aren’t answering, as well as additional opportunities to follow up on with your users.

Use that insight to improve your site’s content. Having gathered these questions, look for patterns. Are there, in fact, any questions users ask frequently? Don’t just add them to your FAQ in the name of completeness. Sort the questions into piles. Look for common words. Count the frequency of occurrences. As soon as you see a pattern, look for ways to address it elsewhere in your content. Are users confused? Clarify the wording of the section that was originally intended to answer those questions. Are users looking for content that isn’t there? Create it. Are users looking for love in all the “wrong” places on your site? Reorganize it.

Never build your content strategy on the FAQ. Even if you create your FAQ from questions people actually ask, you should only use it to supplement your overall content strategy. Carefully consider your reasons for including a FAQ and your goals for supporting your users.

Are FAQs ever appropriate?

There are occasions when a FAQ is exactly the right way to go.

To answer the one question users ask before reading further. If you discover that a significant part of your target audience is looking for a quick answer to a few, simple questions, then it can help to pull them out so they don’t have to spend a lot of time digging around. If customers absolutely need a service to synchronize Outlook files, use the FAQ to tell them whether your service is right for them.

To demonstrate that you really have listened to your users’ questions. If you have completed exhaustive, authentic research into your users’ needs and preferences, you can use the FAQ to demonstrate to users that you understand their concerns. Such a FAQ could be used in response to a public relations crisis, for example. Just make sure that you’ve done your research: people will see right through a phony FAQ.

To reassure users that their questions are normal. Likewise, you could use your FAQ to show users that other people are asking the same questions as they are. This technique works especially well for health concerns: “Everything you ever wanted to know about [blank], but were afraid to ask….”

Is my FAQ doing what it should?

Whatever you do, make sure you subject your FAQs to the same rigorous usability testing as the rest of your site. Since you have already considered your reasons and strategy for including a FAQ, you can now test whether it achieves the goals you set out for it.

What have I concluded?

FAQs are ubiquitous and familiar and occasionally helpful. They have a place in your content strategy, but use them carefully: if your users are asking the same questions frequently, consider how you can improve your content before reaching for a FAQ.

In content strategy, there is no playbook of generic strategies you can pick from to assemble a plan for your client or project. Instead, our discipline rests on a series of core principles about what makes content effective—what makes it work, what makes it good. Content may need to have other qualities to work within a particular project, but this list is limited to qualities shared across all sorts of content.

If this looks like theory, don’t be fooled. It’s really entirely practical: if we consciously refer to principles like these as we go about our work as info-nerds of various kinds, we’ll have an easier time making good, useful content—and explaining our priorities when we’re called to do so.

Good content is appropriate

Publish content that is right for the user and for the business

There’s really only one central principle of good content: it should be appropriate for your business, for your users, and for its context. Appropriate in its method of delivery, in its style and structure, and above all in its substance. Content strategy is the practice of determining what each of those things means for your project—and how to get there from where you are now.

Right for the user (and context)

Let us meditate for a moment on James Bond. Clever and tough as he is, he’d be mincemeat a hundred times over if not for the hyper-competent support team that stands behind him. When he needs to chase a villain, the team summons an Aston Martin DB5. When he’s poisoned by a beautiful woman with dubious connections, the team offers the antidote in a spring-loaded, space-age infusion device. When he emerges from a swamp overrun with trained alligators, it offers a shower, a shave, and a perfectly tailored suit. It does not talk down to him or waste his time. It anticipates his needs, but does not offer him everything he might ever need, all the time.

Content is appropriate for users when it helps them accomplish their goals.

Content is perfectly appropriate for users when it makes them feel like geniuses on critically important missions, offering them precisely what they need, exactly when they need it, and in just the right form. All of this requires that you get pretty deeply into your users’ heads, if not their tailoring specifications.

Part of this mind-reading act involves context, which encompasses quite a lot more than just access methods, or even a fine-grained understanding of user goals. Content strategist Daniel Eizans has suggested that a meaningful analysis of a user’s context requires not only an understanding of user goals, but also of their behaviors: What are they doing? How are they feeling? What are they capable of?

Venn diagram of user's contextsFig. 1. The user’s context includes actions, constraints, emotions, cognitive conditions, and more. And that in turn affects the ways in which the user interacts with content. (“Personal-Behavioral Context: The New User Persona.” © Daniel Eizans, 2010. Modified from a diagram by Andrew Hinton.)

It’s a sensible notion. When I call the emergency room on a weekend, my context is likely to be quite different than when I call my allergy specialist during business hours. If I look at a subway map at 3:00 a.m., chances are that I need to know which trains are running now, not during rush hour tomorrow. When I look up your company on my phone, I’m more likely to need basic contact info than your annual report from 2006. But assumptions about reader context—however well researched—will never be perfect. Always give readers the option of seeing more information if they wish to do so.

Right for the business

Content is appropriate for your business when it helps you accomplish your business goals in a sustainable way.

Business goals include things like “increase sales,” “improve technical support service,” and “reduce printing costs for educational materials,” and the trick is to accomplish those goals using sustainable processes. Sustainable content is content you can create—and maintain—without going broke, without lowering quality in ways that make the content suck, and without working employees into nervous breakdowns. The need for this kind of sustainability may sound boneheadedly obvious, but it’s very easy to create an ambitious plan for publishing oodles of content without considering the long-term effort required to manage it.

Fundamentally, though, “right for the business” and “right for the user” are the same thing. Without readers, viewers, and listeners, all content is meaningless, and content created without consideration for users’ needs harms publishers because ignored users leave.

This principle boils down to enlightened self interest: that which hurts your users hurts you.

Good content is useful

Define a clear, specific purpose for each piece of content; evaluate content against this purpose

Few people set out to produce content that bores, confuses, and irritates users, yet the web is filled with fluffy, purposeless, and annoying content. This sort of content isn’t neutral, either: it actively wastes time and money and works against user and business goals.

To know whether or not you have the right content for a page (or module or section), you have to know what that content is supposed to accomplish. Greater specificity produces better results. Consider the following possible purposes for a chunk of product-related content:

  • “Sell products”—This is so vague as to be meaningless and is likely to produce buzzword-infested fluff.
  • “Sell this product”—Selling a product is a process made up of many smaller tasks, like discussing benefits, mapping them to features, demonstrating results and value, and asking people to buy. If your goal is this vague, you have no idea which of these tasks (if any) the content will perform.
  • “List and demonstrate the benefits of this product”—This is something a chunk of content can actually do. But if you don’t know who is supposed to benefit from the product, it’s difficult to be specific.
  • “Show how this product helps nurse practitioners”—If you can discover what nurse practitioners need, you can create content that serves this purpose. (And if you can’t find out what they need before trying to sell them a product, you have a lot more to worry about than your content.)

Now do the same for every chunk of content in your project, and you’ll have a useful checklist of what you’re really trying to achieve. If that sounds daunting, think how much harder it would be to try to evaluate, create, or revise the content without a purpose in mind.

Good content is user-centered

Adopt the cognitive frameworks of your users

On a web project, user-centered design means that the final product must meet real user needs and fulfill real human desires. In practical terms, it also means that the days of designing a site map to mirror an org chart are over.

In The Psychology of Everyday Things, cognitive scientist Donald Norman wrote about the central importance of understanding the user’s mental model before designing products. In the user-centered design system he advocates, design should “make sure that (1) the user can figure out what to do, and (2) the user can tell what is going on.”

When it comes to content, “user-centered” means that instead of insistently using the client’s internal mental models and vocabulary, content must adopt the cognitive frameworks of the user. That includes everything from your users’ model of the world to the ways in which they use specific terms and phrases. And that part has taken a little longer to sink in.

Allow me to offer a brief illustrative puppet show.

While hanging your collection of framed portraits of teacup poodles, you realize you need a tack hammer. So you pop down to the hardware store and ask the clerk where to find one. “Tools and Construction-Related Accessories,” she says. “Aisle five.”

“Welcome to the Tools and Construction-Related Accessories department, where you will find many tools for construction and construction-adjacent activities. How can we help you?”

“Hi. Where can I find a tack hammer?”

“Did you mean an Upholstery Hammer (Home Use)?”

“…yes?”

“Hammers with heads smaller than three inches are the responsibility of the Tools for Home Use Division at the far end of aisle nine.”

“Welcome to The Home Tool Center! We were established by the merger of the Tools for Home Use Division and the Department of Small Sharp Objects. Would you like to schedule a demonstration?”

“I just need an upholstery hammer. For…the home?”

“Do you require Premium Home Use Upholstery Hammer or Standard Deluxe Home Use Upholstery Hammer?”

“Look, there’s a tack hammer right behind your head. That’s all I need.”

“DIRECTORY ACCESS DENIED. Please return to the front of the store and try your search again!”

Publishing content that is self-absorbed in substance or style alienates readers. Most successful organizations have realized this, yet many sites are still built around internal org charts, clogged with mission statements designed for internal use, and beset by jargon and proprietary names for common ideas.

If you’re the only one offering a desirable product or service, you might not see the effects of narcissistic content right away, but someone will eventually come along and eat your lunch by offering the exact same thing in a user-centered way.

Good content is clear

Seek clarity in all things

When we say that something is clear, we mean that it works; it communicates; the light gets through. Good content speaks to people in a language they understand and is organized in ways that make it easy to use.

Content strategists usually rely on others—writers, editors, and multimedia specialists—to produce and revise the content that users read, listen to, and watch. On some large projects, we may never meet most of the people involved in content production. But if we want to help them produce genuinely clear content, we can’t just make a plan, drop it onto the heads of the writers, and flee the building.

Of course, clarity is also a virtue we should attend to in the production of our own work. Goals, meetings, deliverables, processes—all benefit from a love of clarity.

Good content is consistent

Mandate consistency, within reason

For most people, language is our primary interface with each other and with the external world. Consistency of language and presentation acts as a consistent interface, reducing the users’ cognitive load and making it easier for readers to understand what they read. Inconsistency, on the other hand, adds cognitive effort, hinders understanding, and distracts readers.

That’s what our style guides are for. Many of us who came to content strategy from journalistic or editorial fields have a very strong attachment to a particular style—I have a weakness for the Chicago Manual of Style—but skillful practitioners put internal consistency well ahead of personal preferences.

Some kinds of consistency aren’t always uniformly valuable, either: a site that serves doctors, patients, and insurance providers, for example, will probably use three different voice/tone guidelines for the three audiences, and another for content intended to be read by a general audience. That’s healthy, reader-centric consistency. On the other hand, a company that permitted each of its product teams to create widely different kinds of content is probably breaking the principles of consistency for self-serving, rather than reader-serving, reasons.

Good content is concise

Omit needless content

Some organizations love to publish lots of content. Perhaps because they believe that having an org chart, a mission statement, a vision declaration, and a corporate inspirational video on the About Us page will retroactively validate the hours and days of time spent producing that content. Perhaps because they believe Google will only bless their work if they churn out dozens of blog posts per week. In most cases, I think entropy deserves the blame: the web offers the space to publish everything, and it’s much easier to treat it like a hall closet with infinite stuffing-space than to impose constraints.

So what does it matter if we have too much content? For one thing, more content makes everything more difficult to find. For another, spreading finite resources ever more thinly results in a decline in quality. It also often indicates a deeper problem—publishing everything often means “publishing everything we can,” rather than “publishing everything we’ve learned that our users really need.”

There are many ways to discover which content is in fact needless; traffic analysis, user research, and editorial judgment should all play a role. You may also wish to begin with a hit list of common stowaways:

  • Mission statements, vision statements, and core values. If the people within your organization are genuinely committed to abstract principles, it will show in what they do. The exception is the small number of organizations for whom the mission is the product, as is the case with many charities. Even then, this kind of content should be supplemented with plentiful evidence of follow-through.
  • Press releases. These may work for their very narrow intended audience, but putting them undigested onto a website is a perfect example of the how-we’ve-always-done-it mistake.
  • Long, unreadable legal pages. Some legal awkwardness is acceptable, but if you want to demonstrate that you respect your readers, take the extra time to whittle down rambling legalese and replace needless circumlocutions with (attorney-vetted) plain language.
  • Endless feature lists. Most are not useful to readers. The few that are can usually be organized into subcategories that aid findability and comprehension.
  • Redundant documentation. Are you offering the same audience three different FAQs? Can they be combined or turned into contextual help?
  • Audiovisual dust bunnies. Do your videos or animations begin with a long flying-logo intro? Do they ramble on for 30 minutes to communicate ten minutes of important content? Trim, edit, and provide ways of skipping around.

Once you’ve rooted out unnecessary content at the site-planning level, be prepared to ruthlessly eliminate (and teach others to eliminate) needless content at the section, page, and sentence level.

Good content is supported

Publish no content without a support plan

If newspapers are “dead tree media,” information published online is a live green plant. And as we figured out sometime around 10,000 BC, plants are more useful if we tend them and shape their futures to suit our goals. So, too, must content be tended and supported.

Factual content must be updated when new information appears and culled once it’s no longer useful; user-generated content must be nurtured and weeded; time-sensitive content like breaking news or event information must be planted on schedule and cut back once its blooming period ends. Perhaps most importantly, a content plan once begun must be carried through its intended growth cycle if it’s to bear fruit and make all the effort worthwhile.

This is all easy to talk about, but the reason most content is not properly maintained is that most content plans rely on getting the already overworked to produce, revise, and publish content without neglecting other responsibilities. This is not inevitable, but unless content and publishing tasks are recognized as time-consuming and complex and then included in job descriptions, performance reviews, and resource planning, it will continue.

Hoping that a content management system will replace this kind of human care and attention is about as effective as pointing a barn full of unmanned agricultural machinery at a field, going on vacation, and hoping it all works out. Tractors are more efficient than horse-drawn plows, but they still need humans to decide where and when and how to use them.

Of theses and church doors

One of the great images of the history of the Protestant Church is that of a German priest standing in the cold in front of the Castle Church in Wittenberg on All Saints Eve, nailing his manifesto to its wooden doors.

The reality of the publication of Martin Luther’s 95 Theses is messier, and whether the church doors were really involved at all is the subject of academic dispute, but one thing is clear: Luther published his theses to begin an open, public conversation.

Our industry doesn’t lack for manifestos, some of them even explicitly modeled after Luther’s. This article—and the book from which it’s extracted—is not one of the firebrand, nailed-to-the-door attempts at full-scale revolution.

But it is intended to continue conversations we’ve been having for years, and to spark new ones, about the shared principles and assumptions that underlie our work, and the weird and interesting things we can build on top of them.

4 simple ways how designers should protect themselves

People who don’t understand the true value of graphic designers will try to take advantage of them, especially if they’re newbies.

Others will try to calculate the time and effort involved in designing and then assume you’ll meet their expectations, however unrealistic.

This can wear on you both financially and mentally, so you have to find ways to protect yourself. Here are four ways to keep your work and your clients in check.

Have a look through them and let us know your experiences and whether you would add anything to this list.

1. Contracts and terms of service

Whenever you land a gig, be as clear as possible with the client so that they understand what will happen. I like to have a full consultation with new clients, and once we come to a basic agreement, I go over what they can expect from me and what I expect from them.

You may want to draw up a contract to get everything down on paper and to make sure everything is clear, just in case you run into trouble later on. There are a few essential things you’ll want to put in the contract or terms of services…

Deliverables

What exactly will you be giving them when all is said and done? This is usually specified by the client; they may want your PSD files or perhaps just a format that can be printed. Let them know what they will be getting so that there is no confusion.

Contributions

In addition to the deliverables, let the client know a bit about your process and what you expect from them. One of my biggest pet peeves is clients who don’t answer emails in what I think is a timely fashion; if you’re the same, why not put that in your contract? Spell out (and agree on) what you expect from the client and what they expect from you. This alone will clear up much confusion and hold each party accountable for the duration of the project.

Revisions

This is the cause of most headaches for designers. Spell out as clearly as possible what you consider to be a revision. This is key, because one person’s idea of a revision may not be the same as another’s. Is a revision moving the logo to the left or completely redesigning the page? Once you’ve come to an understanding, specify how many revisions you think are reasonable for the project (and the budget).

I personally don’t mind minor revisions, but complete redesigns are the death of me. To avoid this, you may want to provide several different designs at once and then narrow down as time goes on. But if you do this, make sure it’s contracted. Be up front when talking about revisions as well, and when you submit updates, remind the client what you’ve agreed on.

Payment

This is probably the most important part of the contract. How do you want to get paid? Do you want a deposit? If so, how much? Answer all of these questions so that the client knows what to do.

I strongly suggest some type of deposit before you start a project, just so that you know the client is serious about getting work done. Some designers require payment in full up front, while others have certain conditions depending on the total amount of the project. Figure out what works for you, discuss it with the client, and go from there.

Cancellations

We never like to think that someone would cancel on us. It’s one of the worst feelings in the world. But the truth is, it happens, and you need to protect yourself in some way. Perhaps give the client a time period in which they can cancel, or request a non-refundable deposit. Find something that works for you, and, of course, state it clearly in the contract. You never want to do a ton of work only to have the person back out on you with no consequences. Make no exceptions.

2. Say no

Some designers are so eager to stay busy with work or make money that they have a hard time saying no to projects. Too many projects coming your way is not the worst problem to have, but eventually you’ll get frustrated or burnt out. You’ll want to avoid certain types of projects…

Baby budgets

Be absolutely clear with yourself about how low you are willing to go on price for the work involved. You may have to pass on a ton of projects, but people who are willing to pay will eventually come forward. You don’t want to find yourself zipping through a bunch of cheap projects.

Outside your skill set

Be honest about your skill set. When I started out, I took on projects that were outside my skill set, just so that I would stay busy. I had no working knowledge of Flash, but I would guarantee someone a Flash intro or banner. That was a huge mistake, because I had to learn the skill and execute the task to the client’s liking by the deadline. That’s a recipe for stress.

Only take on work that falls within your skill set. Be honest with yourself and your client. Perhaps you could convince them of an alternative solution that does fall within your skill set.

Full plate

If you’re already up to your eyeballs in work, don’t take on more. You’ll just be getting more deadlines and more stress for no reason. Pace yourself; avoid burning out or getting into a creative slump. Give yourself some breathing room between projects so that you have time to rejuvenate and come up with fresh ideas.

Speeding through projects and working at your limit all the time is not good for your mental or physical health. Don’t be so quick to accept whatever crosses your path. Just let good work come to you, and do it on your own terms.

3. Charge more

Protecting yourself has a lot to do with the types of clients you attract. If you attract ones who you just don’t get along with or who are rude and hard to work with, consider increasing your prices.

The amount you charge correlates to the value (and quality) of your product. If you charge pennies for big projects, you might attract a bunch of clients, but they won’t necessarily understand the value you are delivering. When people don’t understand your value or feel you offer little, then they will treat you accordingly.

If you purchase a $100 digital camera, you can enjoy the product, and if you drop it or scuff it up a bit, you won’t be terribly upset because it was only $100. If you purchase a $1500 camera, you’ll be much more careful with it. That’s the kind of mentality most people have with service providers.

Unfortunately for us, working with people who don’t value our services can be very stressful. Consider increasing your prices in order to attract a different type of client, one who values your work.

4. Set barriers with family and friends

This is a touchy subject for most. We all cherish our friends and family, but we are often the only graphic designer they know. And when they come to us for work, they expect a deep discount or even no charge. Figure out beforehand where you’ll draw the line.

If you offer a discount, make sure that at least your time spent on the project will be covered. Beyond that, treat them just like a regular client. Of course, you might want to be a bit more flexible in the number of revisions you allow and things of that nature, which is fair.

Dealing with requests for free work is a bit more difficult. If I accept a project for free, I treat it as my own personal project. I retain total creative control, and once it is delivered, few or no revisions are allowed — and certainly no redesigns. Again, figure out what’s best for you and your business, and sit down and go over it with your relative or friend.

Content strategy is planning for every aspect of content to get results. That goes far beyond writing the copy. When getting strategic about content, focus on three key areas: analysis, editorial and architecture. While explaining content strategy in detail literally requires a book (or two or three), I’d like to share with you a concise introduction to each area in this article.

Contentstrategy-circle in Make Your Content Make a Difference

Figure 1: Content strategy usually involves analysis, editorial and architecture.

1. Analysis

Analysis is taking a magnifying glass to your content situation. The better you understand it, the better you can plan exactly what needs to change to reach the results you’d like to have. Two typical activities in the analysis phase are a content audit and a context analysis. Sometimes, these activities are lumped together into a content analysis. The exact term is not that important as long as you do the analysis thoroughly.

Content Audit

An audit is a close review of your existing content. If you have any content to start with, you need to know exactly what it is. The audit tells you what you’re working with. By the end of an audit, you’ll have answers to questions such as:

  • What content types, formats and topics do you have?
  • What is the quality of your content? (For help, consult this content quality checklist.)
  • How is your content structured?
  • Where do you have obvious content gaps and overlaps, or redundancies?

When you’re ready to try a complete content audit yourself, check out the guide Content Analysis: A Practical Approach.

Context Analysis

A context analysis looks at the elements that surround and affect your content. At a minimum, consider and answer these questions about your goal, your users, and your processes.

Goal

  • What is your business or organizational goal? Why?
  • How will content help you achieve that goal?

Users / Audience

  • Who are your users, or the people you want to attract and influence? Why?
  • Where (in what channels) are your users looking for content — on websites, on mobile, on social networks?
  • If you have an existing website or interactive experience, how is it performing?

Processes / Ecosystem

  • How do you create, maintain and govern content now?
  • How do you plan to do so when you launch the website or interactive experience?
  • What are your competitors doing in the realm of content?

As a simple example, let’s look at American Express’ OPEN Forum, a site for small business owners. Why did American Express want to attract and influence these users? Because reaching these users was a step toward their business goal. Mary Ann Fitzmaurice Reilly, SVP of Partnerships & Business Development for American Express OPEN, notes, “…our biggest opportunity is with small business growth — if they grow, we grow.” And, American Express decided to help them grow through a unique approach to content. Rather than create more content about their credit cards, American Express decided to create content about small business owner concerns. (More about this approach in the next section, 2. Editorial.)

We could discuss analysis for days, but I’d like to introduce other aspects of content strategy to you as well. For a more detailed explanation of this analysis, I highly recommend the analysis chapter of Content Strategy for the Web by Kristina Halvorson. Also, I shared my step-by-step experience in the presentation Content Analysis: Know Thy Content.

The real benefit of analysis is ideas and insights for planning content editorial and architecture. So, let’s take a closer look at those sides of content, using the OPEN Forum as an example along the way.

2. Editorial

Editorial plans mostly for the people side of content, such as:

  • What style or voice should your content have to attract and resonate with users?
  • What topics and themes should your content cover and when?
  • Who is responsible for what content?
  • What are your standards or criteria for credible content?

Many businesses and organizations who are not media properties completely lack editorial oversight for their websites and other interactive experiences. That can result in problems ranging from errors to missing a competitive advantage. Let’s turn back to our OPEN Forum example. In the world of finance, much content is a combination of dull explanations or legal mumbo jumbo. OPEN Forum takes a different approach.

2-openforum in Make Your Content Make a Difference

Figure 2: In the stodgy world of finance, American Express OPEN Forum offers a fresh approach to content.

The design might not look dramatically different from other finance sites, but the content is much different. To help small businesses, OPEN Forum regularly offers credible content about topics that small business owners care about. American Express produces some content, invited expert columnists create some content, and small business users contribute some content. Even though different authors contribute content, the content is original to OPEN Forum. Can you notice how different it is from aggregating random content or simply optimizing pushy landing pages? Through its consistent voice and handy content on OPEN Forum, American Express has positioned itself as a trusted advisor to small businesses. Because the articles, videos, and podcasts are deeply useful to small business users, they’re far more valuable to American Express.

Of course, having so many content contributors poses some risk of creating content that feels disjointed. To reduce this risk, what’s going on behind the scenes? The right editorial staff and processes ensure the content from different authors is coordinated. For example, while most websites lack an editor, OPEN Forum has an editor-in-chief. And, for robust editorial review and production, American Express partners with Federated Media. As you plan your content processes, you will consider what roles to hire in-house and what roles to hire as freelancers.

Besides the right people and processes, editorial planning results in an important tool: the Editorial Style Guide. This guide documents important decisions about your content for everyone involved to reference. A style guide typically explains:

  • Target audiences / users
  • Key messages
  • Voice and tone
  • Criteria for topics
  • Sample content
  • Usage, punctuation, and grammar guidelines
  • Trademark and legal considerations

For a helpful start, you might want to consider taking a look at The Yahoo! Style Guide.

So, all of this editorial work sounds interesting, but does it actually get any results? Yes, it does. Since 2007, OPEN Forum has built an audience comparable in size and engagement with other small business media properties. But that’s not the best result. In the lucrative small business market, American Express’s successful editorial approach is a differentiator. More than that, it’s a quiet coup. The results did not happen overnight. They took time. But, compared to its competitors, American Express now owns small business online.

I know what you’re thinking. “But American Express is a big company. Should a smaller one care about editorial?” Yes. A smaller company or an individual can do it on a smaller scale, with less content, fewer contributors, and probably fewer visitors. Editorial is about attracting the right visitors (or audience) and holding their interest through content. Size does not matter nearly as much as quality.

That’s a basic introduction to editorial. But, content concerns don’t stop here. Now, let’s turn to architecture.

3. Architecture

Architecture plans mostly for the machine side of content — while keeping the people side in mind. Architecture addresses how your content is organized, structured and repurposed. Architecture gets your content to the right place. This planning might start with a site map but won’t end there. You likely will need to define content models and taxonomies using metadata. In essence, you need to tell your content management system and other platforms what content you have, where to display it and how to display it.

Let’s look at a simple example, again from American Express OPEN Forum. The site has clearly defined templates for its articles, videos and other content types. Those content types come together (or aggregate) as meaningful topic pages. Take a look at this one for innovation. That aggregation happens dynamically because of good architecture.

3-topicpage in Make Your Content Make a Difference

Figure 3: This topic page brings together all of OPEN Forum’s original content about a topic (in this case, the topic is innovation), thanks to good architecture.

When you plan architecture well, you gain other benefits. Both search engines and people will find your content more easily. Your content becomes more accessible and flexible, not to mention easier and more efficient to keep consistent.

That’s some basic architecture. Now, let’s kick it up a notch. Is OPEN Forum part of AmericanExpress.com, the core American Express website? No, it’s not. Now, that might bother some user experience designers and information architects out there. Shouldn’t this be one cohesive experience? Yes, it should. But, that doesn’t necessarily mean all of the content has to be in one website or in one place. AmericanExpress.com serves more visitors than small business owners. So, putting all that small business content on AmericanExpress.com could easily get in the way of other visitors. Instead, OPEN Forum and AmericanExpress.com link to each other at relevant points.

4-architecture in Make Your Content Make a Difference
Figure 4: OPEN Forum is not part of the core American Express site.

Okay, now let’s kick it up several notches. Content strategy pioneer Rachel Lovinger has articulated convincingly that advanced architecture also makes your content more nimble to use across different interactive experiences, from your website to your mobile application. She notes,

“Publishing content that’s marked up with smart structure and metadata allows it to be delivered on a wider range of channels, while still retaining the context and relationships that make it meaningful and useful to both your audience [visitors or users] and your brand. Think of it like providing publishing instructions with the content, where each different platform uses only the instructions that are relevant.”[2]

For example, if your content is structured well, you can offer mobile versions of your content more efficiently, as American Express has. You also will have a much easier time creating widgets or an API to distribute your content, as NPR did. (See image below.) Does this kind of planning get results? Within 12 months after releasing this API, NPR doubled its users (audience). [3]

5-API in Make Your Content Make a DifferenceFigure 5: NPR structured its content well enough to offer a useful API.

You or your organization might think such multichannel architecture issues are mostly technology issues. Now hear this: They’re content issues, too. Consider how your content’s architecture will help you reach the right users in the right channels.

How These Areas Work Together

My diagram presents the areas of content strategy as a cycle. Now that you understand each area better, let’s look further at this cycle.

Before Launch: Architecture Last

When you’re about to reimagine a website or launch a new one, focus on analysis, then editorial, and then architecture. Why architecture last? Because that way you don’t waste time and energy planning areas of a site that you don’t need. You avoid scrambling to fill unwanted screens and features with content. You’d never build a house by constructing every possible room, then deciding which rooms you actually need. It should be no different with websites and interactive experiences. Plan the content you need first, then architect it.

After Launch: Analyze and Adjust

After you launch, the cycle doesn’t stop. Analyze how your content performs. Learn how users behave with your content. Stay in touch with industry trends. Watch for problems and opportunities. Address them by adjusting your editorial and architecture. Successful media properties never publish content, then leave it. I like how Tracy V. Wilson, Site Director for HowStuffWorks, describes her approach to ongoing analysis.

“Look at her: so beautiful, so friendly, so smart. And what a personality. She must be mine. Hooking up with her would make me the envy of all my friends. Sure, she’s young and she’s gorgeous. Besides, I can easily try something new if I get bored or something better comes along.”

No, that’s not an excerpt from Lolita. As cruel and inappropriate as they might seem, these thoughts are fairly common in our society. In fact, in the past year, millions of people have entered into exactly that type of relationship. Don’t bother calling the Special Victims Unit; what we’re discussing here is not what you think it is. It’s the Apple iPad.

Apple seems to have entranced people. It’s hard to walk down the street without passing someone who is plugged in to those iconic white headphones or to enter a coffee shop without hearing someone gabbing on their iPhone. Apple’s stores are crowded, and its products sell in absurd quantities.

Why is this? Apple might be a visionary company with a strong grasp of what’s hip. Yet I believe Apple’s appeal lies in something more than trends, something deeply ingrained in our psyche: relationships.

Relationship-engineering-title-image in Relationship Engineering: Designing Attraction

Psyche Revived by the Kiss of Love, Antonio Canova. (Image: Wikipedia)

We don’t simply own products; we have relationships with them. Intimate ones at that. We are in a state of courtship with every brand in existence. Each of them wants to be a part of our lives, and each wants love in return. Thinking about our relationships with particular products and brands in the same way that we think about interpersonal relationships yields interesting insights. When we decide to bring a person or product into our lives, we must first evaluate our options. The criteria we use to decide whether we love, hate or are indifferent to another person are the same we use to judge a product or brand.

There are many types of relationships, but we can put brand-consumer relationships into three categories: acquaintance, friend and lover.

When someone purchases a bag of apples at the grocery store, they’re demonstrating an acquaintanceship with apples. They’ve interacted with apples before, but there’s no deep attachment, and there has been very little bonding with the product.

The next step up — friendship — emerges because of branding. For example, I always purchase a certain brand of gum. I’ve come to know the brand and its offerings, and I enjoy having its product in my life. We’re friends, but that’s where the relationship ends. There’s no romance involved, and no longing or desire is felt.

Only certain brands manage to take the step from friend to lover. Apple is one of the most valuable companies in the world. It also provides a useful model of consumer courtship. Just about any iPhone user will proudly tell you, like a love-struck teenager on prom night, that they “love” their phone and would be “like, totally lost without it.” There are dozens of cell-phone manufacturers, but only one iPhone. Successful visionary companies, such as Apple, have mastered the art of relationship engineering.

Designing Attraction

Ring-of-fire in Relationship Engineering: Designing Attraction

Love is often likened to fire. In the early stages of a relationship, things start heating up. As the love grows stronger, the flames grow higher. When a relationship falls apart, we say that the fire has gone out. Whether someone lights or douses your fire has to do with the two core aspects of their being: how they appear on the outside and who they are on the inside. That is, a person’s appeal is based on two things: looks and personality. Let’s take a closer look at each of these aspects of appeal and examine how they influence people into relationships with brands and products.

Looks

Baby-got-back in Relationship Engineering: Designing Attraction

Attractiveness spurs lust. It’s a simple cause-and-effect paradigm ingrained in our very nature. We all long for the cute guy or girl in class, and that same desire guides us when choosing a product.

Since the days of Plato, philosophers and artists have tried to pinpoint exactly what makes something aesthetically pleasing. No universal formula for beauty has ever been agreed upon. Beauty is subjective. The designer’s job is to appeal to the collective subjective, or the average of personal preferences. Doing so ensures a product appeals to the largest audience possible.

Making your product visually appealing is not superficial. In fact, design is often a product’s primary competitive advantage. iPod wasn’t the first MP3 player on the market; it didn’t have the largest capacity; it didn’t have the most features; and it certainly wasn’t the cheapest. It was, however, sexy. It was simple and self-explanatory. Its scrolling wheel was as intuitive as it was revolutionary. Perhaps most importantly, it introduced a unique and (now) iconic form factor. The market had been flooded with matte gray devices with black headphones, but this entrant had a clean white front and mirrored back. Even the earbuds were white. Many people tuck their devices into their pockets, which makes the headphones the most visible hardware. Apple exploited this and turned the earbuds into a mnemonic device. Spotting someone with white earbuds, even from afar, immediately told you which brand was on the other end.

The iPod now accounts for well over 70% of the audio-device market. Why? I think it’s because the iPod is just more distinct than its competitors. In a market full of brunettes, the iPod is Marilyn Monroe.

Facebook vs. MySpace

Facebook has more than 500 million users, and that number is growing steadily. MySpace has plateaued at around 125 million. How has MySpace, once the leading social network, fallen behind by such a large margin? There are a number of reasons, but design seems to be one of the most obvious (Newsweek and Mashable seem to think so, too).

Much to its detriment, MySpace allows users to apply their own style sheets. I can imagine the brainstorm that led to this decision: “Wouldn’t it be great to let users customize the look of their page? People love to make things their own and flaunt their personalities. This will surely encourage new users and give us the edge on Facebook. Hurrah!”

MySpace somehow failed to realize that most people’s design education consists entirely of WordArt tutorials taught by Microsoft’s Clippy. Perusing MySpace profiles is torturous. Hideous background images overshadow content, while animated GIFs and illegible text make for an irritating user experience.

Facebook realized that people want to connect with friends more than they want to customize style sheets, so it offered users a clean and uniform interface. Everything was nicely designed; nothing was gaudy or tasteless. The whole experience was much more visually appealing. While MySpace was pushing personalization, Facebook was refining a community to change the way we interact.

To Sum Up

  • People are programmed to judge by appearance, so every interaction they have needs to be groomed to visual perfection.
  • To maximize appeal, designers must be observant of the collective subjective.
  • Design is not superficial. It can be your greatest competitive advantage.
  • Visual distinction becomes a mnemonic device for your product. Incorporate it to increase awareness and encourage recall.
  • Allowing others to control your appearance, while nice in theory, can lead to chaos and brand deterioration.

Personality

Arrested-development2 in Relationship Engineering: Designing Attraction

As we get to know someone, the novelty of their appearance fades, and something more substantial is required to maintain our interest. We start looking beneath the surface and noticing abstract qualities: intelligence, sense of humor, likes and dislikes, ambitions. These qualities have the power to shape how we see the true person. A person’s personality — the DNA of their character — builds lasting appeal.

Character compatibility forms friendship and love. Looks alone might seal the deal for a one-night stand, but acceptance of personality is required for healthy long-term relationships. We’re often told to “be ourselves.” This is good advice. Like a pheromone-ridden glue trap, flaunting your personality attracts and ultimately bonds you with like-minded individuals.

Personality has this effect in the commercial realm as well. Aligning yourself with your target audience is critical to success. I’m sure this is excruciatingly obvious, and many organizations are already tuned into their demographics, but many others either are too shy to display personality or fail to do so properly.

Humor is one of personality’s strongest pheromones. If done right, humor evokes laughter. And yes, laughter is enjoyable in itself, but have you every wondered why we laugh? Anthropologists are discovering that laughing is not necessarily something we do merely for enjoyment, but is actually a subconscious technique that builds rapport. By laughing, we indicate to others that we agree with or accept them. Dr. Robert Provine, who has done extensive research on how, when and why we laugh, likens laughter to a glue:

…“Ha ha ha’s” are bits of social glue that bond relationships… When we laugh, we’re often communicating playful intent. So laughter has a bonding function within individuals in a group.

Applying a coat of humor to your product or advertising campaign is a great way to spark the subconscious urge to bond. Just make sure people are laughing with you, not at you.

Going back to Apple, its “I’m a Mac; I’m a PC” ads focus explicitly on personality by actually personifying brands (Apple and Microsoft). The casual dress and easygoing nature of the Mac character exudes fun, simplicity and intelligence, especially when juxtaposed with the conservative, uptight PC character.

Also, the subtle dose of geek humor gets you laughing (and thus successfully bonding) with the Mac, and laughing at (disapproving of) the PC. These ads strengthened Apple’s reputation as a hip, intelligent, friendly company, while pegging Microsoft as uptight and out of touch with users’ needs.

Microsoft attempted to salvage its reputation by recruiting — or shall we say, throwing money at — Jerry Seinfeld, who starred in a series of ads alongside Bill Gates. For personality, Jerry Seinfeld is a great candidate. He’s famous, his show had some 75 million viewers, he understands everyday people with everyday problems, and he’s funny.

In a swing-and-miss attempt at comedy, the ads follow Bill and Jerry as they “connect” with “real” people. Is it me, or do these ads actually enhance the perception we have of Microsoft as unhip and out of touch?

Digg vs. Reddit

Have you seen the top story on Digg today? Neither have I. A year ago, I would have been able to recap all of the top stories for you. The website was powered by people like me, so I came to rely on Digg to keep me up to date on topics I was interested in. My personality meshed with those of other Digg users, and visiting the website became part of my daily routine. Yet I rarely visit this social-bookmarking website anymore. Instead, I look to Reddit for my democratically selected links.

What has changed? Ever since Digg released version 4, back in August, content quality has dropped significantly. Front-page stories lack relevance, top stories are now decided by far fewer Diggs, and the sponsored links disguised as genuine articles sour the whole experience.

Digg’s personality changed. It destroyed the very foundation upon which it was built. Suddenly, publishers could auto-submit content and bypass the users who once acted as a filter to determine whether articles were relevant to the Digg audience. No longer was Digg a democratic platform. The power shifted from user to publisher. In other words, Digg sold out.

This personality switch rightfully pissed off the core user base. Alienated users began flocking to… well, an alien. Some stayed to plead with Digg that it revert to its earlier version. Digg refused. In revolt, users began to submit direct links to Reddit. Within months, Digg crumbled and users flocked in hordes to Reddit.

Reddit offers a platform similar to Digg and, despite being owned by Condé Nast, lacks the tinge of corporate influence. Before Digg’s redesign, Reddit was serving a respectable 429 million page views per month. Condé Nast has just announced that Reddit now serves more than 1 billion. That’s more than double its pre-Digg-blowout numbers and a 300% increase over its January 2010 figures. Digg has finally pulled some of the features that led to the mutiny, but it might be too little, too late.

A valuable lesson can be learned from Digg: stay true to yourself. With followers come expectations. Personality attracted them, and every action that is out of character will push them away. Introduce advancements incrementally, and users might put up with it; change drastically, and they’ll leave.

To Sum Up

  • Personality builds rapport. Don’t be afraid to flaunt it.
  • Laughter is a powerful social glue, but use it with caution. You want people laughing with you, not at you.
  • Define your personality and stay true to it. Out-of-character actions will be seen as inauthentic and will alienate your audience.

Conclusion

Studying the art of seduction and the rules of relationships can help you craft engaging user experiences and forge strong connections with users. Getting your audience to fall in love with your product is no easy task. It requires a holistic approach involving members of every team. As interactive professionals, our work bridges brand and consumer. We are the cupids of commerce. Sharpen your arrows; it’s time to spread some love.

This has been the first in a two-part series on relationship engineering. In part two, we’ll explore the art of maintaining a relationship and how to trigger purchase recursion via timely break-ups. Stay tuned!