The problem of course with a Call to Action Invitation is that it competes with everything else on the page. Thinking through what actions you want to call out on a page (before any interaction) is a healthy design exercise that brings clarity to both visual and information hierarchy on the page.

Like.com is a site for finding items that are similar to other items. Users can shop for similar colors, shapes, and patterns. Given a particular kind of watch, the users can draw a box around some physical feature they really like about it. Like.com will then find similar watches that match the characteristics that were highlighted. For example, highlighting the chronograph face will find more chronograph-style watches (Figure 9-3).

Since this feature is unique, a Call to Action Invitation is placed just above the watch. Titled “Refine by Visual Detail”, it contains a Static Invitation that says “Draw a box on the item to focus your search on that area.”

Figure 9-3. Like.com allows users to highlight what they like visually about a product; it will then return items visually similar: the black watch matched the face style highlighted

As with any Static Invitation, the question is: does it get lost on the page? The additional graphic that represents a mouse dragging a box adds some visual contrast to grab the user’s attention. In situations like this, only user-testing can verify whether users get it or not.

Another type of Call to Action Invitation is a Blank Slate Invitation. 37 Signals utilizes this in its Backpackit application (Figure 9-4).

Figure 9-4. Backpackit uses a blank page to invite the user to start adding content

It’s a simple idea: starting with a blank slate invites the user to fill it in. Recycling what would normally be a blank area to provide clues on how to personalize it is a great way to entice users to create content. The use of the arrow is a nice touch as it allows the user to read the page as normal, but visually ties the invitation back to the toolbar above.

Yahoo! has a security feature that helps users confirm that they are indeed logging in to the official site (and not a spoof site). The setup is simple. Provide an image associated with the login page, an image known by only the user and Yahoo!. When users are on the official site, they will see the image uploaded for the login page.

The Login team has gone through a couple of iterations on how to cue the user to add a sign-in seal. You can see these two approaches in Figure 9-5. The first renders the corner of the login area as a page turned down. The idea is that something appears out of place, which draws the user to interact with the security feature. We can only speculate, but given the latest revision to the invitation it appears that the first design did not work as well as expected (Figure 9-5, left). In the second iteration, messaging, visual style, color, and proximity have all been combined to create a clear invitation (Figure 9-5, right).

Figure 9-5. Yahoo! Login provides a Call to Action Invitation to add a sign-in seal: the first version (left) used a dog-ear graphic to get the user’s attention; later versions (right) used a rectangular area with a different color background

Be careful. It is tempting to use tours as a Band-Aid for a poor interface. If users don’t get it, then creating more instructional text and providing tours will not solve the real problems an interface may have during interaction. But coupled with a well-designed interface, a tour can be just what is needed for users to get started.

The key to tours is keeping them simple, easy to start, and easy to stop. A tour should just illustrate the live site. Going into a “tutorial” mode separate from the site rarely works.

When Yahoo! changed its home page in 2006, it launched a way to tour the live interface with a Dialog Overlay (Figure 9-7). The overlay provides a three-step interface: “Search Smarter”, “Find it Faster”, and “Get Personal”. Each step highlights a different part of the interface with a bubble callout explaining the feature (Yahoo! calls this a “Feature Cue”).

Figure 9-7. The redesigned Yahoo! home page included a tour interface at launch; the tour provided a nice way to invite users to use the main features of the site

Simple visual techniques like dimming the page and highlighting the key areas works well. Using a Lightbox Effect (discussed more thoroughly in Chapter 11) to highlight features and clearly explaining them are great techniques for keeping tours simple.

Like.com introduces its key features in a large area at the top of the home page: “Detail Search”, “Color Match”, “Shape Match”, and “Pattern Match” (Figure 9-8). Each has a postcard that explains the concept graphically. Each concept is automatically rotated through.

Figure 9-8. Like.com displays its four key features (“Detail Search”, “Color Match”, “Shape Match”, and “Pattern Match”) in a large section at the top of the page; each feature is displayed in rotation

While visually stunning, there are a few issues with this approach:

However, Like.com is trying to introduce completely new idioms. Creating a nice visual, bold explanation does a very good job of making these features easy to discover and interact with. The real key is that the features are easy to use in the site. The tour becomes secondary and as such may overcome the limitations noted.