Tuesday, September 24, 2013

Five Ways To Prevent Bad Microcopy

You’ve just created the best user experience ever. You had the idea. You sketched it out. You started to build it. Except you’re already in trouble, because you’ve forgotten something: the copy. Specifically, the microcopy.
Microcopy is the text we don’t talk about very often. It’s the label on a form field, a tiny piece of instructional text, or the words on a button. It’s the little text that can make or break your user experience.
BillBeardMicrocopyImage
If you think you’ve built the best user experience but didn’t make sure the microcopy was spot on, then you haven’t built the best user experience.
With the adoption of agile development and lean UX, we’re often concerned about racing through iterations and getting our products in front of customers. But we can’t forget that design is still about words.
Everyone frets about marketing copy — and they should — but communication doesn’t stop once you’ve sold the user. In some ways, you could argue that words become more important once the marketing experience is done. With most products, users have to be sold to only once — or once in a while — and then they’ll use the core product all the time.
If your microcopy isn’t getting the job done, you’ll lose users — and all the marketing in the world might not get you a second chance.
With that in mind, here are five ways to make sure your website’s microcopy doesn’t end up sinking your UX.

1. Get Out Of Your Own Head And Get To Know The User.

I’m willing to bet that your experience is plastered with internal terminology, especially your labels and navigation. Every company has its own language, which often sneaks onto the website when we’re not careful.
Don’t let it happen. Never assume that what works for you will work for the user.
Here’s a simple way to check whether your microcopy is too internal — or confusing, for that matter.
Let’s assume that you’re running some form of usability testing. (If you’re not, there’s only about a thousand articles out there that will convince you you’re making a mistake, so you don’t need me for that.)
When you’re testing, you probably get caught up in watching how the user interacts with your website and their facial expressions. But instead of simply watching, make a point to really listen to — and take notes on — the actual words the user says during testing. Listen closely to the phrases they utter when describing their actions. After all, you’ve told them to think out loud.
Listen to the inflection in their voice as they read microcopy: Did they say that label or term with a question in their voice? Don’t hesitate to have your moderator follow up on copy. Have them go back and ask the user whether they’ve understood that label.
Take it a step further: Listen to what users say from the moment they walk in the building. Listen to their banter with the moderator, the jokes they make and the words they use to express their frustration or enjoyment.
You’d be surprised by what you can learn about a user and their language set from a comment they make about a cup of coffee. Everything someone says tells you something about them and can inform your copywriting process.

2. The User Is A Person. Talk To Them Like One.

Because brevity is essential on the Web, most of us tend to truncate everything — particularly labels. Labels are great for design. They organize and keep tidy essential parts of a UI, such as navigation and forms.
Unfortunately, labels have an inherent problem: They’re easily subject to a user’s personal context because they don’t provide explanation. They’re on an island in the user’s mind.
Not too long ago, we encountered this problem with a label at TheLadders.
TheLadders is a job-matching service. Like any matching service, we required information to match a user with the right job.
TheLadders Job Goals
We thought this form was very clear. “Job Goals” is the label we’ve used for our matching criteria for almost 10 years. It’s brief, which helped to keep the navigation neat. But in a recent redesign, we noticed that users kept stumbling when first arriving on the page.
Turns out that people who don’t work in the job-search industry think of job goals as accomplishments they hope to achieve at their job, not as the details of their next job.
(We also fell into the trap covered in the first point: internal terminology = bad.)
So, we made it more conversational: “What job do you want?” Instantly, we could see that users no longer hesitated. Why? Because taking this new line of copy out of context was impossible.
Instead of forcing a label on a form or field for the sake of the UI, use natural language. The experience should be a conversation with the user, not a filing cabinet for them to drudge through.
Most of all, the labels in the navigation shouldn’t be more important than the user’s interaction with the pages that the labels represent.

3. Use Copy As A Guide, Not A Crutch.

