- What Are They Thinking?
- The Sign-up Hurdle
- Keep it Simple: the Journalism Technique
- Reduce Sign-up Friction
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Keep it Simple: the Journalism Technique
Sometimes the most obvious techniques are the most effective. I've found that when designing a sign-up framework, it is useful to pretend you're a journalist. As every good journalist knows, when writing a news article you have to answer the questions Who?, What?, Where?, When?, Why?, and How? You have to pretend that your readers have never heard about the subject you're writing on.
Like journalists, web designers have a core task when designing for sign-up: they have to answer the basic inquiry questions.
The basic questions of inquiry are the most basic questions that someone has about... well, almost anything:
- Who is it for? Who is going to use it? (increasingly the answer is not "just me")
- What is it? What does it do? What are its capabilities?
- Where? Where can I use it? Is there a mobile version for using on the road?
- When can I use it? Is it browser-based, so I can access it at any time?
- Why is it important to me? Why will my life be better as a result of using this?
- How does it work? How can I take advantage of this? How do I get started?
We'll go over each one of these in turn.
Describe WHAT It Is
Steve Krug, in his wonderful book Don't Make Me Think,1 laments that too often web designs don't convey the big picture: what the site is about. Steve's right: there just isn't enough description about what applications are and what they do.
Sometimes, as is the case with online invoicing application Blinksale, the answer is wonderfully obvious: "the easiest way to send invoices online." The beauty of this simple statement is that now the reader can make a decision based on whether or not sending invoices online is important to them. If it is, they can keep reading or sign up immediately. If it isn't, they've wasted at most five seconds.
)
Figure 4.3 Blinksale's tagline says all you need to know. It clearly answers the question "what is this?"
In addition to the simple statement of what it does, Blinksale then gets into more detail: you can send elegantly formatted invoices to anyone with an email address, use an invoice template, or import your client records. Done. You know most of what there is to know about what this application does. That is the point of a simple description like this: to drive people into learning more about it.
Now, invoicing isn't a very complicated process and Blinksale keeps it remarkably easy. So why does their competitor, billmyclients.com, make it seem so complicated?
)
Figure 4.4 On Bill My Clients.com, it is possible to glean what the application is about, but it's light years away from the clarity of Blinksale.
A complicated interface suggests a complicated service.
Most of the people who see this screen are immediately drawn to the input fields asking them to log in. "Uh-oh," they think. "I don't have a login."
The funny thing is that billmyclients.com provides the same service that Blinksale does. They just aren't communicating it as clearly. You have to actually read the fine print to know what's going on. (It is there, believe me.) It says, in the small black text in the middle of the screen, that first-time users can set up an account and send an invoice for free. That's super-important information, but it's hidden in the design.
To their credit, the billmyclients site has a pretty obvious tagline: "invoicing made easy." But it's completely obscured by the design. It's not what you see first on the page, like you do on Blinksale.
So the first step is to describe what it is. The second step, just as crucial, is to put that information front and center in your design. Make it obvious like Blinksale does. Don't hide it, like Bill My Clients does.
And that's just sending invoices by email. Any more complicated web sites (i.e. most of them) are going to have an even harder time communicating what they are. Try to do this in the most straightforward, basic way possible.
Show HOW it Works
When Apple released their iPhone in the summer of 2007, they touted its touchscreen as a revolutionary new input device. They said it would change the way people interacted with computers forever.
Not everyone was convinced, however. Many people worried that the smooth-surfaced touchscreen couldn't replace the tactile feel of an actual keyboard. Understandably, people wondered if it might be difficult to type.
The speculation mounted. Would it be easy to type if there weren't physical buttons? Would you be able to type without looking? What happens when you can't feel the pressure underneath your finger? How do you correct errors?
But Apple had an answer for all this speculation: a set of videos that showed people using the iPhone. It showed people pressing buttons, dialing phone numbers, sending SMS messages. Apple called this a "Guided Tour."2
)
Figure 4.5 The video "Guided Tour" of the iPhone was remarkably successful in showing how the buttonless touchscreen could be used successfully.
As prospective buyers watched the video, all doubt of whether or not the keyboard was usable dissolved instantly. Here was video proof that you can easily type without keys—there were people doing it!
When how-it-works features work well, like the Apple video, they do several things:
- Make it absolutely clear what the steps are to make it work
- Allay fears about the design being difficult or confusing
- Serve as a guide to people who want to follow step by step
- Illustrate how easy it can be to use your stuff
- Become something that your audience can pass around and share
- Prove that people have had success
- Nudge those folks who are on the fence
Netflix's Four-Pane Masterwork
A good "How It Works" graphic is short and sweet, explaining the major points of your application and nothing more. Just the facts, ma'am.
On the homepage of Netflix they have done a great job of this.
)
Figure 4.6 The "How Netflix Works" graphic is an excellent example of how graphics can convey a lot of important information in a small, fast package.
This graphic does several things very well:
- Explains what Netflix is all about in a super-fast way
- Embeds text within the graphic for additional clarity
- Assigns ownership to the viewer—"your list of movies"
- Shows the progression of service—what steps happen in what order
- Gives a clear indication of how long each step takes
- Explains who does what (You: create list and return movies, We: send you movies)
- Explains in user's language why service is different/better (no late fees)
Now, I've worked on projects where a graphic like the Netflix graphic was voted down. Here is how the discussion went:
- Designer: I think a graphic showing how the service works would help to make it really clear for people who aren't quite sure about signing up yet.
- Manager: Well, we're an easy service to begin with, and most people know about us. Let's not muck up the homepage with information that people already know. Let's promote our latest movies instead.
This manager obviously deals in generalities, believing that "most" people already know about their service. But the designer knows that there are people who won't be gung-ho about signing up for the service, and wants to help that specific group of people. Designing for sign-up is about planning for these contingencies, asking "what questions do people have?" and "have we provided answers for them?"
So the answer to the manager would be: "How do you think Netflix got to the point where everyone knew how easy the service was? With graphics like this, of course!"
Nobody, not even a genius, minds something being communicated absolutely clearly.
TripIt and a Second Level of Detail
Like Netflix, TripIt has an excellent graphic on their homepage that quickly conveys how the service works.
)
Figure 4.7 Although the "How It Works" graphic on TripIt.com provides a clear overview of the service, they go one step further and provide a second level of detail reached by clicking "Learn More."
In three panes the designers at TripIt have explained the gist of the service. Many people who were double-checking that this was the service they thought it was or were on the fence will gladly sign up after confirming how easy it is. They can simply follow the instructions to "forward your travel confirmation emails to plans@tripit.com."
But TripIt doesn't stop there. They go on to provide a second level of detail for those folks still needing to know more. This illustrates an important principle.
Good how-it-works features provide multiple levels of detail, at increasing depth of description, allowing people to dig deeper as needed.
To get to this second level of detail, they provide two options. One option is labeled "Learn More." It's a huge orange button that follows the three-pane "How It Works" section. For folks wanting to learn more about how it works, that's the clear call to action.
The second option is the more interesting one. The link is entirely different even though it goes to the same place as the other option. It communicates a completely different call to action.
)
Figure 4.8 TripIt offers multiple paths to its second level of detail, giving people options to learn about what interests them most.
Since it is not as prominent as the other call to action, this second option might not get huge numbers of people clicking on it. But for those folks who didn't follow the first path, this option offers a slightly different message.
When you do select one of these options, you're taken to what's called the "Learn more about TripIt" page. This is the second level of detail, providing deeper information about the topics already presented on the homepage.
Providing this second level of detail has several effects:
- Keeps the user's momentum while reinforcing the main message
- Answers any questions that may be left after viewing the graphic
- Provides more details for people still unconvinced of the service's value or wanting to know more
- Gives you permission to really explain in-depth some important details (i.e. you have their attention)
- Provides an opportunity to start naming specific features of the service. You can link to an even deeper level of detail, such as a feature tour or examples of the service in use.
)
Figure 4.9 TripIt's "Learn More" page is an excellent extension of their original graphic, providing a second level of detail and explanation.
Notice that TripIt used the same graphic on their "Learn More" screen as they did on their homepage. They simply cut it up into three pieces and explained each piece. This clearly demonstrates that second level of detail.
Show the End Result
Showing how your application works is even more effective when you can show the end result. The end result of using the TripIt application, for example, is a one-page travel itinerary. This helps to make all the how-it-works information concrete. People can now see exactly how their travel information is aggregated and displayed.
)
Figure 4.10 TripIt's example itinerary is a great example of showing the end result. The designers even annotated the itinerary to highlight key features.
Explain WHY with Benefits as Well as Features
For years, copywriters have made the important distinction between features and benefits. Unfortunately, copywriters are often left out of the writing stages of web site development, so developers end up trying to pitch their apps on their features, not their more powerful benefits.
Features are capabilities of the system, and although they are very important, they don't explain why someone might use them.
Let's imagine we were building a social bookmarking tool. The features might be those in the left column of the following table, while the benefits are those things in the right column: the actual value you get from the feature.
|
Features |
Benefits |
|
Unlimited server space |
Access from any browser, anytime |
|
Add tags your bookmarks |
Organize your bookmarks in any way you want |
|
Add friends and see their bookmarks |
Collaborate and share bookmarks with friends |
|
Sort by tag or date |
Easily refind important bookmarks later |
|
See related bookmarks |
Find relevant related content |
Wufoo, an online form creation tool, has an excellent way of explaining the benefits of the application. It's a simple screen called "Top 10 Reasons to Use Wufoo."
In general, it is better to explain the benefits more than the features. However, there is one group of people who often responds better to features: techies. Techies intuitively grasp the linkage between features and benefits, and are often interested in the features because they know all about how they affect the benefits. Still, it never hurts to make those connections clear.
)
Figure 4.11 Wufoo's "Top 10 Reasons to Use Wufoo" is a list of the benefits of the service. Notice that technical details of features are also there, but the benefits are highlighted.
Give Examples of WHO is Using It
)
Figure 4.12 Social proof is the tendency to base our decisions on the activities of others. A crowded restaurant tends to stay that way because people assume that it is crowded for a good reason.
Many times we make decisions based on social cues that we might not be fully aware of. Do you ever walk by a restaurant, see a long line at the door, and think "we should probably try that out sometime"? Or, do you ever walk by a restaurant, see that it's empty, and think "that's probably not worth going to"? Most people do. Restaurants know this too—they'll seat early customers close to windows and encourage long lines so that passers-by see them and assume the place is worth going to.
People respond to the activity of others. So give a sense that real people are using your social web application. Show that others are there. Make it seem like a crowded restaurant. This leverages the powerful notion of "social proof."
So to make a person's decision easier, show them how others have made the same decision and succeeded. Give evidence that others are using it.
Some ways to do this are described below.
Let People Find Friends
While social proof works even when we're observing perfect strangers, it is most influential when the people doing the activity in question are people we know. When someone knows that their friend is already using an application, they'll likely be undeterred in signing up. In those cases your job is easy—just get out of their way.
In some cases, people will want to know if their friends are already a part of the service before they sign up. Provide an easy and powerful search for those who want to find their friends.
Facebook is really good at this. They give two options to find friends: looking them up with your existing web-based email accounts, or doing a name search.
)
Figure 4.13 Facebook lets people find friends easily, allowing people to search even if they aren't signed up for the service.
Facebook is clever. In addition to search functionality, they offer a "Find Your Friends" feature that takes an email address from a web-based email account (like Gmail, Yahoo! Mail, or Hotmail), goes out and looks at your contacts on that email platform, and then gives you results.
)
Figure 4.14 Facebook's "Find Your Friends" function. A clever way to let people know if their friends are already on the service.
Their search feature works really well. If one of my friends were considering signing up for the service but wanted to know if I was already there, they might type in "joshua porter," and Facebook, recognizing both variants of the name, returns results for both "joshua porter" and "josh porter."
)
Figure 4.15 Facebook's search works well, returning variants of "joshua" in the result. They don't show you all results, however, prompting you to sign up for that.
In addition, Facebook only shows you partial search results for these queries. For example, they only show 30 of the 171 results available. This gives a tantalizing preview to the number of people you can find on the service, and increases your momentum to sign up. So even if your friend isn't on the service, you won't know until you sign up. Very clever design.
Provide Testimonials: "I love your stuff"
What someone else says about you is more important than what you say about yourself. Testimonials have long been known in advertising as gold. Even so, testimonials are still under-utilized by almost all sites.
A great example of the prodigious use of testimonials is the Basecamp site. Basecamp is project management software for groups. The designers of the site separate the testimonials onto their own page called "Buzz." It is hard to view this page and not be drawn in by the sheer number of positive comments. You can't help but think "if so many people are so positive about this software, it's got to be good."
This page, which contains 90! testimonials, also raises the question "how many testimonials is too many?" And, judging by the effectiveness of the page, maybe even ninety isn't too many.
)
Figure 4.16 The Basecamp Buzz page seems like overkill as it contains 90! testimonials. But once you start reading them, you can't help but think "this is great software."
Notice the designers place the most compelling testimonials at the top. The first testimonial is actually from a competitor! The second one is a testimonial with ties to a recognized authority (Microsoft—also a possible competitor), which carries more weight than a person from a company you've never heard about.
)
Figure 4.17 The designers of Basecamp strategically chose compelling testimonials to place at the top of the page.
Here are some other insights that the Basecamp Buzz page gives us to use when displaying testimonials:
- Place the most seductive at the top
- Place recognized authorities in more prominent places
- Leverage strong brands
- Give interesting details about the person
- Pull testimonials from reviews and then link to the reviews
- Emphasize the most compelling part of the testimonial
So, elicit testimonials. Ask people for them. More often than not, your users will be happy to share their opinion of your software. Write them down and put them on your web site. It's such a simple thing to do that it simply gets overlooked.
In addition, this also shines some attention on the people who gave you the testimonial, showing them that you value their opinion. They might even reference your acknowledgement with others, driving even more people to your highly effective page. So imagine that two in ten people you acknowledge are going to link to you if you publish their testimonial. Wouldn't it be better to have a hundred testimonials and get twenty incoming links than having five testimonials and one incoming link?
Get As Specific As You Can
- Question: Who is the audience you're targeting?
- Wrong Answer: Well, anyone, really. Our application has a broad set of uses.
- Right Answer: People who do this very specific activity...
This is a discussion I had with an entrepreneur who was starting a new software company. He was targeting his software at what he called "the general public." And on the surface of things, this makes sense. He didn't want to limit his software by saying that it was for a particular audience, as that would make it harder to swim with the current if that strategy didn't work out. (Investors like flexibility, too.) For whatever reason, his software ended up being for all audiences.
In practice, however, software built for the masses rarely works. Even in cases where software has gone to the masses, it started off in a niche and then grew outward, as people realized that it doesn't have to be used in any one way.
Targeting a broad audience is precisely the wrong approach. The more specific you can get about how to use your application, the more your software will resonate with your potential audience.
Del.icio.us, the social bookmarking tool, is about as broad a tool as you can get. Anybody who wants to bookmark web pages can use it. That is to say that their potential audience is everyone on the web.
But Del.icio.us doesn't fall into the trap of designing for everyone. They do a very good job providing specific use cases.
And, if your software is flexible and can be used by many different types of audiences, choose a few profitable/big ones and be specific about each. The more specific you can get, the better.
)
Figure 4.18 Del.icio.us is a flexible tool that can be used by anybody. Still, the designers describe very specific use-cases when communicating its value. This is helpful for people trying to learn about it for the first time.
Success Stories/Case Studies
Even more powerful than suggesting what people can use your software for is actually showing how someone has successfully used it. Any activity seems easier if someone else has done it first.
Apple does a good job with case studies with the "profiles" feature on their professional site. They profile a successful professional and explain how that person uses Apple computers in their work. This is not a hard sell: Apple simply explains what the person uses Macs for.
)
Figure 4.19 On Apple's professional site, they offer "profiles" (case studies) to show how people are using Macs in their work.
Successful case studies tend to:
- Show how real people (even famous ones) use your application successfully
- Sound like a genuine study of use, rather than an advertisement
- Talk in depth about the activity at hand, without resorting to generalities
- Can get really technical about how the application is used (the text of Apple's profiles goes into good depth about what the person uses their software and hardware for.)
)
Figure 4.20 Apple's case studies focus on how their products make sense for the activity at hand, getting into some of the details that most people wouldn't know.
Case studies are the ultimate in detail. They are where you can dive into more complicated issues than most people, except those few who are interested in the very specific activity, will understand.
Give Numbers (When They're Big)
"99 Billion Served." Most McDonald's restaurants claim that unfathomable number of people served. It says "an amazing number of people have eaten here."
Software companies can do this as well. AdaptiveBlue uses the number of downloads of their software effectively. They proudly advertise that their toolbar has been downloaded over one million times. It suggests that lots of people are downloading—and they are!
)
Figure 4.21 A person reading this download statistic from AdaptiveBlue can't help but say "Wow, this is popular" and give it a second glance.
Appeal to Authority
If someone with authority uses your software, it makes sense to leverage that fact by talking about how they use it. On the AdaptiveBlue site, for example, they promote their software by explaining how Seth Godin, an authority in the marketing world, uses their SmartLinks feature.
)
Figure 4.22 If a well-known authority uses your software, tell people! This element from AdaptiveBlue doesn't oversell Seth Godin's involvement, it simply lets people know that he uses to the software to promote his books.
Authority works because it makes people pay attention. The mere fact that Seth Godin uses this software is impressive. But notice, too, that this element doesn't overplay Godin's involvement. It simply states that he uses the software. More importantly, it describes what he uses it for: to promote his books. That's enough information to grab those folks who might use it for the same purpose. You can bet that people who are interested in promoting their books are very interested in how Seth Godin uses this product.
Hypotheticals Are OK
If you're early on in launching your software, you may not yet have many people using it. In this case it might make sense to give people hypothetical ways to use it.
A good example is Backpack (created by 37signals, who also created Basecamp). In promoting Backpack, the design team came up with a bunch of hypothetical example uses. This is a great way to get people thinking about how best to use the software if they aren't sure.
)
Figure 4.23 A list of hypothetical uses for the app Backpack. This list gets people thinking about how it might be useful for them.
WHEN Can People Use It? Now!
Sometimes it seems as if all web software is free nowadays. But if you offer a pay-for application, consider offering a way for people to try it out for free. This is a great way for people to get excited about your service without first having to make a hard decision about budgeting or pricing.
Letting people try out your application also has an interesting effect. By giving people something for free, you've evoked the feeling of reciprocation: people are much more likely to stick with you for it. You've given them something for free, and they're more likely to give something in return (their business).
Goplan, a project management application, offers a version of their software that anybody can try for free. It is a limited version without some of the bells and whistles of the more expensive plans, but is enough to get you started and pique your interest. Sometimes people don't realize the value of something until they've actually used it.
)
Figure 4.24 Goplan offers a free version of their project management application. It's a great way to get people hooked on your software.
WHERE Can People Use Your Application?
Until recently, the question of "where" you can use web applications wasn't that interesting. However, expanding mobile phone use is changing that, allowing people to use web applications anywhere they can use their phone.
In some cases, mobile access changes the entire value proposition of social software. Consider the case of Google Maps, a mapping platform that becomes much more useful when you're on the go.
The Maps design team has done a good job of explaining the benefits of using their application while on the move.
)
Figure 4.25 The mobile page for Google Maps is a good example of highlighting some of the interesting uses of their application while on the move.
The secret to designing for mobile use is context. What sorts of activities are people going to use your software for when they're on the move? If the answer is a specific set of activities like on Google Maps, it makes sense to call these out specifically.