Text Content in Mobile UX Design

Let’s be honest:

Designers, especially those working with mobile apps creation, rarely think of text content they’ll use there. Well, they know there will be some text in the app, but they rely more on UX writers here: What content a writer gives โ€” that will go to the layout, right?

Not quite.

The problem is that a UX writer doesn’t see the whole picture when working on mobile apps creation with you. They may give you some words and phrases based on the raw templates you provide. It means they only have a general idea of where and how big the text blocks will be in the final version.

And that’s where you might hit a snag:

It’s a microcopy, not your fantastic design with trendy colors and psychology-based hacks that makes users love an app. That’s why many brands hide their visual elements in favor of emphasizing the content. In plain English, texts in apps aren’t just words but an essential component of the UX design. (36% of the average mobile app design is a text!)

Surprised Man

As a creative and responsible designer, you need to ensure that text content blends nicely with your mobile UX design. A smart combination of words and design is what will enhance your product and guarantee a happy user experience.

In this post, you’ll find critical details about text content in mobile apps to consider. Make sure to check and adjust them accordingly when designing, so that they wouldn’t frustrate users or turn them away from your app.

Consider Both Readability and Legibility of Your Content

These two features are critical for your mobile app’s ultimate usability. They depend on many factors and guarantee a stellar user experience.

For text content to look legit (clear and digestible) in your app, make sure you understand how legibility and readability influence user interface.

But first things first:

What is content legibility in mobile UX design?

Content legibility is about how users see your design on the screen and distinguish its elements one from another. It’s about how you visualize data for them to recognize characters, numbers, words, sentences, etc.)

A few factors influence the content legibility of your mobile UX design:

Background

You know that background colors matter in mobile design: They affect the ability to distinguish and read text content. The wrong color scheme can destroy all your design endeavors.

Poor-Mobile-Design
Bible or Not | GPS Guide

What you need to do is work carefully on the color and font choice for text content to look legit in the app. Please consider the peculiarities of copy perception on different backgrounds: Light backgrounds work better for text-based interfaces, while dark ones are perfect for image-based interfaces.

Light-Dark-Background
Airbnb | Waterlogue

Typography

When it comes to text content in mobile apps design, fonts play a critical role too. Not only do they influence readability, but they also can add some particular mood to the written message.

Designers know the power of psychology behind fonts:

Font psychology

Your choice of fonts influences how easily a user will perceive the copy. So, never ignore a font’s size, color, and structure when framing it into your overall design.

You need to balance a text with a user’s ability to scan it. For that, please consider the following typography factors: white space, kerning, alignment, line length, tracking, and leading (distance between text baselines).

White space

Disbalancing these factors (too little distance between letters, too small font size, or not enough space between words and lines), you make users struggle with text content in your app:

Such a disbalance creates tension for their eyes, and users can’t perceive the content. (And that’s why some of them change fonts on their smartphone where applicable, for more comfortable SMS or messengers communication.)

Often, they can’t even explain what’s wrong in your app. It’s simply not legible.

What is readability in mobile UX design?

Content readability in mobile design is about the ease of text perception and comprehension. It’s for the simplicity of words, clarity of thoughts, and the understandable structure of text blocks in apps.

As a designer, you probably know about users’ short attention span when it comes to content. People don’t read but scan texts today, and it’s true for both mobile and web design.

Here is how users scan content:

How users scan content

With that in mind, you need to organize text content in your mobile app so that it would encourage users to interact with its interface. It’s especially true for text-based interfaces, although text content in mobile UX design also includes words on buttons, icons, navigation, etc.

Visual hierarchy is what will help you reach that.

Do your best to present information in your app gradually. It means appealing to the typographic hierarchy with its elements a la headlines, subheads, captions, and calls to action.

Segment all the text elements into different levels:

Text levels
Bid4Papers | Travel Planner
  • The primary level. Headlines with core information.
  • The secondary level. Subheads or captions, supporting scannability and helping users navigate through text content.
  • The tertiary level. Body text and additional data, small yet readable.

Text content in your mobile design needs to follow the 3-C criteria: It should be clear, communicating a core message to users, concise (aka brief and meaningful), and consistent.

And that’s what leads us to the next point:

Be Concise and Consistent

Your mobile UX design’s text content needs to be short, meaningful, useful, and consistent. It’s not for nothing that consistency is among the five fundamental concepts of web design, after all.

Please pay attention to the terms and names of operations you choose and make sure to use them throughout the app.

For example, if you or your UX writer select the word “delete,” use it whenever this action is meant to be done. Don’t change it for “remove” or any other synonyms. Synonyms are suitable for books and articles, but they may confuse a mobile app user and ruin your overall UX design.

Be short and use natural language.

When working on the text content scannability, do your best to avoid long fragments. Write “Pay” instead of “Make a payment” or try “Hire” instead of “Find a worker,” for example.

Stick to a rule: One text block = one idea.

Short sentences and paragraphs are more digestible and more comfortable to scan. Use natural language in your mobile app texts to create a feeling of communication with a human.

Think of a clear style and voice of communication: Create a brand book with all the main terminology so that you could address it every time you’ll need to design an icon or a button with text.

Also, make sure to avoid professional slang when choosing terms and operation names for your app. Users may not understand your specific and technical words such as, for example, “buffering” instead of “loading” or “enable” instead of “turn on.”

Loading Video

Consider words that are clear for most people.

Use active voice (it’s more natural), positive language (it’s more user-friendly), and be grammar-flexible. Thus, you may want to consider the Material Design guide on writing, saying to avoid punctuation such as periods in copy or colons after labels.

Clear-words-active-voice
Bondsy | Gogobot

Mobile Patterns - Write for Us

Use numbers

People love numbers. We subconsciously associate them with facts, statistics, and other potentially useful data; that is why big and small business brands fill their landing pages with numbers: they work best to provide the trust signals and added value.

In mobile UX design, numbers come as a perfect instrument to make a text copy more compact. Numbers work on consistency and time-saving for users. So why not use them to improve the legibility of your content?

Numbers
Watering Tracker | Property Rental

Another trick to consider is bulleted and numbered lists in mobile text content. They help organize the info, they catch the eye, and they won’t get lost in the general text; so, users are more likely to notice them.

In a Word

Text content is an essential element of stellar mobile UX design. When used right and smartly combined with visual and interactive features, it enhances your app and guarantees a happy user experience.

Now you know all the critical details of text content to consider when designing a mobile app. Sure thing, all the mentioned tips aren’t the cure-all, and it doesn’t mean you should put ALL of them into one app. Consider those fitting your design and brand strategy most.

Texts in mobile UX design serve to support the positive user experience. It makes a user journey more comfortable and purposeful, so please don’t ignore UX writing rules and do your best to combine words and design for your mobile app to stand out.

And always do usability testing of your mobile app to make sure everything looks and works legit!

Lesley Vos

Lesley Vos

Lesley Vos is a web content strategist and a blog writer for Bid4Papers. She spent many hours working with developers on creating the best user experience for the websites in various industries.

Previous ArticleNext Article

This post has 32 Comments

32
  1. You are so cool! I do not suppose I’ve truly read something like that before.
    So wonderful to discover someone with a few unique thoughts on this issue. Seriously.. many thanks for starting this up.

    This site is something that’s needed on the web, someone with a bit of originality!

  2. I simply wish to offer you a big thumbs up for the great information you have got here on this post.
    I’ll be returning to your site for more soon.

  3. Your style is unique in comparison to other people I’ve read stuff from. I appreciate you for posting when you’ve got the opportunity, Guess I will just bookmark this web site.

  4. I have been exploring for any high-quality articles in App onboarding and Splash-screens.
    After reading this info, I have an incredibly excellent feeling that I got just what I needed.

Leave a Reply

Your email address will not be published. Required fields are marked *