“We can fix that with copy.”
I’ve heard this too many times when the UX falls short, and I hate it. If there’s a problem with the design, then fix the design. The best experiences have minimal copy because they’re intuitive. When designing the UX and you find yourself writing a sentence or two to help the user take an action, step back.
Tests have been conducted on readability and on the optimum length of content for understandability since the 1880s. With the rise of the Internet, this story became about line length. Most sources net out between 45 to 75 characters as the ideal line length.
To me, line length is moot, especially with responsive and mobile design. Besides, character counts seem tedious and not very lean.
Instead, I subscribe to the original readability tables of Rudolf Flesch (pictured below), in which sentences with eight words or fewer are regarded as “very easy” to read.
BeardFlesch
The readability tables of Rudolf Flesch.
It may be an old standard, but it still may be the best measuring stick we have, and it’s the easiest for lean teams to follow. On the Web, we’re shooting for “very easy to read” every time, and we want to be able to communicate with as many people (93%) as possible.
If you can’t explain what a user needs to do in eight words or fewer, then reconsider the design.
Once the user has gotten past the marketing portion of the experience, use copy as a guide to usher them through the product. The best copy on basic UI features, such as a form, will get read but not really noticed. The user absorbs the words and takes the desired action without a hiccup.

4. Treat Every Moment Like A Branding Moment, Even When It’s Not.

There are multiple definitions of a “branding moment.” When we talk about copy in a UX, I define it as a moment when you purposefully inject your brand’s tone and voice into what would normally be a straightforward user interaction.
For example, Foursquare has a lot of great branding moments within its badging system. I unlocked the one below not too long ago. It’s fun and a bit edgy, on point with Foursquare’s brand.
FoursquareBeard
A good job of a branding moment with Foursquare’s brand.
But getting carried away is easy. Think hard before using fun or quirky — or whatever your brand’s voice is — copy in a situation that the user wants and expects to be straightforward.
Your brand’s tone and voice are essential to consider when writing all of your copy, but it should not get in the way of a user who is trying to take action.
Avoid over-branding copy on:
  • navigation,
  • forms and field labels,
  • instructional text,
  • selection text (drop-downs, radio buttons),
  • buttons.
Consider incorporating your brand’s voice in:
  • confirmation messaging,
  • rewards (badges, points),
  • 404 pages,
  • server errors,
  • error messaging.
The difference between these lists is simple. In the first list, the user is attempting to take action; the second list is the results of actions.
In the first list, you don’t want to risk confusing users as they try to accomplish something and cause them to abandon. Clarity is essential.
In the second list, you have an opportunity to embrace the user’s success (Foursquare’s “You’re on fire!”) or mitigate a failure (TheLadders 404 page, below) by injecting your brand. You don’t need anything from the user at these points.
TheLadders404BillBeard
TheLadders 404 page.
This isn’t to say that you can’t brand that first list. But if you’re going to do it, test it first. With branding moments, execution is paramount. If you’re unsure, don’t risk it.
By choosing not to brand parts of the experience to keep it simple and easy for the user, you’ll provide an enjoyable experience, which will make your brand stronger. So, every moment is a branding moment. Even when it’s not.

5. If Content Is King, Then Treat Context Like A Queen.

The hot saying right now is “Content is king.” Native advertising, or the integration of relevant content into a natural experience for the purpose of acquisition, is becoming a core offering of many agencies and has spawned a few popular startups.
But without context, content is useless. (And if you’re big on Game of Thrones, then you’ll know that queens have all the real power!)
Whether you’re labeling a form or writing a blog post, you have to either understand the user’s existing context or provide context for them.
A user’s context will define how they interpret the copy on the page. That context could come from anywhere: an email they’ve just read, or something that happened to them when they were eight.
When a user doesn’t have proper context, they get confused. When a user gets confused, they abandon.
If you’re agile and iterative, accounting for a holistic experience adds an additional layer of complexity, in the form of consistency. A simple change to copy on one page could affect 10 other pages. One minute you’re calling something “Job Goals,” and the next you’re changing it to “What job do you want?” Well, where else have you used “Job Goals”?
To better understand the user’s context — and to check for consistency — sit down at least once per iteration and experience your “contextual flow” as the user sees it.
For example, if you have a subscription service, the flow might be something like this:
ContextualFlowBeard
That’s at least 10 distinct steps in which a user’s context could be created, confirmed or altered.
Sit down, take a breath and wipe your mind of what you know is there. Then start with Google or your home page or wherever the first touch usually happens.
Does your onboarding experience deliver the same promise as your Google ad? Have you described a feature using the same language throughout? Are your labels so subjective that the context gets lost? These are questions to answer as you go through the flow.

Whatever Happens, Don’t Ignore Your Microcopy.

