Originally published at: http://www.sitepoint.com/words-interaction-design/
Communication is the basis for interaction, and we don't need to remind you how important language is to communication. Copy may not seem like an immediate priority (especially if you have a larger team with content strategists and copywriters), but you must understand that writing is affected by (and also affects) the design.
After all, if a visual designer only leaves enough space for 10 characters in a headline, that can disrupt the flow of the entire page.
The words you choose, and how you put them together, will greatly influence your product's overall message – and we'll explain how using some words of our own. Below we'll show you why words are the base of interaction design and how to know the context of the copy.
The Purpose of Copy in Interaction Design
As technology advances and new modes of communication become commonplace, on-site and in-app copy may be given less attention than impressive graphics, animations, and touch-screen gestures.
Not to downplay the new possibilities opened up by technology, but it's important to ensure that the written word doesn't get left behind. Just as a finger swipe can accomplish things that written copy cannot, words, also serve functions that can't be replaced – no matter how far technology advances.
Words complement the other dimensions instead of competing with them.
Since they are one of the first meaningful interactions that users seek out on-screen, words help frame our experience with the other elements of interaction design. In her piece Copy As Interface, Erika Hall, Co-founder of Mule Design Studio, cites the specific roles writing fulfills in a product's interaction design.
Let's examine the 4 main duties of your copy.
1. Words as a Greeting
More than just a friendly "Hello!" your product's copy explains what the site is and recommends a good first step, whether suggesting signing up or directing to content that's likely to hook your user. As we mentioned in the previous chapter, interaction design should be treated as a conversation, so this is your first opportunity at creating a sense of humanity.
You can see in the above example that AirBnB uses copy in a minimalistic yet effective manner. The titles Just for the Weekend and Explore the World help users visualize the benefits of AirBnB before diving into specific locations. The interaction is subtle, but it frames the experience as one step closer to a dream vacation.
2. Words as Navigation
Copy tells users where they are and suggest new or lesser-known options to deepen the user's experience. Any advertiser knows how word choice can make a difference in promotion, and an enticing description can "sell" a specific webpage as well as tell users what content is contained within.
When you look at FitBit's homepage above, you can see the multiple functions of the site copy.
First, it serves the immediate purpose of navigation with clear copy on the dropdown menus.
Second, it helps explain the different products available (with smartly placed subcopy next to each product).
Third, it entices on-the-fence users to dive deeper in the site with a section titled "There's a Fitbit product for everyone," which drives users to a page featuring products categorized by level of use.
3. Words That Suggest An Action
Words in menus, on buttons, and within instructions are all necessary to the usability of your product – without them the user would grow frustrated figuring out the mechanisms on their own.
Simple writing saves time, and with the right word choice you can increase the chances of a sign-up, sale, etc. Users are coming to your site to do something to achieve their goals, so create copy that encourages interaction.
Payment processor Square 's homepage is an excellent example of action-oriented copy because it connects the site pages to user motivation without cluttering the interface. As a user, I only need to know that I want to get started; the interface handles the rest by pointing me to the right action. Of course, if I want more control, I can simply scroll down for more options.
4. Words Providing Service
Along the same lines as the actionable functions, wording also plays a vital role in certain services. In addition to explaining clearly a problem and/or resolution, wording influences the users' mood – which can help take the edge off when things go wrong (whether it's your fault or not).
Source: 7 of the Best Error Messages
Github's 404 error page is a perfect example of great customer service during a frustrating experience. The copy is funny, syncing with the visuals to distract the user with a Star Wars reference. But functionally, the copy at the bottom of the page also tells users how to get back on track.
This is most important to call out, because personality will only get you so far until users remember that they still aren't where they need to be.
Just as a color scheme, graphics, or layout will show a product's personality, so too will the style of writing affect the "big picture." For example, a no-nonsense banker may appreciate by-the-book language on a investment website, but the same language wouldn't suit a new social media outlet for younger users.
Remember that understanding context is the first step to fulfilling the 4 purposes of interface copy.