Marketing auf der Überholspur

19 Januar 2017 // 02:30

8 Regeln für ausgezeichnetes Webdesign, Benutzerfreundlichkeit und Nutzererlebnis

Verfasst von | @

8 Regeln für ausgezeichnetes Webdesign, Benutzerfreundlichkeit und Nutzererlebnis

Wenn man sich mit dem Design oder der Neugestaltung einer Website 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 mehr als einer Milliarde Websites, auf denen Besucher möglicherweise landen können. Daher ist es besonders wichtig, dass das Design benutzerfreundlich ist. Ihre Website muss leicht zu bedienen sein. Gleichzeitig muss das Nutzererlebnis positiv sein. Der Besuch Ihrer Website sollte angenehm sein und je nach ihrem Inhalt vielleicht sogar Spaß machen.

Laden Sie unsere kostenlose Arbeitsmappe herunter, um ganz einfach die  Neugestaltung Ihrer Website zu planen.

Es liegt auf der Hand, dass es sich bei Benutzerfreundlichkeit und Nutzererlebnis 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. Also haben wir eine Liste an Regeln für Benutzerfreundlichkeit und Nutzererlebnis zusammengestellt, die Sie in Ihrem nächsten Webdesignprojekt anwenden können.

8 Webdesign-Regeln für ein ausgezeichnetes Nutzererlebnis

1) Einfachheit

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

Ihre Besucher kommen nicht auf Ihre Seite, um zu bewerten, wie genial Ihr Design ist. Sie kommen auf Ihre Seite, weil Sie eine bestimmte Aktion ausführen oder eine bestimmte Information haben wollen. Wenn Sie unnötige Designelemente zu Ihrer Website hinzufügen – Elemente, die keine Funktion erfüllen – erschweren Sie Ihren Nutzern damit, das zu erreichen, weswegen sie auf Ihre Seite gekommen sind.

Aus der Benutzerfreundlichkeits- und Nutzererlebnisperspektive gesehen ist Einfachheit Ihr bester Freund. Dieser Aspekt lässt sich auf verschiedene Weise umsetzen. Hier ein paar Beispiele:

  • 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 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 Homepage-Design von Rockaway Relief, eine Gruppierung, die es sich zum Ziel gesetzt hat, den Opfern des Hurrikans Sandy auf der Rockaway-Halbinsel zu helfen:

rockaway-relief-homepage-einfaches-design

Entfernen Sie alles, das keinen Mehrwert liefert. Ergänzen Sie dann ein wenig visuelle Struktur.

Der berühmte Sportwagendesigner Colin Chapman prägte die geflügelten Worte: „Mach‘ es einfach und füge dann Leichtigkeit hinzu.“ An diesem Spruch kann man sich beim Webdesign auch gut orientieren. Jedes Element auf einer Seite muss entweder dem Nutzer oder dem Unternehmen einen Mehrwert bieten – idealerweise beiden. Wenn man das Ganze dann aber zu wörtlich nimmt und zu viele Elemente entfernt, wird das Design recht schnell spartanisch. Dann muss man der Seite eine visuelle Struktur geben. Es geht also darum:

  • Die Seite sollte sich auf die wichtigsten Inhalte konzentrieren.
  • Die notwendige visuelle Struktur und interessante Aspekte sind vorhanden, wodurch die ästhetische Benutzerfreundlichkeit unterstützt wird. Die Visualisierung darf aber nicht von den wichtigsten Seiteninhalten ablenken.
Hier erfahren Sie mehr: http://www.uxmatters.com/mt/archives/2014/08/principles-over-standards.php#sthash.GdOvzpl1.dpuf

Entfernen Sie alles, das keinen Mehrwert liefert. Ergänzen Sie dann ein wenig visuelle Struktur.

Der berühmte Sportwagendesigner Colin Chapman prägte die geflügelten Worte: „Mach‘ es einfach und füge dann Leichtigkeit hinzu.“ An diesem Spruch kann man sich beim Webdesign auch gut orientieren. Jedes Element auf einer Seite muss entweder dem Nutzer oder dem Unternehmen einen Mehrwert bieten – idealerweise beiden. Wenn man das Ganze dann aber zu wörtlich nimmt und zu viele Elemente entfernt, wird das Design recht schnell spartanisch. Dann muss man der Seite eine visuelle Struktur geben. Es geht also darum:

  • Die Seite sollte sich auf die wichtigsten Inhalte konzentrieren.
  • Die notwendige visuelle Struktur und interessante Aspekte sind vorhanden, wodurch die ästhetische Benutzerfreundlichkeit unterstützt wird. Die Visualisierung darf aber nicht von den wichtigsten Seiteninhalten ablenken.
Hier erfahren Sie mehr: http://www.uxmatters.com/mt/archives/2014/08/principles-over-standards.php#sthash.GdOvzpl1.dpuf

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 auf natürliche Weise zu den wichtigsten Elementen leitet.

Denken Sie daran: Bei der Optimierung von Benutzerfreundlichkeit und Nutzererlebnis ist das Ziel, die Besucher dazu zu bewegen, eine bestimmte Aktivität auszuführen und zwar auf eine Weise, die sich für sie natürlich und angenehm anfühlt. Indem Sie beispielsweise die Position, die Farbe oder die Größe bestimmter Elemente anpassen, können Sie Ihre Seite auf eine Weise strukturieren, die Besucher ganz natürlich zuerst zu den wichtigsten Elementen lockt.

Im unten gezeigten Beispiel von der Spotify-Website können Sie sehen, dass die CTA-Schaltfläche „Spotify gratis laden“ in der visuellen Hierarchie ganz oben steht. Zunächst einmal befindet sie sich links, denn die meisten Besucher sehen sich Websites von links nach rechts an. Darüber hinaus ist die Schaltfläche das einzige Element im sichtbaren Bereich, das in dunklem lila gehalten ist, was die Aufmerksamkeit ganz natürlich darauf lenkt.

Spotify-Homepage-visuelle-Hierarchie

3) Einfache Navigation

Eine intuitive Navigation Ihrer Website hilft Ihren Besuchern dabei, schnell das zu finden, wonach sie suchen. Idealerweise sollten Besucher 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 auf Ihrer Seite sollte einfach sein.

Folgende Tipps werden Ihnen dabei helfen, Ihre Seitennavigation zu optimieren:

  • 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 wissen, wo sie sich befinden und wie sie dorthin gekommen sind
  • Am oberen Ende Ihrer Seite sollten Sie eine Suchfunktion einbauen, damit Besucher einfach nach Begriffen suchen können
  • Zu viele Navigationsoptionen sind kontraproduktiv
  • Gehen Sie nicht zu sehr in die Tiefe. In den allermeisten 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 Tipp: Wenn Sie einmal festgelegt haben, wie die Navigation Ihrer Seite (oben) aussehen soll, bleiben Sie dabei. Die Beschriftung und Position sollte auf jeder Seite Ihrer Website gleich aussehen. Hier ist ein Beispiel von der InVision-Website:

invision-navigation-1.png

Und das bringt uns direkt zum nächsten Prinzip …

4) Einheitlichkeit

Nicht nur Ihre Navigation sollte 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 Benutzerfreundlichkeit und das Nutzererlebnis 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 dann aber einheitlich einsetzen, damit die Besucher leicht erkennen können, 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 fühlen würden, wenn jede Hilfeseite ein einzigartiges Layout hätte. (Vermutlich käme es zu viel Schulterzucken.)

Airbnb-einheitliches-design

5) Zugänglichkeit

Nach Angaben von ComScore ist in den USA die Nutzung von Tablets für Online-Aktivitäten zwischen 2013 und 2015 um 30 % gestiegen. Die Internetnutzung mit Smartphones ist im gleichen Zeitraum um 78 % gewachsen. Was lernen wir daraus? Um ein besonders tolles Nutzererlebnis zu bieten, muss Ihre Website mit den verschiedenen Geräten (und Betriebssystemen und Browsern) kompatibel sein, die Ihre Besucher nutzen.

Im übergeordneten Sinne bedeutet das eine Investition in eine hochflexible Website-Struktur – wie das 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 verwendet (siehe Abbildung unten).

Responsive Design für Websites

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 Besucher, in deren Browsern die Bilder nicht angezeigt werden, trotzdem verstehen können, um was es auf der Seite geht.

Letztlich ist es wichtiger, dass Ihre Website ein tolles Nutzererlebnis ü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 auf einigen Plattformen womöglich fremd sind.

Und wo wir gerade dabei sind, kommen wir zum nächsten Prinzip ...

6) Konventionen

Es gibt bestimmte Webdesign-Konventionen, die über die Jahre hinweg den meisten Internetnutzern 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 zurück zur Startseite bringt
  • Links, die die Farbe oder das Aussehen ändern, wenn man den Mauszeiger darüber bewegt

Es mag sein, dass Sie sich versucht fühlen, diese Design-Konventionen über Bord zu werfen, um besonders originell oder einzigartig zu sein. Jedoch wäre das (wahrscheinlich) ein Fehler. Das wäre vergleichsweise 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 das bestmögliche Erlebnis auf Ihrer Seite zu bieten, sollten Sie sich an die Erlebnisse halten, die Ihre Besucher bereits kennen. 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 Einkaufswagensymbols auf E-Commerce-Seiten. Im Bild unten sehen Sie die Einkaufswagensymbole von Amazon, Wayfair und Best Buy (von links nach rechts).

shopping-cart-icons.png

7) Glaubwürdigkeit

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

Eine der besten Weisen, wie Sie die Glaubwürdigkeit Ihrer Seite verbessern können, ist Ehrlichkeit. Beschreiben Sie Ihr Produkt oder Ihre Dienstleistung ehrlich und klar. Lassen Sie Ihre Besucher nicht Dutzende Seiten durchwühlen, um zu finden, was Sie wirklich anbieten. Seien Sie einfach ehrlich und widmen Sie Ihrem Angebot einen prominenten Platz auf Ihrer Seite, an dem Sie den genauen Wert der Aktivitäten Ihres Unternehmens beschreiben.

Ein weiterer Tipp für die Verbesserung Ihrer Glaubwürdigkeit: Eine Seite zur Preisgestaltung. Die Versuchung, potenzielle Kunden dazu zu bewegen, Sie zu kontaktieren, um mehr über Ihre Preise zu erfahren, ist verständlicherweise groß. Wenn Sie auf Ihrer Website aber ganz offen Ihre Preise darstellen, wirkt Ihr Unternehmen vertrauenswürdiger und seriöser. Die Website von Box bietet ein tolles Beispiel für eine informative Preisübersicht:

box-preisübersicht-informationen

8) Der Nutzer im Mittelpunkt

Unter dem Strich hängen die Benutzerfreundlichkeit und das Nutzererlebnis von den Präferenzen der Nutzer ab. Sehen Sie es mal so: Für wen gestalten Sie denn die Website? Richtig, für Ihre Nutzer.

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

Nach Angaben von Vitamin T werden 68 % der Besucher nicht konvertiert, weil sie denken, dass Ihnen ihr Erlebnis egal ist. Eine kleine Weisheit für Sie zum Schluss: wenn es um Benutzerfreundlichkeit und Nutzererlebnis geht, sollte Ihnen nichts egal sein! Versetzen Sie sich in die Lage Ihrer Besucher und behalten Sie sie bei jedem Schritt, den Sie ergreifen, im Hinterkopf.

Welche anderen Prinzipien gehören Ihrer Meinung nach zu ausgezeichnetem Webdesign und toller Benutzerfreundlichkeit?

New Call-to-action

 

Dieser Artikel ist ursprünglich auf dem HubSpot.com-Blog erschienen und wurde aus dem Englischen übersetzt. 

Themen: Inbound Marketing

Abonnieren

Kommentare

Leider ist es nicht mehr möglich, Kommentare für diesen Beitrag zu hinterlassen, da die Kommentar-Funktion für ältere Beiträge deaktiviert wird. Natürlich ist uns Ihre Meinung dennoch wichtig! Schicken Sie uns einfach einen Tweet @HubSpot, um uns zu kontaktieren!

Kommentare
X

Ihre Konkurrenz beliest sich auch.

Bleiben Sie am Ball mit unseren Tipps unserer Marketing-Experten und sichern Sie sich Ihren Wissensvorsprung. Abonnieren Sie jetzt den HubSpot Marketing-Blog.