Microcopy often falls victim to personal bias, internal terminology, poor branding, broken contextual flows, time crunches and other factors. Any of these can undermine even the most well-designed UX and the copy within.
Here’s the thing about mistakes with microcopy: They’re so easy to make yet so hard to identify after you’ve made them.
You have a much better chance of stopping the mistakes in advance than of identifying them after the fact. When you’re testing, how often do you think, “Hey, maybe we should change the label on the third field of this form?” You’re wrapped up in other UX mistakes that you know you’ve made. Unfortunately, a repeated pattern of noticeable failure is usually needed in order for microcopy to get updated or even tested.
So, the next time you’re creating or improving an experience, I hope you employ some of the tactics provided here so that you avoid these “easy” mistakes and do right by your microcopy — and by your user.

Sketching For Better Mobile Experiences

Mobile user experience design is maturing. One way to gauge this is to look at the tools at our disposal. Prototyping tools such as Balsamiq, Axure and Fireworks enable us to build wireframes and click-dummies, helping us to explain the targeted user experience. Cross-browser frameworks such as PhoneGap, Zurb Foundation and jQuery Mobile help us to create prototypes using the native languages of the Web: HTML, CSS and JavaScript.

Why? The Case For Sketching

We seem to be in a better position than ever to design great experiences in virtually no time. However, these tools come with a hidden cost: they tempt us to skip the key step necessary to creating a well-designed product — which is to take the time to understand the problem we are given.
That’s why I suggest to start using sketches to understand the problem and to come up with a concept before firing up your favorite tool.
Right now, you are probably thinking one of the following:
“We have a tight deadline and there is no time for doodling. We need to get started.”
“Designing in [insert your favorite tool] is faster by far. I need to get results quickly.”
“We need to present results to our [client or project partner or peers]. We cannot show them hand-drawn stuff.”
“Sorry, but I really can’t draw.”
Not only have I heard these objections a couple of times before, I’ve also said all of them myself.

DEFINING THE PROBLEM AND THE SOLUTION

Sketching enables us to explore the problem space and define the solution space at the same time. It frames our current understanding of the problem, while also helping us to figure out possible solutions.
While we sketch out our thoughts, new ideas will emerge. The ambiguity and lack of detail in sketches foster new ideas. Here, ambiguity is a good thing, because we will automatically try to fill in the blanks in our heads. That’s what makes sketching “generative”: it captures the ideas we already have and sparks new ideas. As Bill Buxton says in Sketching User Experiences:
“Learning from sketches is based largely on the ambiguous nature of their representation. That is, they do not specify everything and lend themselves to, and encourage, various interpretations that were not consciously integrated into them by their creator.”
By sketching different solutions to a problem, we can explore them without immediately committing to one of them. This gives us new insight and raises new questions. Sketching is essentially a brainstorming exercise.

THE “COST” OF SKETCHING

The fastest way to get something out of our heads is to grab a pen and a sheet of paper and quickly sketch it out. Trying to do the same in our favorite prototyping tool takes more time: We have to create a new project, decide on the right library to use, place our little rectangles on the canvas, draw little arrows connecting our little rectangles, rearrange everything a bit to make it look nice — and suddenly 30 minutes or more are gone.
If we don’t like what we see on a sheet of paper, we can just toss it in the bin and start over. Using our prototyping tool, however, makes throwing stuff away harder because of the time and effort we’ve spent creating it — even if the idea wasn’t a great one. Starting over is harder. Paper sketches, on the other hand, are cheap and fast.
Sketching Tools
The fastest way to capture and evaluate a concept is to sketch it out.

SKETCHING AS A COMMUNICATION TOOL

However worn out the saying is, a picture does say a thousand words. Sketching enables us to walk our peers and stakeholders through our current understanding of a project. We can use various visual representations to explain different aspects of the project (we’ll cover the most common ones in the next chapter). In The Back of the Napkin, Dan Roam says:
“Pictures can represent complex concepts and summarize vast sets of information in ways that are easy for us to see and understand, they are useful for clarifying and resolving problems of all sorts.”
Our peers will be able to point out gaps in our thought process and discuss possible solutions and alternatives with us. They will most likely understand our shorthand and be able to give us feedback on the details of our concept.Presenting our idea to others also allows us reflect on our concept; we see mistakes and can find better alternatives just by walking through it.

SKETCHING AS A COLLABORATION TOOL

