Copy Content in User Interfaces: Tips and Practices

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 support each other, coexist in harmony, and provide a consistent look. 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 clearly on interfaces 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 enables the brain to distinguish objects based on their physical properties, such as size, color, contrast, and alignment. In the aspect of creating copy content for web pages and mobile app screens, there are two important aspects to consider: page scanning patterns and typographic hierarchy.

Recognizing the importance of visual performance and copy readability in digital products and their impact on user experience, numerous usability experts have explored this issue comprehensively and collected statistics that provide valuable data for designers. Many studies have shown that before reading a web page, people scan it to gauge their interest. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, the UXPin team, and others, there are several popular scanning patterns for web pages, among which are the “F” and “Z” patterns.

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with a large amount of content. A user first scans a horizontal line at the top of the screen, then moves down the page slightly and reads across the line, which usually covers a smaller area. And the last one is a vertical line on the left side of the copy, where they look for keywords in the paragraphs’ opening sentences. It usually occurs on text-heavy pages such as blogs, news platforms, and thematic editorials. How could designers employ this knowledge? First, place key information or core content in the most scanned areas, and use short, attention-grabbing 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, then moves down to the opposite corner diagonally, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical scanning model 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.

Below,  you can see the design concept for a website that showcases 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 a 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 illustrated using common types of copy 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 that conveys and emphasizes the page’s core informative message. It’s essential for headlines to be short and catchy so they capture users’ attention and convey the page or screen’s theme and benefits. 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, but it should also be understandable and meaningful without such context.

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, making it more noticeable, but the primary emphasis still falls on the head image.

These are two examples of websites concentrating on providing content around the same theme – food. They both have a 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 – an 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 a strong positive emotional connection, and lets them instantly imagine the smell of bakery products which are sold via the website.

Website on cooking seafood

Vinny’s Bakery

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 outline 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.

Subheaders play a big role in landing page design. The two landing page concepts above illustrate how subheaders inform users about the data presented in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.

Organic — landing page

Travel Gear Landing Page

Body copy

Body copy is text that presents a description or essential information in a compact block, typically under a subheader or 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 consensus on the optimal 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: users are often keen to see concise, highly informative content. Moreover, mobile interfaces have limited space, so too much copy won’t look nice and will require additional effort to read, which can lead to a poor user experience. Long copy is well-suited for web resources that provide users with complex information on specific topics, as well as for presenting products that aren’t well known to users and need additional informative support.

Here is an 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. Such websites aim to tell the company’s story, present professional level, and achievements, so detailed copy works efficiently in this case.

This design concept also presents a website deeply rooted in the copy: an educational project that serves as an online encyclopedia about a 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, focused copy blocks, supported by prominent headlines and bright, 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.

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 the copy readable.

Toonie Alarm tutorial

Call-to-action elements with copy

The core elements that make UI interactive are those that 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 the body copy. Verbs in the imperative form are one of the most frequently used mechanisms for engaging users.  Designers are recommended to use various techniques to create contrast, first of all via color, in CTA elements, so they stand out in the layout and quickly draw the user’s attention.

The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of a 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.

Landing page for SwiftyBeaver

Travel Agency Website

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”.

Good Sign App Concept 

There’s no need to create CTA buttons in exceptionally bright colors; their primary goal is to be easily noticeable within the overall layout. If the interface is bright and colorful, use a light background to contrast with it, making the bright copy even more prominent, as in the concept for the Book Swap app above?

Book Swap App

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 the picture.

Here’s a concept for a gym’s landing page. The captions here use bold fonts, making them easy to read. They are shown only when the image is hovered over, making interaction more engaging for users.

Gym Landing Page

Points to consider

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

• Create catchy headlines. They capture users’ attention and often determine whether users continue interacting with the page or bounce.
• 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.

Recommended reading

Here is a collection of recommended articles for further reading on the topic.

The 5 pillars of visual hierarchy in Web design

6 principles of visual hierarchy for designers
F-Shaped Pattern For Reading Web Content
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
The Ideal Length of Everything Online, Backed by Research
Copywriting in UI. Words that Make Design Go Round

Originally written for Tubik Blog

Useful Articles

Here’s a bunch of articles to dive deeper into the theme of usability and user experience design.

5 Basic Types of Images in Web Design

The Anatomy of a Web Page: Basic Elements

6 Elements of Efficient Company Website Design

UX Practices on Product Page Design

How to Design Effective Search

Web Design: 17 Basic Types of Web Pages

Guide to 6 Effective Types of Web Animation

Directional Cues in User Interfaces

Negative Space in Design: Tips and Best Practices

Error Screens and Messages: UX Design Practices