A blog by the Brick Factory The Brick Factory

Conversation Through a Browser: Tips for Humanizing Websites

Imagine a conversation with an old friend over a cup of coffee. You lean back in an over-stuffed leather chair as you casually discuss politics, the news and recount all the exciting things you’ve done since you were last able to talk. Its natural, your conversation isn’t forced and you even though its been months since you last talked your conversation just flows. Your friend understands the subtleties in your tone and picks up on your humor, anger and joy as your conversations jumps among different topics. It feels great catching up and you wonder why you don’t meet up more often.

Now imagine you’re in the same old coffee shop in the same comfortable chair. This time your friend has been replaced with an odd-looking stranger. Being the nice, outgoing person you are you attempt to start a conversation. “Hello, how are you?” you ask. No response. They must not have heard you so you reach down into your wealth of conversation topics and pull out old reliable – the weather. “Great weather we’re having, isn’t it?” The stranger blinks a few times but says nothing. Your normally charming demeanor is slowly turning into annoyance. Why won’t this jerk respond? In one last futile attempt you dig up your most charming smile and say: “I just love the coffee here, don’t you?”. The stranger yawns. Feeling oddly uncomfortable, you pack up your things and walk out of the coffee shop annoyed, but mostly confused.

At first glance, these situations seem very, very different but lets take a closer look. You’re in the same coffee shop drinking the same coffee. You’re sitting comfortably on the same broken-in leather. Same amount of people. Same charming you, trying to have a pleasant conversation. In actuality the only real difference is the response from your friend compared to the lack of response from the stranger.

At this point you’re probably thinking that this has nothing to do with websites but in a way it does. My argument is that a website should be like a great conversation. As we make decisions about information structure, design, and content we should think of it in the context of the give and take of talking to an old friend. Every website has elements that a visitor is required to interact with. Whether it be the site navigation, a contact page with a form to submit inquiries, or even something a simple as a link. All these elements make up the conversation a site has with its visitors.

So lets analyze a few real world examples, shall we? Let’s start with some examples that would constitute bad web conversation etiquette. Note that for sake of avoiding insult we’ll talk in generalities about common mistakes:

The Bad: Errors when submitting forms, difficult signup processes and making it difficult to get in touch

When someone gets to the point that they are going to reach out to you via a contact form, sign up for your email list, or create an account you typically want to capitalize. These are the engaged, interested visitors you want on your site. If your account creation form spits out an error when trying to sign up, your email list is hard to join, and your contact form is nonexistent you can expect to lose these folks right off the bat. Avoid common pitfalls like asking for extraneous information about a user on signup, making it difficult to get it touch and ask questions, and nondescript form errors. Consider how your visitors would like to interact and cater the experience to them – don’t make them cater to you.

The Bad: No custom 404 error page, broken links and blatant errors

These are some of the more frustrating errors on the web. Sending a visitor to your site to the default ‘This page cannot be found’ 404 error is about as worthless as you can get. Granted, 404 errors are bound to happen but its worth the time to implement a custom 404 page that at least shows in the context of your site. For a good example check out our client Panthera’s 404 page.

The Bad: Poorly organized navigation, buried information and a weak SEO strategy

Many an organization is victim to this. Too many nav points, information burried ten clicks into the site, and unclear wording are all common contributors to a bad experience. My best advice here (for most organizations) is to approach your site structure from the perspective of a visitor with no previous knowledge of your organization. Think of the types of information that would be relevant and what types of actions they would want to take. Trust me, it will go a long way.

Now for a few examples of sites that get it right. We’ll use some real examples here as everyone deserves a pat on the back now and then:

The Good: Formly’s Form Building Process

Formly is a tool to build mobile friendly forms and collect information. I stumbled across this application a few weeks ago and I have to say, I am very impressed with the simplicity and their approach. Take for example their form builder. The introductory copy is great and their step by step walkthrough upon adding your first form field is fantastic. This is one of the better examples I’ve found of an easy-to-use, human focused product.

The Good: GoSquared’s Login Screen

Here at the Brick Factory we love the little details that go into sites and GoSquared obviously does too. Their login page is a masterpiece and shows amazing attention to detail. Things like bringing in a personal image and suggesting fixes for mistyped emails go a long ways in making an experience great. Check out their blog post for some additional details.

The Good: MailChimp’s Chimp

MailChimp has accomplished what Clippy the paper clip could only dream of. The MailChimp mascot is not only fun and lighthearted but also provides useful tips and information regarding your account and emails. This is one of the best examples of giving your site personality and a voice around. As you use their tool, its enjoyable and easy which is reflected perfectly in their visuals and tone.

Have any additional good or bad examples? Let us know in the comments!