{"id":15721,"date":"2018-07-30T10:58:00","date_gmt":"2018-07-30T09:58:00","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15721"},"modified":"2020-09-03T15:14:27","modified_gmt":"2020-09-03T14:14:27","slug":"rules-of-effective-ux-writing","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/rules-of-effective-ux-writing\/","title":{"rendered":"The Rules of Effective UX\u00a0Writing"},"content":{"rendered":"

UX writing is the practice of crafting UI copy that guides users within a product and helps them interact with it. UI copy includes buttons and menu labels, error messages, security notes, terms and conditions, as well as any instructions on product usage.<\/p>\n

The primary aim of UX writing is to settle communication between users and a digital product. In this article, I\u2019ll provide some practical tips on effective UX writing.<\/p>\n

Why crafting UI text should be an integral part of design\u00a0process<\/h2>\n

All too often product developers think of UI text as something that belongs to product documentation phase.\u201dFirst we\u2019ll design the product, and then we\u2019ll hire someone to help us write a UI copy.\u201d Such assumptions often cause a lot of harm because critical UI issue can go unnoticed until the later stages of product development process. That\u2019s why UI text should be written earlier in the process.<\/p>\n

<\/div>
<\/svg><\/div>

\"Work on text early because text problems often reveal design problems.\"<\/p><\/span><\/blockquote>\n

Professional UX writers should work together with software developers and designers on crafting UI text. As a part of this activity, they often ask product team to explain design decisions. If a team has trouble explaining a design, quite often it is the design, not the text copy, that needs improving.<\/p>\n

Tips On Writing UI\u00a0Text<\/h2>\n

Writing the copy that are part of the UI design is both an art and science. While it\u2019s impossible to provide universal rules for writing UI text, it\u2019s possible to provide some general rules that can help you create better UX.<\/p>\n

1. Be\u00a0concise<\/h3>\n

Concise doesn\u2019t mean limited; it means something closer to efficient. Use as few words as possible without losing the meaning. When writing concisely, we make sure every word on the screen has a job. Follow Mark Twain\u2019s advice:<\/p>\n

<\/div>
<\/svg><\/div>

\u201cWriting is easy. All you have to do is cross out the wrong\u00a0words.\u201d<\/p><\/span><\/blockquote>\n

Don\u2019t:<\/em><\/strong> You must log in before you can write a comment<\/em><\/p>\n

Do: <\/em><\/strong>Log in to comment<\/em><\/p>\n

2. Avoid long blocks of\u00a0text<\/h3>\n

When using a product, users aren\u2019t immersed in the user interface itself but in their work. Consequently, users don\u2019t read UI text?\u2014?they scan it. Help them scan the text by writing it in short, scannable blocks. Chunk text into shorter sentences and paragraphs. Keep the most important text up front and then ruthlessly edit what comes after it.<\/p>\n

<\/div>
<\/svg><\/div>

\"Write short and then cut it into\u00a0half.\"<\/p><\/span><\/blockquote>\n

3. Avoid double negatives<\/h3>\n

Double negatives increase cognitive load?\u2014?they make users spend extra time decoding the message.<\/p>\n

Don\u2019t: <\/strong>I do not want to unsubscribe<\/p>\n

4. Begin with the objective<\/h3>\n

When a sentence describes an objective and the action needed to achieve it, start the sentence with the objective.<\/p>\n

Don\u2019t:<\/strong> Tap on item to see it\u2019s properties<\/p>\n

Do:<\/strong> To see item\u2019s properties, tap on it<\/p>\n

5. Use specific verbs whenever\u00a0possible<\/h3>\n

Specific verbs (such as connect or save) are more meaningful to users than generic ones (such as configure or manage).<\/p>\n

6. Make the copy consistent<\/h3>\n

Inconsistency creates confusion. One typical example of inconsistency is replacing a word with a synonym in a different part of the UI. For instance, if you decide to call the process of arranging something \u201cScheduling\u201d in one part of UI do not call it a \u201cBooking\u201d in other parts of your UI.<\/p>\n

Another common pitfall is combining forms of address. Don\u2019t refer to the user in both the second person and the first person within the same phrase.<\/p>\n

Don\u2019t:<\/strong> Change your <\/em><\/strong>preferences in My Account<\/em><\/strong><\/p>\n

Do:<\/strong> Change your <\/em><\/strong>preferences in Your Account<\/em><\/strong><\/p>\n

7. Avoid\u00a0jargon<\/h3>\n

One of the significant characteristics of effective UX writing is clarity and simplicity. For clarity, you need to remove the technical terms and use familiar, understandable words and phrases instead. It\u2019s especially important to avoid jargon in error messages.<\/p>\n

Don\u2019t:<\/strong> System error (code #2234): An authentication error has occurred<\/p>\n

Do:<\/strong> Sign-in error: You entered an incorrect password<\/p>\n

8. Write in present\u00a0tense<\/h3>\n

Avoid using the future tense to describe the action.<\/p>\n

Don\u2019t: <\/strong>Video has been downloaded<\/p>\n

Do:<\/strong> Video downloaded<\/p>\n

9. Write in the active\u00a0voice<\/h3>\n

The passive voice makes readers yawn. Compare this sentence in both voices:<\/p>\n

Don\u2019t:<\/strong> The Search button should be clicked when you are ready to search for an item.<\/p>\n

Do:<\/strong> Click the Search button to search for an article.<\/p>\n

10. Use\u00a0numerals<\/h3>\n

Use numerals in place of words for numbers.<\/p>\n

Don\u2019t:<\/strong> You have two <\/em><\/strong>missed calls<\/p>\n

Do:<\/strong> You have 2<\/em><\/strong> missed calls<\/p>\n

11. Avoid showing all details up\u00a0front<\/h3>\n

Sometimes it might be helpful to provide additional information or supplemental instruction for users. But all too often such details are presented upfront. Too much information can quickly overwhelm users. Thus, reveal detail as needed. Use a mechanism of progressive disclosure to show more details. In the most basic form, this mechanism can be implemented as \u2018Read more\u2019<\/em> link to the full content.<\/p>\n

\"\"<\/a><\/p>\n

Evernote uses progressive disclosure to provide more information about the\u00a0benefit.<\/em><\/p>\n

Progressive disclosure is especially good for mobile UI (where designers have a limited screen space to work with).<\/p>\n

\"\"<\/a>

Image: Ramotion<\/a><\/p><\/div>\n

<\/p>\n

12. Identify interactive elements appropriately<\/h3>\n

Users don\u2019t like surprises. They hate situations when they\u2019re expecting one thing, and end up with another. People should be able to tell at a glance what an element does.<\/p>\n

<\/div>
<\/svg><\/div>

\"Choose labels that clearly communicate and differentiate what the object\u00a0does.\"<\/p><\/span><\/blockquote>\n

When labeling buttons and other interactive elements, use action verbs, such as \u2018Connect,\u2019 \u2018Send,\u2019 \u2018Subscribe\u2019 instead of vague \u2018Okay\u2019 or \u2018Submit.\u2019<\/p>\n

13. Be careful when using\u00a0humor<\/h3>\n

A lot of designers say that incorporating humor in UI makes it sound more human. But similar to any other component of UI, humor should be designed. People are likely to read the text in your interface many times, and what might seem clever at first can become irritating over time (especially if you use humor in error messages). Also, remember that humor in one culture doesn\u2019t necessarily translate well to other cultures.<\/p>\n

14. Use language that\u2019s consistent with the user\u2019s\u00a0platform<\/h3>\n

The terms we use when describing interaction with a desktop app do not necessarily apply to mobile platforms. For example, if you design an iPhone app, we can\u2019t say \u2018click\u2019 when referring to the action. We need to say \u2018tap\u2019 instead.<\/p>\n

15. Use \u2018today,\u2019 \u2018yesterday\u2019 or \u2018tomorrow\u2019 instead of a\u00a0date<\/h3>\n

People don\u2019t use the date when they refer to the day before the present day. They say \u2018yesterday.\u2019 The same principle can be applied to UIs. Instead of giving a date, say \u2018today,\u2019 \u2018yesterday\u2019 or \u2018tomorrow.\u2019 It prevents users from using calendar each time they want to know when the event happened. But remember that these terms can be confusing or inaccurate if you don\u2019t account for the current locale.<\/p>\n

16. Use graphics if they will help you communicate<\/h3>\n

Human beings are incredibly visual creatures. An ability to interpreting visual information is hard-wired into our brains. In some context, it might be nearly impossible to say something in words. That\u2019s where imagery can support us and make text comprehensible. Below is an example which helps users to find specific information.<\/p>\n

<\/p>\n

\"\"<\/a>

It is not obvious where the users can find the barcode and concise help text next to input fields might be very useful.<\/p><\/div>\n

<\/p>\n

Conclusion<\/h2>\n

You may be surprised at the time and effort it takes to write effective UI text. But believe me, it worth it. Every word in your app is part of a conversation with your users. And it\u2019s your goal as a designer to design this conversation to be effective.<\/p>\n

This article was originally published on Nick's Medium page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

UX writing is the practice of crafting UI copy that guides users within a product and helps them interact with it. UI copy includes buttons and menu labels, error messages, security notes, terms and conditions, as well as any instructions on product usage. The primary aim of UX writing is to settle communication between users and a digital product. In… Read More ￫<\/a><\/p>\n","protected":false},"author":165,"featured_media":15737,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[499],"tags":[],"class_list":["post-15721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n