Warum UX-Entwurfsmuster funktionieren und wie sie verwendet werden

Das Web gibt es seit mehr als 20 Jahren. So haben wir genügend Zeit, um Probleme mit der Benutzererfahrung zu entdecken - tatsächlich, um überhaupt die Benutzererfahrung zu entdecken - und Lösungen zu erfinden.

Einige Lösungen funktionierten so gut, dass Designer sie überall wiederholt verwendeten. Und durch Vertrautheit erwarteten die Benutzer sie. Dies war der Beginn von Webdesign-Mustern: eine gemeinsame visuelle Sprache, die sowohl Designer als auch Endbenutzer verstehen.

Es war nicht schwer zu tun. Menschen sind fest verdrahtet, um Muster zu erkennen, selbst wenn es keine gibt.



Menschen suchen nach Mustern in jeder Art von visuellem Design

Wie erstelle ich einen Snapchat-Filter in Photoshop?
Menschen suchen nach Mustern in jeder Art von visuellem Design

Formen in Wolken, Zahlen in Lottoscheinen, vorhersehbare Börsenschwankungen, Sternbilder und Gesichter auf Toast zeigen, wie Menschen sehen Dinge, die es nicht gibt . Untersuchungen zeigen, dass Menschen nach Beziehungen zwischen Werten suchen und Muster diese Beziehungen verstärken.

UX-Designer können die Muster-Suchtendenzen der Benutzer problemlos nutzen. Wie navigieren Menschen auf vielen Seiten? Wie geben wir an, dass beim Klicken ein Video abgespielt wird?

Die Antwort liegt in Entwurfsmustern, die wiederverwendbare Lösungen für Usability-Probleme darstellen. Sie sparen auch Zeit. Muster sind die ersten Lösungen, zu denen Menschen gehen, wenn sie keine Zeit haben, etwas Neues zu erfinden. Und wie bei vielen 'es funktioniert einfach' -Lösungen bleiben Muster in der Regel erhalten.

In diesem Beitrag erklären wir die Psychologie und Techniken für erfolgreiche UI-Muster.

Wie Benutzer mit Entwurfsmustern interagieren

Der erste Eindruck ist wichtig, da Benutzer innerhalb von 10 bis 20 Sekunden wissen, ob sie Ihre Website verlassen. Muster kommunizieren Funktion und Absicht innerhalb dieses Zeitfensters so klar wie möglich.

Bild mit freundlicher Genehmigung von http://www.kayak.com

Bild mit freundlicher Genehmigung von http://www.kayak.com

So funktioniert das. Angenommen, ein Benutzer möchte eine Aufgabe erfüllen, beispielsweise ein Hotel buchen.

Sehen Sie sich eine mögliche Reihe von Benutzeraktionen an:

  1. Auf einer Reiseseite wird dem Benutzer eine Liste möglicher Übernachtungsmöglichkeiten angezeigt.
  2. Der Benutzer tippt auf das Foto eines charmanten Bungalows. Nichts passiert. Lektion gelernt: Fotos führen nicht zu mehr Informationen über jede Eigenschaft.
  3. Der Benutzer erkundet weiter. Er oder sie sucht möglicherweise nach einem Link 'Weitere Informationen' oder tippt auf den Nachttarif. Sie können versuchen, das Foto erneut zu tippen, nur für den Fall. Ein entschlossener Benutzer tippt weiterhin auf verschiedene Elemente, um weitere Informationen über den Bungalow zu erhalten.
  4. Schließlich tippen sie auf den Hotelnamen (möglicherweise als Schaltfläche oder Link dargestellt) und werden auf eine detailliertere Seite weitergeleitet. Der Benutzer sieht eine charmante Atmosphäre, aber kein kostenloses Frühstück. Es entspricht nicht ihren Kriterien, also suchen sie weiter.

Hier setzt das Muster an. Nachdem er erfahren hat, dass ein Miniaturbild nicht tippbar ist, der Name des Hotels jedoch lautet, weiß der Benutzer jetzt genau, was zu tun ist.

Gelerntes Verhalten

Dieses erlernte Verhalten ist etwas Menschen machen es besonders gut . Während viele Faktoren das Lernen der Menschen beeinflussen, reicht ein wenig Erfahrung aus. Dies ist eine Form des instrumentellen Lernens, bei der sich die Menschen gut genug an das Ergebnis vergangener Erfahrungen erinnern, um ihr zukünftiges Verhalten zu ändern.

