Typographic UI - a new way of developing 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 user interface concepts (except for the command line) it was possible to understand the design of the form elements used in the interface. It is about the shapes of buttons, menus, windows and any other frames. The appearance of any UI was entirely determined by the visualization of these same forms, and the interface style was determined solely by the approaches to the image of these forms.
Classics of the genre - style iOS. The appearance of this interface is determined primarily by the shape of the icons. Iconographic canon iOS lies in the fact that the image of the form symbolizes the inner content as much as possible. You see the lens - it means the camera will start after the click, the gear - it means inside the setting. It is like academic pictorial realism: I see what I see. The appearance corresponds to the content, ranging from cave paintings. Only the image technique is improved, realism increases.
')
The great Malevich called this style the art of the savage: "Shame on them ..." and strongly urged him to give up: "The world of meat and bone must go."
Malevich is not the only revolutionary who challenged classical art. It is worth noting also Comrade Kandinsky, the founder of abstract art. Since abstractionism has not bypassed the products of the direction of UI, we will dwell on it in more detail.
Kandinsky came to abstract art not immediately, he suffered for a long time, he thought. But to realize it pushed the work of the Impressionists. In particular, the work of Monet "Haystack".
Unnatural paints, which are not found in nature, affected perception more strongly than natural colors. Kandinsky realized: if you can give up natural colors, then why not go ahead and not give up natural forms. Realistic change to abstract.
A classic of abstract UI can be considered Metro-design. In contrast to iOS natural iconography, there are some different colored tiles.
Whether consciously, like Kandinsky, or not, but the developers of the Metro concept came from nature to abstraction. Most likely, this is an accident, otherwise the market would be replete with many examples of such a construction of UI. For example, colored circles or Damien Hirst pills would look good.
The concept of abstractionism in the design of user interfaces is currently not fully disclosed. It can be said that Metro developers only opened the door to a new world, but others are not in a hurry to use it. It's all about skevomorphism. Deeply ingrained in the minds of developers, he does not allow to open this door widely, as they simply do not see it point-blank, it looks painfully unnatural for them.
It is also necessary to remove the blinders and get out of a deep rut, where nothing is visible, except for the natural ass "camel loaded with different trash" and creating this rut - how new worlds will open - from abstract forms to formless, worlds of pure information.
Abstractionism in design versus naturalism is, of course, a movement towards minimalism. But to what extent can you reach, continuing this movement? What are the limits 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 is often the case, and take the images of Monet's masterpiece as content.
Well, how? See our UI? Not?! And he is! The pixel is so small that it merges with the background and can not provide an acceptable level of human communication. A pixel interface may be suitable for robots, but not for humans.
Thus, the subscriber GUI must be larger than the pixel. But how much? And in general, where is the line of minimalism, after which we lose the possibility of normal communication?
To try to find this line, we propose to move from the maximum possible UI in size towards the minimum, cutting off all unnecessary along the way.
The maximum area of the UI is limited to the work area. Consider the maximum UI image that takes up 100% of the screen. Take as such an image all the same masterpiece of Monet. And let when you click on a haystack should perform some function.
As you can see, the user does not receive any information telling him what to do to perform the function. Although the functional area of the UI - stack - makes up almost a third of the screen, the user has no idea 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 its ability to transmit information useful for communication is comparable to the minimum one consisting of one pixel. It's all about entropy.
The higher the entropy, the less the user understands what is happening. Chaos. The visual flow is large, but empty; the entire volume of information transmitted is dissipated. Efficiency is low. The higher the entropy UI, the lower the efficiency of the interface.
Entropy or uncertainty indicator UI is a conditional indicator, individual for each, as it is a characteristic of perception. For example, an interface made in colors that do not distinguish between color-blind people will have greater entropy for them, unlike other people. The entropy of UI can only be determined empirically.
But back to the example where the UI is designed as an image that takes up 100% of the screen. It is enough for us to write an explanation in the right place - and the situation changes drastically.
Immediately it became clear where to press. With this inscription we have sharply reduced the entropy. There is nothing more specific than text.
If you reject the image itself (form) and leave only the text, the quality of communication will not change, but the interface will involve only a few pixels of the screen, which are reserved for the inscription. The lapidary UI, the higher its efficiency.
Monet's picture in the interface is useless. Although she is a great work of fine art, it is not a reason to push it into all places. Who wants to look at Monet - 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 information useful for communication as text without icons, then why leave icons? For what? To promote the creations of designers to the masses? But above, we rightly denied this to Monet himself, pointing out that the interface is not an art gallery.
We fix what was said by example. As content for the background, we take the same stacks, and as the UI, we consider two options - with icons in the form of Hirst 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 the extreme case, in the interface, you can use contour drawings, which essentially can be considered hieroglyphs.
Option 2
The second option with a textual UI looks better, but the composition is spoiled by a uniform distribution of the text. This state of physics is called thermal death. But this is a fixable task, 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 in order to achieve a new sounding composition - he called the position in the center a soundless point) or by means of animation (you need to be extremely careful in order to avoid epilepsy). In both cases, the equilibrium soundlessness of the composition is disturbed, and positive tension appears, which is clearly perceived by human perception.
As shown below, all information is grouped and occupies a minimum of space, leaving the user the right to contemplate content when the UI is enabled. Also in this example, you can see, as soon as due to the offset, you can select the selected item, securing 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 the right font, harmoniously combined with the image, together forms a whole. If you try, you can count on the effect of resonance, when the effect of perception on the result of text overlay on the content will be several times higher than separately.
UI without forms, consisting only of text, is a bold trend of modern times. At the same time, the interface using an alphabet-based language is more minimalist than pictograms. Version for robots - UI using a binary code.
Get rid of forms with extra graphic information, parasitic on the user's attention, cut off all unnecessary, send the form to the garbage, only deal with text. The art of calligraphy and typography to help you. Hence the name of the concept - Typographic UI.
Now the task of building an interface comes down to creating the desired text composition in the workspace. At the same time, the same compositional solution may differ significantly in terms of visual impact on the user due to selection of font combinations. Fonts play the role of colors, set the mood and style. Calligraphy is the main tool of the artist in such a UI.
There are no universal solutions suitable for solving all problems. There is no Holy Grail, it is a consequence of the Gödel incompleteness theorems and the Tarski theorem on the inexpressibleness of truth. But in the class of interfaces for managing content viewing, our approach is able to perform any work.
Concept 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 the exhibition CSTB-2018.
For those who did not find the UI of the 1st pixel. Hint.
Until recently, all user interface concepts (except for the command line) it was possible to understand the design of the form elements used in the interface. It is about the shapes of buttons, menus, windows and any other frames. The appearance of any UI was entirely determined by the visualization of these same forms, and the interface style was determined solely by the approaches to the image of these forms.
Natural UI
Classics of the genre - style iOS. The appearance of this interface is determined primarily by the shape of the icons. Iconographic canon iOS lies in the fact that the image of the form symbolizes the inner content as much as possible. You see the lens - it means the camera will start after the click, the gear - it means inside the setting. It is like academic pictorial realism: I see what I see. The appearance corresponds to the content, ranging from cave paintings. Only the image technique is improved, realism increases.
')
The great Malevich called this style the art of the savage: "Shame on them ..." and strongly urged him to give up: "The world of meat and bone must go."
Kandinsky
Malevich is not the only revolutionary who challenged classical art. It is worth noting also Comrade Kandinsky, the founder of abstract art. Since abstractionism has not bypassed the products of the direction of UI, we will dwell on it in more detail.
Kandinsky came to abstract art not immediately, he suffered for a long time, he thought. But to realize it pushed the work of the Impressionists. In particular, the work of Monet "Haystack".
Unnatural paints, which are not found in nature, affected perception more strongly than natural colors. Kandinsky realized: if you can give up natural colors, then why not go ahead and not give up natural forms. Realistic change to abstract.
Abstract UI
A classic of abstract UI can be considered Metro-design. In contrast to iOS natural iconography, there are some different colored tiles.
Whether consciously, like Kandinsky, or not, but the developers of the Metro concept came from nature to abstraction. Most likely, this is an accident, otherwise the market would be replete with many examples of such a construction of UI. For example, colored circles or Damien Hirst pills would look good.
The concept of abstractionism in the design of user interfaces is currently not fully disclosed. It can be said that Metro developers only opened the door to a new world, but others are not in a hurry to use it. It's all about skevomorphism. Deeply ingrained in the minds of developers, he does not allow to open this door widely, as they simply do not see it point-blank, it looks painfully unnatural for them.
It is also necessary to remove the blinders and get out of a deep rut, where nothing is visible, except for the natural ass "camel loaded with different trash" and creating this rut - how new worlds will open - from abstract forms to formless, worlds of pure information.
Shapeless design
Abstractionism in design versus naturalism is, of course, a movement towards minimalism. But to what extent can you reach, continuing this movement? What are the limits 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 is often the case, and take the images of Monet's masterpiece as content.
Well, how? See our UI? Not?! And he is! The pixel is so small that it merges with the background and can not provide an acceptable level of human communication. A pixel interface may be suitable for robots, but not for humans.
Thus, the subscriber GUI must be larger than the pixel. But how much? And in general, where is the line of minimalism, after which we lose the possibility of normal communication?
To try to find this line, we propose to move from the maximum possible UI in size towards the minimum, cutting off all unnecessary along the way.
The maximum area of the UI is limited to the work area. Consider the maximum UI image that takes up 100% of the screen. Take as such an image all the same masterpiece of Monet. And let when you click on a haystack should perform some function.
As you can see, the user does not receive any information telling him what to do to perform the function. Although the functional area of the UI - stack - makes up almost a third of the screen, the user has no idea 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 its ability to transmit information useful for communication is comparable to the minimum one consisting of one pixel. It's all about entropy.
The higher the entropy, the less the user understands what is happening. Chaos. The visual flow is large, but empty; the entire volume of information transmitted is dissipated. Efficiency is low. The higher the entropy UI, the lower the efficiency of the interface.
Entropy or uncertainty indicator UI is a conditional indicator, individual for each, as it is a characteristic of perception. For example, an interface made in colors that do not distinguish between color-blind people will have greater entropy for them, unlike other people. The entropy of UI can only be determined empirically.
But back to the example where the UI is designed as an image that takes up 100% of the screen. It is enough for us to write an explanation in the right place - and the situation changes drastically.
Immediately it became clear where to press. With this inscription we have sharply reduced the entropy. There is nothing more specific than text.
If you reject the image itself (form) and leave only the text, the quality of communication will not change, but the interface will involve only a few pixels of the screen, which are reserved for the inscription. The lapidary UI, the higher its efficiency.
Monet's picture in the interface is useless. Although she is a great work of fine art, it is not a reason to push it into all places. Who wants to look at Monet - 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 information useful for communication as text without icons, then why leave icons? For what? To promote the creations of designers to the masses? But above, we rightly denied this to Monet himself, pointing out that the interface is not an art gallery.
We fix what was said by example. As content for the background, we take the same stacks, and as the UI, we consider two options - with icons in the form of Hirst 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 the extreme case, in the interface, you can use contour drawings, which essentially can be considered hieroglyphs.
Option 2
The second option with a textual UI looks better, but the composition is spoiled by a uniform distribution of the text. This state of physics is called thermal death. But this is a fixable task, 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 in order to achieve a new sounding composition - he called the position in the center a soundless point) or by means of animation (you need to be extremely careful in order to avoid epilepsy). In both cases, the equilibrium soundlessness of the composition is disturbed, and positive tension appears, which is clearly perceived by human perception.
As shown below, all information is grouped and occupies a minimum of space, leaving the user the right to contemplate content when the UI is enabled. Also in this example, you can see, as soon as due to the offset, you can select the selected item, securing 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 the right font, harmoniously combined with the image, together forms a whole. If you try, you can count on the effect of resonance, when the effect of perception on the result of text overlay on the content will be several times higher than separately.
UI without forms, consisting only of text, is a bold trend of modern times. At the same time, the interface using an alphabet-based language is more minimalist than pictograms. Version for robots - UI using a binary code.
Get rid of forms with extra graphic information, parasitic on the user's attention, cut off all unnecessary, send the form to the garbage, only deal with text. The art of calligraphy and typography to help you. Hence the name of the concept - Typographic UI.
Now the task of building an interface comes down to creating the desired text composition in the workspace. At the same time, the same compositional solution may differ significantly in terms of visual impact on the user due to selection of font combinations. Fonts play the role of colors, set the mood and style. Calligraphy is the main tool of the artist in such a UI.
There are no universal solutions suitable for solving all problems. There is no Holy Grail, it is a consequence of the Gödel incompleteness theorems and the Tarski theorem on the inexpressibleness of truth. But in the class of interfaces for managing content viewing, our approach is able to perform any work.
Concept 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 the exhibition CSTB-2018.
PS
For those who did not find the UI of the 1st pixel. Hint.
Source: https://habr.com/ru/post/453066/
All Articles