So verbessern Sie die Nutzererfahrung Ihrer Website

Jeder hat schon einmal eine Website verlassen, weil sie grauenhaft zu bedienen war: Vielleicht wegen der überall aufploppenden Werbung, weil die gewünschte Seite nicht gefunden wurde oder möglicherweise auch aufgrund einer nahezu erschlagenden Textwüste auf der Seite.

Was diese Beispiele gemeinsam haben ist die schlechte Nutzererfahrung bei dem Besuch einer Website. Diese ist ein häufig übersehener, aber sehr wichtiger Aspekt des Webdesigns.

Wie Sie Ihre Website so gestalten, dass diese ein angenehmes Nutzererlebnis bietet, erfahren Sie im Folgenden.

Pop-Ups klug einsetzen

Wenn Sie heutzutage eine Website öffnen, werden Sie meistens direkt von dem üblichen Cookiehinweis-Banner begrüßt. Also klicken Sie schnell den Button „Auswahl speichern“ an und beginnen mit dem Lesen der Inhalte.

Plötzlich erscheint schon das nächste Pop-Up und bewirbt den Newsletter oder ein aktuelles Angebot der besuchten Website. Und schon wieder ist der Lesefluss unterbrochen, Sie müssen den Banner wegklicken und wissen nicht mehr, welchen Abschnitt Sie gerade gelesen haben. Nervig oder?

Pop-Ups sind sehr aufdringlich und sorgen schnell für Verärgerung bei Seitenbesuchern. Insbesondere auf Mobilgeräten sind sie ein sicherer Weg, die Nutzenden zu verärgern und im schlechtesten Fall zu verlieren.

Daher empfiehlt es sich für eine möglichst gute Nutzererfahrung, am besten keine Pop-Ups einzusetzen, welche die gesamte Seite einnehmen. Sollen sie doch zum Einsatz kommen, dann möglichst unaufdringlich: Zum Beispiel wenn der Seitenbesucher die Website verlassen möchte oder erst, wenn ein gewisser Prozentsatz der Seite gesichtet wurde.

Zudem wirken Pop-Ups weniger aufdringlich, wenn sie genau zu dem Inhalt der aufgerufenen Webseite passen. Besucht eine Nutzerin beispielsweise eine Seite über Damenschuhe, ist ein Pop-Up mit dem Hinweis auf eine Rabattaktion für Herrenhemden eine schlechte Idee.

Werbebanner unaufdringlich gestalten

Ähnlich verhält es sich auch mit aufdringlichen Werbebannern. Sogar auf den Webseiten vieler großer Magazine wimmelt es nur so vor animierter, blinkender und reißerischer Werbung. Dadurch geraten die eigentlichen Webseiten-Inhalte merklich in den Hintergrund.

Eine Umfrage in der HubSpot Adblock Plus Research Study hat ergeben, dass 64 Prozent der befragten Ad Blocker-Nutzer Anzeigen als störend und aufdringlich empfinden. Zudem fühlen sich 54 Prozent von ihrer Handlung abgelenkt.

Natürlich versuchen Seitenbetreiber, die Performance dieser Werbebanner zu optimieren, zum Beispiel mit dem klassischen „Lazy Load“. Bei dieser Technik werden Bilder und andere Elemente erst dann geladen, wenn der Nutzer oder die Nutzerin zu ihrer Position gescrollt hat. Und schon endet man mit einer Website, bei der die Inhalte beim Scrollen immer wieder springen, da die Banner erst nachträglich geladen werden.

Ähnlich wie bei Pop-Ups sollten Sie auch hier auf einen möglichst unaufdringlichen Einsatz achten. Wenn die Werbung die Erfahrung des Nutzers oder der Nutzerin allerdings nicht beeinflusst, zum Thema passt und nicht von den Inhalten ablenkt, wegen derer die Website besucht wird, spricht natürlich auch nichts gegen die Verwendung.

Für unaufdringliche Werbung kann der Raum um den Inhalt herum genutzt werden. Ein neben dem Text platzierter Banner greift weniger in die Nutzererfahrung ein, ähnlich wie oberhalb oder unterhalb des Seiteninhalts platzierte Werbung.

Texte lesen einfach gemacht

Texte an Bildschirmen zu konsumieren ist deutlich einfacher, wenn sie eine ordentliche und lockere Formatierung haben, gleichzeitig gut strukturiert sind und verschiedene Faktoren erfüllen.

Darum sollten Webseiten und insbesondere deren Artikel nicht nur inhaltlich gut geschrieben sein, sondern auch gut aussehen. 

Hier sind die wichtigsten Maßnahmen, mit denen Texte einfacher zu konsumieren sind.

Die Einleitung auf den Punkt bringen

