I regularly try out new web applications, and I am often amazed to see web applications that assume that a “short introduction video” will get users to understand what the product does and how to use it.
Sure, people love videos, and watch tons of funny cat videos. But, application tutorials aren’t funny cat videos, at least in most cases. For one thing, especially if you’re marketing a SaaS application to business users, it’s likely that users don’t even have headphones connected at their work space; or, similarly, that they doesn’t feel comfortable watching videos with their peers around. As likely, they may want to start using the application right away and may not want to take the time to watch an introduction video. But, most importantly, a video is just one tool in one’s toolbox, and getting users from point A (say, registered for a free trial) to point Z (they’re the guru of your product and help their peers use it) takes much more than a video.
Earlier this week, we at WebCollage have launched a new revision of our Content Publisher welcome pages, so I thought it may be a good opportunity to share the techniques we’ve come up with in terms of communicating our application functionality to first-time users.
I tried to outline 7 “tools” you can use to get first-time users to understand and hopefully like you web application. Here goes–
Tool 1: Welcome Pages
One of the main characteristic of SaaS applications in particular is that users are typically considering using them for achieving a (reasonably) well-defined task: managing projects, sharing files, managing contacts, etc. So, a user has probably registered after visiting the marketing (“Free Trial”) site, and figured there’s a potential for a match between their dreams and the application’s capabilities.
Once the user has logged into the application, there’s typically still a gap between the user’s problem and terminology (e.g., I need to help my customer’s questions) to the application’s solution and nomenclature (e.g., each incoming e-mail creates a ticket).
The Welcome Pages help bridge this gap by presenting a short set of slide-like pages. Well-designed pages are very visual and very short to scan through.
Here’s an example of two pages from Dropbox‘s Welcome Pages:
Tool 2: Guidance Layer
If you’ve read J.R.R. Tolkien’s The Hobbit, you may recall a part where Bilbo, Galdalf and their companions request shelter at the residence of a skin-changing man by the name of Beorn. Realizing that Boern may not appreciate hosting a large group, Gandalf and Bilbo meet Boern and get invited in. Gandalf then tells Boern about two additional members of the team, and obtains permission to invite them too. He then continues to tell the story and keeps mentioning the presence of more members. Boern, interested to hear how the story evolves, lets new members join in, two at a time. At the end of the story, Boern ends up hosting a group of 15.
Similarly, application users may be open to going through a 5-slide deck, but would probably not appreciate reading a 20-page manual up-front. Their expectation is that the application would be so easy to use that no training would be required. In reality, though, some education needs to take place to guide the user through accomplishing the main tasks.
One way to bridge this gap is to introduce one more piece of information at each step of the way. For example, in the WebCollage Content Publisher tool, once a user completes the Welcome Pages, they are presented with a call-out suggesting what the next step might be:
Once they’ve created their first product (the first step in the WebCollage tool), they are presented with a call-out box suggesting what the now-next step might be:
Hopefully, the application sounded interesting enough so far that users would be willing to learn a bit more. The guidance layer can be set up so that in each step, users can read more should the topic pique their interest beyond a short paragraph.
This approach is somewhat similar to a step-by-step wizard, popular in many desktop applications. In contrast, however, the guidance layer does not limit the user’s actions in any way, and users can freely explore the application and pick a different path. Instead, the guidance layer provides them with a suggested next step and supplementary information that they may opt in to read.
Tool 3: A Clear Next Step
Throughout the first-time user experience, one of the key goals is to avoid confusion or lack of clarity on the user’s behalf. Users have other things to do, and limited time to try the application, and if they have to stop, or if they get confused, they may switch on to a different task, or conclude that the “implementation” of your SaaS solution is too time consuming.
Now a de-facto standard in web-based user experience design, one technique for dragging users along is to ensure that at each step, there’s one highlighted, idiot-proof, option. This way, even if your user is starting to use your application with less than full concentration (say, while attending a conference call; though none of us would do that, of course), they are more likely to be able to make progress.
Exactly one option (Add Product) is highlighted, so there is little potential for confusion. This is in contrast with more traditional desktop-based design, which tended to load pages with numerous options. Here’s a random example:
In a way, the concept of a “default button” (like the OK button above, aimed to assist the user; not a trivial concept at the time) has gave way to a single main button paradigm, playing down secondary options even more.
Tool 4: Local Context-Sensitive Help (Inline Help)
Help links embedded within the pages assist users who are uncertain about a certain option. Such inline help links are now also a de-facto standard,and are often worded as a question (in many cases What’s this?).
Applying the same “Gandalf technique” as above, you may want to provide the user with a succinct description, and let them click through to read more information, as is shown in the snapshot below:
In many ways, the inline help links are the modern equivalent of the infamous Help button (F1) in Microsoft Windows, in the context of a single field. However, on the web such inline links can be utilized not just for context-sensitive help for one particular field, but also to help users understand why a certain option is provided or how to use it.
The snapshot below shows an example of an inline help link that guides users not just through a function (New Feature Set) but also through why the function is useful.
Tool 5: Global Context-Sensitive Help (Sidebar)
In addition to providing local help, first-time users may get stuck trying to achieve a certain goal or perform a certain function. In the WebCollage Content Publisher application, this might be putting together rich product information for a new product. Other applications obviously have different common tasks.
Whether or not users watched some introduction video, by the time they’ve started performing a few actions, you can safely assume they no longer remember the details. Allocating a persistent area for help increases chances that users will quickly find the information they’re looking for.
The snapshot below shows our help sidebar, with a few links specific to one application page:
Tool 6: Help Center
Some form of a Help Center or Support Center is a no-brainer. If users are willing to take the time to search for an answer to a particular question, or to learn about a particular function, you’d better be there to provide them with an answer.
The snapshot below shows an example of a Support Center by a SaaS company called Assistly:
A Help Center may include articles, frequently asked questions, and other supporting materials. When users read it, it’s a good sign; it means that they’re willing to take the time to learn more.
Tool 0: Great User Experience
The above sections highlighted some of the tools and techniques for getting first-time users familiar with a web application, whether business-to-business software-as-a-service or not.
In the end of the day, though, the first and most important tool for getting users to like your application is to create an awesome user experience: make flow and navigation clear, use simple terminology that makes sense, provide clear text and compelling graphics. And, of course, offer the right functionality users would just die for. If you have these all nailed down completely, the above tools may not be as critical to success.