Wie eine Usability Optimierung an einer Website durchgeführt wird

Ziel einer Usability Optimierung ist die Verbesserung der Benutzerfreundlichkeit einer Website, sodass Nutzer die gesuchten Inhalte sofort finden und schnell erfassen können. In diesem Blogartikel zeigen wir am Beispiel der Website der Betten Remstedt GmbH wie eine Usability Optimierung durchgeführt wird.

Analyse der Benutzerfreundlichkeit der alten Webseite

Welche genauen Usability Probleme gab es im Layout der alten Website?

Das Bettenhaus Remstedt in Hamburg bietet ein breites Sortiment rund ums Thema „Gesunder Schlaf“ an. Ein großer Bereich der Webseite umfasst die Auflistung des Sortiments.
Für die Sortimentsseiten wurde ein vorgefertigtes Template (Seitenvorlage) verwendet, das nach und nach mit den Inhalten befüllt wurde. Da die genauen Inhalte nicht feststanden und ständig erweitert wurden, war das Seitenlayout nicht für die entsprechenden Inhalte optimiert. Dies bedeutet:

• Keine klare Struktur
  
  • Sortimentskategorien waren teilweise vermischt
• Wenig Informativ
  
  • Das Template ließ kaum textlichen Inhalt zu, so dass wenige informative Texte hinzugefügt werden konnten
• Angebot unübersichtlich
  
  • Wichtige Inhalte waren auf den Bildern in den Bildergalerien versteckt, so dass die Nutzer erst alle Bildergalerien durchblättern mussten, um zu sehen, was überhaupt angeboten wurde
  • Die Absprungrate der Nutzer erhöhte sich stark, da die gesuchten Inhalte nicht aufzufinden waren
• Fehlender Fokus / Schwerpunkt
  
  • Da alle Inhalte einheitlich dargestellt sind, konnten keine wichtigen Informationen oder Produkte hervorgehoben werden
• Schlechte Interaktionsmöglichkeiten
  • Die Bedienelemente der Bildergalerien waren sehr klein und auf hellen Hintergrundflächen nicht immer zu erkennen, so dass die Nutzer diese Funktionalität kaum verwendet haben.

Auch hier zeigte sich wieder, dass sich das Template bzw. das Layout nach den Inhalten richten sollte und nicht, dass die Inhalte in ein schon bestehendes Template gepresst werden sollten. Form follows function.

Häufig hören wir von unseren Kunden „Fangen Sie doch schon mal mit dem Design an, die Inhalte liefern wir später“. Dieser Workflow sollte dringend vermieden werden, da so keine inhaltlich zielgerichtete Darstellung entwickelt werden kann.

Ziele definieren für eine bessere Usability

Welche Kriterien sollte eine benutzerfreundliche Internetseite erfüllen?

• Einfache Informationsaufnahme
  
  • Gut aufbereitete Inhalte sorgen für Transparenz und damit eine positive Wahrnehmung der Produkte
  • Lange Fließtexte sollten reduziert werden und die wichtigsten Informationen in kompakten und schnell zu erfassenden Aufzählungen präsentiert werden
  • Eine anschauliche Zeichnung kann den Sachverhalt bildlich darstellen, so dass die Nutzer die Zusammenhänge besser verstehen. Außerdem bleiben Bilder häufig länger im Gedächtnis als nur ein Text.

• Übersichtlichere Aufteilung
  
  • Durch eine klare Struktur finden die Nutzer schneller zu ihrem gesuchten Ziel
  • Um Inhalte in eine gute, durchdachte und nachvollziehbare Struktur zu bringen, hilft es oft eine Mindmap zum Thema zu erstellen.
  • Gerade bei einem umfangreichen Sortiment ist häufig nicht nur eine Kategorieebene nötig, sondern auch mehrere Unterkategorien
  • z.B. im Sortiment → Matratzen → Taschenfederkern
  • Diese einzelnen Hierarchieebenen sollten auch optisch klar zu unterscheiden sein.

• Zielgerichtete Navigationsstruktur
  
  • Eine zuvor erstellte Mindmap ist auch von Vorteil, um eine klare Navigationsstruktur auf der Webseite aufzubauen
  • Nutzer sollen ohne Umwege direkt zu den gesuchten Inhalten springen können oder einem klaren Navigationspfad folgen können.

• Unterschiede und Gemeinsamkeiten hervorheben
  
  • Nutzer wollen die einzelnen Produkte miteinander vergleichen, um das am besten Passende für sich zu finden
  • Deshalb sollten die einzelnen Unterschiede der Produkte klar aufgezählt werden

• Einfache und zielgruppengerechte Sprache
  
  • Welche Begriffe sind geläufig für die Produkte, auch wenn diese fachlich nicht ganz korrekt oder eigentlich veraltet sind?
  • Fachbegriffe sollten in Fließtexten oder Überschriften nur verwendet werden, wenn diese auch bei der Zielgruppe der Webseite verwendet werden. Alternativ müssten diese kurz erklärt werden, z.B. Lattenrost / Unterfederung / Federholzrahmen

• Aufschlussreiche Link-Bezeichnungen
  
  • Oft werden Links zu Unterseiten beschriftet mit den Worten „Weiter“ oder „Mehr lesen“. Hier ist aber nicht eindeutig, was der Nutzer hinter diesem Link erfahren kann. Bessere Bezeichnungen sind zum Beispiel „Zu unseren Bettensystemen“ oder „Jetzt Termin vereinbaren“. Eine konkrete Handlungsaufforderung regt den Nutzer zusätzlich an, auf den Link zu klicken.

• Wiedererkennungswert ‒ Corporate Design beachten
  
  • Das neue Layout muss zum Stil der bestehenden Webseite passen
  • Ein seriöses und einheitliches Design schafft Vertrauen beim Kunden

Gestaltung eines für die Inhalte optimierten Layouts

Nachdem die Ziele definiert waren, wurde ein Layout der neuen Seiten erstellt. Da sich das Layout nach den Inhalten richten sollte, wurde für jede Unterkategorie ein eigener Entwurf angefertigt. Ein gut durchdachtes Layout wirkt für die Nutzer seriös und glaubwürdig. Dadurch, dass viele Design-Elemente auf den anderen Unterkategorie-Seiten in einer jeweils ähnlichen Form wiederverwendet werden konnte, konnte der anschließende Programmieraufwand minimiert werden.

Wie wurden die Anforderungen im Design umgesetzt?

Am Beispiel der Seite „Matratzen“:

• Die Kategorie „Matratzen“ wurde nochmals für eine bessere Übersichtlichkeit in Unterkategorien aufgeteilt:
  
  • Taschenfederkern
  • Kaltschaum
  • Latex
  • Kindermatratzen
• Diese Unterkategorien wurden abschnittsweise dargestellt durch ein abwechslungsreiches Layout im Links-Rechts-Raster mit farblichen Hintergründen
• Die Vorteile der jeweiligen Matratzenart wurden in Stichpunkten farbig hervorgehoben, mehrere Bilder inkl. Detailansicht zeigen Beispiele des Produkts
• Auf anderen Seiten wurden teilweise die Markenlogos eingebunden, um zu verdeutlichen, dass es sich um ein Bettenfachgeschäft handelt und welche Marken geführt werden
• Durch zusätzliche Zeichnungen z.B. für modulare Bettgestelle oder Betten in Komforthöhe wurden weitere Details veranschaulicht.
• Über Querverlinkungen zu anderen Seiten werden die Nutzer auf weitere Produkte oder Serviceleistungen aufmerksam gemacht.

Online Kunden gewinnen und ans Unternehmen binden

Ein weiteres Ziel der Optimierung der Benutzerfreundlichkeit war es, die potentiellen Neukunden zu einer Beratung ins Geschäft zu verleiten. Nutzer sollten am Ende der Seite mit den neuen Informationen nicht alleine gelassen werden. Deshalb wurde ein klassischer Call-to-Action Bereich hinzugefügt, der die Nutzer auf eine weitere Beratung hinweist und eine konkrete Handlungsaufforderung gibt. In diesem Beratungstermin soll gemeinsam mit dem Kunden das passende Produkt gefunden werden.
Auch dieser Call-to-Action Bereich wurde, je nach Unterseite, inhaltlich passend erstellt und layoutet.

Überprüfen der Usability Optimierungsmaßnahmen

Abschließend sollte nach jeder Optimierung der Benutzerfreundlichkeit überprüft werden, ob die neuen Webseiten die gesetzten Ziele erfüllen. Hierzu kommt eine heuristische Evaluation, in der ein Usability-Experte die Webseite nach bestimmten Kriterien überprüft, oder ein Usability-Test in Frage.