In unserem täglichen Leben nehmen wir an Aktivitäten teil, die wir regelmäßig tun, fast automatisch und fast unveränderlich. Wir nennen diese Gewohnheiten oder professioneller „Muster“. Vorlagen helfen uns, unser Leben zu strukturieren und unsere Entscheidungsprozesse zu vereinfachen.
Das gleiche Konzept gilt für UX-Design – auch hier gibt es Vorlagen. Diese Vorlagen helfen UX-Designern, hochwertige Benutzeroberflächen zu erstellen und die Aufmerksamkeit der Benutzer zu steuern.
In diesem Artikel möchte ich einige der beliebtesten Muster im UX-Design beleuchten und erklären, wie Sie sie nutzen können, um Ihre Benutzeroberfläche benutzerfreundlicher zu gestalten. Lasst uns beginnen!
Was ist ein Modell?
In der Psychologie bezieht sich der Begriff „Muster“ oft auf eine wiederkehrende Art von Verhalten, die sich in einem bestimmten Kontext im Laufe der Zeit zeigt. Beim Interface-Design umfassen Muster Regeln und Gesetze, einschließlich kognitiver Vorurteile und Verhaltensmuster. Auch wenn sie im Design angewendet werden, haben diese Muster immer noch eine psychologische Grundlage, da Vorurteile und Regeln auf unbewussten Gedanken und Urteilen beruhen.
Gute Produkte sollten Reaktionen und Emotionen hervorrufen und gleichzeitig bestimmte Aktionen auslösen. Daher kann das Verständnis der Funktionsweise von Modellen dabei helfen, gewünschte Benutzerreaktionen hervorzurufen. Das Verständnis von Mustern ist für die Erstellung eines benutzerfreundlichen Designs, das die folgenden Kriterien erfüllt, von entscheidender Bedeutung:
- Benutzer können ihre Probleme lösen
- Sie können es schnell tun
- Das Design minimiert menschliche Fehler
- Benutzer sind zufrieden
- Die Lernkurve ist kurz oder nicht vorhanden
- Das UI-Design entspricht den Geschäftsanforderungen (kommerzieller Erfolg).
Sind Muster im UX-Design unerlässlich?
Nicht genau. Es gibt Programme, die Sie unterstützen und nicht einschränken. Deshalb würde ich vorschlagen, dass Sie darüber nachdenken. Schließlich ist es einfacher, bestehenden Modellen zu folgen, als in neue Modelle zu investieren und sie den Benutzern beizubringen.
Die 9 wichtigsten Modelle im UX-Design
Diese Muster sind weit verbreitet; Denken Sie daher daran, sie zu berücksichtigen, wenn Sie mit der Erstellung einer Schnittstelle beginnen.
Fitts-Gesetz
„Je weiter entfernt und kleiner ein Objekt ist, desto geringer ist die Chance, es genau zu erreichen.“
Das Gesetz von Fitts besagt: Die Wahrscheinlichkeit, ein Ziel zu erreichen, hängt von der Größe und Platzierung der interaktiven Elemente ab.
Um den Kontext zu verdeutlichen: Paul Fitts war ein Psychologe, der untersuchte, wie Menschen ihre Ziele erreichen. 1954 kam er zu dem Schluss, dass die Zeit, die zum Erreichen eines Ziels benötigt wird, nicht nur von seiner Entfernung, sondern auch von seiner Größe abhängt. Mit anderen Worten: Je weiter und kleiner ein Objekt ist, desto geringer ist die Chance, es genau zu erreichen.
Für Designer ist das Fitts-Gesetz hinsichtlich der Steuerungsplatzierung von entscheidender Bedeutung. Es kann wie folgt übersetzt werden: Oberflächenelemente sollten groß genug und für den Benutzer zugänglich sein.
Auf der Patreon-Website können Benutzer beispielsweise durch das Textmenü und den gesamten Block klicken.
Hicks Gesetz
„Je weniger Möglichkeiten es gibt, desto schneller fällt die Wahl.“
Glückwunsch! Jetzt kennen Sie Hicks Gesetz.
Herr Hick schlug dieses Gesetz 1952 vor und meinte damit, dass man bei vielen Möglichkeiten am Ende „zu viel nachdenkt“. Dies ist nun das Grundprinzip für Warensortierdienstleistungen. Tatsächlich wissen wir alle, dass die Qual der Wahl eine der härtesten ist. Als UX-Designer, denen die Benutzer am Herzen liegen, möchten wir unsere geliebten Benutzer nicht Ihnen unterwerfen.
Was aber, wenn es unmöglich ist, die Anzahl der Optionen zu reduzieren? Versuchen Sie, sie in einfachere Schritte zu unterteilen. Hicks Gesetz zielt darauf ab, dem Benutzer die Auswahl zu erleichtern. Manchmal sind die Optionen endlos und es ist schwierig, sie zu reduzieren. Nehmen wir zum Beispiel Netflix – die Auswahl an Sendungen ist scheinbar endlos.
Netflix hat es jedoch geschafft, den Nutzern die Qual einer schwierigen Entscheidung zu ersparen. Sie haben die Funktion „Top 10 in Ihrem Land“ eingeführt. Und das nenne ich Hicks Gesetz in Aktion!
Jakobs Gesetz
“Je vertrauter die Website den Nutzern erscheint, desto besser gefällt ihnen diese.“
Ist Ihnen beim Surfen im Internet schon einmal aufgefallen, dass viele Websites gleich aussehen? In anderen Fällen könnte dies wie ein schlechtes Zeichen erscheinen. Allerdings kommt es bei Websites nicht darauf an, „einzigartig und exklusiv“ zu sein, sondern vielmehr auf die Benutzerfreundlichkeit.
Als Designer muss man die harte Wahrheit akzeptieren: Nutzer verbringen viel Zeit auf anderen Websites. Das Letzte, was sie tun möchten, ist, neue Dinge zu lernen, wenn sie eine neue Website besuchen.
Das ist die These des UX-Spezialisten Jakob Nielsen: Überfordern Sie Benutzer nicht mit neuen Konzepten und verwenden Sie stattdessen bekannte Muster.
Pragnanzgesetz
“Das menschliche Gehirn neigt dazu, komplexe Dinge anhand einfacherer Formen zu interpretieren.“
Das Gesetz von Pragnanz stammt ebenfalls aus der Gestaltpsychologie. Im Jahr 1910 bemerkte der Psychologe Max Wertheimer, dass das menschliche Gehirn eine Reihe blinkender Feuer als eine sich ständig bewegende Linie wahrnahm. Der Grund dafür ist wiederum die Tendenz des menschlichen Gehirns, schwierige Dinge zu vereinfachen und sich nicht zu überfordern.
Machen Sie die UX-Oberfläche für den Benutzer also nicht zu einem Rätsel, da er sie entweder nicht versteht oder in eine verständliche Form vereinfacht. Diese Regel gilt hauptsächlich für Symbole auf Websites.
Annäherungsrecht
„Nah beieinander liegende Elemente werden als Gruppe betrachtet.“
Dieses Prinzip stammt aus der Gestalttheorie und legt nahe, dass Elemente nebeneinander platziert werden sollen, wenn sie als miteinander in Beziehung stehend betrachtet werden sollen.
Gesetz des Inneren und Äußeren
„Um ein Element von den anderen abzuheben, entfernen Sie es.“
Dies ist ein weiterer Aspekt des Gesetzes der Nähe. Jedes komplexe Element besteht aus kleineren Objekten: Wörter bestehen aus Buchstaben, Zeilen bestehen aus Wörtern und Passagen bestehen aus Linien. Um einem Objekt Individualität zu verleihen, ist es notwendig, den Abstand zwischen ihm und anderen Objekten zu vergrößern.
Millers Gesetz
„Eine durchschnittliche Person kann ihre Aufmerksamkeit auf sieben Dinge gleichzeitig richten.“
Im Jahr 1956 entdeckte der amerikanische Psychologe George Miller, dass das menschliche Gehirn sich im Durchschnitt an 7 (+-2) Objekte erinnern kann. Daher sollte die Schnittstelle aus Gründen der Übersichtlichkeit hauptsächlich 9 oder sogar 5 Elemente umfassen. Lange Listen können Benutzer langweilen, auch wenn sie nützlich sind. Daher empfiehlt es sich, sie in Kategorien einzuteilen.
Randeffekt
„Menschen erinnern sich besser an den ersten und letzten Eintrag in einer Reihe.“
So einfach ist das.
Restoreff-Effekt (Isolation).
„Unter ähnlichen Objekten in einer Reihe werden die Leute eines isoliert bemerken.“
Im Wesentlichen wird das, was nicht wie die anderen ist, immer stärker hervorstechen.
Diese Tatsache wurde vom Psychiater von Restorff bestätigt, der vorschlug, dass in einer Gruppe ähnlicher Elemente isolierte Elemente in Erinnerung bleiben. Deshalb hier ein Tipp für Designer: Wenn Sie etwas hervorheben möchten, geben Sie ihm eine andere Form oder halten Sie es von anderen Elementen isoliert.
Allgemeine Empfehlungen basierend auf Vorlagen
Hier ist eine kurze Zusammenfassung, wie Sie ein intuitives UI-Design basierend auf etablierten Mustern erstellen:
Navigation
- Vermeiden Sie es, Menüabschnitte auszublenden, die für den Benutzer oder das Unternehmen wichtig sind.
- Stellen Sie sicher, dass der Benutzer immer weiß, wo er sich auf der Website gerade befindet.
- Machen Sie Übergänge zu anderen Bereichen der Website reibungslos und einfach.
- Planen Sie Ihren Benutzerfluss sorgfältig und berücksichtigen Sie dabei den Kontext.
Formen
- Wenden Sie die Cut-and-Defer-Regel an: Entfernen Sie alle Felder, die der Benutzer nicht benötigt, um fortzufahren. Sammeln Sie optionale Informationen erst, nachdem das Ziel erreicht wurde.
- Optimieren Sie Ihr Design für mobile Versionen.
- Schaffen Sie einen klaren Weg zum Abschluss, mit einer direkten Verbindung vom Header zum CTA und minimalen Ablenkungen.
Allgemeine Empfehlungen:
- Behalten Sie eine strenge Hierarchie auf der Seite bei.
- Helfen Sie den Benutzern zu verstehen, was sie auf der Seite tun sollten, und fügen Sie einen klaren Aufruf zum Handeln hinzu.
- Konzentrieren Sie sich auf das Wesentliche und behalten Sie dabei den „Entscheidungsbaum“ im Blick.
- Verwenden Sie nur aussagekräftige und relevante Bilder.
- Achten Sie auf ein ausgewogenes und kontrastreiches Design.
Abschluss
Für einige Designer können UX-Muster wie Regeln erscheinen, die ihre Kreativität einschränken sollen. Ich betrachte diese Modelle jedoch als konkrete „Hinweise“, die helfen, die Funktionsweise des menschlichen Geistes zu verstehen. Die Einhaltung dieser Schemata schränkt Ihre Fähigkeiten nicht ein.
Stattdessen sind sie dazu da, Ihnen zu helfen, den Benutzer zu verstehen und ein UX-Design zu erstellen, das ihn wirklich unterstützt.
