How CRAP is Your Design?

25. März 2018 in design

Wir kommen nahezu alle irgendwann in die Situation, eine Präsentation erstellen zu müssen, HTML-Seiten für eine Web-Anwendung gestalten zu wollen oder wenigstens irgendwelche visuellen Darstellungen zu beurteilen. Nun haben die meisten von uns aber keine Ausbildung als Designer und daher fällt es oft schwer, ein Design objektiv zu bewerten oder Entscheidungen zu treffen, wo und wie man z.B. etwas auf einer HTML-Seite platziert.

Manchmal sieht man auch ein eigenes oder fremdes Design und hat das Gefühl, dass es noch nicht wirklich gut aussieht aber man kann nicht genau begründen warum es nicht gut aussieht. Dieser Artikel soll eine kleine Hilfestellung für uns Nicht-Designer geben, so dass wir mit einfachen objektiven Regeln eine ansprechende visuelle Repräsentation erstellen oder bewerten können.

CRAP

Der Titel “How CRAP is Your Design?” drückt zweierlei aus: der Begriff bedeutet im Englischen soviel wie “schlimm”, “mies” oder “beschissen”. Tatsächlich gibt es eine ganze Menge von Web-Anwendungen (insbesondere im Umfeld von Unternehmensanwendungen), die wirklich schlimm ausssehen. “CRAP” ist aber gleichzeitig ein Akronym und kann als Gedankenstütze für eine einfache und kurze Liste von Design-Regeln dienen:

Contrast
Repetition
Alignment
Proximity

Contrast

Wir sind uns dessen vielleicht nicht bewusst, aber unsere Gehirne sind so gestaltet, dass sie kontinuierlich nach Ähnlichkeiten und Unterschieden suchen. Kontrast erregt unsere Aufmerksamkeit. Also sollten wir Elemente, die nicht gleich sind, deutlich unterschiedlich gestalten, nicht nur ein wenig unterschiedlich.

Kontrast ist eines der mächtigsten Design-Konzepte und kann z.B. durch Nutzung von Farbe, Weiß-Raum, kursive oder fette Schrift erzeugt werden. Kontrast kann also verwendet werden, um die Aufmerksamkeit des Betrachters gezielt auf die wichtigsten Punkte einer Seite, Folie o.ä. zu lenken. Ein schwacher Kontrast wirkt oft nicht nur langweilig sondern sogar verwirrend.

Beispiel

Die folgenden beiden Bilder demonstrieren den Effekt von geringem und hohem Kontrast:

Kontrast vorher Kontrast nachher

Durch den (übertrieben) geringen Kontrast im linken Bild sinkt die Lesbarkeit. Da unterschiedliche Dinge (big und small) zudem gleich dargestellt werden, sinkt auch die Verständlichkeit. In einer Web-Applikation würde der geringe Kontrast zudem zu einer geringeren Benutzbarkeit führen und zudem die Barrierefreiheit einschränken. Der Kontrast bezieht sich in den beiden Bildern nicht nur allein auf die Farbgebung sondern auch auf die Schriftgröße.

Auf dem zweiten Bild werden Farben und Formen so eingesetzt, dass der erhöhte Kontrast zu einer besseren Lesbarkeit führt. Außerdem unterstützen die Schriftgrößen noch den Inhalt des Textes und verstärken so die Aussage.

Repetition

Das Prinzip der Wiederholung bedeutet, dass gleiche oder ähnliche Elemente innerhalb eines Designs immer wieder verwendet werden. Dadurch werden eine klare Einheitlichkeit und ein durchgängiges Erscheinungsbild erzeugt.

Farben, Schriftarten und –größen, Symbole, Linien, Kästen oder Hintergründe sollten sich innerhalb einer Seite und eines gesamten Designs wiederholen, so dass der Betrachter sich schnell zurecht findet und die dargestellten Elemente als einheitlich und harmonisch empfindet.

Zu viel Wiederholung kann aber auch langweilig und statisch wirken. Variationen von Positionen oder Farben können dem entgegen wirken.

Beispiel

Die folgenden beiden Bilder demonstrieren wie das Konzept der Wiederholung die Wahrnehmung beeinflusst:

Wiederholung vorher Wiederholung nachher

Auf dem ersten Bild werden vier verschiedene Schriftarten und viele Farben verwendet. Das Resultat wirkt unruhig und wenig harmonisch und der Betrachter sucht vergeblich nach den Gründen für die verschiedenen Stile.

Demgegenüber nutzt das zweite Bild für die Darstellung nur eine Schriftart, eine Schriftfarbe und eine Farbe für die Balken. Dem Betrachter ist sofort klar, dass alle Balken die gleiche Bedeutung haben und das gesamte Diagramm wirkt ruhiger und übersichtlicher.

Alignment

Das Prinzip der Ausrichtung dreht sich ausschließlich darum, dass nichts auf einer Seite oder Folie den Eindruck machen sollte, als sei es zufällig positioniert worden.

Ausrichtung bewirkt, dass alle Elemente durch unsichtbare visuelle Linien miteinander verbunden werden.

