Typographic UI - a new way to develop user interfaces

Typographic UI is a new design concept, the philosophy of which is expressed in three words: the interface is text.

Until recently, all the concepts of user interfaces (except for the command line) could be understood by the design of the forms of elements used in the interface. We are talking about the forms of buttons, menus, windows and any other frames. The appearance of any UI was entirely determined by the visualization of these very forms, and the style of the interface was determined solely by the approaches to the image of these forms.

Natural UI


Classics of the genre - iOS style. The appearance of this interface is determined primarily by the shape of the icons. The iconographic canon of iOS is that the image of the form symbolizes the internal content as much as possible. You see the lens - it means after the click the camera starts, the gear - it means inside the setting. This is similar to academic pictorial realism: what I see is what I write. Appearance corresponds to the content, starting from cave paintings. Only the image technique is improved, realism is enhanced.

The great Malevich called this style the art of the savage: "Shame on them ..." and strongly encouraged him to abandon: "The world of meat and bone must go."

Kandinsky


Malevich is not the only revolutionary who defied classical art. It is also worth noting Comrade Kandinsky, the founder of abstract art. Since abstractionism did not pass over products of the UI direction, let us dwell on it in more detail.

Kandinsky did not come to abstractionism at once, suffered for a long time, thought. But the work of the Impressionists pushed him to awareness. In particular, Monet's work “Haystack”.



Unnatural colors, which are not found in nature, affected the perception stronger than natural colors. Kandinsky understood: if you can abandon natural colors, then why not go further and not abandon natural forms. Realistic change to abstract.

Abstract UI


The classic UI can be considered Metro-design. In contrast to the natural icon painting of iOS, there are some different colored tiles.

Whether consciously, like Kandinsky, or not, but the developers of the Metro concept have come from nature to abstraction. Most likely, this is an accident, otherwise the market would be full of many examples of such a UI construction. For example, colored circles or pills of Damien Hirst would look nice.



The concept of abstractionism in the design of user interfaces has not yet been fully disclosed. We can say that the developers of Metro only opened the door to a new world, but others are in no hurry to use it. It's all about skeuomorphism. Deeply rooted in the minds of developers, he does not allow this door to be opened wide, since they just do not see her point blank, it looks unnatural for them.

It’s worth removing the blinkers and getting out of the deep rut, where nothing is visible, except for the natural ass of the “camel, laden with different trash” and creating this rut, as new worlds open - from abstract forms to shapeless, worlds of pure information.

Shapeless design


Abstractionism in design in comparison with naturalism is, of course, a movement towards minimalism. But to what limits can you go by continuing this movement? What are the boundaries of the minimum UI? Is it possible to completely abandon the form and what will remain in the end?

The extreme case of the minimum UI is one pixel, it cannot be less. Suppose our UI consists of this pixel. After clicking on this pixel some function should be executed. Let’s now place our UI on top of the content, which often happens, and take the images of Monet’s masterpiece as content.



Well how? See our UI? Not?! But he is! The pixel is so small that it merges with the background and cannot provide an acceptable level of communication for a person. The pixel interface may be suitable for robots, but not for humans.

Thus, the graphical user interface must be larger than a pixel. But how much? Anyway, where is the line of minimalism, after which we lose the possibility of normal communication?

To try to find this line, we suggest moving from the maximum possible UI in size to the minimum, cutting off everything unnecessary along the way.

The maximum area of ​​the UI is limited to the work area. Consider as the maximum UI image, which occupies 100% of the screen. Let us take the same Monet's masterpiece as such an image. And let some function be executed when you click on the haystack.

As you can see, the user does not receive any information telling him what needs to be done to execute the function. Although the functional area of ​​the UI - stack - makes up almost a third of the screen, the user does not know about this functionality, there is no clue. There is a lot of visual information, but it is not clear how to interpret it.

In our case, the maximum UI in terms of ability to transmit information useful for communication is comparable to the minimum one-pixel one. It's all about entropy.

