Let’s count: an artist, a typographer, an editor, a usability specialist, a user, and a few more. These people look at a 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 some un-imaginary problems. Let’s call it “Icons8 Packs.”
Looking at the text as a graphical element forces us to see it differently. A good artist sees a lot but will focus on two main properties of text: color and position.
The text has a color, even if in most applications it’s black or shades of grey.
Left Low-contrast text looks organic within many color themes. However, if it’s overdone, text becomes like a background – unreadable, dull.
Middle On the other hand, people try to emphasize text by using all sorts of colors, making it look like impressionist art or a drug trip.
Right You are not forced to use only black and white. Notice that we were able to make our header green.
Every app is a composition of graphical elements, one of which is text. If you place your text closer to another object, say, an icon or image, they become related. The reverse is also true. Properly positioned text enhances user’s experiences dramatically, so let’s focus on white spaces between different elements and the text alignment itself.
Left Toys pack and its description look separate because there’s too much space between them. Even more, the space between Toys pack and “Choose icons…” is the same, which doesn’t allow these bits of text to be clearly separated.
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 line and basically ignore them because reading them is quite inconvenient.
Typographer’s view intersects very much with the other views, but first we’ll focus on the fonts and their relationships.
Left Too many different fonts are used. A good rule is to never use more than 3 font faces in your app. The fewer, the better. Or you can use one font face and it’s variations within a family. But even then, be careful.
Middle Only 2 different fonts are used, but they do not match at all. The results are 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 require referral. You can even include the font-library in your web apps.
It’s not all about about obvious things like grammar and too many slang/techy words. The whole point is to make your text concise and easy. There are a few common problems below.
“The more I explain with text the better” is a terrible approach to interfaces. If you have a long text, try shrinking it by 30%. Then again, and again, until you start running out of letters to delete.
Usability is a topic everybody has an opinion on. It’s a great place to find enemies and allies. I’d suggest sticking to the basics. Context is everything, something works in one case, but completely fails to work somewhere else. Here I’ve changed a few things.
1. People read from left to right, so I found it’s better to place the product and its name before the checkbox to the right – a meaningful action at the end of every line.
2. Buttons should differ from background color, but orange may be used for more important actions later on: “Buy”, “Attention,” etc., so we had to use some other color that also fits our color theme well.
A user forms a relationship with your app, and text plays a very important role. Seeing text from a user’s point of view lets you see if all the elements of your app work together. Are you being playful or serious? Text is a continuation of your brand. However, don’t overuse fancy fonts everywhere, keep interface text clean and simple.
Sometimes it’s useful to remember some people may be unable to understand your text. Seeing your app like this helps see some design problems and leads to better design solutions.
If you keep this perspective the last one rather than the first, you’ll be good.
Have any other views that may be helpful? See you in a comments section.
I hope tips from this article let you improve a few designs of your own. Here you can read a story about one developer who had to design his app from scratch having no design experience at all.
And let’s not forget, that design is all about trends – current and past ones. Wouldn’t you like to know Why Are So Many Companies Changing to Flat Logo Design?
About the Author
Andrew Burmistrov is a usability specialist of Icons8. He started his career as a phone support specialist, telling jokes while customers were rebooting their computers, then moved to usability testing and occasional writing.
Want to stand out on Halloween? Go 3D! 3D pumpkins, ghosts, zombies, and other spooky…
Animation adds dynamics and variety to the design. Designers often animate details in their projects,…
If seasons were brands, autumn for sure would have one of the most outstanding style…