Grundlegende UI / UX-Muster

In der Welt gibt es viele Artikel darüber, wie man die Benutzeroberfläche erstellt. Alle von ihnen sind mit nützlichen Tipps für verschiedene Situationen gefüllt: Hier brauchen Sie einen roten Knopf, es sollte eine solche Animation geben, und so weiter. Es können nicht alle Situationen beschrieben werden, es gibt einfach unendlich viele. Wenn Sie jedoch die Grundprinzipien des Schnittstellendesigns verstehen, werden diese Tipps nicht mehr benötigt. Die Hauptsache ist zu verstehen, warum diese Tipps funktionieren und wie der Endbenutzer arbeitet. Und der Benutzer ist eine Person mit all ihren Funktionen.

In diesem Artikel werde ich versuchen zu beschreiben, wie das menschliche Gehirn funktioniert und wie es im Interface-Design verwendet wird.


Ein Muster ist ein sich wiederholendes Muster, das in verschiedenen Lebensbereichen auftreten kann.

In unserer modernen Welt voller Technologie ist der Mensch einem Höhlenmenschen immer noch sehr ähnlich. Die Evolution hält nicht mit dem technologischen Prozess Schritt, und wir Menschen sind gezwungen, in der modernen Welt mit einer Reihe von Gewohnheiten und Reflexen zu leben, die wir seit der Antike verlassen haben. All dies stört manchmal, aber mit einem richtigen Verständnis von uns selbst kann dies zu Gunsten gewendet werden.



Betrachten Sie also die Aufgabe: die für eine Person bequemste Benutzeroberfläche zu erstellen. Was bedeutet es am bequemsten? Dies bedeutet, dass eine Person, die diese Schnittstelle verwendet, ihre Aufgaben so effizient wie möglich löst. Je mehr ein Mensch in einer Zeiteinheit schafft und je besser seine Arbeit ist, desto besser. Sie können diesen Prozess als Austausch menschlicher Energie gegen nützliche Arbeit betrachten.

Der entscheidende Punkt hierbei sind die Energiekosten. Und hier lohnt es sich immer noch, die Besonderheiten eines Menschen und seines Gehirns zu bedenken. Unser Gehirn verbraucht viel Energie und speichert sie wie alle anderen Körperteile. Betrachten Sie kurz die Arbeit des Gehirns.

Menschliches Gehirn




Wir wissen bereits viel über das Gehirn, aber bei weitem nicht alles. Das aktuelle Wissen ist jedoch ausreichend, um den Ansatz für das Interface-Design zu verbessern. Das menschliche Gehirn besteht also aus vielen Neuronen und den Verbindungen zwischen ihnen. Unsere Gedanken, Erinnerungen, Reflexe - all dies sind elektrochemische Prozesse zwischen Neuronen. Um etwas zu sehen, bekommen wir zuerst ein Signal von der Netzhaut des Auges, dann wird dieses Signal an einen bestimmten Bereich des Gehirns gesendet, abhängig vom Signal werden bestimmte Neuronen erregt, die das Folgende und das Nächste anregen, und letztendlich werden die Zonen von Neuronen, die dem entsprechen, was sie sehen, im Gehirn aktiv Bild. Wie aus diesem langen Satz hervorgeht, ist der Prozess sehr komplex und energieintensiv.

Alle unsere Gedanken, Appelle an das Gedächtnis sind alle Ausgaben von Energie. Das heißt, der Benutzer muss die Benutzeroberfläche verwenden, um so wenig wie möglich zu denken. Hier wäre es möglich zu beenden. Dies ist eine grundlegende Metrik für die Wirksamkeit von Schnittstellen. Trotzdem ist dieser Rat ziemlich schwer zu interpretieren. Deshalb vertiefen wir uns weiter. Wie kann man die Benutzeroberfläche zum Nachdenken bringen? Welche Funktionen des Gehirns nutzen?

Stärke der Gewohnheit




Es gibt einen solchen Ausdruck: Eine Person ist ein Bündel von Gewohnheiten. Darin steckt viel Wahres. Wie bereits erwähnt, ist das Gehirn eine Ansammlung von Neuronen. Neuronales Netz, einfach ausgedrückt. Und dieses neuronale Netz wird ständig angepasst und trainiert. Eine neue Aufgabe erfordert zunächst viel Energie, da sich die notwendigen Verbindungen noch nicht gebildet haben und unser Gehirn nicht trainiert ist. Aber jedes Mal, wenn es sich mehr und mehr anpasst, wird immer weniger Energie verbraucht. Letztendlich erscheinen die optimalsten Beziehungen für diese Aufgabe. Dies ist eine Gewohnheit oder Fähigkeit.

Dies kann beim Entwerfen von Schnittstellen verwendet werden. Dies ist wahrscheinlich nicht das erste Mal, dass ein Benutzer einen Computer gesehen hat und möglicherweise bereits etwas Ähnliches wie Ihr Programm oder Teile davon gesehen hat. Aber es kommt so oft vor, dass Entwickler das Rad neu erfinden - fertige Schnittstellenmuster neu erfinden. Jeder möchte ein Stück von sich selbst investieren und sein kreatives Potenzial zeigen, aber das Wichtigste ist, es nicht zu übertreiben.

Daher ist hier ein sehr wichtiges Prinzip: Verwenden Sie gängige zuvor erfundene Lösungen. Es funktioniert sehr einfach, der Benutzer sieht die Benutzeroberfläche, erkennt darin etwas Ähnliches, das er zuvor verwendet hat, und kann bereits raten, was als nächstes zu tun ist.

Zum Beispiel, um Dateien zu speichern. Es klingt kitschig, aber manchmal entwickeln Entwickler ihre eigenen Methoden zum Speichern von Dateien. Obwohl es für eine solche Aufgabe seit langem allgemein akzeptierte Verhaltensmuster gibt. Wenn jemand Ihr Problem bereits gelöst hat und diese Lösung auch für andere Benutzeroberflächen verwendet wird, sollten Sie sich diese Lösung genauer ansehen und etwas Ähnliches tun.

Antike Instinkte




Zusätzlich zu den erworbenen Gewohnheiten hat eine Person angeborene Gewohnheiten. Häufig werden sie Instinkte genannt. Dies sind solche Sofortreaktionen des Nervensystems auf einige äußere Krankheitserreger. Während der Evolution erschienen sie und verschanzten sich, weil sie helfen, zu überleben. Ich sah einen sich plötzlich bewegenden Busch - vielleicht sitzt dort ein Tiger, der dich töten will - es gibt Angst, du musst dringend deine Beine wegnehmen. Ich habe einen unnatürlich hellen Frosch gesehen - es ist am besten, ihn nicht zu berühren. Usw.

Natürlich sitzt der Tiger nicht in Ihrem Programm und wenn der Dialog plötzlich erscheint, wird der Benutzer nicht springen und rennen. Dies beeinträchtigt jedoch die emotionale Stabilität. Kurz gesagt, alle möglichen äußeren Reize in Form von laut sprechenden Kollegen, zu wenig leckerem Kaffee usw. beeinträchtigen die emotionale Stabilität. Aus diesem Grund fangen wir an, schlechter zu denken. Wir verlassen den Fließzustand, wir müssen uns immer mehr auf die Aufgabe konzentrieren. Hinzu kommt, wie das Interface aussieht und sich verhält.

Wenn die Benutzeroberfläche nicht sehr attraktiv aussieht, erscheinen ständig einige störende Elemente. Wenn „etwas schief geht“, nehmen wir dies instinktiv wahr, was sich auf unsere Produktivität auswirkt. Was können wir dagegen tun? Diese Reizstoffe müssen vermieden werden.

Verwenden Sie zunächst die Theorie der Farbharmonie . Die richtigen Farben geben ein Gefühl der Ruhe. Es gibt viele Artikel darüber, wie man die richtige Palette für die Augen auswählt. Alle basieren auf der Theorie des Farbkreises. Nach bestimmten Mustern werden harmonisierende Farben berechnet, die für die Person angenehm sind und keine Irritationen verursachen.