The higher the entropy, the less the user understands what is happening. Chaos. The visual stream is large, but empty, the entire amount of information transmitted is scattered. Efficiency is low. The higher the entropy of the UI, the lower the efficiency of the interface.

Entropy, or UI uncertainty indicator, is a conditional indicator, individual for each, as this is a characteristic of perception. For example, an interface made in colors that color blinds cannot distinguish will have a large entropy for them, unlike other people. Determining the entropy of the UI can only be done empirically.

But back to the example where the UI is made in the form of an image occupying 100% of the screen. It is enough for us to write an explanation in the right place - and the situation is radically changing.



It immediately became clear where to reap. With this inscription we sharply reduced entropy. There is nothing more specific than text.

If at the same time you discard the image itself (form), and leave only the text, the quality of communication will not change, but at the same time the interface uses only a few pixels of the screen allocated for the inscription. The lapidary UI, the higher its efficiency.

Monet's picture on the interface is useless. Although it is a great work of art, this is not a reason to shove it in all places. Anyone who wants to look at Monet will go to the exhibition, or buy a book with reproductions, or watch a documentary.

Similarly with other forms, for example, icons. If icons with text carry the same useful information for communication as text without icons, then why leave the icons? For what? To promote the creations of designers to the masses? But above, we quite reasonably refused this Monet himself, pointing out that the interface is not an art gallery.

We fix what was said with an example. As the content for the background, we take the same stacks, and as the UI we consider two options - with icons in the form of Hurst circles with text and just text.


Option 1

In the first case, there is a feeling of bad taste. The addition of two masterpieces gives not a plus, but a minus. This rule works when overlaying any images. This is well known to those who work with interfaces built on top of content (for example, in IPTV). In extreme cases, the interface can use contour drawings, which in essence can be considered hieroglyphs.


Option 2

The second option with a text UI looks better, but the composition is spoiled by the even distribution of the text. This state in physics is called thermal death. But the matter is fixable, the problem can be solved in several ways: by moving or transforming the inscriptions (following the example of how Kandinsky dragged a point from the center to achieve a new sound for the composition - he called the position in the center a soundless point) or using animation (you need to be extremely careful to avoid seizures of epilepsy). In both cases, the equilibrium soundless compositions are disturbed, a positive tension appears, which is clearly captured by human perception.

As shown below, all information is grouped and occupies a minimum of space, leaving the user the right to contemplate the content when the UI is turned on. This example also shows how, due to the offset, you can select the selected element, fixing the selection with an additional hashtag.


Option 3

Compare this with option 1. Look at how much unnecessary information we got rid of without losing information, how much easier the interface looks.

The text on top of the content resembles the cover of a glossy magazine, where a correctly selected font, harmoniously combined with the image, together forms a single whole. If you try, you can count on the effect of resonance, when the effect of perception from the result of overlaying text on the content will be several times higher than individually.

UI without forms, consisting only of text, is a bold trend of our time. At the same time, the interface using the alphabet-based language is more minimalistic than the pictograms. The version for robots is UI using binary code.

Get rid of forms with unnecessary graphic information that parasitizes the user's attention, cut off all unnecessary, send the form to the trash, do only text. The art of calligraphy and typography help you. Hence the name of the concept - Typographic UI.

Now the task of building an interface is reduced to creating the desired composition of the text in the workspace. Moreover, the same compositional solution can significantly differ in terms of visual impact on the user due to the selection of font combinations. Fonts play the role of colors, set the mood and style. Calligraphy is the artist’s main tool in such a UI.

There are no universal solutions suitable for solving all problems. There is no Holy Grail, this is a consequence of Godel’s incompleteness theorems and Tarski’s theorem on the inexpressibility of truth. But in the class of interfaces for managing content viewing, our approach is able to do any work.

Typographic UI was born at ARES while working on the IPTVPORTAL project. TYPOGRAPHY - so we called our user interface for watching interactive television. It was first demonstrated at CSTB-2018.

PS


For those who did not find the UI from the 1st pixel. Hint.



Examples












Also popular now: