8 Regeln und Tipps für ausgezeichnetes Webdesign

Wenn man sich mit dem Webdesign oder der Neugestaltung einer Website – dem Redesign – beschäftigt, passiert es leicht, dass man sich bei der Ästhetik verzettelt. „Dieser Blauton sieht einfach nicht so toll aus ... Wäre es nicht super, wenn wir das Logo oben rechts platzieren? ... Wie wäre es, wenn wir ein riesiges animiertes GIF in die Mitte der Seite setzen?“

Wenn Sie aber auf Ihrer Website wirklich etwas erreichen wollen (z. B. Anmeldezahlen erhöhen, Leads generieren usw.), dann müssen Sie sich mit mehr als nur dem Aussehen Ihrer Website befassen.

Wir leben in einer Welt mit weitaus mehr als einer Milliarde Websites, auf denen Besucher und Besucherinnen möglicherweise landen können. Daher ist es besonders wichtig, dass das Webdesign anwendungsfreundlich ist. Ihre Website muss leicht zu bedienen sein. Gleichzeitig muss die User Experience positiv sein. Der Besuch Ihrer Website sollte angenehm sein und je nach Inhalt vielleicht sogar Spaß machen.

Es liegt auf der Hand, dass es sich bei Benutzungsfreundlichkeit und User Experience um ganz eigene Disziplinen handelt. Man könnte Jahre damit verbringen, sie zu erforschen, um ihre Komplexität zu verstehen. Aber wir wollen Ihnen hier ein paar klare Tipps geben, wie Sie sich zurechtfinden können.

Daher haben wir eine Liste an Regeln für Anwendungsfreundlichkeit und User Experience zusammengestellt, die Sie in Ihrem nächsten Projekt anwenden können, um ein gutes Webdesign zu entwerfen.

Warum ist gutes Webdesign wichtig?

Webdesign spielt eine entscheidende Rolle. Es prägt die User Experience maßgeblich und entscheidet darüber, ob sich User und Userinnen auf einer Website wohlfühlen oder nicht.

Je besser der Webauftritt auf die Bedürfnisse der Besucher und Besucherinnen angepasst ist, desto länger bleiben sie. Hierdurch sinkt die Bounce Rate und die Wahrscheinlichkeit, aus Interessierten Kunden und Kundinnen zu machen, steigt.

Des Weiteren beeinflusst gutes Webdesign die Loyalität der Kundschaft und den Eindruck, den sie von Ihrem Unternehmen hat. Somit haben Sie die Möglichkeit, durch ein effizientes Webdesign für ein ansprechendes und überzeugendes Markenimage zu sorgen.

Ihr Webdesign repräsentiert Ihr Unternehmen oder Ihre Marke vor einer großen Anzahl an Menschen. Das gilt für den heimischen Markt ebenso wie für internationale Märkte.

Häufig ist eine Website der erste direkte Kontaktpunkt, den potenzielle Kunden und Kundinnen mit Ihrem Unternehmen haben. Hier greift das alte Sprichwort: „Für einen ersten Eindruck gibt es keine zweite Chance.“

Sie sollten diesen ersten Eindruck daher nutzen, um Ihre Zielgruppe von der Usability Ihrer Website zu überzeugen und sie dazu zu animieren, lange bei Ihnen zu bleiben. Ein gutes Webdesign und die Gestaltung der Inhalte, Texte und Schriften sind hierbei ein wichtiger Baustein.

8 Webdesign-Regeln für ein ausgezeichnetes Nutzererlebnis

Ein ausgezeichnetes Anwendungserlebnis ist das Ergebnis einer klaren Strategie und harter Arbeit. Die folgenden acht Kriterien helfen Ihnen dabei, Ihren Webauftritt nutzungsfreundlich zu gestalten und ein gutes Webdesign zu entwickeln.

1. Einfachheit

Wenn Sie sich das nächste Mal in ein umfassendes Umgestaltungsprojekt stürzen, behalten Sie bitte Folgendes im Hinterkopf: Den meisten Besuchern und Besucherinnen ist es ziemlich egal, wie Ihre Website aussieht.