Mit einer Aufmerksamkeitsspanne von durchschnittlich acht Sekunden muss die Einleitung einer Webseite auf den Punkt perfekt sein. Besuchende der Seite sollten emotional und inhaltlich abgeholt werden, sodass klar ist, worum es geht und was das Ziel ist.

Es ist also eine gute Idee, dem Seitenbesucher bzw. der Seitenbesucherin eine sofortige Bestätigung zu geben, dass es hier wirklich um die gesuchte Lösung, den erwarteten Inhalt oder die gestellte Frage geht – und das in einem möglichst kurzen Einleitungstext.

Kurze Sätze und Absätze nutzen

Dass längere Texte deutlich einfacher zu lesen sind, wenn sie in kurzen Sätzen und Absätzen geschrieben sind, ist offensichtlich. Nichtsdestotrotz findet man häufig pure Textwüsten mit unübersichtlichen Zusammensetzungen von Wörtern und mehreren Zeilen langen Sätzen.

Wenn ein Text mit viel Freiräumen formatiert ist, hilft das zudem auch den etwa 73 Prozent der Nutzerinnen und Nutzer, die Texte lediglich überfliegen.

Bilder, Grafiken und Videos

Ein weiteres visuelles Hilfsmittel, um Inhalte für Seitenbesucher einfacher darzustellen, sind grafische Unterstützungen und Videos.

Orbitmedia hat herausgefunden, dass mehr Bilder innerhalb einer Seite für eine bessere Reichweite durch mehr Social Shares und eine längere Verweildauer der Seitenbesucher sorgen. Insbesondere bei längeren Texten sollten also ausreichend Grafiken erstellt und eingebaut werden, gerne auch mehr als 10 Stück.

Bei schwierigen Themen sollten zudem Videos genutzt werden, um mit visueller Hilfe den Sachverhalt zu erklären. Das hilft den Besuchern, das Thema besser und umfassender zu verstehen. Zudem sind Videos bei Konsumierenden sehr beliebt: 62 Prozent der befragten Teilnehmerinnen und Teilnehmer der HubSpot Content Trends Survey gaben an, Videos sehr gründlich zu konsumieren und dadurch länger auf der Webseite zu verweilen.

Achten Sie auf Details

Natürlich spielt das Große und Ganze bei der Nutzererfahrung eine große Rolle, wie beispielsweise ein ansprechend einheitliches Design, gleichbleibende Farben für gleiche Elemente und andere, sich auf der gesamten Website durchziehende Faktoren.

Gerne werden jedoch die Details vergessen. Dabei ist genau das der Punkt, mit dem Sie sich von der Konkurrenz abheben können.

Drei der oft übersehenen Details sind die 404 Seite, zielführende Fehlermeldungen und eine optimierte Suche. Hier sind Tipps und Maßnahmen, wie diese Details optimiert werden können.

Eine hilfreiche 404 Seite

Ein Link führt ins Leere, der Seitenbesucher gibt eine nicht vorhandene URL ein und schon landet er auf der 404-Error Seite.

Natürlich sollten Sie darauf achten, dass die Besucherinnen und Besucher diese Seite nie zu sehen bekommen - aber Fehler sind nun mal unvermeidbar. Trotzdem können Sie die Frustration Ihrer Besuchenden verringern, wenn diese einen 404-Fehler angezeigt bekommen.

Die Fehlerseite könnte zum Beispiel eine Suchmaske enthalten, einen Link zur Startseite, die meistgelesenen Artikel oder ein lustiges Bild. Kreativität und Branding kann sich hier auszahlen und die Seitenbesucher auf der Website zu halten.

Kreativ und hilfreich ist zum Beispiel die 404-Seite von Disney: Diese zeigt einen Button zur Startseite zusammen mit einem witzigen Bild und dazu passendem Text.

Zielführende Fehlermeldungen in Formularen

Es gibt kaum ein mehr frustrierendes Szenario, als ein Kontaktformular auszufüllen und beim Absenden lediglich eine Fehlermeldung zu bekommen, dass alle Felder korrekt ausgefüllt werden müssen.

Das bewegt Besuchende häufig dazu, das Formular zu schließen und die Website zu verlassen.

Um dieser Frustration vorzubeugen, weisen Sie Fehlermeldungen besser direkt an den entsprechend ausgefüllten Feldern aus. So wissen Besucherinnen und Besucher sofort, an welchen Stellen Sie fehlende oder falsche Angaben eingesetzt haben.

Das verhindert, dass Besuchende frustriert und genervt von der Seite abspringen und stattdessen einen erneuten Anlauf starten.

Hilfreiche Suchergebnisse auch ohne Treffer

Nicht immer führt die seiteninterne Suche zu einem Ergebnis. Wenn allerdings keine Ergebnisse angezeigt werden, sollten Ihre Besucher und Besucherinnen nicht nur mit einer leeren Seite abgefertigt werden.

Im besten Fall teilen Sie ihnen mit, dass leider kein passendes Ergebnis gefunden wurde und dass der Nutzer oder die Nutzerin eine erneute Suchanfrage mit einem anderen Begriff starten soll.

Achten Sie dabei darauf, dass die Suchmaske weiterhin sichtbar und leicht auffindbar ist.

Um noch eine Stufe höher zu gehen, könnten dem Suchenden Ergebnisse angezeigt werden, die ähnlich und passend zur Suchanfrage sind. Sollte also zu der Suche nach „Herren Laufschuhe“ nichts gefunden werden, können Sie trotzdem Suchergebnisse zu „Herren Running“ anzeigen lassen.

Der „Win-Win“ Chatbot

Chatbots sind ein toller Weg, um den Seitenbesuchern hilfreich zur Seite zu stehen und sofort Antworten zu liefern. Dabei gilt es darauf zu achten, dass der Chatbot eine klare Funktion erfüllt.

Einsatzgebiete für einen Chatbot gibt es viele:

• Beantwortung wiederkehrender Fragen

• Direkter Support häufiger Probleme

• Vorqualifizierung von Kundinnen und Kunden

• Verteilung von Anfragen an Mitarbeitende

• Komplette Bestellabwicklung

• Kaufberatung

• Beschwerden 

Die Vorteile liegen auf der Hand: Ein Chatbot kann neben einer großen Zeitersparnis für das Unternehmen hinter der Website auch eine großartige Hilfestellung für die Seitenbesucher darstellen.

Durch diesen Einsatz entsteht eine Win-Win Situation und die Nutzererfahrung der Website erhöht sich deutlich, wie die folgenden Beispiele zeigen.

Auf der HubSpot-Website wird ein Chatbot zur Vorqualifizierung des Seitenbesuchers genutzt und bietet die Möglichkeit, erst einmal weitere Informationen zu bekommen oder alternativ direkt mit einem Experten von HubSpot einen Termin zu vereinbaren.

Der Einbau eines solchen Chatbots ist natürlich nicht ganz einfach. Glücklicherweise gibt es für den technischen Aspekt nützliche Tools. HubSpot bietet sogar im kostenlosen HubSpot CRM eine Chatbot-Funktion an: Sie macht es einfach, die Logik hinter einem Chatbot zu erstellen und ihn auf der eigenen Website einzubinden. 

Allerdings sollten Sie die Erstellung der Inhalte des Chatbots nicht unterschätzen und Zeit einzuplanen, für die Chatbot-Texte eine sinnvolle Logik zu strukturieren und die benötigten Texte vorzubereiten.

Eine andere Möglichkeit zur Verwendung eines Chatbots, ist als direkter Ansprechpartner für den Seitenbesucher. Auf der Website von WP Ninjas wird der Chatbot dafür eingesetzt, den Nutzer zu fragen, wo er steht und ihn mit Links oder Kontaktmöglichkeiten zu dem gewünschten Ziel zu bringen:

Chatbots sind aufgrund ihrer Verbreitung für Webseitenbesucher auch keine ungewohnte Funktion und erfreuen sich großartiger Nutzungsraten, wie die von Backlinko gesammelten Statistiken zeigen. So geben 40 Prozent der Millennials an, täglich mit Bots zu interagieren. Dabei erhalten Chatbots Antwortraten von 35 Prozent, bis 90 Prozent sogar bei sehr gut aufgebauten Bots.

Einfache Maßnahmen für Barrierefreiheit, die alle Seitenbesucher freuen

Eine barrierefreie Website zielt darauf ab, für jede Person zugänglich und bedienbar zu sein. Dabei spielt es keine Rolle, ob der Besuchende körperliche Einschränkungen hat oder begrenzte technische Möglichkeiten.

Zu häufig wird vergessen, die Website für möglichst viele Menschen zugänglich zu machen. Dabei sind einige, der Barrierefreiheit entgegenkommenden Maßnahmen, gar nicht so schwer umzusetzen und erfreuen alle Seitenbesucher (und auch Suchmaschinen).

Alternative Tags für Bilder

Jedes Bild sollte mit einem sogenannten „Alternative Tag“ ausgezeichnet sein. Das bedeutet, dass der Inhalt des Bildes in möglichst wenigen Worten beschrieben wird.

Das hilft insbesondere den Menschen, die einen Screenreader nutzen, sich Bilder vorstellen zu können oder aber die Bildersuche zu nutzen und zu hören, ob sie ein passendes Bild gefunden haben.

Klare Kontraste

Nicht nur Menschen mit Seheinschränkungen freuen sich über klare Kontraste. Durch gute Kontraste sind Schriften einfacher lesbar, Elemente besser zu erkennen und das grafische Gesamtbild einer Website wirkt harmonischer.

Der Kontrast ist der Unterschied zwischen hellen und dunklen Bereichen der Website.Ein hellgrauer Button mit weißer Schrift hat einen sehr niedrigen und somit schlechten Kontrast. Ein schwarzer Button mit weißer Schrift hingegen hat einen sehr hohen und somit guten Kontrast.

Insbesondere bei Buttons, Bildern mit darüber liegendem Text und anderen Elementen mit einer Hintergrund- und Vordergrundfarbe ist also zu empfehlen, einen möglichst hohen Kontrast zu nutzen.

Möchten Sie prüfen, ob die Farben Ihrer Schrift in Kombination mit einer Hintergrundfarbe genug Kontrast für eine gute Lesbarkeit bieten, können Sie dafür den Farbkontrast-Check von Siteimprove nutzen.

Logische Überschriften-Strukturen

Alle Texte und Inhalte verfügen über diverse Überschriften oder Titel - und das oft in der gleichen Struktur. In der HTML Auszeichnung werden sie absteigend von h1 bis h6 bezeichnet.

Eine logische Überschriftenstruktur aufzubauen ist nicht nur vorteilhaft für das Leseerlebnis, sondern auch Ihre Suchmaschinenoptimierung. Dadurch können Sie wichtige Keywords nach Relevanz in Ihre Texte einbauen.

Die erste Überschrift sollte eine h1, als die Überschrift erster Ebene sein und auch die einzige h1 dieser Seite. Weitere Überschriften sind als h2 auszuzeichnen und wenn innerhalb eines Abschnitts mit einer h2 ein weiteres Unterthema beginnt, wird das als h3 ausgezeichnet.

Beispielsweise kann eine Überschriften-Struktur so aussehen:

h1

 h2

 h2

  h3

   h4

 h2

 h2

Inhaltsverzeichnis für lange Artikel

Fachbücher haben sie aus gutem Grund: Inhaltsverzeichnisse. (Lange) Artikel sollten Lesenden in einem Inhaltsverzeichnis zusammengefasst werden, damit diese wissen, was sie erwartet. 

Angelehnt an den letzten Tipp bezüglich logischer Überschriften-Strukturen sind die Inhaltsverzeichnisse natürlich nur so gut wie eben diese. Kontrollieren Sie also besser vor der Veröffentlichung, ob das Inhaltsverzeichnis mit Ihren Überschriften übereinstimmt.

Ein Tipp: Für WordPress-Webseiten können Inhaltsverzeichnisse ganz einfach mit dem kostenlosen Plugin „Easy Table of Contents“ eingebaut werden.

Links aussagekräftig benennen

Externe und interne Links sind ein essenzielle Bestandteile von Webseiten, um Nutzerinnen und Nutzer zu führen und nützliche Inhalte zu zeigen.

Doch wie oben schon erwähnt, gibt es zahlreiche Nutzer mit Screenreadern, die anhand von „Lesen Sie hier mehr“ oder „Klicke hier“ nicht erkennen können, wohin ein Link führt.

Deshalb ist es wichtig, Links so zu benennen, dass rein anhand des Linktextes erkannt werden kann, wohin diese führen. Ein aussagekräftiger Link wäre also beispielsweise benannt mit „Mehr Infos zu Thema XY” oder „Klicken Sie, um das PDF herunterzuladen”.

Fazit: Nutzerfreundlichkeit für eine Website ist Pflicht

In einer Welt voller Webseiten, Texte und frei verfügbarer Inhalte ist es für Unternehmen schwierig, sich aus dieser Masse hervorzuheben.

Ein wichtiger Teil dafür ist eine möglichst unverwechselbare und vor allem gute Nutzererfahrung auf einer Website. Die Seitenbesucher müssen sich wohl fühlen, schnell finden was gesucht wird und sollen die Seite erst wieder verlassen, nachdem sie zufrieden damit interagiert haben.

Um das zu erreichen, können Sie schon mit einfachen Tricks die User Experience Ihrer Website verbessern. Die in diesem Artikel aufgezeigten Maßnahmen und Ansätze sind selbstverständlich lediglich ein Teil dessen, was für eine gute Nutzererfahrung getan werden kann. Und doch stellen sie einen guten Anfang dar, um zumindest die Grundlagen einer optimalen Nutzererfahrung Ihrer Website abzudecken.

Titelbild: FangXiaNuo / iStock / Getty Images Plus

Hinweis: Bei diesem Beitrag handelt es sich um einen Gastbeitrag von Jonas Tietgen, Gründer des WordPress-Blogs wp-ninjas.de.