copy — Design4Users

How To Make Text Improve User Experience: Insights Into UX Writing

Marina Yalanska — Mon, 04 Jul 2022 18:24:40 +0000

“One day I will find the right words, and they will be simple,” Jack Kerouac once said without any idea that his words will perfectly reflect the essence of UX writing. We mostly think about design as something visually appealing and easy to use, with visual images coming to mind first. However, the type of content with which users deal most often and diversely is text. Our today’s article is right about it: let’s review the essence of UX writing, the features of effective interface copy, and well-checked practices for its improvement.

What Is UX Writing?

UX writing is a professional activity of writing texts for user interfaces, both web and mobile. It includes creating texts from small labels of buttons and icons to taglines, error messages, notifications, navigation prompts and instructions, guidelines, and so on.

What is crucial to keep in mind is that

text is a part of design
text is a part of user experience.

Education app screens featuring how text helps the digital product communicate with users

The term UX Writing is often replaced with Copywriting. Do they mean the same?

Basically, no, they define different types of activities. Copywriters’ main goal is creating texts that sell something, be it products, services, tools, intellectual and creative stuff, etc. UX writers’ task is to create texts that support and enhance users’ communication with interfaces, let them clearly understand what’s going on, and lighten the negative experience in case of errors or problems of interaction.

Nevertheless, coming from the advertising sphere, the term “copy” as a synonym of “text” quickly got a toehold in UI/UX design as well. Based on that, people creating texts for interfaces were also called copywriters, much before the term “UX writer” came into play. What’s more, in many companies, people writing marketing texts and interface texts are pretty much the same people. So, don’t be confused too much: although the terms define different tasks, they are still often used as synonyms, and text pieces in UI are usually called copy.

Booking Website home page

Is Text Needed for All Types of Interactions?

We have already touched on this issue in our article devoted to relations between icons and copy in user interfaces. Indeed, visuals are transmitted to the brain much faster than text, and important pieces of information are often fixed by the brain as images even if they were obtained via text perception. In user interfaces, where basic interactions should take seconds, this aspect is crucial, and it can be seen as the real reason to turn hell out of everything into the graphics. On the other hand, there is the aspect of meaning: users can perceive images super fast, but if the message they transfer is not clear and can have double-reading, this speed will not bring a positive user experience.

There are loads of widely recognized graphics and associations, such as a telephone receiver for a phone call, an envelope for mail, a magnifier for a search, and so on. Certainly, using them, you create a much faster perception of the UI functionality than using copy instead of an image. Nevertheless, in cases when the image of an icon is not so obvious, its usage should be thoughtfully contemplated. There are cases when text transfers the idea or data more clearly, so it is an effective solution to use the double scheme when the icon is supported by the text.

Travel Planner App doesn’t use text labels for icons in the tab bar

OtoZen application for save driving supports the icons in the tab bar with clarifying text labels

4 Basic Features of Effective UX Text

The copy content in any interface is based on 4 foundation stones: it has to be

clear (users understand what you talk about, the core message isn’t blurred or complicated)
concise (the piece of text is meaningful, laconic, and concentrated on the goal, no empty talk is included)
useful (the copy gives users necessary information or helps with interactions)
consistent (the copy within the interface of one digital product keeps the same style, tone, voice, and terminology)

Now, let’s review some practices helping to create texts that support the positive user experience.

Perfect Bouquet App

Useful Tips on UX Writing

1. Integrate real copy in UI as early as possible

Working on early versions of a user interface, UX designers tend to use the so-called Lorem Ipsum. It’s a kind of popular placeholder text that looks like Latin but really doesn’t mean anything. It’s aimed at creating a natural-looking piece of text in the layout of a webpage, mobile screen, magazine or newspaper page, etc.

Onboarding screens for the Manuva app at the UI design stage, using Lorem Ipsum for placeholder copy blocks

When you are deep in the design process, it is really tempting to just copy-paste the nonsense text into the places planned for copy blocks. Why is it a not-so-good idea?

Firstly, the text is a part of the design. Various letter combinations look different. Words have different volumes and structures. It’s especially true for a tagline that presents one of the most important elements of webpage visual hierarchy and is scanned in the first seconds of interaction. So, what pleases your eye in Lorem Ipsum may not work with real text that will be used on the page or screen.

Secondly, by using the realistic text, you make a prototype feel genuine and natural. Let’s say, if you design a website selling cooking equipment, you won’t use photos or illustrations of agriculture machines for placeholders, even at the earliest stages of the design process, will you? Why? Because it won’t connect the design concept with the goals set for this product. The same happens with the text part of the layout. The copy you use should create a united image and experience with all the other elements of the layout. What’s more, you can spend hours working out the great looks for notification pop-ups, system messages, and webpage text blocks – and all that effort will be wasted when you realize that the real copy to be used in this UI is different in its length, structure and perhaps even message.

Onboarding screens for Bees and Honey app concept

Shipping company website

2. Build a solid text hierarchy allowing users to scan the page content

In our article devoted to web scannability, we have already mentioned the well-checked fact: users don’t start an interaction by reading every text element on the page or screen. They scan it in search of the hooks that can catch their attention: if they are convincing enough, the user makes a decision to give the resource a second look, attentive and diving into detail. Although pictures of any kind are much more catchy and faster perceived, in many cases, text becomes the element that plays a crucial part in decision-making. One of the reasons is that from one generation to another, we are traditionally accustomed to seeing a text as a main source of information.

Grounded on that, keep in mind that the main message presented in text form would better be quickly found in the first seconds of interaction. All the text elements should be organized according to the typographic hierarchy so that by scanning the page or screen, the user could quickly understand which part carries the core message and which is less important. Also, it’s advisable to make text harmonically work together with key images on the page or screen (illustration, photo, 3D rendered image, etc.)

Dance Classes platform website

Health Blog home page where all the copy elements are connected to the hero image

3. Catch attention with numbers and marked elements

One of the investigations of user behavior provided by Nielsen Norman Blog shared an interesting finding: based on eye-tracking studies, while users scan web pages, numerals often stop the wandering eye and attract fixations, even when they’re embedded within a mass of words that users otherwise ignore. People subconsciously associate numbers with facts, stats, sizes, and distance – something potentially useful for them. So they are hooked with the numbers included in the copy while words representing numerals can be missed in the bulk of the text. In addition, whatever numbers represent, they are more compact than their textual variant, which enables designers to make the content concise and time-saving for skimming the data.

Everything mentioned above can be a reason to break some rules and habits. Traditionally, we are recommended to spell the numbers at the beginning of the sentences, spell the numbers from zero to ten, etc., and you may follow all that successfully in articles and other types of copy content presented with a big amount of text. However, for the texts accompanying the interactions, you should be as focused as possible, and it’s a good idea to catch users’ attention with numbers.

Habit Builder mobile application

Dance Classes app

Also, don’t forget about the ways of marking out the specific information that came from book and magazine design: bold and italic fonts, word sizes, negative space, different colors, or highlighting – all that stuff worked many years ago and still works successfully today. Just don’t overact, don’t overwhelm users with too many elements trying to catch their attention. As Aarron Walter said, “If everything yells for your viewer’s attention, nothing is heard.”

Construction company website with a typography-based design that marks the keywords with different color.

4. Be focused and grammar-flexible

No doubt, clarity and grammar correctness build the foundation of a good experience when it comes to text. However, it may work differently if you write a microcopy for a button or the message is limited to a rather small number of characters on a pop-up screen. So, here you have to decide on being grammar-flexible, which means avoiding complicated constructions and reducing the elements that do not play a vital role.

For example, Material Design guide on writing advises avoiding unnecessary punctuation such as periods in copy for labels, hover text, bulleted lists, dialog body text, or colons after labels.

As well, for UX copy, they recommend using present tenses but in their simple forms.

Also, keep in mind that choosing Active Voice instead of Passive whenever it’s possible is a good idea. In most cases, it looks more natural and clear; in addition, it may be more user-friendly for users who are not advanced in English.

Just always remember that the main goal of the text in mobile or web interface is to inform. Daily overwhelmed with tons of information; users want to get it quickly and effortlessly – so give it to them. It’s not about breaking all the rules and communicating with unnatural phrases. It’s about the best expression of text minimalism, cutting off the stuff that’s not essential. It’s about using simple and direct language clear to various users.

Blog App

Nielsen Norman Group even posted the article sharing the list of cringe-worthy words and phrases that you would better avoid in UI texts, among which:

very (and other intensifiers):
utilize
enable
we understand (in today’s fast-paced world…) and other blah-blah stuff
end-user

That’s especially true for mobile interfaces, which are strictly limited in space that can be used for copy content, and with them, you have to take into account that users often deal with apps on the go. The issue of being clear and readable directly influences user experience and conversion level. So, a question like “Save changes?” looks more effective here than “Would you like to save the changes?” or “Do you want to save the changes?” or “Please confirm that you would like to save the changes” and so on.

Delivery screens for Tasty Burger App

5. Do A/B testing for the copy of interactive elements

Buttons copy is one of the crucial parts of user experience: if you are not into UX design and writing, you could be surprised how much time and effort should be devoted to these small but impactful elements of the layout. What is written on the button should direct users to the action and let them understand what happens next. So, as well as you test design solutions such as color, placement, or the size of the button, you are recommended to make the text of the button label another object of A/B testing. Especially, if you are not a part of the core target audience: for instance, you create the product for elderly people with a low level of tech literacy while you yourself are a young advanced user of various software and gadgets. Testing will give you an understanding of how real users perceive the label and what kind of text is more convincing for them.

Home page for the web platform to find and hire artists

Buttons often offer the choices to a user: we can accept, delay or cancel something, Writing text for such elements, remember the idea shared in one of the recent explorations by Nielsen Norman Group: “The copy that you use in choices on your interface asks people to agree with a statement. That statement is often about themselves or the actions that they wish to take. It’s important from a user-experience standpoint and from a business perspective to write interface copy that supports rather than undermines the decision-making process. Trust, expectations, and positive self-image all shape the associations that users will have with a product. An honest, direct presentation of choices creates trust and positive emotion.”

Mobile screens for a cookbook app

6. Build natural and consistent dialogue

The best thing you can do for your user with the written content is to create a feeling of communication with a human. A human that has a clear style and voice of communication is helpful and doesn’t try to reinvent the wheel at every step just to emmarvel you. Decide upon the main terminology and names of operations – and use them throughout the messages and notifications: for example, use the word “delete” every time when this action is meant to be done, and don’t replace it with “remove” for some screens if the action is the same. Synonyms are good for making language bright and vivid in articles or books, but they may ruin user experience making users find the connections between synonymic terms instead of just using the product to solve their problems.

Here’s another example from the Material Design guide on writing.

Music Learning application

7. Make your text feel like the users’ friend

Supporting the previous idea, keep the style of the dialogue that corresponds to the target audience’s expectations. Being clear and friendly is more important here than being linguistically elaborate – the only exception is when target users do expect this kind of language. User research is your homework in this case: it allows both designers and writers to clarify a proper style choice for not only visual but also copy solutions.

Profile creation screens for Inspora, the virtual stylist

Onboarding screens of an app for hiring vintage cars

8. Avoid slang

By slang, we mean here any kind of specific and technical terms that can confuse users. For example, when you inform a user that the video is buffering, are you sure he or she knows what that means? If yes, that’s a good choice of text. If not, look for a simpler word. Don’t use “enable” instead of “turn on,” which is much clearer for most people. Here’s an example from Alfresco Writing Guide.

9. Don’t forget about capitalization

Basically, capitalization is writing or printing in capital letters or with an initial capital. There are three levels of capitalization:

all-caps (all the letters are capital)
title case (the first letter of each word is capitalized, excluding prepositions up to 4 letters and articles)
sentence case (you only capitalize the first letter of the first word and proper nouns, as you would in a sentence).

Landing page design for security service

Now, there are hot discussions about using sentence case instead of title case as it feels more friendly and informal. However, for English speakers, it’s still a natural feature of the language that, apart from feeling the text as less or more formal, marks the levels of text hierarchy. So, the decision is up to you, of course, but consider the following tips about capitalization:

Use Title Style Caps to mark field labels, actions, menu items, and page titles
Choose Sentence style caps for longer copy such as page or field descriptions and tooltips
Apply ALL-CAPS moderately, only to super important items (short taglines, brand name, core navigation points in website header, short call-to-action text, and abbreviations like OK), and avoid it in all the rest of the cases.

Whatever choice you make, what’s really important: be consistent. Make a decision once – and follow it through the whole interface. If you decide to use a title case for all the buttons, check that you keep that rule all the time. Inconsistency distracts and even annoys users.

Sign-up screen for a restaurant app

10. Start from the most important information

This advice seems to be super simple, so that’s surprising what a big number of people dealing with copy don’t follow it. In the case of short text, instruction, or message, focus only on valuable information, and don’t distract users with too much lead-in and warm-up text. Sure, it doesn’t mean that you have to come up with only dry, unemotional information-only texts, yet try to minimize the supportive part and maximize the active one. For longer texts, such as articles, guides, product descriptions, and the like, consider using the principle from journalism called the Inverted Pyramid Principle. It’s when you go from what’s needed to know to what’s nice to know, from the core message to the details which may be not that vital.

The home page for the Gin Scholl website uncovers the information gradually, from the core message to the details.

All the mentioned tips are not the cure-all: the decisions upon them have to be based on studies and analysis for each particular case. There are numerous factors that influence the creation of copy for interfaces, from purely design ones to a general brand strategy that defines the style of communication with users. Anyway, we hope that the list collected above will help you to come up with creative lines supporting a positive user experience. Sure, there are more points, cases, and examples to discuss and consider in the domain of UX writing, so we will continue the theme in our upcoming posts. Don’t miss it!

Useful Reading

Guide into Types of Copy for Mobile and Web Interfaces

Material Design: Writing

3C of UI Design: Color, Contrast, Content

Inverted Pyramid: Writing for Comprehension

Interface Copy Impacts Decision Making

Tips on Applying Copy Content in User Interfaces

User Experience: How to Make Web Interface Scannable

Originally written for Tubik Blog, graphic and video content by tubik

Сообщение How To Make Text Improve User Experience: Insights Into UX Writing появились сначала на Design4Users.

Copy Content in User Interfaces: Tips and Practices

Marina Yalanska — Tue, 04 Apr 2017 13:36:29 +0000

Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.

In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. The important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony, and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to the general design concept and enhancing positive user experience via successful interaction.

Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users a great effort to solve their problems or get needed information with the product, so they would simply choose another product that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.

Visual hierarchy

To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment, etc. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy.

Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials, etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.

Z-pattern is applied to pages that are not so heavily concentrated on a copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. In this case, designers place core information in the spots of highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.

The Big Landscape

Here we can see the design concept for a website that presents the online magazine “The Big Landscape”. The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation, and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides the ability to contact via social networks instantly.

Typographic hierarchy

Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and the combination of types and fonts. It is aimed at creating a contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.

Headlines

A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short so that they could draw users’ attention and meaningful in order to inform users about the theme and benefits of the content of the page or screen. According to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 work effectively, not less than extensive headlines presenting a full sentence.

Another point to remember: it’s good when the headline is visually supported by other elements on the page or screen, still, it also should be understandable and meaningful without such context.

Photography Workshops

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.

Website on cooking seafood

Vinny’s Bakery

These are two examples of the websites concentrated on providing content around the same theme – food. They both have the minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as the nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused on presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element – action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept – a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.

Subheaders

It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise, and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short.

Organic — landing page

Travel Gear Landing Page

Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.

Body copy

Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.

There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik, we support the approach that the length of the effective and user-friendly copy depends directly on the target audience: users, as well as products, are incredibly different, they have diverse preferences, goals, and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on the target audience of the product and its conversion goals.

Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as the presentation of the products which aren’t well-known for users and need additional informative support.

Architecture Firm

Here is the example of a web page where a long copy is useful. It’s a design concept featuring a website for the architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level, and achievements, so detailed copy works efficiently in this case.

Birds of Paradise Encyclopedia

This design concept also presents a website deeply based on the copy: it’s an educational project setting the online encyclopedia about the specific family of birds. Although it contains a great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.

Toonie Alarm tutorial

As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of a brief tutorial for the Toonie Alarm app demonstrates how copy is divided into short blocks in order to leave enough “air” on the screen and make copy readable.

Call-to-action elements with copy

The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use the double scheme, when the icon, button, or link is supported with the copy.

The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users. Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw the user’s attention quickly.

Landing page for SwiftyBeaver

Travel Agency Website

The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform the target audience about appropriate action solving their potential task on this website.

Good Sign App Concept

This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.

Book Swap App

There’s no need to create CTA buttons exceptionally in bright colors – their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with a light background which will make the bright copy even more prominent, like in a concept for the Book Swap app above?

Captions

Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces, the sizes of fonts depend on the size of a picture.

Gym Landing Page

Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.

Points to consider

All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips on presenting the copy:

Create catchy headlines. They draw users’ attention and often become the point of the decision whether the user continues interaction with the page or bounces it.
Make headlines short, but keep them highly informative.
Subheaders relate to separate sections, so they guide users through the content in the interface.
Use brief concise copy for mobile interfaces and landing pages.
Consider using the long copy of web resources aimed at providing informative content.
Use verbs in the imperative form to encourage people to actions.
Use contrast colors for call-to-action elements, so that they could draw the user’s attention more effectively. However, don’t forget to test the readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
A caption should preferably describe or add the data that isn’t obvious from the image.
Give a strong preference to present tenses in captions.
Always ground your solutions on preliminary user research and don’t neglect testing different options.

The Role of Copywriting in UI Design Process

Marina Yalanska — Sat, 06 Aug 2016 13:01:45 +0000

In loads of previous articles, we have discussed diverse aspects of design, including UX wireframing, layout, color palette, typography, appropriate animation, UI visuals, etc. However, there is one vital element that was not discussed in detail being, however, a great tool of success. The tool is as ancient as humanity is. The words.

