Warum der Einsatz von White Space keine Platzverschwendung ist

User Experience: White Space im Webdesign
Kommentare

Beim Kauf eines neuen Möbelstücks oder beim Umzug in eine größere Wohnung ist klar: der hinzugewonnene Platz muss genutzt werden. Im Webdesign ist diese Herangehensweise allerdings nicht von Erfolg gekrönt. Vielmehr führt die visuelle Gestaltung sämtlicher Flächen häufig dazu, dass sich die Nutzer aufgrund des überladenen Designs völlig überfordert fühlen und deswegen eine Webseite schnell wieder verlassen. Der richtige Einsatz von White Space hingegen kann die User Experience positiv beeinflussen.

Um die Aufmerksamkeit der User im Netz ist es immer schlechter bestellt; ihre Überforderung stellt deshalb ein Problem dar. Wie die Zahlen vom Statistic Brain Research Institute belegen, ist die Aufmerksamkeitsspanne der Nutzer von zwölf Sekunden im Jahr 2000 auf 8,25 Sekunden in 2015 gefallen – ein Rückgang von fast 30 Prozent in knapp 15 Jahren. Heutzutage bleiben Designern nur rund acht Sekunden, um die Anwender die Inhalte einer Seite durch optische Bausteine näherzubringen und sie zum Bleiben zu bewegen. Der Einsatz von White Space kann ein Baustein sein, um dieses Ziel zu erreichen.

Anspruchsvolle Nutzer

Der kontinuierliche Rückgang der Aufmerksamkeitsspanne hat mehrere Faktoren. Einer der ausschlaggebenden Gründe liegt sicherlich in der massenhaften Verbreitung mobiler Endgeräte. Die Interaktionen der Nutzer in verschiedenen Netzwerken erfolgen mittlerweile in Echtzeit, was zu einer Generierung von Datenmassen führt, die das kognitive Vermögen der Anwender überschreiten. Da es den Usern überhaupt nicht möglich ist, sich mit allen Informationen auseinanderzusetzen, beginnen sie, die Angebote zu filtern.

Daneben darf nicht vergessen werden, dass Menschen faul sind. Das wird durch die eigene Erfahrung bestätigt und durch wissenschaftliche Studien belegt. Nicht nur technische Erneuerungen, sondern auch die persönlichen Gewohnheiten der User führen zu Überforderung und Verwirrung. Um das zu vermeiden, werden im User-Experience-Design die Wünsche der Anwender in den Mittelpunkt der visuellen Gestaltung gerückt. Optische Elemente müssen den Anwendern dabei helfen, ihre Bedürfnisse schnell und intuitiv umzusetzen. Eine gute User Experience bringt die Nutzer möglichst wenig zum Nachdenken.

Visual Design und User Experience

Um sicherzustellen, dass die Interaktionen mit visuellen Bausteinen den Nutzern einfach von der Hand gehen, ist ein ausführliches und kontinuierliches Testing erforderlich. Es gibt beispielsweise Auskunft darüber, wie Bilder, Animationen und Videos richtig eingesetzt werden müssen und auf welche Design-Patterns oder Typografien am besten zurückgegriffen werden sollte. Das ist notwendig, da es dafür, was Menschen als attraktiv empfinden, keine Blaupause im Visual Design gibt. Dass Menschen sich jedoch von Personen und Dingen angezogen fühlen, wenn sie sie attraktiv finden, ist sogar wissenschaftlich verbürgt.

HTML5 Days 2017

Flexbox in der Praxis

mit Jens Grochtdreis (webkrauts.de)

Diese Erkenntnisse können im Webdesign ausgenutzt werden. Ein visuelles Design, das auf die Wünsche der User zugeschnitten ist, muss sich an ihren Bedürfnissen orientieren und gleichzeitig anziehend wirken. Die strategische Platzierung optischer Elemente kann die Interaktionen und das Engagement der Nutzer fördern, indem ihre Aufmerksamkeit auf die angebotenen Funktionen gelenkt wird. Das Visual Design bildet die Schnittstelle zwischen Visualisierung und User Experience, da mithilfe statistischer Bilder die Usability einer Webseite verbessert werden soll.

Die Relevanz von Mustern im UX-Design

Der visuelle Auftritt dient dazu, Nachrichten zu kommunizieren, Aktionen hervorzuheben und Informationen zu organisieren. Aber wir wird das am besten umgesetzt? Wiederum hilft ein Blick auf menschliche Gewohnheitsstrukturen. Die Wahrnehmung der Menschen ist darauf gepolt, aussagekräftige Muster zu entdecken, sie miteinander zu verbinden, und so der Umwelt einen Sinn zu geben. Insbesondere bei der Auswertung von abstrakten Informationen kommt diese Fähigkeit heute zum Einsatz.