Sketching is a powerful tool for involving stakeholders early on in the design process. The following chicken-egg problem is typical when defining the process: Stakeholders are not able to formulate a complete set of requirements before they have seen some visual representation of the solution, but we designers are reluctant to start working on a solution before we are sure that the requirements we have been given are stable — we want to avoid unnecessary revision, which would result in extra work.
A way out of this dilemma is to start sketching possible solutions in a collaborative workshop, such as a design studio session (see Will Evans’ article “Introduction to Design Studio Methodology”). We can walk stakeholders through our concept (and alternatives) step by step and explain to them the impact of their requirements on the design.
Sketching also has a low barrier to entry, allowing non-designers to participate. (Whether you hand out pens to stakeholders is a matter of personal taste and of much debate. You’ll have to make up your own mind.)
Because sketches are rough and unfinished, giving feedback is also easier. Some people hold back upon seeing a pretty finished-looking version of a page because they think of all the work that must have surely gone into it. High-fidelity visuals also tend to distract people — instead of focusing on the concept, they are tempted to comment on the visual design or on minor details. Sketches keep them focused on the core concept.
The only thing you’ll need to overcome is your reluctance to show your unpolished work to others.

SKETCHING IS NOT DRAWING

A common misunderstanding is that your sketches have to be pretty. But interaction design is not art class. Your sketches don’t need to look good; they only have to convey your idea. They are supposed to spark discussion and generate ideas; they are unlikely to be framed on a wall. As long as you are able to draw boxes, arrows, circles and stick figures, you are good to go. As Joshua Brewer notes in “Sketch, Sketch, Sketch”:
“The sketch is not the end goal. The end goal of the drawing process is what you learn while sketching. So don’t worry if you can’t sketch.”
Learning how to sketch is beyond the scope of this article, but look at the following presentations, article and book to get the basics:

How To Sketch

Now that I have (hopefully) convinced you that sketching should be a part of your workflow, let’s talk about what to sketch in a mobile project.

DIVERGENT SKETCHING

In the beginning, you will want to capture different ideas for your mobile app or website. Start sketching different versions of a single key screen or parts of it. Your goal is twofold: to generate a lot of different ideas, and to explore and evaluate them — at the same time. The more ideas you come up with, the more options you will have to choose from later on. This process is often called “divergent sketching.”
useful tool for this type of sketching is a multi-page template. It offers enough space to sketch six different versions on a single page, and it provides some guidance on the available screen space. By showing different ideas side by side, it makes comparing and discussing them later on easier.
A lot of templates are available online (I use Erik Loehfelm’s most often). Pick the one you like.
six main menu variants
Wireframe variants for global navigation. (Large version)
The screenshot above shows six different ideas for an app’s main menu (plus vivid proof that my sketches are not pretty). I don’t often come up with six versions (I like to tell myself that I am a structure-first person), but I do try to create at least three variants of a single key screen. Because this is brainstorming and you will want a lot of options to discuss later, quantity is your friend here.
If you happen to be short of ideas, browse some mobile UI galleries for inspiration (such as Inspired UIPttrnsLovely UI and UI Parade). They showcase solutions grouped by topic and feature (for example, main menus, chat windows). Include the things you like in your sketches, and mix them with your own ideas.
Make a habit of titling each sketch. This will make it easier to differentiate between them and refer to them later on. I add notes and annotations to explain the sketches and the thought processes behind them (such as strengths, weaknesses, trade-offs compared to other concepts, questions, new features, etc.). Labelling and dating the sheets are also a good practice.

CONVERGENT SKETCHING

Once you have sketched multiple versions of a screen, pick the one that best solves the problem. Unfortunately, a single sketch will rarely check all of the boxes. In most cases, you will have to combine ideas or parts of ideas into a single winning concept. To do this, you will need to explore in more depth by making a more detailed sketch on a single page. Use the white space to annotate. Jot down all questions, new ideas, important or unclear areas, and things to discuss. This will help others to understand your thought process. This activity is often called “convergent sketching.”
For more information on divergent and convergent sketching, see Leah Buley’s presentation from FailCon 2010, “Good Design Faster,” and Brandon Shauer’s article “Sketchboards: Discover Better + Faster UX Solutions.”

CREATING UI FLOWS

