Best Practices für das UI-Design für bessere Scanbarkeit

Produktdesigner kommunizieren oft viele Informationen in kurzer Zeit. Diejenigen, die den Begriff „Scannbarkeit“, gängige Eye-Tracking-Muster und moderne Designprinzipien verstehen, sind besser gerüstet, um leicht konsumierbare Inhalte und „klebrige UIs“ zu erstellen.

Jeden Tag wird das Internet um neue Apps, Websites, Artikel und mehr erweitert. Es wird immer schwieriger, die Aufmerksamkeit von informationsüberladenen Benutzern zu fesseln, die es schwierig finden, relevante Informationen von irrelevanten Inhalten zu filtern. Marketingexperte David Zheng fand heraus, dass Besucher in über 60 % der Fälle aufgeben und eine Website in weniger als 15 Sekunden verlassen .

Die Untersuchung zeigt, dass Benutzer nicht alles, was sie sehen, Wort für Wort lesen – sie scannen und entscheiden dann, ob das Material ihre Zeit wert ist. Indem geeignete Inhalte sofort scanbar gemacht werden, kann ein Produktdesigner einen kurzfristigen Besucher in einen langjährigen Benutzer verwandeln. Nachfolgend finden Sie eine Auswahl von Best Practices für das UI-Design, um den wichtigen Faktor des Usability-Designs zu verstärken, der oft übersehen wird: Scanbarkeit .

Was ist Scannbarkeit?

UX-Experten der Nielsen Norman Group untersuchten die Frage: Wie lesen Menschen im Web? Seine Erkenntnisse waren einfach. Sie tun es nicht.

Die Gruppe fand heraus, dass nur 16 % der Erstbesucher einer Website diese wahrscheinlich Wort für Wort lesen. Die anderen 84 % scannen schnell nach Hook-Elementen wie Überschriften, Sätzen, Bildern oder Animationen, bevor sie sich entscheiden, tiefer in das Material einzutauchen. Dieses Verhalten ist nicht auf digitale Schnittstellen beschränkt. Zum Beispiel liest man selten jedes Wort in einer Zeitung. Stattdessen scannen sie dieselben Elemente – Schlagzeilen, Bilder usw. – um festzustellen, was ihrer Zeit würdig ist.

Scannbarkeit ist daher der Ansatz, Inhalte so anzulegen, dass sie leicht zu scannen sind. Es bleibt oft nur eine kurze Zeitspanne, um einen Besucher mit wertvollen Inhalten auf dem Bildschirm zu beeindrucken, weshalb es entscheidend ist, eine Benutzeroberfläche vollständig darauf zu optimieren, wie Benutzer im Web lesen. Unabhängig davon, ob es sich bei dem digitalen Produkt um eine Website, Anwendung oder eine andere Art von Benutzeroberfläche handelt, ist die Scanbarkeit einer der wichtigsten Faktoren für benutzerfreundliches Design.

Die Vorteile einer scanbaren Schnittstelle

Der ideale Weg, um die Scanbarkeit eines digitalen Produkts zu bestimmen, besteht darin, es aus der Perspektive des Benutzers zu betrachten und diese Schlüsselfragen zu beantworten:

1. Entspricht der Inhalt der Seite den Erwartungen des Publikums?
2. Ist die Hauptbotschaft der Seite in kurzer Zeit leicht verständlich?

Obwohl die Erstellung scannbarer Schnittstellen aufwändig ist, zahlt es sich auf lange Sicht durch die Erstellung eines klebrigen UI-Designs aus. Die Studie der Nielsen Norman Group zeigt, dass für Scanbarkeit optimierte Seiten auf folgende Weise viel effektiver werden:

• Benutzer haben schnellere Aufgabenerledigungszeiten
• Benutzer können leicht definieren, ob der Inhalt für sie geeignet ist
• Nutzer machen weniger Erinnerungsfehler
• Benutzer erhalten ein besseres Gefühl für die Struktur einer Seite
• Eine Website erhält positivere subjektive Bewertungen für Glaubwürdigkeit und Inhaltsqualität
• Absprungraten werden reduziert
• Die Wahrscheinlichkeit von Gegenbesuchen wird erhöht
• Die Suchmaschinenoptimierung (SEO) wird verbessert

Die Macht der Benutzergewohnheiten beim Scannen von Mustern

Jeder konsumiert Inhalte anders. Durch die Forschung haben sich jedoch gut definierte Eye-Tracking-Muster herauskristallisiert. Zu wissen, wie Benutzer innerhalb der ersten Sekunden mit Schnittstellen interagieren, kann Designern helfen, Inhalte zu priorisieren, wichtige Informationen in den primären sichtbaren Zonen zu platzieren und eine starke visuelle Hierarchie aufzubauen.

Laut der Nielsen Norman Group gibt es sieben gängige Muster, in denen Benutzer eine Schnittstelle scannen:

• Das berühmte F-Muster: Zwölf Jahre nach seiner Entdeckung ist dieses Muster immer noch das am weitesten verbreitete Scanmuster – selbst beim Scannen mobiler Schnittstellen. Das Auge bewegt sich horizontal, wie es beim Lesen typisch ist, und springt dann zum Inhalt darunter. Dies kann langsam und systematisch oder schnell mit einer fleckigeren Heatmap erfolgen.
• Z-Muster: Das Zick-Zack-Modell ist typisch für Webseiten mit einer einheitlichen Darstellung von Informationen und einer schwachen visuellen Hierarchie.
• Schichtkuchenmuster: Benutzer folgen diesem Muster beim Scannen von Überschriften und Unterüberschriften, um schnell festzustellen, wo (und ob) die gesuchten Informationen auf der Seite zu finden sind.
• Spotted Pattern: Kreative folgen normalerweise diesem Scanning-Modell, bei dem sie große Textblöcke überspringen und visuelle Komponenten wie Farben, Formen und Proportionsanomalien scannen, um eine bestimmte Information zu finden.
• Markierungsmuster: Wie ein Tänzer, der sich auf ein Objekt fixiert, um beim Drehen das Gleichgewicht zu halten, halten die Benutzer das Auge beim Scrollen auf eine Stelle gerichtet – ein sehr häufiges Muster für mobile UX.
• Muster umgehen: Benutzer überspringen absichtlich die ersten Wörter einer Zeile, wenn mehrere Textzeilen in einer Liste alle mit denselben Wörtern beginnen.
• Verpflichtungsmuster: Dies ist ein seltenes Muster und tritt nur auf, wenn ein Benutzer sehr an den Inhalten interessiert und motiviert ist, sie vollständig zu konsumieren.

Die vom Benutzer angenommenen Muster beziehen sich hauptsächlich auf die Motivation für den Besuch der Webseite: Welche Art von Informationen suchen sie? Wie viel Zeit sind sie bereit zu investieren, um es zu finden? Gibt es andere Websites, die diese Informationen schneller bereitstellen könnten?

Wertschöpfung durch Benutzerforschung und Scanmuster

Dr. Donald Norman, der Kognitionswissenschaftler, der den Begriff „ benutzerzentriertes Design “ geprägt hat, schrieb: „Es reicht nicht aus, dass wir funktionierende, verständliche und benutzerfreundliche Produkte entwickeln, wir müssen auch Produkte entwickeln, die Freude und Begeisterung bereiten , Freude und Spaß, und ja, Schönheit im Leben der Menschen.“

Die Benutzerforschung ist ein Eckpfeiler des benutzerzentrierten Designs und der Best Practices für das UI-Design. Um die Scanbarkeit einer digitalen Schnittstelle zu verbessern, muss ein Designer den Endbenutzer verstehen. Wenn UI-Muster aus der Perspektive des Endbenutzers entworfen werden, entsteht ein natürliches und intuitives Erlebnis.

Wirkungsvolle Lösungen bestehen nicht aus Abstraktionen. Nachfolgend finden Sie eine Reihe digitaler Produkte, die schön, praktikabel und nachhaltig sind. Jedes Designteam definierte die Hauptzielgruppe, verwendete Eye-Tracking-Muster und entwarf Inhaltslayouts, um eine ansprechende Benutzeroberfläche zu erstellen.

Instacart nutzt benutzerzentriertes Design durch seine UI-Designmuster. Ein erheblicher Teil ihres Publikums besteht aus Senioren und Benutzern mit Sehbehinderungen, daher sind die Artikel in einem kontrastreichen Raster mit einer klaren Betonung der wichtigsten CTAs aufgelistet. Das Design ermöglicht den Spotted-Pattern-Scanmodus für lang anhaltende Besucher.

Yelp unterstützt Benutzer bei der Suche nach den absolut besten Restaurants, Einkaufsmöglichkeiten, Nachtleben, Essen usw. Die Leute bewerten Bewertungen wahrscheinlich auf der Grundlage ihrer eigenen persönlichen Kriterien und gründlicher Recherche, was das F-Muster zum am besten geeigneten Scan-Modell macht. Yelp präsentiert daher Inhalte auf eine Weise, die einfach zu scannen ist, mit Betonung auf bestimmten Elementen wie Bewertungen, Bildern und Adressen.

Airbnb ist wohl eine der beliebtesten Apps da draußen, und das liegt zum großen Teil an ihrer Benutzerforschung. Da sie wissen, dass ihre Benutzer häufig mobile Geräte verwenden, entwerfen sie das Markierungsmuster. Die saubere und intuitive Benutzeroberfläche ist so angelegt, dass die großen Wohnungsbilder in voller Breite hervorgehoben werden. Sie haben die Anzahl der Titelbilder pro Bildschirm absichtlich auf zwei begrenzt, damit der Benutzer seine Zeit richtig einteilen und sehen kann, ob die Auflistung seine Aufmerksamkeit erregt oder nicht.

Ein Faktor, den es bei der Verbesserung der Scanbarkeit eines digitalen Produkts zu beachten gilt, ist die Definition des Gerätetyps, auf dem es angezeigt wird. Die mobile Plattform von Airbnb erhält erheblichen Traffic. Wie aus der Heatmap der Thumb-Nutzung hervorgeht, hat Airbnb die am häufigsten verwendeten UI-Elemente wie „Erkunden“ und „Gespeicherte Suchen“ strategisch so platziert, dass sie beim Scrollen – und Scannen – leicht zugänglich sind.

Best Practices für das UI-Design für bessere Scanbarkeit

Erstellen Sie eine richtige visuelle Hierarchie

Die visuelle Hierarchie einer digitalen Schnittstelle bezieht sich auf die Anordnung und Präsentation von UI-Designelementen, um Wichtigkeitsstufen zu kommunizieren, damit Benutzer schnell nach gewünschten Informationen suchen können. Es gibt mehrere Faktoren beim Entwerfen eines Layouts mit der richtigen visuellen Hierarchie:

• Größe
• Farbe
• Kontrast
• Räumliche Nähe
• Ausrichtung
• Negativer Raum
• Wiederholung

Durch die Berücksichtigung dieser UI-Designmuster beim Erstellen eines UI-Layoutdesigns stellt ein Designer sicher, dass das Endprodukt ein gut aussehendes, harmonisches und intuitiv scanbares Layout hat.

Die Suchergebnisseite von Google verwendet alle Faktoren der visuellen Hierarchie, um die Scanbarkeit zu verbessern. Die Schlagzeilen werden durch die Verwendung von Farbe, Größe und schließlich Kontrast hervorgehoben. Der negative Raum, der jede Überschrift umgibt, trägt dazu bei, dass sie das erste ist, was ein Benutzer scannt.

Wenn ein Benutzer eine relevante Überschrift findet, überprüft er den Link möglicherweise auf Glaubwürdigkeit – ein Element, das aufgrund von Farbe und Nähe leicht erkennbar ist. Um das Ergebnis besser zu bewerten, werden sie sich als Nächstes mit der Inhaltskopie befassen, die in Farbe, Größe und Nähe konsistent ist. Zusätzlich zu diesen Faktoren machen Wiederholung und Ausrichtung die Google-Suchergebnisse im Allgemeinen leicht zu scannen.

Nutzen Sie den negativen Raum

Der geniale Claude Debussy hat einmal gesagt: „Musik ist der Raum zwischen den Noten.“ Dasselbe gilt für die Scanbarkeit – negativer Abstand zwischen Elementen macht ein Layout erfolgreich. Die richtige Menge an negativem (weißem) Raum um UI-Elemente herum lenkt den Fokus auf die Elemente selbst. Es hebt den Inhalt hervor und sorgt für den nötigen Freiraum, damit das Layout nicht überladen wirkt. Ohne Atempause ist es weniger wahrscheinlich, dass das menschliche Gehirn interessante Punkte scannt, und es ist wahrscheinlicher, dass es verwirrt wird.

Verwenden Sie Unterüberschriften, um Inhalte zusammenzufassen

Menschen reagieren oft negativ auf große Textblöcke. Es kann die Annahme auslösen, dass sie Zeit verlieren, wenn der Absatz nicht ihren Interessen entspricht. Best Practices für das UI-Design bieten eine Lösung für dieses Problem. Durch das Einfügen kurzer Unterüberschriften am Anfang langer Artikel erhält der Benutzer den ultimativen Einblick in das Thema.

Beim Verfassen der Zwischenüberschrift ist es entscheidend, sie auf den Punkt zu bringen. Kommunizieren Sie einfach die Schlüsselbotschaft, die der unten stehende Inhalt bietet.

Erstellen Sie Aufzählungszeichen und nummerierte Listen

Das menschliche Gehirn ist sehr systematisch – es beobachtet Inhalte und gruppiert sie dann in sinnvolle Einheiten. Daher ist es wahrscheinlicher, dass ein Benutzer eine Aufzählung oder eine nummerierte Liste versteht als mehrere Punkte, die zu einem Textabsatz zusammengeführt werden.

Der durch Listen geschaffene negative Raum erleichtert dem Benutzer das Scannen, daher ist es vorteilhaft, sorgfältig nach Möglichkeiten zu suchen. Wenn mehr als zwei Punkte innerhalb eines Textes parallel zueinander verlaufen und jeweils nicht mehr als zwei Sätze zur Beschreibung benötigen, ist dies ein starker Kandidat für eine Liste. Die Nielsen Norman Group bietet noch weitere Einblicke in die Erstellung von digitalen Inhalten mit Aufzählungszeichen.

Visualisieren Sie den Inhalt

Moderne digitale Benutzer sind von Natur aus visuell und reagieren wahrscheinlich nicht immer gut auf Textinhalte (selbst wenn sie perfekt strukturiert sind und alle UI-Designtipps für eine ideale Scanbarkeit befolgen). Äußere Umgebungen werden immer ein Faktor sein. Um textlastige Layouts auszugleichen, bietet der Einsatz von Bildern und Grafiken daher sowohl informative als auch emotional ansprechende visuelle Unterbrechungen. Wie das Sprichwort sagt, ein Bild sagt mehr als tausend Worte!

Originelle visuelle Elemente (Illustrationen, ansprechende Fotos usw.) können leicht die Aufmerksamkeit eines Benutzers auf sich ziehen und das allgemeine stilistische Konzept unterstützen. Darüber hinaus können sie die visuelle Hierarchie verbessern und den Text leichter verdaulich machen. Allerdings besteht die Gefahr, dass eine Grafik bei unsachgemäßer Verwendung eine Gegenwirkung hervorrufen kann. Bevor Schlüsselideen in Grafiken umgewandelt werden, ist es wichtig, dass Designer den Inhalt, den sie entwerfen, vollständig verstehen.

Setzen Sie angemessene Betonung auf die CTAs

Die meisten digitalen Erlebnisse zielen darauf ab, eine bestimmte Aktion des Benutzers hervorzurufen. Obwohl Call-to-Action (CTA)-Schaltflächen oft sehr einfach aussehen, sind sie strategisch so konzipiert, dass sie dem Benutzer helfen, eine Aktion auszuführen – wie z. B. kaufen, in einen Warenkorb legen oder einfach zu einer anderen Seite gehen.

Best Practices für das UI-Design schlagen vor, den CTA in der Nähe des Inhalts zu positionieren, der die Aktion beschreibt, sodass er für den Benutzer intuitiv ist. Eine effektive Methode, um zu testen, ob der CTA gut proportioniert, farbig und positioniert ist, besteht darin, das endgültige Design vorübergehend in Graustufen umzuwandeln. Bleibt der CTA deutlich sichtbar und betont, ist die Sticky UI gut gelungen.

Die Bedeutung der Scanbarkeit

Es gibt viele Elemente, die bestimmen, ob ein UI-Layout-Design von Menschen gut angenommen wird – wie z. B. Inhaltsrelevanz, Lösungen von Wettbewerbern und Geschäftslogik. Laut Forbes ist die Scanbarkeit der am häufigsten übersehene Faktor des Content-Marketings. Durch die Erstellung scannbarer Inhalte kann aus einem kurzfristigen Besucher ein langfristiger Benutzer werden.

Scanbare Inhalte zeigen dem Endbenutzer, dass seine Zeit geschätzt wird, und bieten die Möglichkeit, die Kernbotschaft zu verstehen, indem er einfach einen Blick auf ein Layoutdesign wirft. Die Viral-Bloggerin und Journalistik-Professorin Kim Keller weist Designer darauf hin, dass „man ein Gespräch mit jemandem beginnt, den man als Kunden haben möchte. Es ist eine Beziehung, und keine Beziehung kann überleben, wenn man keine Zeit miteinander verbringt. Respektiere ihre Zeit und mache es sich lohnend.“

• • •

Weiterführende Literatur im Toptal Design Blog:

• UI-Design Best Practices und häufige Fehler
• Leere Zustände – Der am meisten übersehene Aspekt von UX
• Einfachheit ist der Schlüssel – Erforschung des minimalen Webdesigns
• Heuristische Prinzipien für mobile Schnittstellen
• Lesbares Design – Ein Leitfaden zur Web-Typografie