Wie Forschungsergebnisse im Bereich der Gestaltpsychologie beweisen, erfolgt die Wahrnehmung von Strukturen und Ordnungsprinzipien nicht zufällig, sondern unterliegt gesetzmäßigen Mechanismen. Sogenannte Gestaltungsgesetze beschreiben, wie und warum Menschen bestimmte optische Bausteine zu einer kohärenten Gruppe organisieren. Wie sich zeigt, greifen sie dabei auf bekannte Muster zurück, um sich in neuen Situationen zu orientieren. Das ist der Grund, warum UI-Design-Patterns Lösungen auf bekannte Usability-Probleme liefern können.

Minimalismus: So viel wie nötig!

Da die User immer und überall versuchen, Muster zu erkennen, sind sie ständig auf der Suche nach Interaktionsbausteinen, mit denen sie eine positive Erfahrung verbinden. Die Überforderung der Nutzer resultiert deswegen in erster Linie aus Designinkonsistenzen, die zu kognitiven Dissonanzen führen. Eine unzusammenhängende visuelle Gestaltung verwirrt die User und mündet in einer schlechten User Experience.

Um für eine kohärente Visualisierung durch die Hierarchisierung der unterschiedlichen Inhalte und Funktionen zu sorgen, setzen Designer heute bevorzugt auf minimalistische Designansätze wie dem Flat Design. War es in seiner ursprünglichen Fassung noch bloß eine Reaktion auf die technischen Erneuerungen im Gerätebereich, treten im Zuge seiner Weiterentwicklung zum Flat Design 2.0 konkret die Bedürfnisse und Wünsche der Nutzer in den Mittelpunkt.

Häufig wird aber missverstanden, was ein simples Design ausmacht. Simpel bedeutet nicht, so wenig wie möglich, sondern so viel wie nötig. Um Inkonsistenzen vorzubeugen, müssen so viele optische Elemente wie nötig eingebunden werden, damit die Anwender eine bestimmte Interaktion ausführen können. Kohärenz durch Hierarchie heißt, den Nutzern genau das in möglichst einfacher Weise zu bieten, was sie im Moment brauchen oder suchen – nicht mehr und nicht weniger. Der derzeitige Erfolg sogenannter Conversational User Interfaces, denen eine Conversational User Experience zugrunde liegt, baut auf dieser Vorgabe auf.

White Space und seine Anziehungskraft

Den Symptomen von Überforderung, Verwirrung und Faulheit kann durch eine hierarchische und kohärente Gestaltung, die sich auf eine Sache konzentriert, vorgebeugt werden. Zu viele Optionen und ein zu überladenes Visual Design schrecken die User hingegen ab und führen zu hohen Bounce-Raten sowie einer niedrigen Konversion.

Im Laufe der vergangenen Jahre haben sich viele Best Practices etabliert, die erklären, wie optische Bausteine am besten gestaltet werden sollten, damit sie sich positiv auf die Psychologie der Nutzer auswirken. Neben der Aufteilung des Content, der Auswahl von Farben sowie der richtigen Typografie, spielt insbesondere der Einsatz von White Space dabei eine wichtige Rolle.

Die Verwendung von White Space unterscheidet sich jedoch von den anderen drei Kategorien. Beim White Space handelt es sich um ein visuelles Medium, das – im Gegensatz zu den übrigen grafischen Elementen – die Aufmerksamkeit der Anwender nicht direkt beansprucht, sondern eher die Funktion eines visuellen Ruhepols übernimmt. Das bedeutet aber nicht, dass White Space völlig funktionslos ist – im Gegenteil.

White Space? White Space!

Aber was ist White Space überhaupt? Saad Al-Sabbagh setzt sich in seinem Artikel „Using White Space: How Emptiness Can Give so Much to Design“ ausführlich mit der Thematik auseinander und unterscheidet zwischen zwei Formen von White Space.

Makroebene: aktiver White Space

Unter aktivem White Space wird der Freiraum zwischen den Hauptdesignelementen, wie Paragrafen oder Absätzen, verstanden. Sie geben der Webseite Struktur und rufen Empathie bei den Besuchern hervor. Asymmetrische Aufteilungen auf Makroebene lassen das Design dynamischer wirken und organisieren den User Flow.

Mikroebene: passiver White Space

Passiver White Space wird der Freiraum zwischen kleineren Bausteinen wie Wörtern und Zeilen sowie der freie Raum rund um Buttons oder Logos genannt. Solche Anpassung auf der Mikroebene nehmen keine drastischen Veränderungen am Design vor. Vielmehr unterstützt die Wahl der richtigen Abstände das allgemeine Erscheinungsbild einer Webseite und kann durch kleine Akzentuierungen das Benutzererlebnis verbessern.