Zweitens verwenden Sie flüssige und realistische Animationen . Wir mögen es nicht wirklich, wenn plötzlich etwas auftaucht oder verschwindet. Und merke immer unnatürliche Bewegungen. Wenn wir die Tür öffnen, beschleunigt sie zuerst und wird dann langsamer. Verwenden Sie realistische Bewegungsfunktionen mit nichtlinearen Funktionen.

Gehirn RAM




Unser Gehirn ist nicht allmächtig und wir können nicht gleichzeitig an alles denken. Die Menge der Dinge, die wir gleichzeitig im Auge behalten können, variiert irgendwo zwischen 5 und 7. Dies wird als Arbeitsmenge des Gehirngedächtnisses bezeichnet. Im Prinzip sehr ähnlich zu Computer-RAM. Um über etwas nachzudenken, müssen Sie es aus dem Langzeitgedächtnis extrahieren, dann bearbeiten und in das Langzeitgedächtnis zurückführen. Natürlich ist dieser Prozess sehr viel komplizierter, aber der Einfachheit halber nehmen wir es so. Das Wichtigste ist, dass das Arbeitsvolumen begrenzt ist. Und er ist sehr klein. Wir können nicht an zehn Entitäten gleichzeitig denken. Und je weniger wir bedenken müssen, desto weniger Energie wird für den Denkprozess aufgewendet.

Dabei ist noch zu berücksichtigen, dass Energie und Zeit für den Kontextwechsel aufgewendet werden. Wenn Sie zuerst über eine Sache nachdenken müssen, dann über eine andere, dann wieder über die erste, dann über etwas anderes, wird viel Energie für einen permanenten Neustart des Arbeitsspeichers aufgewendet.

Was ist dagegen zu tun? Grundsätzlich kommt es natürlich auf die Besonderheiten des Programms an. Es ist notwendig, den Fokus des Benutzers zu überwachen . Die Aufgabe sollte linear sein. Wenn beispielsweise ein Element selten verwendet wird, können Sie es als Standard festlegen und zusätzliche Einstellungen vornehmen. Alles muss getan werden, damit Sie nicht ständig die Aufmerksamkeit wechseln müssen.

Es gibt jedoch allgemeinere Ratschläge, wie man die Aufmerksamkeit einer Person auf dasselbe lenken kann: Dies sind geometrische Muster . Nehmen Sie zum Beispiel eine Tabelle oder Liste. Warum sind sie leicht zu lesen? Weil wir zuerst das "Modell" der Daten in den Speicher laden. Wir wissen, dass in dieser Spalte solche Werte und in diesem. Und die spätere Wahrnehmung der Daten ist recht einfach, da wir wissen, wo was als nächstes passieren wird.

Im Allgemeinen kann dies als geometrische Korrektheit der Schnittstelle bezeichnet werden. Gemeinsame Dinge werden zu einem Block zusammengefasst, die Hauptblöcke befinden sich oben und links, werden nach rechts und unten geordnet, wenn sie wichtig werden oder wenn die Aufgabe voranschreitet. Es ist wichtig, Symmetrie zu berücksichtigen, damit das Gehirn Blockaden leichter erkennen kann. Es ist auch wichtig, frühere Erfahrungen zu berücksichtigen: Ähnliche Teile der Programmfunktionalität sollten in Bezug auf die Benutzeroberfläche ähnliche geometrische Muster aufweisen, damit der Benutzer bereits eine Vorstellung davon hat, mit was er arbeiten soll.

Mustererkennung




Das Arbeiten mit einer grafischen Oberfläche umfasst die Mustererkennung. Und dabei kann man auch jemandem helfen. Betrachten Sie einen vereinfachten Algorithmus, wie wir verstehen, was wir sehen. Dieser Vorgang ähnelt in gewisser Weise der Erkennung von beispielsweise Buchstaben durch neuronale Computernetze.

