Usability und User Experience: Websites nutzerfreundlich und ansprechend gestalten

Geschrieben von Petra Jacob

Um im Wettbewerb erfolgreich zu sein, reicht ein Internetauftritt allein nicht mehr aus. Webanwendungen müssen einfach nutzbar und emotional ansprechend sein, um sich abzuheben. Sind sie das nicht, werden Nutzer und Kunden bisweilen sogar misstrauisch. Im Zweifelsfall wird die Qualität der Website mit Ihrem Produkt- und Serviceangebot gleichgesetzt, und es kann ein negativer Gesamteindruck entstehen.

Man spricht dabei von der Usability – der Gebrauchstauglichkeit der Website – und der User Experience – dem Benutzererlebnis. Bei der Usability geht es darum, ob man Produkte einfach und ohne Hürden benutzen kann. Bei der User Experience wird gefragt: Werden die Erwartungen an das Produkt bei der Benutzung erfüllt? War die Nutzung angenehm und die Gestaltung ansprechend?

Besonders bei kommerziellen Websites belegen zahlreiche Beispiele die positiven Effekte von Optimierungen der User Experience und Usability auf Umsatz, Neukundengenerierung sowie Kundenzufriedenheit und -bindung. Wird auf die Wünsche und Bedürfnisse der Anwender eingegangen, finden sie sich schneller auf der Webseite zurecht; Informationen werden besser gefunden und Produkte eher gekauft.

Wie erreicht man gute Usability und User Experience?

Für eine gute Usability gibt es weltweit anerkannte ISO-Normen und viele Faustregeln. Bei allen Normen und Regeln geht es letztlich darum, die Perspektive der Benutzer zu berücksichtigen.

Lohnt sich der Aufwand bei einer Website, mit der man auf ein Restaurant aufmerksam machen möchte oder über die ein örtlicher Handwerker sein Angebot präsentieren möchte? Ist es sinnvoll, Nutzungsanforderungen zu spezifizieren, wenn es „nur“ darum geht, kleine Webanwendungen wie einen Online-Terminfinder für einen Friseur zu entwickeln?

Die Antwort ist: Ja! Man muss nur pragmatisch vorgehen. So geht’s:

Einbeziehung der Benutzer

Sie können nur eine gute Usability und User Experience erreichen, wenn Sie die Benutzer bei der Entwicklung oder Überarbeitung Ihrer Website einbeziehen. Daher müssen Sie zunächst ermitteln, welche Ihre tatsächlichen und angestrebten Nutzergruppen sind.

Hier ein paar Beispiele für Benutzergruppen eines Onlineshops für Gartenmöbel:

  1. Privatkunden, die Möbel für ihre Terrasse oder ihren Balkon kaufen möchten
  2. Privatkunden, die Ersatzteile / Accessoires für ihre Gartenmöbel kaufen möchten
  3. Privatkunden, die klappbare/platzsparende Möbel für ihre Reise mit dem Wohnwagen kaufen möchten
  4. gewerbliche Kunden aus der Gastronomie, die Möbel für die Terrasse ihres Betriebes kaufen möchten

Sortieren Sie die ermittelten Nutzergruppen nach Wichtigkeit, z.B. nach Bedeutung für den Umsatz, und beschreiben Sie sie. Nun sind Sie auf dem Weg, sich ein gutes Bild von den Benutzern zu verschaffen. Aber welche Anforderungen haben Sie an die Website?

Ermittlung von Nutzungskontext und Anforderungen

Eine Website kann nur erfolgreich sein, wenn klar ist, welche Aufgaben mit ihr gelöst werden sollen, und wenn Sie die Anforderungen, die an die Website gestellt werden, konsequent aus Sicht der Nutzer betrachten. Sonst kommt es zu fehlenden oder überflüssigen Funktionen, wodurch Nutzer vergrault werden. Und bedenken Sie auch, was die Entwicklung von Funktionen kostet! Wenn diese Funktionen gar nicht benötigt werden, hätten Sie sich den Aufwand sparen können.

Ermitteln Sie daher, welche Aufgaben die Benutzer Ihrer Website unter welchen Bedingungen lösen müssen, um ihr Ziel zu erreichen:

  1. Benutzer: Mieterin einer Wohnung mit Balkon
  2. Arbeitsmittel: Tablet-PC
  3. Umgebung: im Wohnzimmer am Esstisch
  4. Aufgabe und Ziel: Bestellung von Gartenmöbeln, die zur Größe des Balkons passen.

Welche Informationen benötigt die Mieterin, um passende Möbel für ihren (kleinen) Balkon bestellen zu können?

Testpersonen finden

Wie findet man Testpersonen, um die Nutzergruppen zu repräsentieren? Das ist meistens gar nicht schwierig. Bei unserem Gartenmöbel-Beispiel könnten Sie in Ihrem Umfeld nach Personen suchen, die online einkaufen und sich vorstellen können, auch (Garten-)Möbel in einem Onlineshop zu bestellen.

Drei bis vier Interviews sind bereits ausreichend, um mit den beteiligten Benutzern ein gemeinsames Verständnis zu entwickeln, was für Anforderungen von ihnen an die Website gestellt werden – was muss die Website abbilden, was muss sie können? Sammeln und ordnen Sie die Ergebnisse, und Sie erhalten eine Übersicht über die Nutzungsanforderungen an Ihre Website. Aus unserem Beispiel lässt sich z.B. folgende Nutzungsanforderung ableiten: „Der Benutzer muss erkennen können, welche Größe die Gartenmöbel haben.“

Jetzt können Sie die Nutzungsanforderungen an Ihre Website aus Sicht der Benutzer vollständig beschreiben. Das ist die Grundlage für die Entwicklung einer Gestaltungslösung, aber auch um später zu prüfen, ob und wie die Webseite die Anforderungen berücksichtigt.

Usability = Gebrauchstauglichkeit

Ganz allgemein versteht man unter Usability, wie gut ein Produkt für eine bestimmte Zielgruppe für die Erreichung bestimmter Ziele geeignet ist:

„Die Usability eines Produktes ist das Ausmaß, in dem es von einem bestimmten Benutzer verwendet werden kann, um bestimmte Ziele in einem bestimmten Kontext effektiv, effizient und zufriedenstellend zu erreichen.“ (DIN EN ISO 9241-11)

Effektivität bezieht sich darauf, ob Ziele überhaupt erreicht werden können (z.B. Durchführung einer Bestellung in einem Onlineshop). Effizienz bezieht sich auf den zur Zielerreichung erforderlichen Aufwand (z.B. Zeitaufwand bei einer Online-Bestellung). Zufriedenheit betrifft die Qualität der Nutzung: Wird die Website als angenehm und vertrauenswürdig wahrgenommen?

User Experience = Benutzererlebnis

„Wahrnehmungen und Reaktionen einer Person, die sich bei der Benutzung oder der erwarteten Verwendung eines Produktes, eines Systems oder einer Dienstleistung ergeben.“ (DIN EN ISO 9241-210)

Dazu gehören emotionale Reaktionen, Vorstellungen, Vorlieben, Wahrnehmungen, Erwartungen und das Verhalten. User Experience wird beeinflusst von der Gestaltung, Funktionalität und den Leistungsmerkmalen eines Produktes. Ebenso können auch Vorkenntnisse und Eigenschaften des jeweiligen Nutzers eine Rolle spielen, sowie die Markenwahrnehmung oder der Kontext der Nutzung.

Die Navigationsstruktur

Aufgrund der Nutzungsanforderungen, die Sie gefunden haben, können Sie Gestaltungslösungen auf der Website entwickeln. Um ein gutes Gerüst für die Gestaltung zu schaffen, benötigen Sie eine strukturierte Übersicht über Inhalte und Funktionen, die für Benutzer erreichbar sein müssen. Hierzu gehören z.B. Produktkategorien, Serviceinformationen,  Suchfunktion, Warenkorb, Impressum und Kontakt. Daraus wird auch die Navigationsstruktur abgeleitet, die auf der Website – vor allem in Ihrem Menü – abgebildet wird. Schauen wir auf die Produktkategorien aus unserem Gartenmöbel-Beispiel:

Gartenmöbel Beispiel

Mit einer einfachen Tabelle können Sie prüfen, ob alle Produkte über die Navigationsstruktur übersichtlich angeordnet, einfach zu erreichen und logisch kategorisiert sind.

Um einen Überblick über den Seitenaufbau und die Abfolge mehrerer Seiten während der Nutzung zu erhalten, sind z.B. Wireframes geeignet (siehe Bild unten). Dabei handelt es sich um ein Gerüst, das auf einfache Weise in einer schematischen Anordnung zeigt, welche Elemente eine Webseite enthält.

 

Wireframe Beispiel

Eine günstige und einfache Möglichkeit, selbst Wireframes zu entwickeln, bietet die Software „Balsamiq“.

Prüfen Sie: Sind alle Anforderungen erfüllt? Dann geht es weiter mit dem Design.

Expertentipp

Achten Sie bei der Entwicklung Ihrer Navigationsstruktur auf trennscharfe Kategorisierungen und sachliche Bezeichnungen. Vermeiden Sie die Verwendung von verschiedenen Bezeichnungen für den gleichen Inhalt.

Design entwickeln

Das Design baut auf den Wireframes auf. Sie stellen die Leitlinie für die Gestaltung und Aufteilung der Seiten dar. Zunächst sollten Logo, Farben, Schriften, Grafiken und Bilder aus Ihrem Unternehmensauftritt verwendet werden. Denn eine einfache Wiedererkennung schafft Vertrauen.

Beachten Sie aber, dass nicht alle Designelemente von Geschäftspapieren oder Broschüren auf einer Website umsetzbar sind. So können z.B. die Farben Silber und Gold auf einem Bildschirm nicht dargestellt werden.

Designgestaltung: Das sollten Sie beachten!

  1. Achten Sie auf guten Kontrast zwischen der Schrift und dem möglichst einfarbigen Hintergrund.
  2. Verwenden Sie eine Schrift, die mit jedem Browser dargestellt werden kann – aber nur eine. Mehrere Schriften erzeugen Unruhe.
  3. Verwenden Sie eine gut lesbare Schriftgröße, denn das Lesen auf Bildschirmen ist schwieriger als auf Papier. Schriftgrößen zeigen Bedeutung und Relevanz des Inhalts: Überschriften sollten aussagekräftig und größer sein als der zugehörige Text.
  4. Achten Sie auf das Textdesign: Aufzählungen, kurze Sätze, ausreichender Zeilenabstand und Absätze erleichtern das Lesen.
  5. Verwenden Sie Farben, die man auf einem Bildschirm gut erkennen kann. Beispiel: farbige Hinterlegungen in einem hellen Blauton oder Verläufe sind auf vielen Bildschirmen gar nicht sichtbar.
  6. Fotos und Grafiken sollten nicht zu viele, kleinteilige Informationen erhalten. Ruhige und übersichtliche Abbildungen sind besser geeignet, eine Aussage zu unterstreichen. Achten Sie bei der Bildauswahl auf inhaltlich genau passende Bilder, denn sie werden auch zur inhaltlichen Orientierung genutzt und dürfen nicht in die Irre führen.
  7. Versehen Sie Slideshows, Animationen und Videos mit Steuerungselementen. Benutzer möchten selbst entscheiden, welche Informationen sie ansehen.
  8. Viele Webseiten werden mit mobilen Endgeräten aufgerufen. (Zu) viele Bilder, Grafiken und Videos können die Ladezeiten erheblich verlängern und die Benutzer verärgern. Achten Sie darauf, dass das Design sich an verschiedene Bildschirmgrößen anpassen kann.
  9. Buttons und Links müssen einfach erkennbar sein. Zeigen Sie den Benutzern durch die Gestaltung, was angeklickt/angetippt werden kann. Beschriftungen von Buttons und Links sollten sachlich beschreiben, wohin sie führen.
  10. Fragen Sie in Formularen nur nach Informationen, die Sie wirklich benötigen. Zu viele und unnötige Eingabefelder führen zu Abbrüchen.
  11. Nicht vergessen: Auch Fehlermeldungen müssen gestaltet werden!

