Step 3: Communicate Rules Visually - Page 5

Not long ago I got to watch the mother of a one-year-old baby in action. It was inspiring. Every time the child did something wrong, like pick up a sharp stick, the mom did not scream, "NO!" and whack it out of the infant's hands (which, admittedly, would have been my first reaction).

Instead, she simply offered him something more interesting. "Hey! Look at this!" she said, waving a red plastic lid in front of his face. "Woooo!"

And every time, the baby dropped the sharp thing and latched on to the toy like magic.

In the same way, it's always easier to guide users along the path than it is to bully them into behaving. Instead of being heavy- handed about it, a simple visual cue, at just the right time, can work wonders. (And, yes, I realize I just reduced all users to a metaphorical one-year-old. Sorry about that.)

Take, for example, the Blogger Discussion area (blogger.com/discuss). Blogger is a web application that I worked for in late 2000. Since the tool was web-based, it made sense to also have a web-based discussion area for peer-to-peer support. I oversaw the creation of what ultimately became Blogger Discuss.

The team and I used non-verbal cues in several places to guide the user at different stages. Icons turned orange to indicate activity, while inactive conversations turned gray, for example.

I also decided that we needed to communicate the rules of the site directly in a posting guidelines page. I wrote it to be short and to the point, with the most important ideas in bold for easy scanning:

Thanks for taking part in Blogger Discuss. Please keep in mind a few simple rules for posting.

1. Stay on topic. If it's about the thread starter topic, everyone is happy. And please remember that this is a discussion area for Blogger. If it's not related to Blogger, it's probably off topic.
2. Be nice. Flames, insults and put-downs will be deleted.
3. HTML will not be rendered. That means you can include code examples, and they'll be visible. If you want to include a link, just start it with http:// and end with a space, and it will become a link.
4. Replies are limited to 5,000 characters (about a thousand words). If you submit a reply that is over the limit, you'll be asked to make it shorter.
5. Blogger retains the right to delete any post for any reason.

Now that we had the rules all spelled out in a document, I just had to figure out where to put it. If we put it in the About section, it would be completely out of sight. If we linked to it from the Discussion homepage, it would be more prominent, but still easily forgotten, since it was possible to navigate from section to section without ever going back to the homepage.

Then there was an additional problem: context. I wanted to place the posting guidelines as close to the actual posting mechanism as possible. But if we linked away to it, it would actually harm the users. Because, if the users had a half-composed post in the form and clicked away to a new page, they'd lose what they'd typed so far. And we couldn't just run the guidelines in the margin of all the threads--that would be a waste of space, not to mention visually annoying.

After a lot of thinking, I decided to insert the guidelines into the process where users were likely to need them: as they're posting. And instead of just putting the text on every page to the point of annoyance, or linking away to a new page, I placed it in a pop-up window, linked prominently from every posting form.

So, as users are posting, they're given a visual cue that there are posting guidelines. In fact, that link serves as a reminder, adjacent to every posting form. And the link's placement over the posting form reinforces its importance. The near-universal "new window" icon to the left of the text tells users that this click will create a pop-up window (and won't take them away from their post).

If users click the link, they're presented with the posting guidelines in a pop-up window.

The guidelines are designed to be a quick read. Then, with the click of a mouse, the window is gone, and users are right back where they were, in context, with their half-composed post undisturbed.

Enforce the Rules

If you've done a good job of setting rules wisely and communicating them clearly, this last job should be something you don't have to do with a heavy hand. Or, at least, hopefully you won't have to do it too often. You never know when a cheese-lover is going to show up.

Unfortunately, no matter how elegant the design of a community space is, at some point you may have to step in and lay down the law. When that happens, it's time to call on your host.

The host of a web community is akin to the host at a party. In addition to enforcing the rules, the host speaks with authority, sets the tone, and makes sure all the guests are getting along. The importance of the role of the host depends on the depth of the community area and the complexity of the tools. But make no mistake, every community site has a host. And if you can't name who that person is, it's probably you.

Step 2: Communicate Rules Clearly - Page 4
Design for Community
Job Description of a Host - Page 6