How Many People Does It Take To Make A Text In Your App Look “Pro”?

Let’s count: an artist, a typographer, an editor, a usability specialist, a user and a few more. Or one very, very experienced designer. But it’s far easier to come up with a bunch of imaginary people than meeting one real-life designer, isn’t it? Point being, these people look at mobile app or web service, and all they see is the same text. What’s important is how they see it.

To illustrate these views we’ll use an imaginary app with not so imaginary problems, named “Icons8 Packs”.

An Artist View

Seeing text as graphical element forces us to see it differently. A good artist sees much, but will focus on two main properties of text: color and position.

Color

Text has a color, even if in most applications it’s black or gray and its shades.

Left: Low-contrast text looks organically within many color themes. But if overdone, text becomes like a background — unreadable, dull.

Middle: Opposite is when people try to emphasize text by using all sorts of colors, making it look like impressionist art or drug consequences.

Right: You are not forced to use only black and white color. Notice, that we were able to make our header green.

Position

Every app is a composition of graphical elements, one of which is a text. If you place your text closer to another object, say, icon, or image, they become related. Reverse is also true. Properly positioned text enhances user experience dramatically, so let’s focus on white spaces between different elements and text alignment itself.

Left: Toys pack and it’s For Children description look separated because of too much space between them. Even more, the space between Toys pack and “Choose icons…” is equal, which doesn’t let clearly group these bits of text.

Middle: The problem here is that there is almost no space between packs’ names and their description. People may perceive these blocks as a single one, and basically, ignore them, because reading them is quite inconvenient.

A Typographer View

Typographer’s view intersects much with others views, but first will focus on fonts and their relationship.

Left: Too many different fonts are used. A good rule is to never use more than 3 font faces in your app. The less, the better. Or you can use one font face and its variations within a family. But even then be careful.

Middle: Only 2 different fonts are used, but they are not matching at all. The effect is pretty similar to the first example — chaos, poor readability.

A hint from Elwin de Witte, one of our readers: Don’t buy fonts. There are more than enough options for using third-party fonts or free fonts. Great examples are Google Fonts and Awwwards yearly “100 Greatest Free Fonts Collection for…” All fonts on Google Fonts are free to use and don’t need any referral. You can even include the font library into your web apps.

An Editor View

It’s not all about obvious things like grammar and too many slang/techy words. The whole point is to make your text concise and easy. A few common problems below.

“The more I explain with text the better” is a terrible approach for interfaces. If you have a long text, try shrinking it by 30%. Then again and again, until you notice that you started to delete separate characters from your words.

A Usability Specialist View

Usability is a topic everybody has an opinion on. It’s a great place to find allies and enemies. I’d suggest stick to the basics. Context is everything, something works in one case, but completely doesn’t work somewhere else. Here I’ve changed few things.

1. People read from left to right, so I found it’s better to place the product and it’s name, and only then place a checkbox to the right, a meaningful action in the end of every line.
2. A button should differ from a background color, but orange color may be used for more important actions further: “Buy”, “Attention” etc. So we had to use some other color, that would fit our color theme well.

A User View

A user forms a relationship with your app, and text has a very important place in it. Seeing text from a user point lets you see if all the elements of your app work together. Are you funny? Are you serious? Text is a continuation of your brand. But don’t overuse fancy fonts everywhere, keep interface text clean and simple.

A Foreign User View

Sometimes it’s useful to remember some people may be unable to understand your text. Seeing your app like this help see some design problems and leads to better design solutions.

A Marketing Manager’s View

Keep this perspective the last one, not the first, and you’ll be good.

Have you any other views that may be helpful? See you in a comments section.

More insightful articles appear in our Icons8 blog regularly.

Thanks for reading! If you liked the article or found it helpful hit “recommend”. Thanks!