Startseite / Blog / Reihe „UX für Produkte & Lösungen“ – Teil 1

Reihe „UX für Produkte & Lösungen“ – Teil 1

Morin Ostkamp 4. November 2016

Graphische Benutzerschnittstellen (GUIs) sind, wie der Name schon sagt, visuelle Kommunikationsmittel. Als solche gelten für sie dieselben Gestaltungsgrundlagen wie für analoge Printmedien, zum Beispiel Broschüren, Zeitungsartikel, Plakate oder Visitenkarten. Ganze Studiengänge befassen sich damit, wie sich hierfür ansprechende Entwürfe gestalten lassen. Aber man muss kein studierter Designer sein, um „schöne“ GUIs erstellen zu können: Die vier einfachen Gestaltungsgrundlagen aus dem Buch „The Non-Designer’s Design Book“ von Robin Williams sorgen bereits für ansehnliche Ergebnisse.  Im ersten Teil dieser Reihe widmen wir uns genau diesen vier Gestaltungsgrundlagen, deren Abkürzung sich perfekt einprägen lässt: CRAP – Contrast, Repitition, Alignment und Proximity. Jede einzelne Gestaltungsgrundlage wird im Folgenden kurz erklärt und anhand eines „Vorher-Nachher-Beispiels“ mit einer Visitenkarte demonstriert.

Proximity

“Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information, reduces clutter, and gives the reader a clear structure. […] [The] Principle of Proximity states that you group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch of unrelated bits. Items or groups of information that are not related to each other should not be in close proximity (nearness) to the other elements, which gives the reader an instant visual clue to the organization and content of the page.”

Abbildung 1: Eine Visitenkarte einmal ohne und einmal mit "Proximity".

Alignment

“Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element of the page. This creates a clean, sophisticated, fresh look. […] New designers tend to put text and graphics on the page wherever there happens to be space, often without regard to any other items on the page. […] Robin’s Principle of Alignment states, ‘Nothing should be placed on the page arbitrarily. Every item should have visual connection with something else on the page.’ The principle of alignment forces you to be conscious—no longer can you just throw things on the page and see where they stick.”

Williams rät außerdem dazu, Zentrierungen nur sehr bedacht zu verwenden. Diese Ausrichtung sei zwar „eine sichere Sache“, da sie immer gut aussieht, allerdings wirkt sie auch recht angestaubt und nicht mutig. Besser sei es, durch links- oder rechtsbündige Ausrichtungen eine klare Kante in das Design zu bringen. Insbesondere rechtsbündige Layouts wirken frisch und unkonventionell.

Abbildung 2: Die Visitenkarte mit zentriertem und rechtsbündigem "Alignment".

Repetition

“Repeat visual elements of the design throughout the piece. You can repeat colors, shapes, textures, spatial relationships, line thicknesses, fonts, sizes, graphic concepts, etc. This develops the organization and strengthens the unity. […] Robin’s Principle of Repetition states, ‘Repeat some aspect of the design throughout the entire piece.’ The repetitive element may be a bold font, a thick rule (line), a certain bullet, color, design element, particular format, the spatial relationships, etc. It can be anything that a reader will visually recognize.”

Abbildung 3: Die Visitenkarte einmal ohne und einmal mit "Repetition".

Contrast

“The die behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page. […] Contrast is one of the most effective ways to add visual interest to your page […] and to create an organizational hierarchy among different elements. The important rule to remember is that for contrast to be effective, it must be strong. Don’t be a wimp. […] Contrast is created when two elements are different. If the two elements are sort of different, but not really, then you don’t have contrast, you have conflict. That’s the key—Robin’s Principle of Contrast states, ‘If two items are not exactly the same, then make them different. Really different.’

Abbildung 4: Die Visitenkarte einmal ohne und einmal mit zusätzlichem "Contrast".

Ein Beispiel aus dem Geschäftsalltag

Um diese vier visuellen Gestaltungsgrundlagen noch greifbarer zu machen, gestalten wir exemplarisch ein typisches Dokument aus dem Geschäftsalltag, nämlich ein Benutzerhandbuch. Die nachfolgende Abbildung 5 zeigt das Ausgangsdokument.

Abbildung 5: Das ungestaltete Benutzerhandbuch.


Im ersten Schritt wurde die zusammenhängenden Informationen näher beieinander gruppiert („Proximity“). Dies hilft dem Betrachter dabei, zusammenhängende Informationen leichter zu identifizieren. In Graphischen Benutzerschnittstellen kann so die Informations-Architektur (IA) effektiv vermittelt werden. Das Ergebnis nach dem ersten Schritt zeigt Abbildung 6.

Abbildung 6: Das Benutzerhandbuch nachdem das Prinzip "Proximity" angewandt wurde.


Im zweiten Schritt wurde die Ausrichtung der einzelnen Elemente optimiert („Alignment“). Anstatt der klassischen, aber langweiligen zentrierten Ausrichtung, wurden alle Elemente rechtsbündig ausgerichtet. Dies starke Linie gibt dem Benutzerhandbuch ein klares und markantes Aussehen, wie Abbildung 7 zeigt.

Abbildung 7: Das Benutzerhandbuch mit rechtsbündig ausgerichteten Elementen ("Alignment").


Anschließend wurden gemäß dem Prinzip „Repetition“ wiederkehrende Elemente eingeführt: Zum einen wurde die Schrift aus dem Titel im Firmennamen wieder aufgegriffen; zum anderen wurden markante Punkte auf der Titelseite platziert. Abbildung 8 visualisiert das Ergebnis.

Abbildung 8: Wiederkehrende Elemente ("Repetition") werden eingesetzt.


Zuletzt wurde die visuelle Attraktivität durch stärkere Gegensätze („Contrast“) gesteigert: die Schriftgrößen unterscheiden sich deutlicher und der Titel hebt sich zudem farblich vom Untertitel ab. Das Endergebnis des fertig entworfenen Benutzerhandbuches zeigt Abbildung 9.

Abbildung 9: Das fertige Benutzerhandbuch, nach der Anwendung des Prinzips "Contrast".


Selbstverständlich handelt es sich bei diesem Benutzerhandbuch nur um ein vereinfachtes Beispiel, an dem die vier visuellen Gestaltungsgrundlagen nach Williams verdeutlicht werden sollen. Schönheit liegt bekanntlich im Auge des Betrachters und Geschmäcker sind verschieden. Deshalb müssen die visuellen Kommunikationsmittel, die mit Hilfe der vier Gestaltungsgrundlagen entworfen wurden, auch nicht automatisch jedem gefallen. Allerdings ist die Wahrscheinlichkeit visuell ansprechende Ergebnisse zu erschaffen mit CRAP in jedem Fall deutlich größer, als wenn man „einfach so“ loslegt.
Der nächste Teil dieser Reihe widmet sich den wichtigen sieben Entwurfsprinzipien von Donald Norman. Sein Buch „The Design of Everyday Things“ zählt seit den 1980er Jahren zur Standard-Lektüre von Designern weltweit. Neben seiner Faszination für Teekannen und Türen teilt der Psychologe Norman auch seine Erkenntnisse über die „Seven Stages of Action“, die „Three Levels of Processing“ und seine berühmten „Seven Fundamental Principles Of Design“.