Usability testen

Es gibt viele Methoden, die Usability einer existierenden Website zu testen – sei es bei Usability-Tests im Labor, in Gruppendiskussionen oder mithilfe von Online-Befragungen. In Usability-Tests werden Benutzer aus den vorher identifizierten Benutzergruppen typische Aufgaben gestellt, die mit der Webseite oder App gelöst werden sollen. Die Testbenutzer werden gebeten, ihre Empfindungen und Gedanken bei der Bearbeitung der Aufgabe mitzuteilen, und bei der Lösung der Aufgabe beobachtet. Zusätzlich können Fragen gestellt werden. So erfahren Sie, welche Schwachstellen und Verbesserungsmöglichkeiten es gibt. Hierfür muss die Website noch nicht ganz fertig gestellt sein, sollte aber bereits einen guten  Eindruck von der Gestaltung und dem Nutzungsprozess vermitteln.

Zurück zu unserem Gartenmöbel-Beispiel: Die Aufgabe könnte lauten: „Es ist Frühling, und Sie möchten Möbel für Ihren 4-qm-Balkon bestellen. Sie haben sich überlegt, dass zwei Stühle und ein Klapptisch gut passen könnten, und möchte sie im Onlineshop für Gartenmöbel bestellen.“

Das benötigen Sie für die Durchführung:

Usability-Tests werden häufig in Test-Laboren durchgeführt, die über Aufzeichnungstechnik verfügen. Aber ein selbst durchgeführter „Vor-Ort“-Test mit einfachen Mitteln kann bereits zu guten Ergebnissen führen. Faustregel: Bereits bei 4 bis 5 Testnutzern können – je nach Komplexität der Website – 80 % der Usability-Probleme identifiziert werden.

Für einen einheitlichen Ablauf des Tests benötigen Sie eine Testübersicht. Diese sollte die Beschreibung der Aufgaben und Fragen, die man den Benutzern stellen möchte, enthalten.

Hier ein paar Beispiele für Fragen:

  1. Sind die Navigationselemente und Funktionen einfach bedienbar und verständlich?
  2. Werden gesuchte Informationen schnell gefunden?
  3. Wirken die Seiten übersichtlich?
  4. Welchen ersten Eindruck hinterlässt die Startseite? Wird auf einem Blick deutlich, welche Inhalte und Services zur Verfügung stehen?
  5. Sind Inhalte gut lesbar und verständlich?

Nun benötigen Sie nur noch die Endgeräte, auf denen die Website getestet werden soll, einen Raum mit Internetverbindung, um die Website oder App zu öffnen, und zwei durchführende Personen. Eine Person geht mit dem Testnutzer die Aufgaben und Fragen durch. Eine weitere Person protokolliert das Interview. Wenn möglich, zeichnen Sie die Interviews mit einer Videokamera auf. Das erleichtert die spätere Auswertung, und Sie können dem Programmierer oder Webdesigner einfach zeigen, welche Probleme Sie erkannt haben.

Nach dem Usability test

Fassen Sie die Interview-Protokolle zusammen und erstellen Sie eine Liste der erkannten Probleme und Schwachstellen. Ihre Ideen zur Beseitigung der Probleme können wahrscheinlich teilweise direkt umgesetzt oder wieder in einem Wireframe erfasst und gestaltet werden.

Nach dem Usability-Test ist vor dem Usability-Test! Um zu prüfen, wie die umgesetzten Verbesserungsideen bei den Benutzern ankommen, können Sie sie erneut befragen.

Sie werden sehen, es lohnt sich!

Bildrechte

© Petra Jacob
© https://balsamiq.com