Nicht jedes Muster ist so absolut wie das Beispiel mit den Suchergebnissen. Wie in der Web UI Pattern Handbook Die Idee eines Musters ersetzt seine Umsetzung.

Zum Beispiel sind Aufzählungszeichen möglicherweise runde Punkte, kleine Quadrate, Kontrollkästchen oder lustige Kringel. Wenn sich ein Objekt jedoch neben einer Textzeile befindet und es mehrere gibt, verstehen Benutzer, dass es als Aufzählungszeichen fungiert.

In ähnlicher Weise müssen Links nicht immer von blau nach lila wechseln. Wie bei den verschiedenen Aufzählungsformaten verstehen Benutzer, dass das eigentliche Muster darin besteht, dass Links ihre Farbe ändern, um ihren Status widerzuspiegeln.

Benutzer erinnern sich mehr an das Musterverhalten als an das Aussehen des Musters. Wenn Sie auf Nummer sicher gehen möchten, halten Sie sich immer an das Verhalten.

Universelle Designkonventionen

Warum hat unser hypothetischer Hotelsuchender überhaupt versucht, winzige Bilder von Hotels aufzunehmen? Weil es üblich ist, kleine Fotos neben kurzen beschreibenden Klappentexten tippbar zu machen.

Nachrichtenseiten verwenden es. Blogs verwenden es. Amazon macht Produktbilder in Suchergebnissen tippbar. Google und, genauer gesagt, TripAdvisor, Orbitz und Yelp. Dies ist ein etabliertes Muster. Es wird einfach ohne Erklärung verstanden.

Bild mit freundlicher Genehmigung von Airbnb

Hardcase MacBook Pro 15 Netzhaut
Bild mit freundlicher Genehmigung von Airbnb

In unserem Hotelbeispiel haben wir das etablierte Muster gebrochen. Der Benutzer hat auf unserer Website auf ein Miniaturbild getippt und nichts ist passiert. Sie wurden leicht verärgert. Nicht genug, um sie zu vertreiben (denken Sie daran, dass sie weiter geklopft haben), aber genug, um einen schlechten Präzedenzfall zu schaffen.

Gebrochene Erwartungen sind kumulativ. Wenn ein Design zu weit von den erwarteten Konventionen abweicht (extern inkonsistent), stoßen Designer auf Widerstand gegen die Verwendung der Website. Wenn ein Design von sich selbst abweicht (intern inkonsistent), wird es geradezu frustrierend.

Es braucht eine starke Neugier, oder außergewöhnliche Überraschung und Freude , um Benutzer über neue Konventionen aufzuklären. Aber alte Gewohnheiten sterben schwer, besonders im Internet, wo sich Konventionen mit jedem neuen Hyperlink gegenseitig verstärken. Wir beschreiben viele visuelle Muster in Webdesign für das menschliche Auge , aber lassen Sie uns einige Grundlagen dahinter zusammenfassen.

01. Gestalt

Menschen ziehen Verbindungen zwischen unterschiedlichen Formen. 1910 beobachtete der Psychologe Max Wertheimer flackernde Lichter eines Bahnübergangs. Das Muster erzeugte die Illusion, dass sich die Lichter in einem Kreis bewegten, obwohl sie sich lediglich mit einem guten Timing abwechselten.

Wertheimer entwickelte zusammen mit seinen Kollegen Theorien zur Sehwahrnehmung, die für das Webdesign von grundlegender Bedeutung sind. Die Theorien erläutern das vereinfachte, aber klassische Axiom von Aristoteles: 'Das Ganze ist größer als die Summe seiner Teile', wie es auf die visuelle Darstellung angewendet wird.

Die Gestaltprinzipien drehen sich in der Regel um eine Handvoll ähnlicher Konzepte. Diese Ideen beziehen sich zwar auf die gesamte Wahrnehmung des Sehens, gelten jedoch insbesondere für das UI-Design.

Das obige Logo wurde in der Prototyping-App erstellt UXPin , hat keinen Großbuchstaben 'H' - aber unsere Tendenz, Formen zu sehen, in denen es keine gibt, deutet auf etwas anderes hin.