Words are well known as the universal mechanism of incredible functionality. In terms of user interface of any kind, being supported with all the other visual features mentioned before in our blog, text becomes one of the key features to successful performance.

The essence of copy

Not to mess up with the terminology, it has to be mentioned that in the field of design (as well as advertising and journalism), content written in text is called copy, whatever big or small it is. The only single word you write on the call-to-action is already a piece of copy, which, even being so small, can become encouraging or vice versa—confusing.

Although in terms of design, we can get more concentrated on visual elements such as illustrations, icons, buttons, animations, colors, and shapes, neglecting the aspect of copy while creating the interface can bring out great disappointment in the final result. Words cannot be fully replaced with graphics, whatever amazing, high-quality, and professional they are going to be. Therefore, a copy should be thoughtfully analyzed and created in a way that supports general design concepts and enhances positive user experience via successful interaction.

Copy is an integral part of UI

Taking into account the fact that the web page is rather limited and the mobile application screen has a highly limited amount of space that can be used for interaction elements, a copy should witness an elaborate and professional approach. It is actually amazing when designers are able to do all the work on the interface by themselves—obviously, it’s always great to have a unicorn on board. However, they are not obliged to do it. Moreover, in many cases, being great professionals in design, they have difficulty tackling the issue of correct and appropriate copywriting for the screens.

This job, as well as any other, needs special skills and knowledge which designers need to master additionally. It has to be said that a great number of them really go this way, carefully studying the techniques and methods of creating copy that will be informative and engaging for users and, at the same time, will support all the visual design solutions applied for the screens or pages.

The other way to sort out this problem is to engage a professional copywriter in the process. Any way you go, the most important thing in this aspect is to find a way of creating copy for the interface that makes every single letter count. As copy is an integral part of UI design, we believe it should support the same philosophy as any other part of a layout: everything put on the screen or page has to be functional and purposeful. Everything should work for the user.

Functions of copy in the interface

Copy belongs to perhaps the most comprehensive and multifunctional ways of interacting and engaging the user, especially when it is created on the basis of psychology and linguistic knowledge as well as deep analysis of the target audience and product’s purpose. Efficient copy has a number of general functions, which can be presented altogether in one piece or in different combinations depending on the aim of the copy created. Let’s take a look at the most basic of them.

Copy implemented in an application or a website can and should:

inform
communicate
enable interaction
enhance navigation
appeal to feelings
engage emotions
set the tone and voice

A good piece of copy rarely covers only one of the presented positions. In the vast majority of cases, both designers and copywriters are keen to implement the copy, which supplies several functions at the same time, improving usability and speeding up the perception of all the content on the screen or page.

Copy is visual

One more thing that designers creating interfaces of any kind should always bear in mind is that copy is one more visual element of design. As well as the icons, fields, buttons, illustrations, toggles, and the like, it literally occupies a part of the screen or web page as any other graphic component and influences the general stylistic presentation of the app or website. That means that both its informative content and visual presentation significantly affect the efficiency of a copy. This is the sort of mutual support of the outer and inner sides.

It’s also important to remember that the success of an efficient copy directly depends on such design solutions as the choice of types and fonts, background, and placement of the copy. All the mentioned aspects greatly affect the level of readability, so when they are done inappropriately, the copy, even being highly meaningful, will lose the chance to get all its potential applied.

So, let’s see what is the short bottom line here. Copy, which contains useful data but is poorly presented, will not work. Copy, which is visually presented in an amazing way but shows a lack of meaning and purpose, will not work. Keep the balance to make everything go round properly. Make meaning and appearance support each other, and both aspects will get more powerful in terms of usability.

Stages when copywriting is involved in the design process

According to everything mentioned above, there are some stages of the design process when a professional copywriter can become a great help in the process:

creating copy presenting user personas and use cases – done by professional copywriters on the basis of information obtained from user research, they can be more efficient as the text will get concentrated and can be more efficient, especially in terms of teamwork
creating copy for call-to-action elements
creating copy for intro screens, tutorials, and tooltips
creating instructions and notifications for screens and webpages
creating the copy for sets of catalog and menu positions
creating enganging copy for landing pages
creating templates for item descriptions, etc.

The list is not a sort of cure-all here—it’s just a recommendation on the points to consider. On the basis of our studio experience, we can say that, in particular, it is useful for design teams that are keen to optimize and improve production so that all the professionals involved in the design process can get deep into the work they do best of all and not get distracted with the tasks that are not directly in the scope of their skills. This sort of strategy usually brings a high level of performance. As for freelancers in UI/UX design working alone, our thoughts can be helpful to consider this sort of aspect and perhaps master some new skills in supporting visual solutions with effective copy.