Whitespace: 10 Fakten zur Kraft des Nichts

Wie mächtig der Whitespace eines User Interface Designs für die Aufmerksamkeits- bis hin zur Umsatzsteigerung ist.

Ich liebe es, meine Wissen über User Experience Design weiterzugeben. Auf diese Weise kann ich meine Faszination von den Ursachen menschlichen Verhaltens teilen. Zu diesen Ursachen gehört der Whitespace eines User Interface (UI) Designs, der gern leichtfertig als verschenkter Platz abgewertet wird.

Wie immer mehr Studien zeigen, ist genau das Gegenteil der Fall. Das nehme ich zum Anlass, um an dieser Stelle explizit für die Vorteile von Whitespace zu werben. Dafür erfahren Sie als erstes, was Whitespace ist. Anschließend lernen Sie seine mächtige Wirkung von der Aufmerksamkeits- bis hin zur Umsatzsteigerung kennen.

Was ist Whitespace?

Whitespace bezeichnet den Raum, den ein Element in einer visuellen Darstellung umgibt. Bereits 2007 veröffentlichte Mark Boulton einen Artikel bei alistapart.com, in dem er mehrere Arten von Whitespace im User Interface Design unterscheidet:

Micro Whitespace

Micro Whitespace ist der Leerraum zwischen kleineren Elementen wie zwischen Listenelementen, zwischen einer Beschriftung und einem Bild oder zwischen Worten und Buchstaben. Micro Whitespace ist auch der Leerraum in jedem Zeichen einer Schriftart und um es herum. Ein schönes Beispiel hierfür ist die überarbeitete Schriftart vom Economist:

Macro Whitespace

Macro Whitespace ist der Raum zwischen Elementen wie Textblöcken und Bildern.

Das folgende, vergleichende Beispiel deutet Ihnen bereits einen Teil der Wirkungskräfte an, die Whitespace so wichtig machen und in der zweiten Hälfte dieses Artikels vorgestellt werden.

Ein Lorem ipsum Text mit wenig Whitespace…

wirkt bei gleichbleibender Schriftart und -größe weniger attraktiv als derselbe Text mit mehr Whitespace:

Aktiver und passiver Whitespace

Bisher fokussieren die Beispiele allein auf passiven Whitespace für das User Interface Design. Dieser trägt zu der Atmosphäre bei, die ein User Interface ausstrahlt.

Dem passiven steht der aktive Whitespace gegenüber. Aktiver Whitespace führt die Aufmerksamkeit der User ohne auf Farben oder Formen zurückgreifen zu müssen, die für Unruhe sorgen könnten.

Im folgenden Beispiel wurde dafür einfach Macro Whitespace hinzugefügt und der Micro Whitespace mit Hilfe von Fettschrift reduziert:

Die psychologische Wirkung des Whitespace

Ich bin mir sicher, dass Ihnen die obigen Beispiele bereits ein Gefühl für den Vorteil von Whitespace gegeben haben. Jetzt möchte ich mit Ihnen zusammen auf die Erkenntnisse der Whitespace-Forschung schauen.

1. Whitespace schafft Aufmerksamkeit

Whitespace erhöht die Bedeutung hervorgehobener Inhalte und strahlt Luxus aus. Intuitiv kennen wir das auch aus der realen Welt, in der psychischer und physischer Freiraum als Luxus gelten.

(Truchard & Katz-Haas, 1998; Mortelmans, 2005; White, 2011)

2. Whitespace steigert die Lesbarkeit von Texten

Bereits seit 1986 ist bekannt, dass der richtige Einsatz von Whitespace die Lesbarkeit und visuelle Suche verbessert. Durch Variation des Whitespace konnte auch die Lesegeschwindigkeit gesteigert werden.

(Carusso, 1986; Chaparro, Shaikh, & Baker, 2005; Chaparro et al., 2004)

3. Whitespace steigert das Verständnis

Durch die Verwendung von Whitespace zwischen den Absätzen sowie am linken und rechten Rand steigt das Textverständnis um fast 20%.

(Lin, 2004)

4. Whitespace steigert die wahrgenommene Benutzerfreundlichkeit

Die wahrgenommene Benutzerfreundlichkeit fördert in Usern die Erwartung, das User Interface eines Systems auch bedienen zu können. Whitespace fördert diese wahrgenommene Usability.

(Davis, 1989; Smith, 2008)

5. Whitespace und Usability

Die Untersuchungen zum Einfluss des Whitespace auf die Usability führten zu unterschiedlichen Ergebnissen. Im einen Teil der Untersuchungen förderte Whitespace die Usability und im anderen nicht. So oder so, führte Whitespace nicht zu einer schlechteren Usability.

(Sin Lee Loh, 2013)

6. Whitespace steigert die Zufriedenheit

Wahrgenommene und reale Usability wirken positiv auf die User Experience ein. Geschickt eingesetzt, beeinflusst Whitespace die Zufriedenheit der Anwender und auch ihre Stimmung.

(Okwonkwo, 2005; Chaparro, Shaikh, & Baker, 2005; Finke, 2011)

7. Whitespace fördert Vertrauen

Das Vertrauen in eine Webseite sowie ihre Glaubwürdigkeit werden zu beinahe 50% durch ihr Design im Allgemeinen oder spezielle Teile wie ihr Layout bestimmt. Hierbei ist der richtige Einsatz von Whitespace wesentlich.

(Fogg et al, 2003; Wang and Emurian, 2005)

8. Whitespace fördert Kaufabsicht

Die geschickte Verwendung von Whitespace beeinflusst bedeutsam die Kaufabsicht sowie die Kundenwahrnehmung hinsichtlich Qualität und Prestige.

(Pracejus et al.; Mortelmans, 2005)

9. Whitespace und Kaufverhalten

Aus Untersuchungen in Offline-Geschäften ist bekannt, dass physikalische Ladenfaktoren wie Layout, Farben und Unordnung das Kaufverhalten prägen. Ausgehend von den dahinterliegenden Modellen wird dies auch für Online-Shops vermutet. Bisher wurde jedoch noch nicht untersucht, in welchem Ausmaß Whitespace als Teil des Layouts das Kaufverhalten beeinflusst.

Bekannt ist jedoch, dass das Design verschiedener Online-Shops darüber entscheidet, wo eingekauft wird. Erfolgreiches Design berücksichtigt die zuvor genannten Erkenntnisse über Whitespace.

(Baker, 1986; Bitner, 1992; Liang and Hai (2002)

10. Whitespace fördert eine positive Kundenwahrnehmung

Die passende Nutzung von Whitespace lässt die Kunden auf eine höhere Produktqualität schließen. Mit dieser Einschätzung steigt für sie der Wert des Produktes und die Bereitschaft mehr dafür zu bezahlen.

(Oxenfeldt, 1950; Morris & Bronson, 1969; Gerstner, 1985)

Den Nutzen von Whitespace auf den Punkt gebracht

Die genannten Erkenntnisse zum Stand der Forschung rund um das Thema Whitespace machen eines deutlich:

Whitespace erfüllt nicht nur ästhetische Zwecke, sondern schafft auch funktionellen Nutzen.

(Bernard, Chaparro & Thomasson, 2000)

Somit ist Whitespace viel mehr als nichts. Er erinnert mich an die Zahl Null. Sie ist auch mehr als nichts und trotzdem wurde ihr Nutzen vom großen Teil Europas erste sehr spät anerkannt. Bitte machen Sie sich die starke Wirkungskraft des Whitespace in Ihrem User Interface Design ab sofort zu nutze. Viel Erfolg!

Welche Erfahrung haben Sie mit Whitespace? Bitte teilen Sie Ihre Gedanken mit uns und inspirieren Sie auch unsere anderen Leser.

Quellen

Sin Lee Loh (2013). Effects of White Space on Consumer Perceptions of Value in E-Commerce

http://meiert.com/en/blog/20070113/web-design-15-important-research-findings-you-should-know/ Stand: 08.12.2014