

{"id":4520,"date":"2018-03-15T19:17:45","date_gmt":"2018-03-15T16:17:45","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4520"},"modified":"2023-07-24T11:48:49","modified_gmt":"2023-07-24T11:48:49","slug":"copywriting-mobile-web-interfaces-types-ui-copy","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/","title":{"rendered":"Copywriting for Mobile and Web Interfaces: Types of UI Copy"},"content":{"rendered":"<p><span style=\"color: #333333;\">Quality copy is a key part of a successful user interface performance. Text and visual components mutually support each other creating the sufficient design and user experience of a product. Some may associate UI copywriting only with the long block of text such as in blogs or informative pages, but it\u2019s just a tip of an iceberg. A new article provides a guide to different types of copy applied in user interfaces and shows UI copywriting examples.<\/span><\/p>\n<h2><span style=\"color: #333333;\">What\u2019s UI copywriting?<\/span><\/h2>\n<p><span style=\"color: #333333;\">In our previous articles, we\u2019ve already touched upon the topic of <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ux-writing-let-user-interface-speak\/\">copy in UI<\/a>. To remind, <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/user-experience-tips-ux-writing\/\">copywriting<\/a> for web interfaces and mobile apps involves the creation of text content both small and big. Each word applied in a user interface is an inseparable part of a layout and plays its role in the user experience of a product.<\/span><\/p>\n<p><span style=\"color: #333333;\">Effective copy content improves the usability of the apps and websites as well as encourages people to interact with the interface. To create an appropriate UI copy, designers need to master additional skills and knowledge since the field is quite complicated. Also, it may be good to engage a professional copywriter or technical writer in the creative process to make it faster and more productive. Today we want to give an insight into the different types of copy as well as provide some tips based on UI copywriting best practices.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9668\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/landing_design_case_study_final_main_page.png\" alt=\"landing design case study final_main_page\" width=\"1440\" height=\"950\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/landing_design_case_study_final_main_page.png 1440w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/landing_design_case_study_final_main_page-300x198.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/landing_design_case_study_final_main_page-768x507.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/landing_design_case_study_final_main_page-1024x676.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/landing_design_case_study_final_main_page-150x99.png 150w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Landing page for <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-colony-landing-page-for-collaboration-platform\/\">Colony<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Information copy<\/span><\/h2>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Headlines<\/span><\/h3>\n<p><span style=\"color: #333333;\">A headline is a large, bold word or phrase that users usually notice first in any interface. Headlines deliver and emphasize the key informative message of a page. Headlines should be catchy and short so that they could quickly draw users\u2019 attention. The results of the research published by <a style=\"color: #333333;\" href=\"https:\/\/blog.bufferapp.com\/the-ideal-length-of-everything-online-according-to-science\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Buffer<\/a>, the popular social media sharing platform, showed that the perfect length of the headline is 6 words.<\/span><\/p>\n<p><span style=\"color: #333333;\">Moreover, headlines need to be meaningful in order to inform users about the theme of the content of a page or screen. To provide a better understanding, it\u2019s good to support a headline with other visual elements such as photos.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Subheaders<\/span><\/h3>\n<p><span style=\"color: #333333;\">Subheaders are brief and concise phrases that help users quickly scan text so that they could understand if they are interested in it. The headlines can give only a summary of the theme or message of the whole page while subheaders mark out the core points in separate sections of text.<\/span><\/p>\n<p><span style=\"color: #333333;\">To create proficient <a href=\"https:\/\/blog.tubikstudio.com\/visual-hierarchy-effective-ui-content-organization\/\">visual hierarchy<\/a>, designers usually chose smaller fonts for subheaders than for headlines. Still, they need to be bigger than the rest of the copy for <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-make-web-interface-scannable\/\">fast scanning<\/a>. Also, it is recommended to make subheaders fonts bold so that they would look prominent among the other text.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8648\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-travel-gear-landing.png\" alt=\"tubikstudio travel gear landing\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-travel-gear-landing.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-travel-gear-landing-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-travel-gear-landing-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubikstudio-travel-gear-landing-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Travel Gear <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/hit-the-spot-design-strategies-for-profitable-landing-pages\/\">landing page<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Body copy<\/span><\/h3>\n<p><span style=\"color: #333333;\">Body copy is usually a part of text providing description or further information placed in a compact block, usually under a subheader or a headline. Traditionally, body copy applies thinner and smaller fonts, sometimes presented in italic for even more prominent visual contrast.<\/span><\/p>\n<p><span style=\"color: #333333;\">There is no unified opinion about the best length of body copy. Some content creators claim that long copy is more informative and serious-looking, while others declare that only short copy is effective since users never want to read too much. However, to achieve an efficiency of the text, it\u2019s good to vary the length according to the <a href=\"https:\/\/blog.tubikstudio.com\/business-oriented-design-know-your-target\/\">target audience<\/a>. The thing is that users are incredibly different, they have diverse preferences, goals, and wishes searching for web resources or mobile apps. Long and short copy can bring pros and cons, and each of them can be appropriate depending on the target users of a product and its conversion goals.<\/span><\/p>\n<p><span style=\"color: #333333;\">UI copywriting for mobile apps and landing pages often requires applying short copy: their users usually want to see concise and highly informative copy content. Moreover, mobile interfaces have a limited amount of space, so too much copy won\u2019t look nice and will demand additional effort for reading. Long copy is sufficient for web products providing users with complex information on specific topics as well as the presentation of new products that need additional informative support.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7764\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/seafood-recipe-website-landing-tubik.png\" alt=\"seafood recipe website landing tubik\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/seafood-recipe-website-landing-tubik.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/seafood-recipe-website-landing-tubik-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/seafood-recipe-website-landing-tubik-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/seafood-recipe-website-landing-tubik-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\"><em>Seafood Recipes <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/hit-the-spot-design-strategies-for-profitable-landing-pages\/\">landing page<\/a><\/em><\/span><\/p>\n<h2><span style=\"color: #333333;\">Interaction copy<\/span><\/h2>\n<h3><span style=\"color: #333333;\">Captions<\/span><\/h3>\n<p><span style=\"color: #333333;\">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<p><span style=\"color: #333333;\">A powerful caption needs to contain accurate data helping users to understand what they see. It\u2019s important for captions to provide new information so it shouldn\u2019t describe obvious statements which users already see in the photo. Choose the tone of the caption according to the specifics of the target audience and the whole content on the page. If you apply pictures from a side author, you should include credits and citations otherwise you break copyright law.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2546\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/gym-landing-page-fragment-1.png\" alt=\"web design tubik studio gym website\" width=\"1400\" height=\"1079\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/gym-landing-page-fragment-1.png 1400w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/gym-landing-page-fragment-1-300x231.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/gym-landing-page-fragment-1-768x592.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/gym-landing-page-fragment-1-1024x789.png 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/gym-landing-page-fragment-1-150x116.png 150w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/p>\n<p><em>Gym <a href=\"https:\/\/blog.tubikstudio.com\/landing-page-direct-flight-to-high-conversion\/\">landing page<\/a><\/em><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">CTAs<\/span><\/h3>\n<p><span style=\"color: #333333;\"> <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ux-practices-8-solid-tips-on-cta-button-design\/\">CTA button<\/a> copy is actually a call that tells users what action they will take if they click the buttons. CTA microcopy has to catch users\u2019 attention quickly and lead them right to the action.<\/span><\/p>\n<p><span style=\"color: #333333;\">To make a sufficient call-to-action, you need to keep the number of words at the minimum, usually not more than 1-2 words. A few appropriately chosen words work much faster than a long descriptive phrase. In addition, applying imperative case in CTA microcopy, you give strong and direct instructions on what users can do next.<\/span><\/p>\n<p><span style=\"color: #333333;\"> Moreover, a CTA should stand out among the other components on a layout, the reason why high contrast is a must. Prominent colors and size can make call-to-actions easily noticeable and increase <a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">readability<\/a>.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8600\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/12\/burger_app_ui_animation_tubik.gif\" alt=\"burger app ui animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-tasty-burger-ui-design-for-food-ordering-app\/\" rel=\"nofollow\">Tasty Burger app<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Notifications<\/span><\/h3>\n<p><span style=\"color: #333333;\">Notifications are applied to both web and mobile user interfaces. They are usually short messages which aim to inform people about upcoming upgrades or any other activity in a product as well as provide some reminders to keep users engaged.<\/span><\/p>\n<p><span style=\"color: #333333;\">Notifications need to be created that way so they could enhance user experience and wouldn\u2019t annoy users. That\u2019s why notification messages need to contain only valuable information. Moreover, it is recommended to keep the messages short and clear. The research shows that the notifications with less than 25 characters perform much better than long text. Creating a notification it\u2019s vital to be authentic to a brand voice. The tone of a message has a significant impact on how people perceive a product and a brand.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8741\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/05\/home-budget-app-interaction-animation-tubik.gif\" alt=\"home budget app interaction animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-home-budget-app-ui-for-finance\/\">Home budget<\/a> app<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Errors<\/span><\/h3>\n<p><span style=\"color: #333333;\">Errors are an inseparable part of any digital system including system fails and users\u2019 errors. In case some unexpected conditions happen it\u2019s vital to provide users with the information helping them to understand how to handle problems.<\/span><\/p>\n<p><span style=\"color: #333333;\">An <a href=\"https:\/\/blog.tubikstudio.com\/error-screens-and-messages\/\">error message<\/a> is a short text tip displayed to a user by a website or application when something goes wrong. An error message should be clear and helpful so that users could define the problem and what to do about it. A message needs to be polite and friendly to make users feel calm about the situation. In addition, a bit of humor could help annoyed users feel more relaxed and improve the UX of a product. Still, you need to be careful adding jokes since it can be inappropriate or misunderstood in some situations.<\/span><\/p>\n<p><span style=\"color: #333333;\">To increase the efficiency of error messages, designers should think of their placement. It is good to place a message near a UI element it is related to.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7766\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/tubik-studio-page-404-design.png\" alt=\"error page design\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/tubik-studio-page-404-design.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/tubik-studio-page-404-design-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/tubik-studio-page-404-design-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/01\/tubik-studio-page-404-design-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Page 404<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">User onboarding<\/span><\/h3>\n<p><span style=\"color: #333333;\"> User <a href=\"https:\/\/blog.tubikstudio.com\/onboarding-tutorial-design-greet-inform-engage\/\">onboarding tutorials<\/a> are often applied to various digital products. Tutorials appear to users who launch a mobile or web product for the first time helping them get oriented within unfamiliar features and controls. Also, <a href=\"https:\/\/blog.tubikstudio.com\/design-onboarding\/\">onboarding<\/a> is a great chance to enhance user motivation to present the product that way so that people wanted to use it more than once.<\/span><\/p>\n<p><span style=\"color: #333333;\">Onboarding tutorials usually contain short but clear copy describing the benefits of a product helping users to understand if it can be useful for them. The major task of an effective onboarding copy is to engage users and not to make them bored. That\u2019s why tutorials usually apply minimalistic and concise text presenting only key tips that aren\u2019t obvious for users. It\u2019s recommended to use imperative since it helps to reduce the number of unnecessary words.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8091\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/travel-app-tutorial-tubik-studio.png\" alt=\"travel app tutorial tubik studio\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/travel-app-tutorial-tubik-studio.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/travel-app-tutorial-tubik-studio-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/travel-app-tutorial-tubik-studio-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/travel-app-tutorial-tubik-studio-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Travel App tutorial<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Menu copy<\/span><\/h3>\n<p><span style=\"color: #333333;\">Menu is a basic <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">navigation component<\/a> of any user interface allowing for interactions with a product via graphical control. Menus can vary in different interfaces by placement (side menus, header menus, footer menus, etc.), the performance of appearance and interaction (drop-down menus, drop-up menus, sliding menus, etc.).<\/span><\/p>\n<p><span style=\"color: #333333;\">Even though there are different types of menus, each of them requires copy elements. Text for a menu usually includes one word for each action. For example, it can be presented as a list of commands consisting of verbs such as \u201csend\u201d, \u201csave\u201d or \u201cdownload\u201d which mark certain actions available in a product. Also, the menu can introduce the categorized content and sections of the layout. In this case, the copy includes nouns to mark the destination users can follow. The choice of the menu type and the copy for it should be based on the specifics of the target audience preferences and expectations.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9230\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks.jpg\" alt=\"Upper App to do list tasks\" width=\"1500\" height=\"1000\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks.jpg 1500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/Upper-App-to-do-list-tasks-150x100.jpg 150w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-ui-design-for-to-do-list\/\">Upper App<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Tooltips<\/span><\/h3>\n<p><span style=\"color: #333333;\">Tooltips can be defined as labels with text tips that appear when a user hovers over or touches a UI element. Their task is to identify interactive components in a user interface providing short info about their essence or function.<\/span><\/p>\n<p><span style=\"color: #333333;\">Tooltips copy is often created in imperative making it look more like a valuable instruction rather than a distracting message. Practice shows that short tooltips work better so it\u2019s recommended to keep the number of characters under 150. If your message can\u2019t be cut down, you can divide it into several labels.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #333333;\">Product-generated emails<\/span><\/h3>\n<p><span style=\"color: #333333;\">Product-generated emails are a type of message notifications telling users about the activity in a product. For example, they remind you to activate an account or show the progress in an app.<\/span><\/p>\n<p><span style=\"color: #333333;\">Product-generated emails can be divided into several types. First of all, there are activation emails that help to verify the email address provided by the user during sign-up. Such emails usually consist of greetings and an active link leading users to their new account. The next type of email often follows the previous one. Once users create accounts they receive a welcome message. They aim at providing essential information about the terms and conditions of a product as well as general insight into the benefits it provides.<\/span><\/p>\n<p><span style=\"color: #333333;\">Security and account change notifications are essential for any kind of product. It\u2019s vital for users to know that their personal data is safe. Providing updates about activity in the account such as change of a password or logins from unknown devices assist in protecting users\u2019 accounts.<\/span><\/p>\n<p><span style=\"color: #333333;\">There are several conditions for creating effective copy for a product generated emails. First of all, they need to have catchy and clear headlines so that users won\u2019t miss messages. Moreover, email should clearly explain the aim of a message and what users should do about it. Copy should be personalized to make users understand it has value for them. Finally, the tone of a message needs to be based on the results of user research.<\/span><\/p>\n<hr \/>\n<p><span style=\"color: #333333;\">Copy plays a significant role in the flow of interactions with UI. That is why it\u2019s important to analyze every single piece of copy and create it in a way corresponding to the general design concept and positive user experience.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8194\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design.jpg\" alt=\"tips on visual hierarchy in design\" width=\"2500\" height=\"1667\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design.jpg 2500w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-300x200.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-768x512.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-1024x683.jpg 1024w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/07\/tips-on-visual-hierarchy-in-design-150x100.jpg 150w\" sizes=\"auto, (max-width: 2500px) 100vw, 2500px\" \/><\/p>\n<h2><span style=\"color: #333333;\">Recommended reading<\/span><\/h2>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-readable-user-interface\/\">How to Make Web Interface Readable<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/user-experience-tips-ux-writing\/\">UX Writing: Handy Tips on Text Improving User Experience<\/a><\/p>\n<p><span style=\"color: #333333;\"> <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/tips-on-applying-copy-content-in-user-interfaces\/\">Tips on Applying Copy Content in User Interfaces<\/a><\/span><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/error-screens-and-messages\/\">Error Screens and Messages: UX Design Practices<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ux-design-how-to-make-web-interface-scannable\/\">How to Make Web Interface Scannable<\/a><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/3c-of-interface-design-color-contrast-content\/\">3C of Interface Design: Color, Contrast, Content<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ux-writing-let-user-interface-speak\/\" target=\"_blank\" rel=\"noopener noreferrer\">UX Writing. Let User Interface Speak<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/copywriting-in-ui-words-that-make-design-go-round\/\" target=\"_blank\" rel=\"noopener noreferrer\">Copywriting in UI. Words that Make Design Go Round<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The article presents a guide to different types of copy content applied in web and mobile user interfaces and provides tips on UI copywriting based on best practices.<\/p>\n","protected":false},"author":3,"featured_media":9669,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[465,467,20,468,80,469,83,479,84,482,100,485,138,487,233,489,256,491,260,492,322,514,331,533,459,534,460,463],"coauthors":[],"class_list":["post-4520","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-ui-design-examples","tag-ui-design-practices","tag-app-design","tag-ui-design-process","tag-content-writing","tag-ui-design-tips","tag-copy","tag-usability","tag-copywriting","tag-user-experience","tag-design","tag-user-experience-design","tag-design-process","tag-user-experience-design-process","tag-human-computer-interaction","tag-user-experience-examples","tag-interaction-design","tag-user-interface","tag-interface-copy","tag-user-interface-design","tag-mobile-design","tag-ux-writing","tag-mobile-ui","tag-web-design","tag-ui-copy","tag-web-design-article","tag-ui-copywriting","tag-ui-design-article"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Copywriting For Mobile and Web Interfaces: Types of UI Copy<\/title>\n<meta name=\"description\" content=\"The article presents a guide to different types of copy content applied in web and mobile user interfaces and provides tips on UI copywriting based on best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Copywriting For Mobile and Web Interfaces: Types of UI Copy\" \/>\n<meta property=\"og:description\" content=\"The article presents a guide to different types of copy content applied in web and mobile user interfaces and provides tips on UI copywriting based on best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-15T16:17:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-24T11:48:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/UI-copy-types-tips-tubik-blog-1-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/\",\"name\":\"Copywriting For Mobile and Web Interfaces: Types of UI Copy\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/UI-copy-types-tips-tubik-blog-1-1.jpg\",\"datePublished\":\"2018-03-15T16:17:45+00:00\",\"dateModified\":\"2023-07-24T11:48:49+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article presents a guide to different types of copy content applied in web and mobile user interfaces and provides tips on UI copywriting based on best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/UI-copy-types-tips-tubik-blog-1-1.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/UI-copy-types-tips-tubik-blog-1-1.jpg\",\"width\":1500,\"height\":1000,\"caption\":\"UI-copy types tips tubik blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Copywriting for Mobile and Web Interfaces: Types of UI Copy\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Copywriting For Mobile and Web Interfaces: Types of UI Copy","description":"The article presents a guide to different types of copy content applied in web and mobile user interfaces and provides tips on UI copywriting based on best practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/","og_locale":"en_US","og_type":"article","og_title":"Copywriting For Mobile and Web Interfaces: Types of UI Copy","og_description":"The article presents a guide to different types of copy content applied in web and mobile user interfaces and provides tips on UI copywriting based on best practices.","og_url":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2018-03-15T16:17:45+00:00","article_modified_time":"2023-07-24T11:48:49+00:00","og_image":[{"width":1500,"height":1000,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/UI-copy-types-tips-tubik-blog-1-1.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/","url":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/","name":"Copywriting For Mobile and Web Interfaces: Types of UI Copy","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/UI-copy-types-tips-tubik-blog-1-1.jpg","datePublished":"2018-03-15T16:17:45+00:00","dateModified":"2023-07-24T11:48:49+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article presents a guide to different types of copy content applied in web and mobile user interfaces and provides tips on UI copywriting based on best practices.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/UI-copy-types-tips-tubik-blog-1-1.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/03\/UI-copy-types-tips-tubik-blog-1-1.jpg","width":1500,"height":1000,"caption":"UI-copy types tips tubik blog"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/copywriting-mobile-web-interfaces-types-ui-copy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Copywriting for Mobile and Web Interfaces: Types of UI Copy"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=4520"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4520\/revisions"}],"predecessor-version":[{"id":14470,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/4520\/revisions\/14470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/9669"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=4520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=4520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=4520"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=4520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}