Typographic UI is a new design concept that can be expressed in four words: "UI is the text".

Until recently, all the UI concepts (except for command-line interfaces) were focused on the appearance and shape of UI elements, such as buttons, menus, dialogs and other frames. The overall appearance of any UI directly depended on the look and feel of these forms, while UI styles depended solely on the rendering techniques used for these forms.

Natural UI

A typical example of this UI is the iOS style. Visual appearance of this UI is built around the shapes of icons. The key principle for icons is that they must be as intuitive as possible. If you see an icon that looks like a camera, then it launches a camera app, and if you a see a gear icon, then it is definitely settings. It is like academic art: what you see is what you paint. A picture exactly reflects the nature of the objects it shows — this principle dates back to cave paintings. And basically, what we call academic art is a more sophisticated and realistic version of cave paintings.

Kazimir Malevich, one of the greatest artists, called it "savage art" and appealed to put it on a blacklist: "We don't need art supported on muscles of meat".

Malevich was not the only revolutionary who defied classical art. Wassily Kandinsky, one of the founders of abstract art, shared his understanding. And since abstractionism also influenced on the UI trends, let us discuss it in more detail.

Kandinsky invented abstractionism after multiple creative endeavors and long self-reflection. But the key insight for Kandinsky were impressionists, especially Monet and his "Haystacks":

"Strange" colors that you never see in nature affected the perception stronger than natural ones. And Kandinsky eventually came up with a simple conclusion: if we can refuse usage of natural colors, than we can refuse usage of natural shapes as well and shift from realistic art to abstract art.

Abstract UI

A typical example of this UI is the Metro style. Unlike iOS with its realistic icons, Metro offers some simplistic colored tiles.

We don't know whether the designers of Metro got inspired by Kandinsky's paintings or came up with this idea on their own, but it is definitely shift from nature to abstractionism in their concept. Most likely, it was unintentional — otherwise the software market would be already full of abstract UIs. For instance, colored circles or Damien Hirst's pills would look just great here.

Presently, the ideas of abstractionism are still poorly elaborated and rarely used in the UI design. In fact, the designers of Metro only opened the door to a new world, but few dare to come in. And the key obstacle here is skeuomorphism. This concept deeply rooted in the minds of developers does not allow this door to be opened wide — the new world looks too unnatural for them.

But once they start thinking creatively and outside of the box instead of flogging a dead horse of realistic art, the new worlds of pure information will emerge — ranging from abstract shapes to shapeless abstractions.

Shapeless UI

Shifting from realism to abstractionism in design is of course a step towards minimalism. But what are the limits of this opportunity? And what is an ultimately simplistic UI? Can we refuse from any shapes at all and if yes, then what will remain?

The most simplistic UI we may think of is a 1-pixel UI. Suppose that we've created an UI consisting of a single pixel. Clicking this pixel must perform a certain action. Now let us place our UI on the content as usual — for example, on Monet's masterpiece.

So, how is this? Can you see our UI? No?! But it is right here! The pixel is so small that you simply cannot find it on the background to interact with the UI. Such 1-pixel UIs would be nice for robots, but not for humans.

Therefore, a graphic UI for users must be larger than 1 pixel. But how much larger? And, generally speaking, what are the limits of such minimalism and at which point we simply won't be able to interact with an UI?

To identify these limits, we should move from the largest possible UI towards the smallest possible, cutting off useless things along the way.

The maximum UI dimensions are limited by the working area. Let us consider an image covering 100% of the screen the largest possible UI. And, for example, let's take the same masterpiece by Monet. Suppose that clicking a haystack must perform a certain action.

As you can see, this UI does not provide any hints on what to do for launching a function. The haystack as functional area of the UI occupies almost a third of the screen, but there is no clue how to use this functionality. You see lots of visual information, but don't know how to interpret it.

In this case, the largest UI is as useless as the smallest one in terms of communication and interaction abilities. This is what we call "entropy".

The higher the entropy, the harder you can understand what is going on. It is a measure of chaos. You get a large, but useless and scattered volume of visual data. The overall efficiency is low. The higher the entropy of an UI, the less its efficiency.

Entropy, or a measure of UI uncertainty, is a relative indicator which is individual for each user depending on his/her perception. For example, an UI made in colors that color-blind persons cannot distinguish will have higher entropy for them than for others. Therefore, the UI entropy can be estimated only empirically.

But let's get back to our UI which consists of an image covering 100% of the screen. Simply write a text tip where it is needed — and feel the difference.

Now you clearly see where to click. This text tip dramatically reduces the entropy. There is nothing more specific than text.

If we simply remove the image (shape) and leave only the text, the quality of communication won't get worse, but the UI itself will occupy only several pixels on the screen. The simpler the UI, the higher its efficiency.

And that Monet's painting is of no use here. Though it is a great work of art, this is no need to show it everywhere. Those who want to see Monet's paintings would better visit an exhibition, buy an art book or watch a documentary movie.

The same applies to icons and other shapes: if icons with text are as informative as text without icons, then what for do we need icons? For what reason? To spread designers works? But UI is not an art gallery, so neither icons nor even the great Monet are welcome here.

Let us discuss yet another example. Suppose that we use the same haystacks as background, but consider two UI options: one UI with icons styled as Hirst's circles with text and another UI with text only.

Option 1

This one emerges the feeling of bad taste. Overlapping two masterpieces creates anything but a new masterpiece. This holds true as well for overlapping any images. Designers who create UIs on top of any content (e.g. in IPTV) are aware of this rule. In certain cases, UIs may contain contour drawings, which basically are similar to hieroglyphs.

Option 2

The second UI looks better, but the justified text ruins the overall experience. This is what physicists call "heat death". But there are several workarounds for this problem: move or transform the captions (similar to how Kandinsky dragged a point from the center to achieve a new perception of the composition — he called the central position "a soundless point") or add animation effects (but make sure not to trigger epileptic seizures). In both cases, the soundless balance of the composition is ruined and a positive tension appears, which is clearly captured by human perception.

As shown below, all the information is grouped to save more space on the screen, so that users could see the content even when the UI is enabled. This example also demonstrates how to use offsets for highlighting the selected element and emphasize it with an additional hash tag.

Option 3

Simply compare it with Option 1. Just look how much unnecessary information we got rid of while making the UI neat and easy-to-understand.

The text on top of the content now resembles a tabloid cover with meticulously harmonized fonts and images. It is also possible to achieve synergy: the perception effect from the text overlaid on the content will be several times higher than from the same text and content individually.

UIs containing only text without any shapes is a brave trend of modernity. At the same time, UIs composed using alphabet-based languages are more minimalistic than those with pictograms. UIs with binary codes will suit best for robots.

Try to get rid of shapes with excessive graphic information that distract the user's attention and do your best to focus on text rather than on futile "bells and whistles". The art of calligraphy and typography will help you achieve this goal. Hence the name of the concept: Typographic UI.

From now on, building an UI means building a target composition of text captions in the working area. Moreover, you can achieve various perception effects with the same composition by playing with fonts. Here, fonts define not only the color scheme, but also the overall mood and style. And calligraphy is the main tool to create such UIs.

There cannot be any "one-size-fits-all" solutions for all problems. The Holy Grail does not exist due to Gödel's incompleteness theorems and Tarski's undefinability theorem. But for content viewing UIs, our approach will work just fine.

The idea of Typographic UI was born at A.R.E.S. in the course of the IPTVPORTAL project. TYPOGRAPHY — this is how we called our UI for IPTV. It was first demonstrated at CSTB-2018.

P.S.

For those who could not find the 1-pixel UI. Tip.