Ihre Gäste kommen nicht auf Ihre Seite, um zu bewerten, wie genial Ihr Design ist. Sie besuchen Ihre Website, weil sie nach Informationen suchen oder eine bestimmte Aktion ausführen wollen.

Wenn Sie unnötige Designelemente zu Ihrer Website hinzufügen – also Elemente, die keine Funktion erfüllen – erschweren Sie Ihren Nutzern und Nutzerinnen damit das Erreichen Ihres eigentlichen Ziels.

Aus der Perspektive von Anwendungsfreundlichkeit und User Experience betrachtet, ist Einfachheit Ihr bester Freund. Dieser Aspekt lässt sich auf verschiedene Weise umsetzen. Hier ein paar Beispiele, die Sie in Ihrem eigenen Webdesign einbauen können:

• Farben: Verwenden Sie nicht zu viele. Das Handbook of Computer-Human Interaction (Handbuch für die Mensch-Computer-Interaktion) empfiehlt, maximal fünf (plus/minus zwei) verschiedene Farben in Ihrem Webdesign zu verwenden.
• Schriftarten: Die Schriftarten auf Ihrer Website sollten gut lesbar sein und wie auch schon bei den Farben sollten Sie nicht zu viele verschiedene verwenden. Üblicherweise wird empfohlen, maximal drei verschiedene Schriftarten in maximal drei verschiedenen Größen zu verwenden.
• Grafiken: Verwenden Sie nur dann Grafiken, wenn sie Nutzern und Nutzerinnen dabei helfen, eine bestimmte Aktion auszuführen oder wenn sie eine spezielle Funktion haben (fügen Sie nicht einfach wahllos überall Grafiken ein).

Hier ein Beispiel für ein einfaches Webdesign von HelloFresh, wo Sie Kochboxen kaufen können, mit denen sich leckere Gerichte ohne großen Aufwand zubereiten lassen. Gleich zu Beginn werden die Vorlieben der Zielgruppe abgefragt und geeignete Boxen vorgestellt. Der Mehrwert für die Gäste steht klar im Mittelpunkt und wird immer wieder betont. Das Webdesign ist ansprechend, aber minimalistisch und fokussiert sich auf das Wesentliche.

Quelle: Screenshot hellofresh

Entfernen Sie alles, was keinen Mehrwert liefert. Ergänzen Sie dann ein wenig visuelle Struktur. Jedes Element auf einer Seite muss entweder den Nutzern und Nutzerinnen oder dem Unternehmen einen Mehrwert bieten – idealerweise beiden.

Wenn Sie das Ganze dann aber zu wörtlich nehmen und zu viele Elemente entfernen, wird das Webdesign recht schnell spartanisch. Dann braucht Ihre Seite eine visuelle Struktur. Es geht also vor allem darum:

Die Seite sollte sich auf die wichtigsten Inhalte konzentrieren.

Die notwendige visuelle Struktur und interessante Aspekte sind vorhanden, wodurch die ästhetische Benutzungsfreundlichkeit unterstützt wird. Die Visualisierung darf aber nicht von den wichtigsten Seiteninhalten ablenken.

2. Visuelle Hierarchie

Das Prinzip der visuellen Hierarchie ist eng mit dem Prinzip der Einfachheit verbunden. Dabei geht es um die Anordnung und Organisation von Website-Elementen auf eine Art, die Besucher und Besucherinnen auf natürliche Weise zu den wichtigsten Elementen leitet.

Denken Sie daran: Bei der Optimierung von Anwendungsfreundlichkeit und User Experience ist das Ziel, die Besucher und Besucherinnen dazu zu bewegen, eine bestimmte Aktion auszuführen.

Das soll auf eine Weise geschehen, die sich für sie natürlich und angenehm anfühlt. Strukturieren Sie Ihre Website und passen Sie beispielsweise durch gutes Webdesign die Position, die Farbe oder die Größe bestimmter Elemente wie Texte, Grafiken und Schriften an. So locken Sie die Besucher und Besucherinnen ganz natürlich zuerst zu den wichtigsten Elementen.

Im unten gezeigten Beispiel von der Spotify-Website können Sie sehen, dass der Fokus auf dem Slogan des Anbieters „Listening is everything“ liegt. Außerdem ist die CTA-Schaltfläche „HOL DIR SPOTIFY FREE“ in der visuellen Hierarchie zentral gehalten.

Die Website setzt auf zwei dominante, ansprechende Farben, die den Nutzern und Nutzerinnen im Gedächtnis bleiben. Alles ist minimalistisch gehalten und auf das Wesentliche (Slogan und CTA-Button) ausgerichtet.

Quelle: Screenshot Spotify

3. Einfache Navigation

Eine intuitive Navigation Ihrer Website hilft Ihren Besuchern und Besucherinnen dabei, schnell das zu finden, wonach sie suchen. Idealerweise sollten User und Userinnen auf Ihrer Seite ankommen und nicht lange darüber nachdenken müssen, wohin sie als Nächstes klicken sollen. Eine Bewegung von A nach B sollte auf Ihrer Seite einfach sein.

Folgende Tipps helfen Ihnen dabei, Ihre Seitennavigation zu optimieren und so ein gutes Webdesign zu erreichen:

• Die Struktur Ihrer Hauptnavigation sollte einfach sein (und sich am besten am oberen Rand der Seite befinden).
• Auch in der Fußzeile Ihrer Seite sollte eine Navigationsfunktion enthalten sein.
• Verwenden Sie auf jeder Seite – außer auf der Startseite – Breadcrumbs (Brotkrümel), damit Ihre Besucher und Besucherinnen wissen, wo sie sich befinden und wie sie dorthin gekommen sind.
• Am oberen Ende Ihrer Seite sollten Sie eine Suchfunktion einbauen, damit Besucher und Besucherinnen einfach nach Begriffen suchen können.
• Zu viele Navigationsoptionen sind kontraproduktiv.
• Gehen Sie nicht zu sehr in die Tiefe. In den meisten Fällen ist es am besten, wenn die Navigation nicht tiefer als drei Ebenen ist.
• Bauen Sie Links in den Text Ihrer Website ein und kennzeichnen Sie, wohin diese Links führen.

Noch ein Webdesign-Tipp: Wenn Sie einmal festgelegt haben, wie die Navigation Ihrer Seite (oben) aussehen soll, bleiben Sie dabei. Die Beschriftung und Position sollten auf jeder Seite Ihrer Website gleich aussehen. Hier ist ein Beispiel von der InVision-Website:

Quelle: Screenshots InVision

4. Einheitlichkeit

Bei einem guten Webdesign sollte nicht nur Ihre Navigation einheitlich sein, sondern das gesamte Erscheinungsbild sollte über die einzelnen Seiten hinweg stimmig sein. Die Hintergründe, Farbschemata, Schriftarten und auch der Stil in Ihren Texten sind Aspekte, bei denen sich eine einheitliche Gestaltung positiv auf die Benutzungsfreundlichkeit und die User Experience auswirkt.

Damit wollen wir aber nicht sagen, dass alle Seiten ein identisches Layout haben sollten. Sie sollten verschiedene Layouts für bestimmte Seitentypen erstellen (z. B. ein Layout für Landing-Pages, eins für Informationsseiten usw.).

Diese Layouts sollten Sie in Ihrem Webdesign einheitlich einsetzen, damit die Besucher und Besucherinnen leicht erkennen, welche Informationen Sie ihnen wo zur Verfügung stellen.

In dem Beispiel unten sehen Sie, dass Airbnb auf jeder ihrer Hilfeseiten das gleiche Layout verwendet (das ist gängige Praxis). Stellen Sie sich nur einmal vor, wie Sie sich als Besucher oder Besucherin fühlen würden, wenn jede Hilfeseite ein einzigartiges Layout hätte.

Quelle: Screenshot AirBnB

Quelle: Screenshot AirBnB

5. Zugänglichkeit

Um eine besonders gute User Experience zu bieten, muss Ihre Website mit verschiedenen Geräten (und Betriebssystemen sowie Browsern) kompatibel sein, die Ihre Besucher und Besucherinnen nutzen. Vor allem die mobile Nutzung sollte bei der Gestaltung des Webdesign mitgedacht werden.

Im übergeordneten Sinne bedeutet das eine Investition in eine hochflexible Website-Struktur – wie Responsive Design. Bei einer Website mit Responsive Design werden die Inhalte und deren Format automatisch an die Größe desjenigen Gerätes angepasst, das ein Besucher oder eine Besucherin verwendet (siehe Abbildung unten). Einige Homepage-Baukästen übernehmen diese Anpassung jedoch automatisch.

Quelle: Screenshot ITService4U

Aber auch weniger tiefgreifende Veränderungen können die Zugänglichkeit einer Website verbessern. Beispielsweise sollten Sie Ihren Bildern ALT-Text hinzufügen, damit die Nutzenden, in deren Browsern die Bilder nicht angezeigt werden, trotzdem verstehen können, um was es auf der Seite geht.

Das spielt unter anderem bei der Nutzung von Screenreadern eine Rolle. Solche Geräte werden von Menschen mit eingeschränktem oder nicht vorhandenem Sehvermögen genutzt, um sich die Inhalte einer Website vorlesen zu lassen. Für sie stellen ALT-Texte somit eine unverzichtbare Komponente der Usability dar.

Letztlich ist es wichtiger, dass Ihre Website eine gute Nutzererfahrung über verschiedene Plattformen hinweg bietet, als dass sie auf allen Plattformen identisch aussieht. Das kann bedeuten, dass Sie sich an plattformspezifische Design-Konventionen halten, anstatt zu versuchen, einzigartige Designelemente auf Ihrer Seite unterzubringen, die Nutzern und Nutzerinnen auf einigen Plattformen womöglich fremd sind.

6. Konventionen

Es gibt bestimmte Webdesign-Konventionen, die über die Jahre hinweg den meisten Internetnutzern und -nutzerinnen bekannt geworden sind. Dazu zählen zum Beispiel:

• Eine Hauptnavigation einer Seite, die sich oben oder links befindet.
• Ein Logo, das sich oben links (oder in der Mitte) auf der Seite befindet.
• Ein Logo, das anklickbar ist und den Besucher oder die Besucherin zurück zur Startseite bringt.
• Links, die die Farbe oder das Aussehen ändern, wenn sich der Mauszeiger darüber bewegt.

Es mag sein, dass Sie sich versucht fühlen, diese Webdesign-Konventionen über Bord zu werfen, um besonders originell oder einzigartig zu sein. Jedoch wäre das (wahrscheinlich) ein Fehler. Das wäre so, als würden Sie das Lenkrad eines Autos auf den Rücksitz verlegen. Was wir damit sagen wollen? Tiefgreifende Veränderungen verwirren nur.

Um Ihren Besuchern und Besucherinnen das bestmögliche Erlebnis auf Ihrer Seite zu bieten, sollten Sie sich an die Erlebnisse halten, die Ihre Zielgruppe bereits kennt. Darin liegt ein echter Vorteil. Sie können diese Informationen dazu nutzen, Ihre Seite leichter navigierbar zu machen.

Eines der bekanntesten Beispiele von Webdesign-Konventionen: Die Verwendung des Einkaufswagen-Symbols auf E-Commerce-Seiten.

7. Glaubwürdigkeit

Webdesign-Konventionen – also Designelemente/-strategien, die Besuchern und Besucherinnen bereits bekannt sind – können Ihnen dabei helfen, Ihrer Seite mehr Glaubwürdigkeit zu verleihen. Wenn Sie eine Seite erstellen wollen, die Ihren Gästen die bestmögliche User Experience bietet, dann ist die Glaubwürdigkeit (oder auch Vertrauenswürdigkeit) nicht zu vernachlässigen.

Eine der besten Möglichkeiten, wie Sie die Glaubwürdigkeit Ihrer Seite verbessern können, ist Ehrlichkeit. Beschreiben Sie Ihr Produkt oder Ihre Dienstleistung deutlich und lassen Sie Ihre Zielgruppe nicht Dutzende Seiten durchwühlen, um zu finden, was Sie wirklich anbieten. Widmen Sie stattdessen Ihrem Angebot einen prominenten Platz auf Ihrer Seite.

