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.<\/span><\/p>\n <\/p>\n To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy<\/a>. 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<\/a>, or mobile screen<\/a>, 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.\u00a0<\/span><\/p>\n 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, the UXPin team, and others, there are several popular scanning patterns<\/a> for web pages, among which \u201cF\u201d and \u201cZ\u201d patterns.<\/span><\/p>\n 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\u2019 attention.<\/span><\/p>\n Z-pattern is applied to pages that are not so heavily concentrated on 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.<\/span><\/p>\n This is a typical model of scanning for landing pages<\/a> 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.<\/span><\/p>\n The Big Landscape<\/em><\/span><\/p>\n 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<\/a>, intuitive navigation, and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button<\/a> 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.<\/span><\/p>\n Typographic hierarchy is a system that organizes copy content in the best way for users\u2019 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<\/a> is presented with common types of copy content used in UI design.<\/span><\/p>\n <\/p>\n 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\u2019 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<\/a> 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<\/a> which shows that headlines of 5-6 work effectively, not less than extensive headlines presenting a full sentence.\u00a0<\/span><\/p>\n 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.<\/span><\/p>\n Photography Workshops\u00a0<\/em><\/span><\/p>\n 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.<\/span><\/p>\n <\/p>\n Website on cooking seafood<\/em><\/span><\/p>\n Vinny\u2019s\u00a0Bakery<\/a><\/em><\/span><\/p>\n These are two examples of the websites concentrated\u00a0on providing content around the same theme – food. They both have a minimalist design<\/a> 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 the imperative form \u201cLet\u2019s cook!\u201d, which dynamically tunes users into the activity. On the other hand, we can see another concept – a website for a small bakery<\/a> 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 that are sold via the website.<\/span><\/p>\n It’s impossible to put all the significant information in a headline, that\u2019s 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.\u00a0<\/span><\/p>\n Organic \u2014 landing page<\/em><\/span><\/p>\n Travel Gear Landing Page<\/em><\/span><\/p>\n 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.<\/span><\/p>\n <\/p>\n Body copy\u00a0is 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.<\/span><\/p>\n 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<\/a>: users, as well as products, are incredibly different, they have diverse preferences, goals, and wishes when they 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 depending on the target audience of the product and its conversion goals.<\/span><\/p>\n 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 a 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 a presentation of the products which aren’t well-known for users and need additional informative support.<\/span><\/p>\n Architecture Firm<\/em><\/span><\/p>\n Here is an example of a web page where the long copy is useful. It’s a design concept featuring a website for an architectural bureau following a minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company\u2019s story, present professional level, and achievements, so detailed copy works efficiently in this case.<\/span><\/p>\n Birds of Paradise Encyclopedia<\/em><\/span><\/p>\n 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 the 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.<\/span><\/p>\n Toonie Alarm<\/a>\u00a0tutorial<\/em><\/span><\/p>\n <\/p>\n As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of a brief onboarding tutorial<\/a> 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.<\/span><\/p>\n The core elements that make the UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don\u2019t require copy using widely and instantly recognized icons<\/a> 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 a double scheme, when the icon, button, or link is supported with the copy.<\/span><\/p>\n 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. \u00a0Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA\u00a0elements, so that they could stand out in the layout and draw the user\u2019s attention quickly.<\/span><\/p>\n Landing page for SwiftyBeaver<\/a><\/em><\/span><\/p>\n Travel Agency Website<\/em><\/span><\/p>\n The CTA\u00a0buttons 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.<\/span><\/p>\n Good Sign App Concept\u00a0<\/em><\/span><\/p>\n <\/p>\n 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\u00a0unusual CTA buttons like \u201cMake a wish\u201d.<\/span><\/p>\n Book Swap App<\/em><\/span><\/p>\n There\u2019s no need to create CTA buttons exceptionally in bright colors<\/a> – their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don\u2019t you make the contrast with a light background<\/a> which will make the bright copy even more prominent, like in a concept for the Book Swap app above?<\/span><\/p>\n 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.<\/span><\/p>\n Gym Landing Page<\/em><\/span><\/p>\n <\/p>\n 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.<\/span><\/p>\n All in all, creating quality copy content isn\u2019t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips on presenting the copy:<\/span><\/p>\n <\/p>\n Here is the collection of recommended articles for further reading in case you would like to read more about the theme.<\/span><\/p>\n UX Writing: Handy Tips on Text Improving User Experience<\/a><\/p>\n User Experience: How to Make Web Interface Scannable<\/a><\/p>\n Visual Hierarchy: Effective UI Content Organization<\/a><\/p>\n Types of Copy Content in User Interfaces<\/a><\/p>\n![\"design](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/05\/copywriting-article-1024x1024.jpg\")
<\/p>\nVisual hierarchy<\/span><\/h2>\n
![\"f_reading](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/f_reading-pattern-eyetracking-scannability.jpg\"){kind=tracking}
<\/p>\n![\"z](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/z-pattern-web-scannability-1-1024x1015.png\")
<\/p>\n![\"tubik](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/tubik-studio-the-big-landscape-website.png\")
<\/p>\nTypographic hierarchy<\/span><\/h2>\n
Headlines<\/span><\/h2>\n
![\"Tubik](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/Tubik_Studio_Photography_Workshops.gif\")
<\/p>\n![\"seafood](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/seafood-recipe-website-landing-tubik.png\")
<\/p>\n![\"Bakery](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/12\/Bakery-website-design-case-study-tubik-1024x768.png\")
<\/p>\nSubheaders<\/span><\/h2>\n
![\"tubik](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubik-landing-page-scroll-animation.gif\")
<\/p>\n![\"tubikstudio](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-travel-gear-landing.png\")
<\/p>\nBody copy<\/span><\/h2>\n
![\"tubik](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/08\/tubik_studio-architecture_firm.gif\")
<\/p>\n![\"tubik](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubik-studio-web-ui-design.gif\")
<\/p>\n![\"TUBIK](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/11\/TUBIK_Toonie_Help_Screens_Interaction.gif\")
<\/p>\nCall-to-action elements with copy<\/span><\/h2>\n
![\"tubik](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/tubik_studio_swiftybeaver_landing.png\")
<\/p>\n![\"travel](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/travel_agency_website_tubik_studio.png\")
<\/p>\n![\"good](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/good_sign_app_tubikstudio.png\")
<\/p>\n![\"book](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/book-swap-app-by-tubik-studio.png\")
<\/p>\nCaptions<\/span><\/h2>\n
![\"gym](\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/gym-landing-page-fragment-1-1-1024x789.png\")
<\/p>\nPoints to consider<\/span><\/h2>\n
\n
Recommended reading<\/span><\/h2>\n