Erstens erhalten wir von den Augen ein Signal darüber, welche Zapfen in der Netzhaut durch ein bestimmtes Farbspektrum erregt werden. Grob gesagt, welche Pixel welche Farbe haben. Aus dieser Menge von Informationen wird zuerst die Farbe zugeordnet. Schwarz ist anders als Weiß. Dies geschieht durch eine Gruppe von Neuronen. Durch den Unterschied in der Farbe können wir einfache Bilder bestimmen: Linie, Punkt und so weiter. Dies ist bereits in einer anderen Gruppe von Neuronen beschäftigt, die mit der ersten assoziiert sind. Dann werden diese Informationen auf die nächste Ebene übertragen, wo diese Bilder verallgemeinert werden, und so weiter. Auf jeder Ebene werden Neuronen immer mehr mit den Neuronen assoziiert, die bereits unsere Erfahrung mit zuvor gesehenen Bildern speichern. Wir sahen den Buchstaben A auf einem weißen Hintergrund, hoben zuerst seine Farbe auf dem Hintergrund hervor, erkannten dann einfache Bilder - die Linien, aus denen er besteht, verglichen ihn dann mit all meinen früheren Erfahrungen, und der Buchstabe A war die maximale Übereinstimmung.

Dieser Prozess ist komplex und in mehrere Phasen unterteilt. Dies kann verwendet werden. Mit dieser Mustererkennungssequenz können Sie die Wahrnehmung der Schnittstelle vereinfachen. Also nochmal: zuerst wird die Farbe hervorgehoben, dann das Formular, dann der Inhalt des Formulars .


Diese Sequenz zeigt, dass die Erkennung des Bildes am einfachsten durch Farbe beeinflusst werden kann. Dies ist, was Lebewesen auf der Erde verwenden, um zu behaupten, wer sie sind. Es ist sofort klar, dass die rote Schlange verdammt gefährlich ist. Dies ist viel einfacher zu verstehen, als wenn darauf "gefährliche Schlange" geschrieben wäre.

Verwenden Sie Farbe, um die Benutzeroberfläche zu betonen. Verwenden Sie es, um einfache Informationen zu übermitteln: Rot - Löschen, Grün und Blau - Positiv, Weiß - Leere und Ruhe und so weiter. Aber denken Sie daran, die Hauptsache ist, es nicht zu übertreiben. Verwenden Sie eine Palette mit nur wenigen Farben.

Nach der Farbe folgt die Auswahl einfacher Bilder, erst dann deren Inhalt. Zuerst verstehen wir, dass dies ein Kreis ist, und dann verstehen wir, dass es eine Null oder der Buchstabe O ist. Daher sind Symbole besser als Text. Außerdem benötigen sie weniger Platz.

Beweglichkeit


Die Benutzeroberfläche wird über Eingabegeräte wie Tastatur, Maus oder Touchscreen vom Benutzer zurückgemeldet. Diese Funktion ist ebenfalls wichtig zu berücksichtigen. Hier ist alles einfach und basiert auf den Gesetzen der Physik. Je weniger die Bewegungen, desto besser. Je weniger Augenbewegungen, desto schneller werden Informationen wahrgenommen. Je weniger Sie die Maus bewegen und von der Maus zur Tastatur wechseln müssen, desto besser.

Hier müssen Sie jedoch noch die Funktionen des Benutzers berücksichtigen. Zum Beispiel sitzen Programmierer mit den Händen auf der Tastatur, sodass das Umschalten auf die Maus eine zusätzliche Belastung für sie darstellt. Der durchschnittliche Benutzer hält eine Hand auf der Tastatur und die andere auf der Maus. Der Designer hält den Stift mit seiner zweiten Hand. Usw. Es ist wichtig, diese Besonderheit zu berücksichtigen.

Beim Autofahren helfen auch die oben beschriebenen Tipps. Geometrische Muster reduzieren die Anzahl der Klicks und Bewegungen, reduzieren die Bewegung des Auges. Die Wiederholung dieser Muster bildet Gewohnheiten, und der Benutzer ist buchstäblich an der Maschine und bewegt den Cursor automatisch an die richtige Stelle.

Zusammenfassung


In diesem Artikel habe ich versucht, die grundlegenden Funktionen der Benutzer zu beschreiben, die beim Entwerfen einer Benutzeroberfläche berücksichtigt werden sollten. Diese Liste kann verbessert und durch Details ergänzt werden. Denn je mehr wir uns verstehen, desto besser interagieren wir miteinander

Source: https://habr.com/ru/post/de476532/


All Articles