Anwendung auf Webdesign: Formen und Konturen sollten Vorrang vor kleineren Details haben. Es spielt keine Rolle, wie faszinierend eine anklickbare Schaltfläche aussieht, wenn Ihre Benutzer nicht wissen, dass es sich um eine Schaltfläche handelt. Diese 'Signifikanten' helfen dabei, die Funktion vorzuschlagen (sogenannte Erschwinglichkeiten).

02. Nähe

Die Menschen nehmen wahr, dass eng platzierte Elemente miteinander verbunden sind, insbesondere wenn sie durch noch mehr Raum von anderen Gruppen getrennt sind. Dies hängt auch mit den zeitlichen und räumlichen Elementen von zusammen Fitts 'Gesetz .

Bei diesem Prinzip wird der negative Raum verwendet, um bestimmte Elemente auseinander und andere näher zusammenzuschieben, um scheinbare Gruppen zu erstellen, für die keine Linien oder andere Indikatoren erforderlich sind, um 'Dies ist eine Gruppe' wie beispielsweise Standard-HTML-Feldsätze zu formulieren.

Anwendung auf Webdesign: Das Gruppieren von Elementen in Abschnitte ist für die Seitenerstellung von entscheidender Bedeutung. Seitenleisten müssen sich vom Hauptinhalt abheben. Abschnitte innerhalb des Inhalts benötigen eine Atempause, um anzuzeigen, dass es sich um Abschnitte handelt. Fotos, Titel und beschreibender Text in Suchergebnissen müssen Cluster bilden, um diskrete Einheiten zu bilden.

Wie Sie in der obigen Abbildung rechts sehen können, werden die Suchergebnisse zu diskreten Elementen, wenn Sie ein kleines Leerzeichen hinzufügen, um anzuzeigen, dass es sich um eine Gruppe handelt.

03. Farbe

Helle Farben scheinen sich über kühle, dunkle Töne und Farbtöne zu erheben. Wenn Sie dem Design Tiefe verleihen, sind nur wenige Techniken effektiver als das Abdunkeln von Elementen im Hintergrund. Um zu verstehen, warum, teilen wir die Farbtheorie in drei Teile auf:

iPad Mini Angebote schwarzen Freitag 2017
  • Kontrast: Jeder Farbton hat ein Gegenteil - eine Erzfeindin, deren Kontrast weitaus größer ist als bei jeder anderen Farbe.
  • Ergänzung: Farben sind nicht immer im Widerspruch zueinander. Komplementärfarben betonen sich gegenseitig und bringen ihr Bestes zur Geltung, das Gegenteil von Kontrast. Dies sind die Farben, die im Farbkreis unmittelbar nebeneinander liegen. Die Ergänzungen für Lila sind beispielsweise Blau und Rosa.
  • Lebendigkeit: Jede Farbe ruft eine bestimmte Stimmung hervor: Die helleren, warmen Farben (Rot, Orange, Gelb) regen den Benutzer an und machen ihn wacher, während dunklere kühle Farbtöne (Grün, Blau, Lila) entspannender und ruhiger wirken.

Zwei Versionen des Logos zeigen den Unterschied, den Farbe machen kann

Zwei Versionen des Logos zeigen den Unterschied, den Farbe machen kann

Zwei Variationen des in UXPin erstellten Logos führen zu zwei unterschiedlichen Gefühlen. Auf der linken Seite lassen kühle Schattierungen im Hintergrund die Gestaltformen von der Leinwand fallen. Auf der rechten Seite sind warme Farben einladender - und möglicherweise aufregender. Sie fallen jedoch hinter die weiße H-Form zurück, die das Logo selbst dominiert und definiert.

Nichts davon wird beim durchschnittlichen Benutzer registriert. Sie oder er möchte nur ein sauberes Zimmer buchen. Der schnellste Weg von der Suche zur Buchung besteht darin, ein Muster zu verwenden, mit dem sie bereits vertraut sind. Wie bereits erwähnt, haben Suchergebnisse - Hotel oder andere - ein etabliertes Format.

Im Falle einer Hotelfindungsseite müssen wir den Benutzern relevante Suchergebnisse präsentieren, damit sie eine fundierte Entscheidung treffen können. Manchmal bedeutet das, auf unsere kreativen Impulse zu verzichten und bewährten und langweiligen Prozessen zu folgen. Das heißt aber nicht, dass wir keinen Spaß haben können.

04. Einfühlungsvermögen auf UI-Entwurfsmuster anwenden

Wir können bekannte Muster zu unserem Vorteil nutzen. Aber um ihre unbewussten Tendenzen bewusst zu nutzen, brauchen wir ein wenig Einfühlungsvermögen und viel Planung.

Bild mit freundlicher Genehmigung von Rosenfield Media: https://www.flickr.com/photos/rosenfeldmedia

So ändern Sie die Pinselgröße in Photoshop
Bild mit freundlicher Genehmigung von Rosenfield Media: https://www.flickr.com/photos/rosenfeldmedia

Zu Beginn müssen wir die genauen Probleme definieren. Das ist eine Disziplin für sich und beinhaltet oft Fragen wie:

  • Welche Elemente sind wichtiger als andere?
  • Was ist anklickbar und was nicht?
  • Woher wissen Benutzer, dass sie für weitere Informationen scrollen können?
  • Welches Symbol soll ich für eine bestimmte Aufgabe verwenden?
  • Was sagt Benutzern, dass eine Funktion deaktiviert ist?
  • Woher wissen Benutzer, wann ein Abschnitt endet und ein anderer beginnt?
  • Wie sagen wir den Benutzern, dass sie geduldig sind - dies wird noch geladen?

… Und andere Fragen zur Kommunikation, die sich Designer stellen. Aber um es mit Empathie anzugehen, müssen wir die Dinge umdrehen. Sehen Sie die Dinge aus der Sicht des Benutzers.

  • Wo bin ich auf der Seite?
  • Was soll ich mir zuerst ansehen?
  • Wohin kann ich von hier aus gehen?
  • Wie kann ich dieses modale Fenster verschwinden lassen?
  • Soll ich darauf tippen oder soll ich darauf tippen?
  • Was kann ich eigentlich antippen?
  • Enthält diese Seite die gewünschten Informationen?
  • Was kann ich auf dieser Seite ignorieren?

Wenn wir im Web nach Mustern suchen, suchen wir nach bewährten Lösungen, mit denen Benutzer ihre Ziele erreichen können, egal ob sie ein Hotel auswählen, Artikel durchsuchen, Sportstatistiken lesen, Bilder veröffentlichen oder mit Freunden chatten.

Zum Glück sind wir von Mustern umgeben. Sie sind so häufig, dass man sie leicht übersehen kann. Aber sie existieren. Abgesehen davon, dass Sie sie selbst suchen, umfassen die Quellen:

  1. UI-Muster - Ein Repository mit Beispielen aus dem Internet, geordnet nach Themen mit hilfreichem Beschreibungstext.
  2. Web-UI-Entwurfsmuster - Unser kostenloses E-Book enthält Informationen zum Wie und Warum von Mustern und behandelt aktuelle Trends im UI-Design.
  3. Überzeugende Auslöser - Durchsuchen Sie das Web lange genug und Sie werden Edelsteine ​​wie diesen Artikel des Smashing Magazine über psychologische und Verhaltensmuster finden.
  4. PatternTap - Eine umfangreiche Sammlung von Screenshots mit Tags, die Inspiration für Designelemente liefern.

Fazit

Je mehr Designer Muster verwenden, desto mehr Benutzer verstehen sie und sind für Designer wertvoller. Diese wechselseitige Beziehung besteht seit den ersten Tagen des Webdesigns. Trends kommen und gehen, aber die zugrunde liegenden Ideen bleiben zeitlos.

Wenn Sie diesen Beitrag hilfreich fanden, schauen Sie sich den kostenlosen an Web UI Pattern Handbook .

Das Buch wurde basierend auf meiner Erfahrung beim Entwerfen von Websites in den letzten 20 Jahren geschrieben. In der 104-seitigen Anleitung wird anhand von über 100 Beispielen von ESPN, Adobe, AIGA, The Discovery Channel und anderen erläutert, wie Sie die besten Entwurfsmuster auswählen und verwenden.

Wörter: Ben Gremillion

Ben Gremillion ist Content Designer bei der Prototyping-App UXPin wo er schreibt für ihre kostenlose E-Book-Bibliothek . Er entwirft und codiert seit fast 20 Jahren für das Web. Er baut und unterhält auch eine CMS für Webcomic-Künstler .

Mochte dies? Probiere diese...