Während die Wiederholung hauptsächlich auf unterschiedliche Seiten angewendet wird, erzeugt die Ausrichtung eine Einheitlichkeit verschiedener Elemente innerhalb einer Seite oder Folie. Das gilt auch für Elemente, die weit voneinander entfernt sind.

Kleine Ungenauigkeiten bei der Ausrichtung fallen oft nicht bewusst ins Auge, das Design sieht aber unprofessioneller aus.

Beispiel

Die folgenden drei Visitenkarten zeigen den Effekt von unterschiedlichen Ausrichtungsstrategien:

Ausrichtung Ecken Ausrichtung zentriert Ausrichtung rechtsbündig

Nun stellt sich die Frage: Welche dieser Visitenkarten sieht für die meisten Betrachter am besten aus?

  • die erste Visitenkarte wirkt zunächst sehr individuell. Allerdings gibt es sowohl zentrierte als auch links- und rechtsbündig ausgerichtete Elemente und das Design wirkt dadurch unruhig. Es gibt keine eindeutige Leserichtung und der Betrachter muss sich die Zusammenhänge “erarbeiten”
  • die zweite Visitenkarte nutzt nur zentrierten Text und wirkt dadurch etwas klarer. Allerdings sollten zentrierte Layouts sehr bewusst eingesetzt werden, da sie oft langweilig aussehen und wenig Dynamik erzeugen.
  • die dritte Visitenkarte nutzt rechtsbündig ausgerichteten Text. Dieser Layoutstil wirkt immer etwas ungewöhnlich und erregt Aufmerksamkeit. Bei klar links- oder rechtsbündig ausgerichteten Elementen entsteht beim Betrachter der Eindruck einer unsichtbaren Linie, die hier auf der rechten Seite die Elemente zusammenhält und gruppiert.

Proximity

Das Prinzip der Nähe platziert die Elemente einer Seite näher oder weiter entfernt, so dass sie organsierter wirken.

Zusammengehörende Elemente sollten gruppiert und nahe beieinander positioniert werden, so dass sie wie eine Gruppe wirken und nicht wie unzusammenhängende Dinge.

Betrachter werden vermuten, dass weiter voneinander entfernt positionierte Elemente nichts miteinander zu tun haben.

Der Leser eines Dokuments sollte sich niemals durch eine Seite oder Folie „arbeiten“ müssen, um zu erkennen, welche Überschrift zu welchem Bild gehört usw.

Beispiel

Die folgenden beiden Beschreibungen von Wolkenarten veranschaulichen den Effekt der An- und Abwesenheit von Nähe:

Nähe vorher Nähe nachher

Für einen Betrachter ist auf der ersten Darstellung nicht erkennbar, welcher Text zu welchem Bild gehört. Außerdem sind die Texte nicht gruppiert und es ist schwer erkennbar, welche Informationen enthalten sind.

Bei der zweiten Variante ist der Text klarer dem jeweiligen Bild zugeordnet und zusammengehörende Elemente werden so intuitiv erkennbar. Das Konzept der Nähe findet sich aber auch bei den Daten für die “Höhe”, “Bestandteile” und “Temperatur”, die jeweils visuell der zugehörigen Beschriftung zugeordnet wurden.

Beispiel zu allen 4 Regeln

Zum Abschluss gibt es noch ein Beispiel, in dem alle 4 Regeln zusammen treffen:

Beispiel vorher Beispiel nachher Variante 1 Beispiel nachher Variante 2

Auf dem ersten Bild sieht man eine Folie, die ich in sehr ähnlicher Form bereits selbst gesehen habe. Auf dieser Folie soll eine Firma zusammen mit einigen Fakten positiv dargestellt werden. Da alle 4 CRAP-Regeln ignoriert wurden, sieht diese Folie allerdings sehr unruhig und unprofessionell aus.

Das zweite Bild zeigt nahezu die gleichen Informationen unter Berücksichtigung der CRAP-Regeln. Das dritte Bild ist eine Vereinfachung, die wahrscheinlich noch besser in Erinnerung bleibt. Die fehlenden Informationen sollten dann natürlich von der präsentierenden Person auf der Tonspur an die Zuhörer übermittelt werden.

Zusammenfassung

Es ist gar nicht so schwierig, ein visuelles Design objektiv zu bewerten. Die obigen Regeln mögen aus Sicht von professionellen Designern sicher sehr vereinfacht wirken - für die meisten Menschen sind sie aber gerade aufgrund ihrer Einfachheit überhaupt erst anwendbar und ich habe selbst schon oft erlebt, dass man mit diesen wenigen Grundsätzen schon sehr viel erreichen kann.

Als kleine Motivation für bessere Präsentationen und Web-Seiten ist hier ein Zitat von Paul Arden:

The more strikingly visual your presentation is, the more people will remember it. And more importantly, they will remember you.

Wer noch mehr darüber lesen möchte wie man bessere Präsentationen erstellt, dem empfehle ich das Buch Presentation Zen von Garr Reynolds. Das Buch gibt es übrigens auch auf deutsch.

Getaggt in:
design CRAP präsentationen contrast repetition alignment proximity
comments powered by Disqus