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.
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.
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.
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.
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.
For those who could not find the 1-pixel UI. Tip.