Ein weiterer Tipp für die Verbesserung Ihrer Glaubwürdigkeit: Eine Seite zur Preisgestaltung. Die Versuchung, potenzielle Kunden und Kundinnen dazu zu bewegen, Sie zu kontaktieren, um mehr über Ihre Preise zu erfahren, ist verständlicherweise groß.

Wenn Sie Ihr Webdesign aber entsprechend ausrichten und auf Ihrer Website offen Ihre Preise darstellen, wirkt Ihr Unternehmen vertrauenswürdiger und seriöser. Beispielsweise bietet HubSpot für alle Produkte eine transparente Preisübersicht, wie beispielsweise hier für den Marketing Hub.

Quelle: Screenshot HubSpot

8. Die Nutzer und Nutzerinnen im Mittelpunkt

Unter dem Strich hängen die Anwendungsfreundlichkeit und die User Experience von den Präferenzen der Nutzer und Nutzerinnen ab. Schließlich gestalten Sie Ihre Website nur für sie.

Versetzen Sie sich immer in die Lage Ihrer Zielgruppe und erfüllen Sie deren Bedürfnisse bestmöglich. In diesem Zusammenhang spielen schnelle Ladezeiten, barrierefreies Surfen, eine gute Navigation, Vertrauen bei Ihrer Zielgruppe und viele weitere Faktoren eine wichtige Rolle. Bieten Sie Ihren Gästen immer einen größtmöglichen Mehrwert, überfordern Sie sie aber nicht durch zu viele Zahlen, Fakten und Daten.

Des Weiteren sollten Sie immer auf Emotionalität setzen. Kaufentscheidungen treffen wir in den seltensten Fällen ausschließlich mit dem Kopf. Je begeisterter Ihre Zielgruppe von Ihren Inhalten und Texten ist, desto eher werden Besucher und Besucherinnen konvertiert und kaufen tatsächlich etwas.

Haben Sie daher den Mut, mit Ihren Produkttexten zu berühren, emotionale Bilder zu verwenden und mit Ihrem Design bestimmte Gefühle auszulösen. Insbesondere die Farbe und die Schrift Ihrer Website spielen in diesem Zusammenhang eine tragende Rolle.

Die Prinzipien, die wir Ihnen hier gezeigt haben, sind ein guter Ausgangspunkt. Bei der Verbesserung Ihrer Seite ist es jedoch noch viel wichtiger, Tests durchzuführen, Feedback einzuholen und auf diesen Erkenntnissen basierend Veränderungen vorzunehmen.

Eine Studie zur User Experience zeigt, dass bei einem Besuch einer Website der erste Eindruck zu 94% auf das Design bezogen ist. Es lohnt sich somit, hier aktiv zu werden und den Besuchern und Besucherinnen genau das zu bieten, was sie suchen und erwarten.

Eine kleine Weisheit für Sie zum Schluss: Wenn es um Anwendungsfreundlichkeit und User Experience geht, sollte Ihnen auch beim Webdesign nichts egal sein. Versetzen Sie sich in die Lage Ihrer Zielgruppe und behalten Sie sie bei jedem Schritt, den Sie ergreifen, im Hinterkopf.

Fazit: Mit einem guten Webdesign zu mehr Kundschaft

Webdesign ist ein effizientes Werkzeug auf dem Weg zu besseren Conversion Rates. Ihre Zielgruppe möchte auf den ersten Blick sehen, dass Ihr Webauftritt professionell und seriös ist. Gleichzeitig soll Ihre Zielgruppe spüren, dass individuelle Bedürfnisse und Wünsche verstanden und berücksichtigt werden.

Die Gestaltung Ihrer Inhalte, Texte und Schriften sollte daher so aufgebaut sein, dass man sie gerne ansieht. Gleichzeitig sollte der Mehrwert dabei immer erkennbar sein. Responsive Design spielt in diesem Zusammenhang eine wichtige Rolle, damit alle Inhalte auf möglichst vielen Endgeräten problemlos verfügbar sind.

Titelbild: Klaus Vedfelt / iStock / Getty Images Plus