8 Geheimnisse
Universelle Prinzipien
des Webdesigns
Ein herausragendes, originelles Webdesign zu entwerfen, ist äußerst anspruchsvoll. Es erfordert nicht nur technisches Know-how und Erfahrung, sondern auch einen ausgeprägten künstlerischen Geschmack. Zwar gibt es keine exakte Checkliste mit Regeln, die man einfach auswendig lernen kann, um perfekte Websites zu erstellen. Dennoch existieren bewährte UI/UX-Richtlinien. Wenn Sie diese Best Practices befolgen, können Sie schwerwiegende Fehler vermeiden und Ergebnisse erzielen, die sowohl ästhetisch ansprechend als auch finanziell lohnend sind.
Nachfolgend finden Sie 8 grundlegende Webdesign-Prinzipien, die Sie bei der Erstellung und anschließenden Suchmaschinenoptimierung (SEO) Ihrer Website kennen und anwenden sollten.
1. Die Drittel-Regel
Die Drittel-Regel besagt, dass ein Bild am interessantesten wirkt, wenn die darauf abgebildeten Motive oder Zonen durch imaginäre Linien getrennt sind, die das Bild in Drittel unterteilen – sowohl vertikal als auch horizontal.
Bedeutet das nun, dass Sie jedes wichtige Bildelement penibel an diesen Dritteln ausrichten müssen? Nicht unbedingt – es handelt sich lediglich um einen groben visuellen Leitfaden. Das Wichtigste ist, das Hauptmotiv oder den Fokuspunkt nicht direkt in der exakten Mitte des Bildes zu platzieren.
2. Visuelle Hierarchie
Durch eine gut durchdachte visuelle Hierarchie lenken Sie den Blick des Besuchers genau dorthin, wo Sie ihn haben möchten, beispielsweise zu Ihren Call-to-Action-Buttons. Wenn Sie sich die Elemente auf dem untenstehenden Bild ansehen, wird Ihnen zweifellos zuerst das große Element und erst danach das kleine auffallen. Genau das ist der Kern der visuellen Hierarchie im UI-Design.
Genau diese UX-Methoden sollten Sie nutzen, um Ihre Website-Besucher – im positiven Sinne – zu lenken. Auf diese Weise führen Sie den Nutzer, Gast oder Kunden intuitiv zu dem Teil der Website, an dem eine bestimmte Handlung geplant ist und Conversions generiert werden sollen.
3. Fitts’ Gesetz
Je größer ein Objekt ist, desto weniger Zeit wird benötigt, um darauf zu klicken!
Das bedeutet, dass Sie nicht versuchen sollten, Platz zu sparen, indem Sie interaktive Elemente zu klein gestalten – es wird für den Benutzer viel schwieriger, sie mit dem Mauszeiger oder auf mobilen Geräten zu treffen. Stattdessen sollten Sie Ziel-Objekte ausreichend groß machen, damit sie schneller angeklickt werden können. Das heißt jedoch nicht, dass größer immer besser ist. Ein Button, der den halben Bildschirm einnimmt, ist selten eine gute Idee.
Um es in die reale Welt zu übertragen: Es ist viel einfacher, auf eine Münze zu zeigen als auf eine Sommersprosse, aber ob man auf ein Haus oder eine riesige Wohnanlage zeigt, macht praktisch keinen Unterschied. Wenn Sie also das nächste Mal Ihr Website-Layout nach Fitts’ Gesetz optimieren, denken Sie daran: Wenn ein Link bereits ausreichend groß ist, wird eine weitere Vergrößerung die Zugriffsgeschwindigkeit nicht erhöhen. Gleichzeitig kann selbst eine kleine Vergrößerung bei winzigen Textlinks die Benutzerfreundlichkeit enorm verbessern.
4. Hicksches Gesetz
Das Hicksche Gesetz besagt, dass jede zusätzliche Option die Zeit erhöht, die für eine Entscheidungsfindung benötigt wird. Sie haben dies wahrscheinlich schon tausendmal in einem Restaurant erlebt. Wenn die Speisekarte zu viele Auswahlmöglichkeiten bietet, fällt es schwer, eine Entscheidung zu treffen und sich auf eine Sache festzulegen. Wenn Sie jedoch nur 2 Optionen zur Auswahl haben, nimmt der Entscheidungsprozess deutlich weniger Zeit in Anspruch.
Je mehr Optionen den Benutzern auf einer Website zur Verfügung stehen, desto schwieriger wird es für sie, diese zu nutzen (oder sie brechen den Vorgang komplett ab). Um das Nutzererlebnis (User Experience) zu verbessern, müssen Sie daher die Anzahl der Auswahlmöglichkeiten reduzieren. Wenn Sie einen Online-Shop mit vielen Produkten betreiben, sollten Sie unbedingt intelligente Filter hinzufügen, um Ihren Besuchern die Kaufentscheidung zu erleichtern.
5. Gesetz des gemeinsamen Schicksals
Elemente, die sich in die gleiche Richtung bewegen, werden als zusammenhängende Gruppe wahrgenommen. Wir interpretieren Objekte gedanklich als Linien, die sich entlang eines Weges bewegen, und gruppieren Elemente, die dieselbe Bewegungsrichtung und Flugbahn aufweisen.
Menschen gruppieren unbewusst parallele Linien oder erhobene Hände, da sie in dieselbe Richtung zeigen. Nutzen Sie dieses psychologische Gestaltgesetz, um die Aufmerksamkeit des Benutzers gezielt auf ein bestimmtes Element zu lenken (z. B. auf ein Newsletter-Formular, Sonderangebote usw.).
6. Clean Design
Die Hauptmerkmale von Clean Design (sauberes Webdesign) sind:
- Eine strenge, gut strukturierte Seitenaufteilung
- Exzellente und gut lesbare Typografie
- Eine gezielt eingeschränkte Farbpalette
- Ein einheitlicher visueller Stil für Bilder und Grafiken
Haben Sie bei der Entwicklung eines sauberen Designs keine Angst davor, zusätzliche, notwendige Elemente hinzuzufügen. Clean Design bedeutet nicht, dass eine Seite leer sein muss; es bedeutet lediglich, dass alles Vorhandene in einer perfekten, logischen Ordnung angeordnet sein sollte. Versuchen Sie zudem, Ihr Design kontinuierlich zu verbessern. Sie können jederzeit A/B-Tests mit neuen Schriftarten, Akzentfarben und anderen UI-Elementen durchführen, was letztendlich zu einer viel besseren Performance führen kann als Ihr anfänglicher Entwurf.
7. Gesetz der Nähe
Teile einer visuellen Komposition, die sich nahe beieinander befinden, tendieren dazu, als einheitliches Ganzes wahrgenommen zu werden. Je näher also zwei Formen oder Textblöcke beieinander platziert sind, desto stärker ist die Tendenz unseres Gehirns, sie zu gruppieren.
Im Webdesign funktioniert dieses Gesetz ganz einfach: Elemente, die logisch nichts miteinander zu tun haben, sollten nicht nebeneinander platziert werden, damit sie nicht als Einheit wahrgenommen werden. Umgekehrt gilt – wenn wir das Gefühl von Zusammengehörigkeit vermitteln wollen, müssen wir die entsprechenden Elemente gezielt in unmittelbarer Nähe anordnen.
8. Gesetz der Ähnlichkeit
Objekte können eine beliebige Anzahl von gemeinsamen Merkmalen aufweisen: Farbe, Form, Textur, Größe und mehr. Wenn ein Betrachter identische Eigenschaften bei verschiedenen Elementen bemerkt, fasst er sie anhand dieser Merkmale sofort zu einer logischen Gruppe zusammen.
Das offensichtlichste Beispiel für das Prinzip der Ähnlichkeit im Webdesign ist die Farbe von Hyperlinks. In der Regel folgen Textlinks einem klaren Muster: blaue Farbe und eine Unterstreichung. Das vereinfacht die Wahrnehmung von Texten für den Benutzer enorm: Hat er einmal erkannt, wie ein anklickbarer Link aussieht, wird er diese visuellen Merkmale automatisch nutzen, um weitere Links auf der gesamten Website zu identifizieren.
Natürlich ist die strenge Anwendung dieser und anderer Regeln nicht in jeder Situation zwingend erforderlich. Manchmal können Sie durch bewusstes Brechen dieser Konventionen weitaus spannendere, innovativere und interessantere Ergebnisse erzielen. Experimentieren Sie und versuchen Sie ruhig, Ihre Landingpage andersartig zu gestalten, auch wenn dies allen UX-Regeln widerspricht, die Sie bisher gelernt haben.