apple-white-space

Apple: aktiver und passiver White Space, Quelle: apple.de

Ganz egal ob aktiver der passiver White Space: Der freie Raum muss nicht immer notwendig weiß sein, sondern kann auch farblich gestaltet werden.

tumblr-white-space

Tumblr: Farbe als White Space, Quelle: tumblr.com

White Space ist jedoch nicht nur auf Farben limitiert, sondern es können ebenfalls Bilder oder Videos eingesetzt werden.

spotify-white-space

Spotify: Bilder als White Space, Quell: spotify.de

Die drei Vorteile von White Space

Visuelle Hierarchie

Aktiver White Space hebt die Bedeutung von einzelnen Elementen durch ihre Abgrenzung vom restlichen Design hervor. Durch die Hierarchisierung der Seitenelemente wird die Aufmerksamkeit der Nutzer auf die wichtigsten Angebote gerichtet und so gestalterischen Inkonsistenzen vorgebeugt. Den Usern fällt es einfacher, sich auf Bausteine zu konzentrieren und mit ihnen zu interagieren, wenn diese klar von anderen Elementen unterschieden werden können.

Auf diese Weise kann für ein harmonisches und ausbalanciertes Design gesorgt werden, das die Anwender anzieht und zum Verbleib einlädt. White Space stellt deshalb keinen bloß passiven Baustein dar. Vielmehr unterstützt es den Stellenwert der „sichtbaren“ Visualisierungen, wie sich beispielsweise an der richtigen Platzierung von CTA-Buttons zeigt. Der Einsatz von White Space auf Makroebene gewährleistet die visuelle Integrität eines Layouts und sorgt für eine gute User Experience, ohne die allgemeine Performance merklich zu beeinflussen.

Optische Kohärenz

Die visuelle Hierarchisierung auf Makroebene sorgt dafür, dass bestimmte Abschnitte und Bereiche als zusammenhängende Teile erkannt werden. Eine solche kohärente Gestaltung erleichtert die Interaktionen der Nutzer, da sie von den optischen Elementen – wie bei der Technik des Storytellings – an die Hand genommen und durch die Inhalte navigiert werden. Die Verständlichkeit kann auf diese Weise um 20 Prozent gesteigert und so mangelnder Motivation sowie möglichen Verwirrungen Einhalt geboten werden.

Wie eine Studie der Wichita State University ergab, hilft die Verwendung von White Space auf Mikroebene dabei, die eingesetzten Typografien zu unterstützen, da es die Lesbarkeit der Inhalte steigert. Überladene Seiten mit mangelhafter visueller Hierarchie und fehlender optischer Kohärenz laden nicht zum Lesen ein, da keine klaren Zusammenhänge zwischen den Textbausteinen zu erkennen sind, eventuell auch, weil es ganz simpel an Textumbrüchen mangelt. Eine gute Lesbarkeit ist nicht nur geräte- und plattformübergreifend wichtig, sondern sorgt auch für eine verbesserte Barrierefreiheit.

User-Vertrauen

Ferner beweist eine Studie der Standford Universität, dass durch die richtige Verwendung von aktivem und passivem White Space das Vertrauen der Nutzer in einen Onlineauftritt gesteigert werden kann. Die Glaubwürdigkeit eines Branding hängt heute stark von einem professionellen visuellen Auftritt im Netz ab. Wie das Beispiel Apple zeigt, kann die Aussage einer Marke durch den Einsatz von White Space elegant unterstrichen und so zur Markenpositionierung beigetragen werden. Insbesondere hochwertige Produkte setzen deswegen auf viel freien Raum. Den Besuchern wird auf diese Weise der Eindruck vermittelt, dass man ihre Zeit nicht verschwenden möchte, da man weiß, was wichtig ist.

Fazit

Die Verwendung von White Space im Webdesign ist keine Platzverschwendung. Vielmehr helfen freie Räume dabei, den Content zu hierarchisieren und für eine visuelle Kohärenz zu sorgen. Das schlägt sich nicht nur positiv auf die User Experience nieder, sondern wirkt sich auch förderlich auf die Markenpositionierung aus. Ob die Nutzer ihre Aktivitäten positiv bewerten, hängt somit zu großen Teilen von der Passivität des White Space ab.

International JavaScript Conference 2017

The Vue of Search Engine Optimization – How to make your Single-Page App rank well

mit Dennis Schaaf (futurice) & André Scharf (DigitasLBi)

Von 0 auf 100 – Performance im Web

mit Sebastian Springer (MaibornWolff GmbH)

I didn’t know the Browser could do that

mit Sam Bellen (madewithlove)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -