Ihr wollt eine erfolgreiche Website, die die Bedürfnisse eurer Nutzer stillt? Dann wird es höchste Zeit, sich über die User Experience Gedanken zu machen. Sie bestimmt, ob und wie lange User auf eurer Seite verweilen und wie zufrieden sie dabei sind. In diesem Artikel erfahrt ihr, wie man mit nur 4 Website-Elementen die User Experience verbessert.

Was ist User Experience?

User Experience (UX), bedeutet so viel wie Nutzererfahrung bzw. Nutzungserlebnis. Sie beschreibt jene Erfahrungen und Gefühle, die mit der Benutzung eines bestimmten Produktes einhergehen. In der Online-Welt bezieht sich dies auf die Nutzererfahrung einer Website. Die UX kann sich während der Nutzung jederzeit verändern, je nachdem ob die Website den Nutzer zufrieden stellt oder nicht. Ein positives Nutzungserlebnis führt u. a. zu einer stärkeren Kundenbindung, einer positiven Markenwahrnehmung sowie zu mehr Transaktionen und Weiterempfehlungen. UX wirkt sich laut SEO-Experten auch auf das Ranking aus. Eine gute User Experience zeigt sich in Kennzahlen wie der Nutzungsdauer, der Bounce Rate oder der CTR. Für die SEO-Kampagne schadet es also nicht, einen UX Designer ans Werk zu lassen.

Einige bestimmende Faktoren für die User Experience sind:

• Usability: Usability wird oft mit User Experience gleichgestellt, dabei ist sie lediglich ein Teil davon. Sie bezeichnet die Benutzerfreundlichkeit einer Seite. Je effizienter und einfacher eine Website zu bedienen ist, desto höher ist die Usability.
• Accessibility: Accessibility beschreibt die Zugänglichkeit einer Website. Dazu gehören zum Beispiel Ladezeiten, Erreichbarkeit und die Anpassung an mobile Endgeräte.
• Ästhetik: Unter Ästhetik versteht man die Optik einer Website. Vordergründig geht es hierbei um das allgemeine Design und andere visuelle und grafische Elemente. Ein kreatives, auffälliges Design bedingt jedoch nicht automatisch eine gute User Experience.
• Utility: Utility bezieht sich grob auf den Inhalt der Seite. Die Seite muss nützliche Inhalte und Funktionen besitzen, um eine möglichst hohe Utility zu erreichen.
Im Folgenden widmen wir uns 4 ausgewählten Website-Elementen, die euch dabei helfen, die UX eurer Website zu verbessern.

1. Navigationselemente

Eine übersichtliche Navigationsstruktur macht es leichter, die gewünschten Informationen zu finden. Nur wer schnell und beinahe intuitiv die gesuchten Inhalte findet, ist mit der Navigation einer Website zufrieden. Ziel ist es, dass die Nutzer mit möglichst wenig Klicks an ihr Ziel kommen und sich nicht in den Tiefen der Website verirren.

Zu den wichtigsten Navigationselementen gehören:

• Header-Navigation
• Footer-Navigation
• Sidebar-Navigation
• Breadcrumb-Navigation
• Hamburger-Menü

Header-Navigation

Der Header (auch Kopfbereich genannt) befindet sich am oberen Ende der Website. Links oben im Header befindet sich typischerweise das Logo des Unternehmens. Noch im Header oder direkt darunter lässt sich die sogenannte Header-Navigation implementieren. In der Header-Navigation bringt ihr die Hauptelemente eurer Website unter. In jedem Fall sollte dort die Startseite verlinkt sein, damit User problemlos wieder dorthin zurückkehren können. Header-Navigationen bleiben unverändert, selbst wenn Nutzer auf eine der Unterseiten klicken.

Footer-Navigation

Neben der Header-Navigation im oberen Bereich der Website, gibt es die Footer-Navigation. Diese ist auf der Website ganz unten angesiedelt und beherbergt unter anderem Links zu Impressum, Kontakt, AGBs, FAQs und Newsletter. Achtet bei der Gestaltung des Footers darauf, dass dieser sich farblich oder durch eine Trennlinie vom Rest der Seite abhebt. Gleich wie der Header bleibt der Footer unverändert, unabhängig davon, auf welcher Seite sich die Nutzer gerade befinden.

Sidebar-Navigation

Die Sidebar ist ein vertikales Navigationselement links oder rechts neben dem Content der Website. Einige Websites verwenden sogar zwei Sidebars.
Befindet sich das Suchfeld nicht bereits im Header der Website, ist die Sidebar der richtige Ort dafür. Diese ermöglicht den Usern, eine Website in kürzester Zeit zu durchsuchen und so schneller zu ihrem Ziel zu gelangen. Bei Blogs werden Sidebars häufig dazu eingesetzt, die beliebtesten oder aktuellsten Inhalte zu verlinken. Sie werden außerdem gerne zusätzlich zur Header-Navigation an der linken Seite der Website verwendet.

Breadcrumb-Navigation

Andere geläufige Bezeichnungen für die Breadcrumb-Navigation sind Brotkrumen- oder Brotkrümelnavigation. Sie stellt den Pfad vom Hauptmenü zur Unterseite mittels Stichworten klar dar. User können so einfach auf andere Ebenen zurückspringen. Die Breadcrumb-Navigation findet sich üblicherweise im oberen linken Bereich einer Seite und ist optisch eher unauffällig gestaltet. Breadcrumb-Navigationen sind ein großer Pluspunkt für die Usability einer Seite, da es die Navigation erheblich erleichtert. Sie ist vor allem bei großen Seiten mit einer komplizierten Struktur wichtig. Diese Art der Navigation ist einfach zu implementieren und braucht nur sehr wenig Platz auf der Website.

Hamburger-Menü

Das Hamburger-Menü ist nicht etwa euer nächstes Mittagessen, sondern eine Art verstecktes Menü, das normalerweise im oberen Bereich der Website angesiedelt ist. Es handelt sich dabei um ein Symbol, bestehend aus drei horizontalen Linien. Klickt man auf diese Linien, so öffnet sich das Menü der Website. Das Hamburger-Menü wird vor allem für mobile Endgeräte eingesetzt, da es sehr viel Platz spart. Aber auch bei Desktop-Versionen ist es stark im Trend. Kritik fängt das Icon vor allem deshalb ein, weil es nicht intuitiv benutzbar ist. Nur regelmäßige Smartphone- und App-Nutzer sind mittlerweile mit dem Hamburger-Symbol vertraut und wissen, dass sich dahinter ein ausklappbares Menü versteckt.

2. Trust-Elemente

In der digitalen Welt ist es oftmals schwierig, zwischen seriösen und unseriösen Websites zu unterscheiden, weshalb die Nutzer neuen Seiten oft mit einer gewissen Skepsis entgegentreten. Trust-Elemente unterstützen euch dabei, bei den Nutzern Vertrauen zu erzeugen.

Diese Details müssen immer so platziert werden, dass sie gut sichtbar sind und zwar immer dann, wenn es relevant ist. Wo sie bei Online Shops beispielsweise nie fehlen dürfen, ist im Warenkorb und während des Bezahlvorgangs. Bei der Platzierung gilt in der Regel die Devise „Weniger ist mehr“. Überladet ihr eure Website mit Trust-Elementen, wirkt dies schnell unglaubwürdig.

Einige Beispiele für Trust Elemente sind:

• Kundenmeinungen und Bewertungen
• Social Media
• Gütesiegel und Zertifikate
• technische Sicherheitsmaßnahmen

Kundenmeinungen und Bewertungen

Die Meinungen und Bewertungen von Kunden geben Usern die Möglichkeit, authentische Einblicke in die Zufriedenheit anderer Nutzer sowie den Leistungsumfang eurer Produkte und Dienstleistungen zu erhalten.
Prinzipiell gilt natürlich: Je positiver die Bewertungen, desto besser für euer Unternehmen. Aber auch negative Bewertung erfüllen ihren Zweck, solange sie nicht überhandnehmen. Wichtig ist eine angemessene Reaktion auf negative Bewertungen. Damit zeigt ihr, dass euch die Meinungen eurer Kunden am Herzen liegen.

Social Media

Hohe Followerzahlen in sozialen Netzwerken lassen auf viel Vertrauen seitens der Kunden zurückschließen und zeigen die Beliebtheit eines Unternehmens. Sie bieten den Kunden die Möglichkeit, mit dem Unternehmen direkt in Kontakt zu treten sowie über etwaige Aktionen informiert zu werden. Achtet bei Social-Media-Profilen immer darauf, authentisch und professionell aufzutreten.

Gütesiegel und Zertifikate

Gütesiegel und Zertifikate dienen als Orientierung beim Kauf unterschiedlicher Produkte und Dienstleistungen und garantieren den Käufer ein gewisses Maß an Qualität. Der Fokus sollte auf jenen Siegeln und Zertifikaten liegen, die den meisten Usern bekannt sind, ein positives Image besitzen und aussagekräftig sind. Um Siegel oder Zertifikate zu erhalten, müsst ihr bestimmte Auflagen erfüllen und meist eine gewisse Summe dafür bezahlen. Welches Siegel sinnvoll ist, richtet sich nach der Branche.

Technische Sicherheitsmaßnahmen

Zu den technischen Sicherheitsmaßnahmen gehören beispielsweise Verschlüsselungen und Datensicherheit. Sie signalisieren den Nutzern, dass ihr mit ihren Daten vorsichtig und verantwortungsvoll umgeht. Das ist vor allem dann wichtig, wenn die User auf eurer Seite eine Zahlung tätigen müssen. Weist auf diese Sicherheitsmaßnahmen unbedingt aktiv hin, damit die User sehen, dass ihre Daten sicher behandelt werden.

3. Call-To-Action

Im Online-Bereich findet sich der Call-To-Action (CTA) üblicherweise in der Form eines Buttons, eines Textes, einer Box oder eines Links. Diese CTAs fordern die User zu einer bestimmten Handlung auf und leiten sie meistens auf eine andere Seite weiter.

Einige Möglichkeiten für Calls-To-Action sind folgende Aufforderungen:

• Newsletter abonnieren
• Inhalte teilen
• auf Social-Media-Kanälen folgen
• Kommentare oder Likes hinterlassen
• einen bestimmten Link anklicken
• ein Produkt kaufen
• ein Dokument herunterladen

Durch den gezielten Einsatz von CTAs bringt ihr mehr User dazu, gewisse Handlungen durchzuführen. Viele handeln nämlich nur dann, wenn sie direkt dazu aufgefordert werden. Calls-To-Action können an unterschiedlichen Orten platziert werden. Typische Orte sind Startseiten, Landingpages, Produktseiten oder der Content im Allgemeinen. Bezüglich der Gestaltung des CTAs ist darauf zu achten, dass sich dieser deutlich vom Rest abheben sollte. Vermeidet es unbedingt, ihn wie einen Befehl klingen zu lassen. Versucht eher auf natürliche Weise, das Interesse und die Neugierde der User zu wecken. Wenige Wörter oder ein bis zwei kurze Sätze reichen für einen funktionierenden Call-To-Action bereits aus.

4. White Space

Unter White Space versteht man jene Flächen auf einer Website, die frei von jeglichen Informationen sind. Der White Space muss nicht zwingend weiß sein, es geht lediglich darum, dass dort keine Inhalte abgebildet sind. Ob dieser Bereich nun weiß, schwarz, grün, rot oder komplett bunt ist, spielt keine Rolle. Die Hauptsache ist, dass er vom restlichen Content klar abgrenzbar ist und es sofort leichter macht, die visuellen Eindrücke auf der Seite zu verarbeiten. Wer nun denkt, dass White Space eine Verschwendung von wertvollem Platz ist, der täuscht sich. Durch genügend White Space verhindert ihr, dass eure Website überladen wirkt und sich die Nutzer überfordert fühlen. Er grenzt einzelne Flächen voneinander ab und sorgt so für mehr Übersicht. Durch den Einsatz von White Space lenkt ihr die Aufmerksamkeit der User auf die wichtigen Bereiche eurer Website. Er verleiht der Website außerdem einen Hauch von Eleganz und Professionalität.

Fazit

Mit ein paar kleinen Tricks könnt ihr die User Experience eurer Website um einiges verbessern:

• Führt die Nutzer sinnvoll durch eure Seitenstruktur.
• Sorgt für das nötige Vertrauen.
• Fordert mit CTAs zu bestimmten Handlungen auf.
• Überlastet euer Publikum nicht mit allzu überladenen Seiten.

Beachtet dabei immer, dass User Informationen auf der linken Seite besser und schneller wahrnehmen und dass anklickbare Elemente grundsätzlich hervorgehoben werden sollten, damit sie als solche erkannt werden. Viel Erfolg!

Autor: Stefan Leuenberger ist CIO beim Schweizer Unternehmen Hoststar – Multimedia Networks. Der Webhosting-Provider mit Standorten in Fraubrunnen (Schweiz) und Irdning (Österreich) verfügt über ein Team aus innovativen und gut ausgebildeten Mitarbeitern, jahrelanges Know-How und neueste Technologien, um stets den besten Service zu bieten.