After boiling your ideas down to a set of key screens, the next step is to explore how they work together. For this, create a few UI flows (i.e. a series of key screens) that showcase how a user would use your solution to accomplish a task. UI flows highlight which interface elements are used (for example, which button is clicked or which gesture is used) and how the system responds (for example, with an animation, transition, pop-up dialog or new screen). They also show key screens in different states (for example, initially empty and then later filled with content).
You can visualize different outcomes within a UI flow (such as a list of search results versus an empty list). Your flow would then no longer be linear; different branches would show different outcomes. But try to limit the number of branches in a single UI flow. Each branch increases the complexity, making your flow harder to understand. It also makes them harder to explain.
A sample UI flow
UI flows visualize how a user gets from A to B. (Large version)
You don’t need to sketch all use cases; pick the ones that are important and will be used most. The Pareto principle offers a good rule of thumb: prototype the 20% of functionality that will be used 80% of the time.
I usually start sketching one of the key use cases to try to come up with a way to solve it. I will highlight the interactions on the screens and (usually) connect the screens with arrows. I’ll explain each step and label the key screens. As always, I annotate wildly.
For inspiration on how to sketch mobile screens and UI flows, look at Gisele Muller’s article “Inspiring UI Wireframe Sketches”; MOObileFrames, a blog that showcases mobile wireframe sketches; and Wireframes, a website by Jakub Linowski. You can also use Jakub’s “Interactive Sketching Notation” (PDF) in your UI flows.

STEPS TO TAKE

To give you some more context and to show you how the three activities above relate to each other, here are the steps of a typical sketching session:
  • List the information you have and what you want to capture.
  • Make a first set of sketches (such as variations of a key screen or an initial UI flow).
  • Review the sketches yourself.
    • What are the strength and weaknesses of each variant?
    • Are the UI elements and data consistent (i.e. the same elements are used for the same task)?
    • Do you show data the same way?
    • Are the interaction options clear?
  • Get some feedback from others. Start with peers and continue with potential users if possible.
    • What are their first impressions?
    • What do they like best? Why?
    • What do they dislike? Why?
    • What is not clear in your sketch?
    • What improvements have they suggested? Why did they suggest them?
  • Iterate on the concepts.
    • Can you combine different strengths of separate concepts into a new concept?
    • Can the sketches be clarified?
    • Can steps be reduced or simplified?
  • Review the results in light of the initial feedback.
    • Have new questions come up?
    • What insights have you gained?
As you can see, a lot of these are “Why?” questions. This is because sketching is about trying to understand the problem while simultaneously working towards a solution. Write down all of the questions that come up during sketching next to the sketches themselves. This will guide you towards the right concept.

BEYOND SKETCHING

After you’ve created sketches of the key screens and the main uses cases, you will want to try out your concept live on a real phone. Apps such as Pop andProtosketch enable you to import pictures of sketches and turn them into a prototype. This very fast and low-fi method will give you a feel for the concept’s interaction. Both apps allow you to define clickable hotspots and page transitions, which make a prototype’s interaction more realistic.
Alternatively, import your screens into a more advanced tool such as Axure and build a prototype in there.
Whatever method you choose, your goal is to test the concepts quickly and with little effort on a real phone.

Take-Aways

Sketching helps you better understand the problem you are trying to solve and lets you visualize possible solutions. It is a fast and inexpensive way to brainstorm and to test out a lot of UI ideas before committing to one. Sketching speeds us the concept creation and iteration phase and makes it possible to get feedback early on, when changes are easy to make.
For your next sketching session, keep the following principles in mind. They will help to keep you on track:
  • Be lazy.
    Don’t try to reinvent the wheel. Use a template to guide your sketching.
  • Get inspired.
    Browse design pattern libraries and mobile UI galleries, and look at wireframe showcases. Take what you like, mix it with your own ideas, and come up with something new.
  • Stop at good enough.
    You sketches need to get your ideas across. Don’t get lost in (unimportant) details.
  • What would Pareto do?
    A small set of your solution’s features will be used the most. Focus on them. Which 20% of the solution will be used 80% of the time?
  • Be consistent.
    Use an existing sketching notation and/or develop your own. This will make your sketches reliable. Peers will understand your style and will need less time to look through the sketches to give feedback.
  • Annotate everything.
    During sketching, new questions, ideas and problems will pop up. Write them down; otherwise, they will get lost.
  • Be open.
    Make your sketches visible. Pin them on a wall, and always show them to others to get feedback.
  • When in doubt, sketch some more.
    If you are unsure about a solution, start sketching variations. List their pros and cons and get feedback to see what works best.
Happy sketching!