Typografische Benutzeroberfläche - eine neue Methode zur Entwicklung von Benutzeroberflächen

Die typografische Benutzeroberfläche ist ein neues Designkonzept, dessen Philosophie in drei Worten ausgedrückt wird: Die Benutzeroberfläche besteht aus Text.

Bis vor kurzem alle Benutzeroberflächenkonzepte (mit Ausnahme der Befehlszeile) könnte durch das Design der Formen von Elementen verstanden werden, die in der Schnittstelle verwendet werden. Wir sprechen über die Formen von Schaltflächen, Menüs, Fenstern und anderen Rahmen. Das Erscheinungsbild einer Benutzeroberfläche wurde vollständig durch die Visualisierung dieser Formulare bestimmt, und der Stil der Benutzeroberfläche wurde ausschließlich durch die Herangehensweisen an das Bild dieser Formulare bestimmt.

Natürliche Benutzeroberfläche

Klassiker des Genres - iOS-Stil. Das Erscheinungsbild dieser Benutzeroberfläche wird hauptsächlich durch die Form der Symbole bestimmt. Der Icon-Painting-Kanon von iOS besagt, dass das Bild des Formulars den internen Inhalt maximal symbolisiert. Sie sehen das Objektiv - es bedeutet, dass nach dem Klicken die Kamera startet, das Zahnrad - es bedeutet innerhalb der Einstellung. Dies ähnelt dem akademischen Bildrealismus: Was ich sehe, ist das, was ich schreibe. Das Aussehen entspricht dem Inhalt, beginnend mit Höhlenmalereien. Nur die Bildtechnik wird verbessert, der Realismus wird verbessert.

Der große Malewitsch nannte diesen Stil die Kunst des Wilden: "Schande über sie ..." und ermutigte ihn nachdrücklich, aufzugeben: "Die Welt von Fleisch und Knochen muss gehen."

Kandinsky

Malewitsch ist nicht der einzige Revolutionär, der sich der klassischen Kunst widersetzte. Erwähnenswert ist auch Genosse Kandinsky, der Begründer der abstrakten Kunst. Da der Abstraktionismus nicht über Produkte der UI-Richtung hinwegging, wollen wir näher darauf eingehen.

Kandinsky kam nicht sofort zum Abstraktionismus, litt lange, dachte nach. Aber die Arbeit der Impressionisten brachte ihn ins Bewusstsein. Insbesondere Monets Arbeit „Haystack“.



Unnatürliche Farben, die in der Natur nicht vorkommen, beeinflussten die Wahrnehmung stärker als natürliche Farben. Kandinsky verstand: Wenn Sie natürliche Blumen aufgeben können, warum nicht weiter gehen und natürliche Formen nicht aufgeben? Realistischer Wechsel zum Abstrakten.

Abstrakte Benutzeroberfläche

Die klassische Benutzeroberfläche kann als Metro-Design betrachtet werden. Im Gegensatz zur natürlichen Symbolmalerei von iOS gibt es einige verschiedenfarbige Kacheln.

Ob bewusst wie Kandinsky oder nicht, aber die Entwickler des Metro-Konzepts sind von der Natur zur Abstraktion gekommen. Dies ist höchstwahrscheinlich ein Unfall, da der Markt sonst voller Beispiele für eine solche UI-Konstruktion wäre. Zum Beispiel würden farbige Kreise oder Pillen von Damien Hirst gut aussehen.



Das Konzept des Abstraktionismus bei der Gestaltung von Benutzeroberflächen ist derzeit nicht vollständig offenbart. Wir können sagen, dass Metro-Entwickler nur die Tür zu einer neuen Welt geöffnet haben, aber andere haben es nicht eilig, sie zu nutzen. Es geht nur um Skeuomorphismus. Er ist tief in den Köpfen der Entwickler verwurzelt und lässt nicht zu, dass diese Tür weit geöffnet wird, da sie sie einfach nicht direkt sehen, sie sieht für sie wirklich unnatürlich aus.

Es lohnt sich, die Blinker zu entfernen und aus der tiefen Brunft herauszukommen, wo nichts sichtbar ist, außer dem natürlichen Esel des „Kamels, beladen mit unterschiedlichem Müll“, und diese Brunft - wenn sich neue Welten öffnen - von abstrakten Formen zu formlosen Welten reiner Information zu schaffen.

Formloses Design

Abstraktionismus im Design im Vergleich zum Naturalismus ist natürlich eine Bewegung in Richtung Minimalismus. Aber an welche Grenzen kann man gehen, wenn man diese Bewegung fortsetzt? Was sind die Grenzen der minimalen Benutzeroberfläche? Ist es möglich, die Form komplett aufzugeben und was bleibt am Ende?

Der Extremfall der minimalen Benutzeroberfläche ist ein Pixel, er kann nicht kleiner sein. Angenommen, unsere Benutzeroberfläche besteht aus diesem Pixel. Nach dem Klicken auf dieses Pixel sollte eine Funktion ausgeführt werden. Platzieren wir nun unsere Benutzeroberfläche über dem Inhalt, was häufig vorkommt, und nehmen die Bilder von Monets Meisterwerk als Inhalt.



Und wie? Sehen Sie unsere Benutzeroberfläche? Nein?! Aber er ist es! Das Pixel ist so klein, dass es mit dem Hintergrund verschmilzt und für eine Person kein akzeptables Kommunikationsniveau bieten kann. Die Pixelschnittstelle ist möglicherweise für Roboter geeignet, nicht jedoch für Menschen.

Daher muss die grafische Benutzeroberfläche größer als ein Pixel sein. Aber wie viel? Wie auch immer, wo ist die Linie des Minimalismus, nach der wir die Möglichkeit einer normalen Kommunikation verlieren?

Um diese Zeile zu finden, empfehlen wir, von der maximal möglichen Benutzeroberfläche auf die minimale zu wechseln und dabei alles Unnötige abzuschneiden.

Der maximale Bereich der Benutzeroberfläche ist auf den Arbeitsbereich beschränkt. Betrachten Sie als das maximale UI-Bild, das 100% des Bildschirms einnimmt. Nehmen wir das gleiche Meisterwerk von Monet als solches Bild. Und lassen Sie eine Funktion ausführen, wenn Sie auf den Heuhaufen klicken.

Wie Sie sehen, erhält der Benutzer keine Informationen darüber, was zu tun ist, um die Funktion auszuführen. Obwohl der Funktionsbereich der Benutzeroberfläche - Stack - fast ein Drittel des Bildschirms ausmacht, kennt der Benutzer diese Funktionalität nicht, es gibt keinen Hinweis. Es gibt viele visuelle Informationen, aber es ist nicht klar, wie sie zu interpretieren sind.

In unserem Fall ist die maximale Benutzeroberfläche in Bezug auf die Fähigkeit, für die Kommunikation nützliche Informationen zu übertragen, mit der minimalen Benutzeroberfläche mit einem Pixel vergleichbar. Es geht nur um Entropie.

Je höher die Entropie, desto weniger versteht der Benutzer, was passiert. Chaos. Der visuelle Strom ist groß, aber leer, die gesamte übertragene Informationsmenge ist verstreut. Der Wirkungsgrad ist gering. Je höher die Entropie der Benutzeroberfläche ist, desto geringer ist die Effizienz der Schnittstelle.

Die Entropie oder der UI-Unsicherheitsindikator ist ein bedingter Indikator, der für jeden individuell ist, da dies ein Merkmal der Wahrnehmung ist. Beispielsweise hat eine Schnittstelle in Farben, die Farbenjalousien nicht unterscheiden können, im Gegensatz zu anderen Personen eine große Entropie. Es ist möglich, die Entropie der Benutzeroberfläche nur empirisch zu bestimmen.

Aber zurück zu dem Beispiel, in dem die Benutzeroberfläche in Form eines Bildes erstellt wird, das 100% des Bildschirms einnimmt. Es reicht uns, eine Erklärung an der richtigen Stelle zu schreiben - und die Situation ändert sich radikal.



Es wurde sofort klar, wo man ernten sollte. Mit dieser Inschrift haben wir die Entropie stark reduziert. Es gibt nichts Spezifischeres als Text.

Wenn Sie gleichzeitig das Bild selbst (Formular) verwerfen und nur den Text belassen, ändert sich die Kommunikationsqualität nicht. Gleichzeitig verwendet die Benutzeroberfläche nur wenige für die Beschriftung zugewiesene Bildschirmpixel. Je lapidarer UI, desto effizienter ist es.

Monets Bild auf der Benutzeroberfläche ist nutzlos. Obwohl es ein großartiges Kunstwerk ist, ist dies nicht ein Grund, es an allen Orten zu schieben. Wer sich Monet ansehen will, geht zur Ausstellung, kauft ein Buch mit Reproduktionen oder schaut sich einen Dokumentarfilm an.

Ähnliches gilt für andere Formen, z. B. Symbole. Wenn Symbole mit Text dieselben nützlichen Informationen für die Kommunikation enthalten wie Text ohne Symbole, warum sollten Sie dann die Symbole belassen? Um was? Die Kreationen von Designern in der Masse bekannt machen? Aber oben haben wir diesen Monet zu Recht selbst abgelehnt und darauf hingewiesen, dass die Benutzeroberfläche keine Bildergalerie ist.

Wir korrigieren das Gesagte anhand eines Beispiels. Als Hintergrundinhalt verwenden wir dieselben Stapel, und als Benutzeroberfläche betrachten wir zwei Optionen - mit Symbolen in Form von Hurst-Kreisen mit Text und nur Text.


