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.”

An Artist’s View

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.

Color

The text has a color, even if in most applications it’s black or shades of grey.
artist color view
artist color view focused
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.

Position

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.
artist composition view
artist view composition focus
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.

A Typographer’s view

Typographer’s view intersects very much with the other views, but first we’ll focus on the fonts and their relationships.
typographer view
typographer view focused
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.

An Editor’s View

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.
editor view
4focuseditornew1
“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.

A Usability Specialist’s View

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.
usability view

A User’s View

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.
user view

A Foreign User’s View

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.
foreign user view

A Marketing Manager’s View

If you keep this perspective the last one rather than the first, you’ll be good.
marketolog view
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.

 

Try free tools for creators by the Icons8 team

Icons8, a library of about 120K+ free icons and free clip art images
Lunacy, free graphic design software with built-in design resources
Photo Creator, free collage maker with AI-based technologies to make custom photos for your story
Fugue, royalty free music for videos of any kind
Pichon, the desktop app to download icons and clip art and use them offline
Icons8 Photos, the big collection of free stock photos designed to work together
Ouch!, a library of free vector illustrations


Also, get the lists of free vector software and free photo editing software.

Try tools for creators by the Icons8 team:

Icons8 Icons8, a library of about 130K+ icons and clip art images
Offline app icons8 Offline app and plugins to drag’n’drop icons and clip art to any design tools
Moose Moose, the big collection of high-quality stock photos
illustrations Ouch! , a library of vector illustrations and collages
Background Remover Background Remover, AI-based online tool for removing background from any photo
Mega Creator Mega Creator, online tool for creating visual content from pre-made elements
Fugue Fugue, royalty free music for videos of any kind
Lunacy Lunacy, free graphic design software with built-in design resources
Smart Upscaler Smart Upscaler, image upscaler to enlarge and enhance images using AI
Generated Photos Generated Photos, unique, worry-free model photos generated by AI
Also, get the lists of free vector software and free photo editing software.
pinterest linkedin VK reddit