Interaction Design Best Practices — Part 3

This is an excerpt from the Interaction Design Best Practices ebook, written by Jerry Cao, Kamil Zięba, Matt Ellis, and originally published on UXPin.com.

Image for post
Image for post

Create Amazing User Conversations with Your Copy: Using Language to Humanize the Experience

Shakespeare and Hemingway may have manipulated words in a way that make us reflect on the human condition, but could they increase your conversion rate? The answer may surprise you.

Image for post
Image for post
Photo credits: “Ernest Hemingway Writing at Campsite in Kenya.” Creative Commons

In this chapter, we’re going to discuss the best practices for writing the user interface design for your product, which covers some methods that work for all interfaces, and some that are unique to digital copy.

Ambiguity is the enemy of good design. This is especially true for interface copy, because the confusion will only be amplified since words are such a direct interaction.

Image for post
Image for post

In this section we’ll provide essential tips for saying what you mean, based on those originally listed by John Zeratsky, design partner at Google Ventures, in his post on interface copywriting. We have found 4 in particular to be most applicable to interaction design, so let’s take a deeper look:

1. Be Specific

State precisely what you mean, with little room for vagueness. A lot of this simply goes back to choosing the right words. For example, the Save function is not the same as Submit. Similarly, a Filter function is sometimes misrepresented as a Search.

Image for post
Image for post
Photo credits: www.zenefits.com

In the above example from Zenefits, you can see how the benefits button is labelled Manage, while the personal and financial information are labelled View & Edit. It’s a very subtle difference, but it makes sense based on the required user effort. The Manage button is more accurate because the menu provides actions like adding dependents, changing plans, and printing confidential information. Meanwhile, the personal and financial menus are just simple data input.

Another tip for specificity is proper titling. Let’s say your product creates an activity stream of the companies you follow. While this may be self-explanatory to you, to a new user it may be confusing or even negligible. A specific title, something as simple as “Company Updates,” could save the user from confusion. In the case of multipage wizards — a series of pages where users enter information on each page, as in an account sign-up — being specific can help set you apart. While most products label next step buttons as Next or Continue, explaining exactly the next step can create a more helpful interaction. This can be done with smaller sized copy, i.e., “[Save & continue] Next, we’ll ask for payment info.”

2. Avoid buzzwords

An easy mistake in interaction design is using the same language with your users as you do around the office. Unless you’re designing for other designers and developers, your jargon will either fly over your users’ heads, or slow them down as they struggle to comprehend. While we use UX, IxD, and UI frequently in our ebooks, the average person probably won’t have a clue what we’re talking about.

As discussed in The Guide to Usability Testing, you should always test for a clear understanding of terminology. You can set your demographics and receive test results within an hour with User-Testing, or go with a cheaper route like Mechanical Turk (the process for testing interface language is described here).

3. Important Words First

Important words should appear front and center. For example, in a form field, the label “First name” is far better than “Name (first).” If you want to draw attention to additional details at the bottom of a page, “Below you’ll find additional details,” is not as effective as “Additional details below.”

Image for post
Image for post
Photo credits: http://store.apple.com/

The Apple Store demonstrates good word placement by using inline form validation (a pattern described in Web UI Patterns 2014). Because the description sits in the form fields, you don’t need to clutter the interface with descriptions of each entry. The descriptions minimize as the fields are completed, not letting you forget what you’re supposed to input (ed. UXPin).

4. Omit Needless Words

The eternal advice of William Strunk, Jr. in the timeless Elements of Style, omitting needless words is fundamental to all writing. It holds extra weight with digital design given the size, character, and attention span limitations. You can’t ignore this advice, considering that a study on 205,873 web pages shows it only takes users about 10–20 seconds to decide if a site is worthwhile.

Image for post
Image for post

As a general rule of thumb, try to say everything in as few words as possible (while still retaining the meaning). For example, Click to Continue can be simply Continue, and All changes have been saved can be shortened to Changes saved.

Cheeky and aggressively personable wording may have been an effective strategy years ago, when a casual tone stood out against other products using corporate-speak. But these days, most products use a casual tone, so this strategy isn’t as unique as it once was.

Don’t get us wrong — we’re not saying your product should be stripped of a distinct personality. Just don’t force it. Far too often, brands prioritize being clever or standing out over clearly stating their meaning. When personality gets in the way of clarity, it’s time to cut it out. As Randy Hunt, Creative Director at Etsy, advises, the cleverness of first impressions doesn’t survive the first few minutes — but the frustration of obscurity certainly will.

Headlines and buttons make up the backbone of your product, so don’t risk weakening them with wording that can be misinterpreted. Clarity is prioritized over personality for key interactions, so Save and Continue will work better than an Awesome, let’s go! If you’re intent on flexing your creative muscles, save it for the subheadings and supporting text.

Image for post
Image for post
Photo credits: UXPin

In our button above inviting others to collaborate, we balanced personality with functionality by still explicitly describing the action. It’s a subtle touch, since the action would be muddled if the second sentence was something like “Start the fun with a coworker!”

As you can see in this article, the Everyday photo app strikes a similar balance with its onboarding message, turning an otherwise annoying reminder into a delightful interaction that has probably cracked a few smiles. Again, the key here is that the user action remains crystal clear.

Your design’s personality will come out one way or another, regardless of your word choice. Besides, a company personality is not something you want to force or consciously build — it should appear organically and truthfully. People are more attuned to being manipulated than you might think, and friendly words won’t necessarily make you friendlier.

To learn more about how to infuse your design with the right amount of personality, read this excellent A List Apart piece by Mailchimp UX Director Aarron Walter. Then, take a look at some excellent examples of emotional design.

What does a legendary Renaissance-era battle have to do with a modern-day coffee company? Read the Our Story section of the Blue Bottle Coffee website and you’ll see.

As John Zeratsky first mentioned, Blue Bottle’s page on their company is perfect example of how readability trumps length. A common misconception about copywriting is that shorter is always better — but don’t confuse the art of omitting needless words with omitting as much as you can.

Image for post
Image for post
Photo credits: Blue Bottle Coffee — Our Story

Most companies would shy away from such a roundabout company description. But if you scroll down the page, this story serves a smarter purpose. It describes how the founder was inspired to produce fresh, no-BS, responsibly-sourced coffee, separating the brand from other “hundred flavors and one” coffee shops.

Longer content is fine, as long as it is highly engaging and serves a purpose. In this case, the copy creates an interaction that leads to deeper trust and credibility, which is one of the pillars of infusing your personality in design.

You also need to know how to lay out the content so that it’s readable. Longform content has mostly received a bad rap because of the way it’s been presented, without hierarchy or structure. That’s why you layout and typography matter.

1. Layout

As superficial as it sounds, sometimes how it looks is just as important as what is said.

Image for post
Image for post
Photo credits: www.speckyboy.com

In our free ebook Web UI Design Best Practices, we discuss the different trends in how users’ eyes commonly scan a page, including the F-Pattern and the Z-Pattern. The significance of these patterns is that, by predicting where your users’ eyes go, you know where to place the most important content.

In terms of interaction design, designing according to reading patterns improves the familiarity of your interface (which, as we described previously, improves learnability). We can also examine the importance of scanning patterns by looking at how the FDA redesigned their nutrition labels.

Image for post
Image for post
Photo credits: “FDA Nutrition Facts Label 2014” Wikimedia. Creative Commons 3.0

Let’s look at this from interaction design’s goal-oriented framework.

Reading nutrition labels helps achieve the goal of staying healthy. The excessive white space in the old version created lag time when reading. As you can see from the above example, the new, condensed version is more streamlined, allowing the reader to process the information quicker and more effectively. This interaction is now simplified, reducing the obstacles between the user and their goal.

The other improvement to the nutrition label, the varying text sizes, also demonstrates the power of font size in prioritizing important information.

2. Typography

If your typography is lacking, your user may be distracted from the content, or unable to read it at all. Conversely, a well-planned typography can complement your content and direct your user’s eyes where you’d like. The iOS Human Interface Guidelines lists some helpful typography tips applicable to any design.

Image for post
Image for post
Photo credits: iOS Human Interface Guidelines
  • Text must always be legible — As it says in the guidebook, “If users can’t read the words in your app, it doesn’t matter how beautiful the typography is.”
  • Prioritize content by text size — To draw your reader’s eye to more important text, make it bigger. Notice how, in the example below, the parts of the email that concern the user (title, body) are large, while the optional details (date & time, recipient) are small. The email sender is also in blue, helping to differentiate important information.

Test custom fonts at all sizes — If you’re using a custom font, be careful. You’ll want to test it at different sizes to make sure it’s legible at each. For a more detailed examination of typography, see our Web UI Design Best Practices, which discusses the strategies and best practices for typography.

It’s not just the main content that matters — the secondary copy (microcopy) can’t be neglected either. As a testament to its value, Jared M. Spool, Founder of User Interface Engineering, tells the story of how a microcopy adjustment increased profits for an ecommerce site by $300 million a year.

Image for post
Image for post
Photo credits: “Writing good microcopy”. visualpun.ch. Creative Commons 2.0

In a nutshell, the addition of a well-placed, well-worded, and brief explanation patched a problem on the checkout page. The page had been designed in a way that confused a lot of users, and so they replaced a button and added a simple piece of microcopy:

You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.

The result? A 45% increase in purchases, raking in $300 million new profits at the end of the year.

Despite its small-sounding name, microcopy can wield an enormous influence on the way people interact with your site or app. The skill of microcopy lies in knowing what to say and where to say it. Usability tests can help you pinpoint where some explanatory text or instructions are needed — as was the case for Spool’s example — but you don’t need a $300 million mistake in order to use microcopy to your advantage.

Image for post
Image for post
Photo credits: UXPin

The benefits of microcopy typically fall under the categories of giving instructions or alleviating your users’ fears and concerns (which improves their interactions for key steps like registration, signing up, etc.). Before you start deconstructing your entire design to solve a specific problem, try adding or changing a few key words to see if that helps. If you’d like to learn more about microcopy, learn the 5 ways to avoid bad microcopy.

There’s an inner Shakespeare and Hemingway inside all of us, so it’s time to get to work. All you need to do is follow the guidelines we’ve listed above and focus on what you want to communicate. Speak like a person who must help the user accomplish a goal, and optimize the content for readability. We’ll close our chapter on words fittingly, with the words of a poet: as George Herbert once said,

Good words are worth much, and cost little.

Image for post
Image for post

Written by

The design tool for teams and professionals. From UI design and prototyping to collaboration and handoff. Speed it up with UXPin. • www.uxpin.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store