Variante 1

Im ersten Fall gibt es ein Gefühl des schlechten Geschmacks. Die Addition von zwei Meisterwerken ergibt kein Plus, sondern ein Minus. Diese Regel funktioniert beim Überlagern von Bildern. Dies ist denjenigen bekannt, die mit Schnittstellen arbeiten, die auf Inhalten basieren (z. B. in IPTV). In extremen Fällen kann die Schnittstelle Konturzeichnungen verwenden, die im Wesentlichen als Hieroglyphen betrachtet werden können.


Option 2

Die zweite Option mit einer Text-Benutzeroberfläche sieht besser aus, aber die Komposition wird durch die gleichmäßige Verteilung des Textes beeinträchtigt. Dieser Zustand in der Physik wird als thermischer Tod bezeichnet. Die Angelegenheit ist jedoch behebbar. Das Problem kann auf verschiedene Arten gelöst werden: durch Verschieben oder Transformieren der Inschriften (nach dem Beispiel, wie Kandinsky einen Punkt aus der Mitte gezogen hat, um einen neuen Klang für die Komposition zu erzielen - er nannte die Position in der Mitte einen stillen Punkt) oder durch Animation (Sie müssen äußerst vorsichtig sein) um Anfälle von Epilepsie zu vermeiden). In beiden Fällen wird das Gleichgewicht der lautlosen Kompositionen gestört, es tritt eine positive Spannung auf, die durch die menschliche Wahrnehmung deutlich erfasst wird.

Wie unten gezeigt, sind alle Informationen gruppiert und nehmen ein Minimum an Speicherplatz ein, sodass der Benutzer das Recht hat, den Inhalt beim Einschalten der Benutzeroberfläche zu betrachten. Dieses Beispiel zeigt auch, wie Sie aufgrund des Versatzes das ausgewählte Element auswählen und die Auswahl mit einem zusätzlichen Hashtag korrigieren können.


Option 3

Vergleichen Sie dies mit Option 1. Sehen Sie sich an, wie viele unnötige Informationen wir entfernt haben, ohne Informationen zu verlieren, und wie viel einfacher die Benutzeroberfläche aussieht.

Der Text über dem Inhalt ähnelt dem Cover eines Hochglanzmagazins, in dem eine korrekt ausgewählte Schriftart, die harmonisch mit dem Bild kombiniert wird, zusammen ein einziges Ganzes bildet. Wenn Sie es versuchen, können Sie sich auf den Resonanzeffekt verlassen, wenn der Wahrnehmungseffekt aus dem Ergebnis der Überlagerung von Text auf den Inhalt um ein Vielfaches höher ist als einzeln.

Eine Benutzeroberfläche ohne Formulare, die nur aus Text besteht, ist ein kühner Trend unserer Zeit. Darüber hinaus ist eine Schnittstelle, die eine alphabetische Sprache verwendet, minimaler als Piktogramme. Die Version für Roboter ist UI mit Binärcode.

Entfernen Sie Formulare mit unnötigen grafischen Informationen, die die Aufmerksamkeit des Benutzers beeinträchtigen, schneiden Sie alles Unnötige ab, senden Sie das Formular in den Papierkorb und erstellen Sie nur den Text. Die Kunst der Kalligraphie und Typografie hilft Ihnen. Daher der Name des Konzepts - Typografische Benutzeroberfläche.

Jetzt ist die Aufgabe, eine Schnittstelle zu erstellen, darauf beschränkt, die gewünschte Komposition des Textes im Arbeitsbereich zu erstellen. Darüber hinaus kann sich dieselbe Kompositionslösung aufgrund der Auswahl der Schriftkombinationen hinsichtlich der visuellen Wirkung auf den Benutzer erheblich unterscheiden. Schriftarten spielen die Rolle von Farben, bestimmen die Stimmung und den Stil. Kalligraphie ist das Hauptwerkzeug des Künstlers in einer solchen Benutzeroberfläche.

Es gibt keine universellen Lösungen, die zur Lösung aller Probleme geeignet sind. Es gibt keinen Heiligen Gral, dies ist eine Folge von Gödels Unvollständigkeitssätzen und Tarskis Satz über die Unaussprechlichkeit der Wahrheit. In der Klasse der Schnittstellen zum Verwalten der Anzeige von Inhalten kann unser Ansatz jedoch jede Arbeit erledigen.

Die typografische Benutzeroberfläche wurde bei ARES während der Arbeit am IPTVPORTAL-Projekt geboren. TYPOGRAPHIE - deshalb haben wir unsere Benutzeroberfläche zum interaktiven Fernsehen aufgerufen. Es wurde erstmals auf der CSTB-2018 demonstriert.

PS

Für diejenigen, die die Benutzeroberfläche ab dem 1. Pixel nicht gefunden haben. Hinweis.

Beispiele