Interface utilisateur typographique - une nouvelle façon de développer des interfaces utilisateur

L'interface utilisateur typographique est un nouveau concept de design dont la philosophie s'exprime en trois mots: l' interface est du texte.

Jusqu'à récemment, tous les concepts d'interface utilisateur (à l'exception de la ligne de commande) pourrait être compris par la conception des formes d'éléments utilisés dans l'interface. Nous parlons des formes de boutons, de menus, de fenêtres et de tout autre cadre. L'apparence de toute interface utilisateur a été entièrement déterminée par la visualisation de ces formes mêmes, et le style de l'interface a été déterminé uniquement par les approches de l'image de ces formes.

Interface utilisateur naturelle

Classiques du genre - style iOS. L'apparence de cette interface est principalement déterminée par la forme des icônes. Le canon de la peinture d'icônes d'iOS est que l'image du formulaire symbolise au maximum le contenu interne. Vous voyez l'objectif - cela signifie qu'après le déclic de l'appareil photo, l'équipement - cela signifie à l'intérieur du réglage. Ceci est similaire au réalisme pictural académique: ce que je vois est ce que j'écris. L'apparence correspond au contenu, à partir des peintures rupestres. Seule la technique de l'image est améliorée, le réalisme est amélioré.

Le grand Malevitch a appelé ce style l'art du sauvage: "Honte à eux ..." et l'a fortement encouragé à abandonner: "Le monde de la viande et des os doit disparaître."

Kandinsky

Malevitch n'est pas le seul révolutionnaire à avoir défié l'art classique. Il convient également de noter le camarade Kandinsky, fondateur de l'art abstrait. Étant donné que l'abstractionnisme n'a pas passé sous silence les produits de la direction de l'interface utilisateur, nous allons nous attarder sur elle plus en détail.

Kandinsky n'est pas venu à l'abstraction à la fois, a souffert longtemps, pensa-t-il. Mais le travail des impressionnistes l'a poussé à prendre conscience. En particulier, le travail de Monet «Haystack».



Les couleurs non naturelles, qui ne se trouvent pas dans la nature, ont affecté la perception plus fort que les couleurs naturelles. Kandinsky a compris: si vous pouvez abandonner les fleurs naturelles, alors pourquoi ne pas aller plus loin et ne pas abandonner les formes naturelles. Changement réaliste d'abstrait.

Interface utilisateur abstraite

L'interface utilisateur classique peut être considérée comme Metro-design. Contrairement à la peinture d'icônes naturelles d'iOS, il existe des carreaux de couleurs différentes.

Que ce soit consciemment, comme Kandinsky, ou non, mais les développeurs du concept Metro sont passés de la nature à l'abstraction. Il s'agit très probablement d'un accident, sinon le marché serait rempli de nombreux exemples d'une telle construction d'interface utilisateur. Par exemple, des cercles colorés ou des pilules de Damien Hirst auraient fière allure.



Le concept d'abstractionnisme dans la conception des interfaces utilisateur n'est actuellement pas entièrement divulgué. Nous pouvons dire que les développeurs de Metro n'ont ouvert la porte qu'à un nouveau monde, mais d'autres ne sont pas pressés de l'utiliser. Tout tourne autour du skeuomorphisme. Profondément enraciné dans l'esprit des développeurs, il ne permet pas que cette porte soit grande ouverte, car ils ne la voient tout simplement pas à blanc, cela ne leur semble pas naturel.

Cela vaut la peine de retirer les oeillères et de sortir de l'ornière profonde, où rien n'est visible, à l'exception de l'âne naturel du «chameau, chargé de déchets différents» et de créer cette ornière - à mesure que de nouveaux mondes s'ouvrent - des formes abstraites aux mondes informe et sans forme.

Conception sans forme

L'abstractionnisme dans le design par rapport au naturalisme est, bien sûr, un mouvement vers le minimalisme. Mais à quelles limites peut-on aller en poursuivant ce mouvement? Quelles sont les limites de l'interface utilisateur minimale? Est-il possible d'abandonner complètement le formulaire et que restera-t-il finalement?

Le cas extrême de l'interface utilisateur minimale est d'un pixel, il ne peut pas être inférieur. Supposons que notre interface utilisateur se compose de ce pixel. Après avoir cliqué sur ce pixel, une fonction doit être exécutée. Maintenant, plaçons notre interface utilisateur au-dessus du contenu, ce qui arrive souvent, et prenons les images du chef-d'œuvre de Monet comme contenu.



Comment? Voir notre interface utilisateur? Non?! Mais il l'est! Le pixel est si petit qu'il a fusionné avec l'arrière-plan et ne peut pas fournir un niveau de communication acceptable pour une personne. L'interface pixel peut convenir aux robots, mais pas aux humains.

Ainsi, l'interface utilisateur graphique doit être plus grande qu'un pixel. Mais combien? Quoi qu'il en soit, où est la ligne du minimalisme, après quoi nous perdons la possibilité d'une communication normale?

Pour essayer de trouver cette ligne, nous vous suggérons de passer de l'interface utilisateur maximale possible à la taille minimale, en supprimant tout ce qui est inutile en cours de route.

La zone maximale de l'interface utilisateur est limitée à la zone de travail. Considérez comme l'image UI maximale, qui occupe 100% de l'écran. Prenons le même chef-d'œuvre de Monet qu'une telle image. Et laissez une fonction être exécutée lorsque vous cliquez sur la botte de foin.

Comme vous pouvez le voir, l'utilisateur ne reçoit aucune information lui indiquant ce qui doit être fait pour exécuter la fonction. Bien que la zone fonctionnelle de l'interface utilisateur - pile - représente près d'un tiers de l'écran, l'utilisateur ne connaît pas cette fonctionnalité, il n'y a aucun indice. Il y a beaucoup d'informations visuelles, mais on ne sait pas comment les interpréter.

Dans notre cas, l'interface utilisateur maximale en termes de capacité à transmettre des informations utiles à la communication est comparable à celle d'un pixel minimum. Tout est question d'entropie.

Plus l'entropie est élevée, moins l'utilisateur comprend ce qui se passe. Chaos. Le flux visuel est grand, mais vide, toute la quantité d'informations transmises est dispersée. L'efficacité est faible. Plus l'entropie de l'interface utilisateur est élevée, plus l'efficacité de l'interface est faible.

L'entropie, ou indicateur d'incertitude de l'interface utilisateur, est un indicateur conditionnel, individuel pour chacun, car il s'agit d'une caractéristique de la perception. Par exemple, une interface faite dans des couleurs que les daltoniens ne peuvent pas distinguer aura une grande entropie pour eux, contrairement à d'autres personnes. Il est possible de déterminer l'entropie de l'interface utilisateur uniquement de manière empirique.

Mais revenons à l'exemple où l'interface utilisateur est réalisée sous la forme d'une image occupant 100% de l'écran. Il nous suffit d'écrire une explication au bon endroit - et la situation change radicalement.



Il est immédiatement devenu clair où récolter. Avec cette inscription, nous avons fortement réduit l'entropie. Il n'y a rien de plus précis que le texte.

Si en même temps vous jetez l'image elle-même (formulaire) et ne laissez que le texte, la qualité de la communication ne changera pas, mais en même temps, l'interface n'utilise que quelques pixels d'écran alloués à l'inscription. L'interface utilisateur lapidaire, plus son efficacité est élevée.

L'image de Monet sur l'interface est inutile. Bien que ce soit une grande œuvre d'art, ce n'est pas une raison pour la pousser partout. Celui qui veut regarder Monet ira à l'exposition, ou achètera un livre avec des reproductions, ou regardera un documentaire.

De même avec d'autres formes, par exemple, des icônes. Si les icônes avec texte contiennent les mêmes informations utiles pour la communication que le texte sans icônes, alors pourquoi laisser les icônes? Et alors? Promouvoir les créations de designers auprès des masses? Mais ci-dessus, nous avons à juste titre refusé ce Monet lui-même, soulignant que l'interface n'est pas une galerie d'images.

Nous corrigeons ce qui a été dit avec un exemple. En tant que contenu pour l'arrière-plan, nous prenons les mêmes piles, et en tant qu'interface utilisateur, nous considérons deux options - avec des icônes sous la forme de cercles Hurst avec du texte et uniquement du texte.


Option 1

Dans le premier cas, il y a une sensation de mauvais goût. L'ajout de deux chefs-d'œuvre ne donne pas un plus, mais un moins. Cette règle fonctionne lors de la superposition d'images. Ceci est bien connu de ceux qui travaillent avec des interfaces construites sur le contenu (par exemple, dans IPTV). Dans les cas extrêmes, l'interface peut utiliser des dessins de contour, qui peuvent être essentiellement considérés comme des hiéroglyphes.


Option 2

La deuxième option avec une interface utilisateur textuelle semble meilleure, mais la composition est gâchée par la distribution uniforme du texte. Cet état en physique est appelé mort thermique. Mais le problème peut être résolu, le problème peut être résolu de plusieurs manières: en déplaçant ou en transformant les inscriptions (en suivant l'exemple de la façon dont Kandinsky a fait glisser un point du centre pour obtenir un nouveau son pour la composition - il a appelé la position au centre un point silencieux) ou en utilisant une animation (vous devez être extrêmement prudent) pour éviter les crises d'épilepsie). Dans les deux cas, l'équilibre des compositions sans bruit est perturbé, une tension positive apparaît, qui est clairement capturée par la perception humaine.

Comme indiqué ci-dessous, toutes les informations sont regroupées et occupent un minimum d'espace, laissant à l'utilisateur le droit de contempler le contenu lorsque l'interface utilisateur est activée. Cet exemple montre également comment, en raison du décalage, vous pouvez sélectionner l'élément sélectionné, en fixant la sélection avec un hashtag supplémentaire.


Option 3

Comparez cela avec l'option 1. Regardez combien d'informations inutiles nous nous sommes débarrassés sans perdre d'informations, à quel point l'interface est plus simple.

Le texte au-dessus du contenu ressemble à la couverture d'un magazine sur papier glacé, où une police correctement sélectionnée, harmonieusement combinée avec l'image, forme ensemble un tout unique. Si vous essayez, vous pouvez compter sur l'effet de la résonance, lorsque l'effet de la perception du résultat de la superposition de texte sur le contenu sera plusieurs fois plus élevé qu'individuellement.

L'interface utilisateur sans formulaires, composée uniquement de texte, est une tendance audacieuse de notre temps. De plus, une interface utilisant un langage alphabétique est plus minimale que les pictogrammes. La version pour les robots est l'interface utilisateur utilisant un code binaire.

Débarrassez-vous des formulaires contenant des informations graphiques inutiles qui parasitent l'attention de l'utilisateur, supprimez tout ce qui n'est pas nécessaire, envoyez le formulaire à la poubelle, faites simplement le texte. L'art de la calligraphie et de la typographie vous aide. D'où le nom du concept - UI typographique.

Maintenant, la tâche de construire une interface se réduit à créer la composition souhaitée du texte dans l'espace de travail. De plus, la même solution de composition peut différer considérablement en termes d'impact visuel sur l'utilisateur en raison de la sélection de combinaisons de polices. Les polices jouent le rôle des couleurs, définissent l'ambiance et le style. La calligraphie est l'outil principal de l'artiste dans une telle interface utilisateur.

Il n'y a pas de solutions universelles adaptées pour résoudre tous les problèmes. Il n'y a pas de Saint Graal, c'est une conséquence des théorèmes d'incomplétude de Gödel et du théorème de Tarski sur l'inexpressibilité de la vérité. Mais dans la classe des interfaces pour gérer la visualisation de contenu, notre approche est capable de faire n'importe quel travail.

L'interface utilisateur typographique est née à ARES alors qu'elle travaillait sur le projet IPTVPORTAL. TYPOGRAPHIE - nous avons donc appelé notre interface utilisateur pour regarder la télévision interactive. Il a été présenté pour la première fois au CSTB-2018.

PS

Pour ceux qui n'ont pas trouvé l'interface du premier pixel. Indice.

Des exemples