Die Bedeutung der Usability im Webdesign

Was bedeutet Usability?

Im Allgemeinen beschreibt die Usability die Benutzerfreundlichkeit bzw. Gebrauchstauglichkeit einer Anwendung, die eine Schnittstelle zwischen Mensch und Maschine bereitstellt. Solch eine Anwendung können eine Webseite oder Software sein, aber auch beispielsweise ein Fahrkartenautomat, eine Kaffeemaschine oder ein Drucker.

Der Begriff Usability ist dabei eine Kombination aus den beiden englischen Wörtern „to use“ (zu Deutsch: benutzen) und „ability“ (zu Deutsch: Fähigkeit).

In der ISO-Norm DIN EN ISO 9241 ist Usability definiert als “das Ausmaß, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.”

Unterschied Usability und User Experience

Immer wieder werden die Begriffe Usability und User Experience als Synonyme verwendet. Bei der User Experience geht es allerdings um die subjektive Wahrnehmung eines Nutzers mit einer Anwendung, die auch emotionale Empfindungen mit einbezieht. Die User Experience umfasst dabei den Zeitraum vor, während und nach der Nutzung einer Anwendung.

Die Usability hingegen bezieht sich ausschließlich auf den Zeitpunkt der tatsächlichen Anwendung und ist eher geprägt davon, wie schnell und effizient ein Nutzer an sein Ziel kommt. Welche Gefühle er dabei hat, spielt bei der Bewertung der Usability keine Rolle.

Grundsätzlich kann die User Experience also als eine Erweiterung der Usability um emotionale Faktoren angesehen werden.

Folgendes Beispiel soll den Unterschied von Usability und User Experience verdeutlichen:

Thomas möchte sich eine neue Kamera in einem Onlineshop bestellen. Er ruft den Shop über sein Smartphone auf und kann auf diesem problemlos durch den gut strukturierten Shop navigieren. Schnell findet er eine passende Kamera, legt sie in den Warenkorb und bezahlt mit seiner bevorzugten Zahlmethode PayPal. Es gibt keine technischen Hürden oder sonstige Probleme, alles klappt bis hierhin reibungslos. Die Usability des Shops ist also offensichtlich sehr gut. Thomas ist voller Vorfreude auf die Kamera, seine User Experience mit dem Einkauf in diesem Shop ist zu diesem Zeitpunkt also ebenfalls sehr positiv.

Nachdem er die Kamera bestellt hat, erhält er jedoch eine E-Mail mit dem Hinweis, dass der Versand der Kamera sich verzögert, da sie aktuell doch nicht auf Lager ist. Thomas ist etwas enttäuscht, was bedeutet, dass seine User Experience zu diesem Zeitpunkt etwas schlechter ausfällt. Als die Kamera endlich geliefert ist, stellt er beim Auspacken fest, dass der benötigte Akku im Lieferumfang fehlt. Nun ärgert Thomas sich, weil er extra ein Fotoshooting für diesen Tag geplant hat, welches er nun absagen muss. Seine gesamte User Experience mit dem Shop fällt ab diesem Moment also negativ aus. Das bedeutet, er würde selbst wohl nie wieder in dem Shop bestellen und ihn wohl auch kaum Freunden oder Bekannten weiterempfehlen.

Obwohl die User Experience am Ende also negativ ausfällt, bleibt die gute Usability des Shops davon unberührt – denn der Kauf an sich funktionierte ja reibungslos.

Eine schlechte User Experience muss also nicht zwangsläufig bedeuten, dass auch die Usability schlecht ist. Umgekehrt sorgt eine schlechte Usability jedoch immer auch für eine schlechte User Experience.

Website Usability

In Bezug auf Webseiten beschreibt die Usability die Bedienbarkeit einer Internetseite. Hier geht es primär um die Frage, wie gut Nutzer mit der Seite zurechtkommen und wie schnell und intuitiv sie an die gewünschten Informationen gelangen.

Prinzipiell lässt sich sagen, dass, je besser die Usability einer Webseite ist, desto besser verkauft diese. Denn hat ein Nutzer auf dem Weg zu seinem Ziel weniger Hindernisse zu überwinden, ist auch die Wahrscheinlichkeit höher, dass es zu einer tatsächlichen Conversion kommt. Ist die Usability hingegen schlecht oder unzureichend, verlassen Besucher die Seite meist wieder ohne eine Conversion zu tätigen. Immerhin ist das Angebot der Konkurrenz im Internet nur wenige Klicks entfernt.

Kriterien einer guten Website Usability

Neben technischen Faktoren spielen auch kreative, strukturelle und psychologische Faktoren bei der Bewertung der Website Usability eine Rolle.

Wichtige Usability Faktoren im Überblick:

1. Schnelle Ladezeiten

Nutzer erwarten heute beim Besuch einer Webseite, dass diese innerhalb kürzester Zeit vollständig geladen ist. Dauert die Ladezeit länger als drei Sekunden, steigt die Abbruchrate der User exponentiell an.

Um die Usability einer Webseite zu verbessern, sollte also in jedem Fall auch eine Page Speed Optimierung durchgeführt werden.

2. Responsive Webdesign

In Zeiten der vermehrten Smartphone- und Tablet-Nutzung sollte eine Webseite stets auf allen Bildschirmgrößen einheitlich dargestellt werden und einfach zu bedienen sein. Um auch auf kleineren Bildschirmen eine gute Usability zu gewährleisten, sollten folgende Kriterien erfüllt sein:

  • Schaltflächen sollten eine ausreichende Größe besitzen, sodass auch Nutzer mit großen Fingern diese treffsicher bedienen können
  • Slider sollten stets durch „Wischen“ über die Touchfunktion navigierbar sein
  • Die Schrift sollte ausreichend groß sein, damit sie auch auf kleineren Bildschirmen gut lesbar ist
  • Es sollte ein guter Kontrast zwischen Hintergrundfarbe und Schriftfarbe herrschen, damit die Lesbarkeit auch bei starkem Sonnenlicht gewährleistet bleibt
  • die mobile Version einer Webseite kann auf die wichtigsten Elemente der Seite reduziert werden

3. Gute Lesbarkeit

Eine gute Website Usability setzt natürlich auch eine gute Lesbarkeit der angebotenen Inhalte voraus. Hierbei muss man vor allem bedenken, dass das Lesen eines Textes auf einem Bildschirm weitaus anstrengender für die Augen ist. Besteht eine Seite also nur aus ewig langen Textblöcken, wird kaum ein Besucher die Motivation aufbringen können, sich den Text durchzulesen. Nutzer scannen eine Webseite vielmehr nach relevanten Informationen. Dabei stellen Überschriften meistens entscheidende Ankerpunkte dar, an denen sich der Leser orientiert. Daher sollten Sie Ihre Webseitentexte stets in kleinere Absätze untergliedern und mit informativen Überschriften versehen, die bereits erkennen lassen, wovon der nachfolgende Absatz handelt.

Tipps für eine gute Lesbarkeit:

  • Die Schriftfarbe sollte einen hohen Kontrast zum Hintergrund aufweisen
  • Lockern Sie Texte durch Aufzählungslisten, Bilder und andere Medien auf
  • Vermeiden Sie zu lange Textblöcke
  • Achten Sie auf ausreichend große Zeichen- und Zeilenabstände
  • Die Schriftgröße sollte ausreichend groß sein (mind. 12 Pixel)
  • Verzichten Sie auf verschnörkelte Schriften – für Bildschirme bieten sich stets serifenlose Schriften an
  • Strukturieren Sie Ihre Inhalte mithilfe ansprechender und informativer Überschriften
  • Setzen Sie fettgedruckte Worte nur sparsam ein
  • verzichten Sie so gut wie möglich auf Fachbegriffe und Schachtelsätze

4. Struktur / Navigation

Je mehr Klicks ein Nutzer benötigt, um die gewünschte Information zu finden, desto schneller verlässt er die Seite demotiviert wieder. Eine übersichtliche Seitenstruktur und eine einfach verständliche Navigation sind für eine gute Website Usability daher unabdingbar.

Die Navigation sollte dem User einerseits zeigen, wo auf der Seite er sich gerade befindet, und ihn andererseits dabei unterstützen, sich zielgerichtet und intuitiv zu den für ihn relevanten Seiten zu bewegen. Wichtig ist hierbei, den User stets an die Hand zu nehmen und ihm eine gute Orientierung zu gewährleisten.

Die bekannten Usability Experten Jakob Nielsen und Hoa Loranger formulierten es in ihrem Buch „Web Usability“ folgendermaßen:

„Eine gute Navigation ist vorhersagbar und ermöglicht es den Benutzern, die Site auf eine angenehme Weise zu erforschen. (…) Die Benutzer können sich vorwärts und rückwärts bewegen, die Site erforschen und immer sicher sein, dass sie den Faden nicht verlieren werden.“

Tipps für eine gute Navigation und Struktur:

  • Die Website-Navigation sollte aus maximal drei Ebenen bestehen
  • Breadcrumbs bieten dem Nutzer eine zusätzliche Orientierungshilfe
  • Die Benennung der Navigationspunkte sollte kurz und aussagekräftig sein
  • Eine integrierte Suchfunktion kann dem User dabei helfen, gewünschte Informationen schneller zu finden
  • Das Logo sollte sich links oben befinden und auf die Startseite verlinken
  • Verlinkungen sollten sich optisch eindeutig von nicht-klickbaren Elementen abgrenzen
  • bereits besuchte Links sollten mit einer anderen Farbe gekennzeichnet werden
  • Wichtige Informationen stehen im „Above the fold“ Bereich der Webseite, sind also ohne scrollen sofort ersichtlich
  • Der Einsatz von Call to Actions kann dabei unterstützen, den User zielgerichtet an der Hand zu nehmen
  • Verwenden Sie sogenannte „sprechende URLs“
  • Testen Sie regelmäßig, ob alle Verlinkungen noch funktionieren
  • Verlinkungen, die von Ihrer Webseite wegführen, sollten sich in einem neuen Browserfenster öffnen
  • Verlinkungen innerhalb Ihrer eigenen Webseite sollten sich im selben Browserfenster öffnen
  • Jede Seite sollte einen einzigartigen und eindeutigen Seitentitel haben

5. Ansprechendes Design

Oft wird vernachlässigt, dass auch das Design einer Webseite ein ausschlaggebender Faktor für eine gute Website Usability ist. Immer wieder stößt man auf Webseiten, die Schriften, Design-Elemente und Farben bunt durcheinanderwürfeln. Eine fehlende Konsistenz in der Gestaltung führt jedoch dazu, dass der Nutzer Schwierigkeiten bei der Orientierung hat und irgendwann schlichtweg überfordert ist. Visuelle Hierarchien und eine konsistente Farbgestaltung helfen ihm im Gegensatz dazu, wichtige Elemente von eher unwichtigen zu unterscheiden. Farbe, Größe und Prominenz von Webseiten-Elementen zeigen dem Besucher, worauf er seine Aufmerksamkeit im Besonderen richten sollte. Auch die Bildsprache hilft dabei, seine Aufmerksamkeit auf wesentliche Inhalte zu lenken.

Tipps für ein usability-freundliches Design:

  • Achten Sie auf eine konsistente Farbgestaltung
  • Setzen Sie visuelle Hierarchien ein um wichtige Elemente von eher unwichtigen zu trennen
  • Verwenden Sie nur hochauflösende Bilder
  • Das Design sollte ästhetisch und aufgeräumt wirken
  • Wichtige Elemente sollten prominenter dargestellt werden als untergeordnete Elemente
  • Verzichten Sie auf aufdringliche Pop-Ups oder den übermäßigen Einsatz von Werbebannern

6. Nutzerfreundliche Formulare

Die Gestaltung von Formularen wird von Seitenbetreibern immer wieder vernachlässigt. Dabei sind sie ein entscheidender Faktor dafür, ob es zu einer Conversion kommt oder nicht. Möchte ein Nutzer Kontakt zu Ihnen aufnehmen und wird er mit einem ewig langen Formular konfrontiert, in welchem lauter persönliche Daten abgefragt werden, wird er in den meisten Fällen an dieser Stelle doch einen Rückzieher machen. Nutzer haben weder das Interesse, zu viel Zeit mit dem Ausfüllen eines Formulars zu verbringen, noch zu viel von sich preiszugeben. Für eine einfache Kontaktaufnahme ist weder die Abfrage der Adresse, noch die Abfrage der Anrede relevant. Und doch begegnet man immer wieder Kontaktformularen, die den Nutzer mit überflüssigen Feldern abschrecken. Achten Sie für eine gute Usability also darauf, Ihren Besuchern die Kontaktaufnahme so einfach wie möglich zu machen.

Tipps für eine gute Usability Ihrer Formulare:

  • Die einzelnen Felder sollten durch Betätigen der Tabulator-Taste ansteuerbar sein
  • Fragen Sie keine unnötigen Daten ab
  • Erklären Sie ggf., warum Sie bestimmte Informationen benötigen
  • Weisen Sie den Nutzer freundlich auf fehlerhafte Eingaben hin
  • Pflichtfelder des Formulars sollten als solche gekennzeichnet sein
  • Lange Formulare sollten in Themenblöcke und einzelne Schritte aufgeteilt werden
  • Bei korrekten Eingaben sollte ein positives Feedback zurückgegeben werden, z.B. mithilfe eines grünen Häkchens

7. Barrierefreiheit

Bei der Bewertung einer guten Website Usability dürfen natürlich auch Nutzer mit einer gesundheitlichen Beeinträchtigung nicht außen vor gelassen werden. Denn auch Menschen mit Behinderung haben Ansprüche an die Bedienung einer Webseite. Im Rahmen der Usability Optimireung sollte also stets auch beachtet werden, dass Nutzer, die auf assisstive Hilfsmittel wie Screenreader angewiesen sind, sich genauso leicht auf einer Webseite zurechtfinden wie Nutzer ohne gesundheitliche Einschränkungen.

8. Fehlertoleranz gegenüber dem Nutzer

Nutzer machen Fehler. Und das ziemlich oft (was übrigens absolut nichts mit mangelnder Intelligenz zu tun hat).

Fehlertoleranz bedeutet, dass die Webseite auf Fehler des Nutzers reagiert und den Fehler nach Möglichkeit selbstständig korrigiert. Ist dies nicht möglich, sollte dem Nutzer zumindest eine Rückmeldung gegeben und eine einfache Fehlerkorrektur ermöglicht werden.

Trägt ein Nutzer beispielsweise seine PLZ in ein Formular ein, vergisst dabei eine Zahl und klickt dann auf “Absenden”, sollte die PLZ idealerweise vom System automatisch entsprechend dem eingegebenen Ortsnamen korrigiert werden. Alternativ sollte zumindest ein deutlich sichtbarer Hinweis auf die Art des Fehlers angezeigt werden. Stellen Sie außerdem in jedem Fall sicher, dass der Nutzer nach Absenden einer fehlerhaften Eingabe anschließend nicht das vollständige Formular komplett von vorne ausfüllen muss. In diesem Fall springt er garantiert ab.

So reagieren Sie richtig auf fehlerhafte Eingaben Ihrer Nutzer:

  • Weisen Sie ihn freundlich auf die Art des Fehlers hin und unterstützen Sie ihn dabei, diesen zu korrigieren
  • Eine Autocomplete Funktion kann dabei helfen, Fehler von vornherein zu reduzieren
  • Integrieren Sie eine individuelle 404 Fehlerseite, um Nutzer bei Tippfehlern bei Ihrer Internetadresse nicht zu vergraulen

9. Bereitstellung zusätzlicher Servicefunktionen

Verschiedene Servicefunktionen können dem Nutzer die Bedienung Ihrer Webseite zusätzlich erleichtern und ihm dabei helfen, schneller sein gewünschtes Ziel zu erreichen. Sollte er Schwierigkeiten bei der Benutzung oder noch offene Fragen zu Ihrem Angebot haben, wird er in der Regel nach einer Kontaktmöglichkeit Ausschau halten. Machen Sie Besuchern die Kontaktaufnahme so einfach wie möglich, beispielsweise, indem Sie auf jeder Seite Ihre Kontaktdaten gut sichtbar platzieren.

Tipps für nützliche Servicefunktionen:

  • Ihre Kontaktdaten sollten von jeder Seite Ihrer Webseite aus einsehbar sein
  • Bieten Sie einen FAQ Bereich für häufig gestellte Fragen
  • Verwenden Sie ein Glossar, um Fachbegriffe und Fremdwörter zu erklären
  • die Integration eines Live-Chats kann helfen, offene Fragen direkt zu klären

Vorteile einer guten Website Usability

Eine gute Website Usability bietet nicht zuletzt für den Seitenbetreiber eine Reihe von Vorteilen. Letztendlich verringert eine gute Website Usability die Frustration Ihrer Besucher, begünstigt eine Conversion und sorgt zudem dafür, dass zufriedene Nutzer erneut Ihre Webseite besuchen.

Website Usability testen

Webseiten sollten regelmäßig hinsichtlich ihrer Nutzerfreundlichkeit überprüft werden.

Eye Tracking & Heatmaps

Beim Eye Tracking werden mittels spezieller Brillen, Webcams oder externen Remote-Eye-Trackern die Blickverläufe der Nutzer entlang einer Webseite erfasst und aufgezeichnet. Die Ergebnisse können anschließend beispielsweise über eine Heatmap visualisiert werden. Eine Heatmap arbeitet dabei klassischerweise mit denselben Farben, die auch eine Wärmebildkamera erzeugt. Bereiche, die beim Nutzer am meisten Aufmerksamkeit erzeugen, werden dabei rot dargestellt, während weniger beachtete Bereiche bläulich angezeigt werden.

Mithilfe von Eyetracking und Heatmaps lässt sich so sehr leicht ablesen, welche Elemente von Ihren Nutzern besonders wahrgenommen werden und welche leicht übersehen werden. So lässt sich beispielsweise einfach zurückverfolgen, welchen Weg Nutzer auf einer Webseite gehen, um an bestimmte Informationen zu gelangen. Müssen sie lange suchen, um das gewünschte Ziel zu erreichen, kann das darauf hinweisen, dass die Seitenstruktur überprüft und verbessert werden sollte. Eyetracking hilft auch dabei zu ermitteln, welche Elemente auf der Webseite besonders lange fokussiert und welche nur überflogen werden.

Die daraus gewonnenen Daten können anschließend zur Optimierung der Usability herangezogen werden.

A/B Testing

A/B Tests können dabei helfen zu ermitteln, welche Variante einer Webseite als nutzerfreundlicher wahrgenommen wird. Hierfür wird beispielsweise 50% der Besucher Variante A angezeigt und der anderen Hälfte Variante B. Nach einem ausreichend langen Testzeitraum können dann die Ergebnisse beider Varianten miteinander verglichen und ausgewertet werden. Finden Besucher der Variante A vergleichsweise schneller die gewünschten Informationen, ist davon auszugehen, dass Variante A hinsichtlich der Usability stärker ist.

Card Sorting

Das Card Sorting ist ein beliebtes Verfahren im Bereich der Usability Optimierung, das primär dabei hilft, eine logische und benutzerfreundliche Navigation zu entwickeln. Hierfür werden mindestens 15 repräsentativen Testpersonen Karten mit allen Navigationspunkten vorgelegt. Die einzelnen Navigationspunkte sind dabei neutral beschriftet, beispielsweise umschreiben sie die Inhalte, die Nutzer auf der jeweiligen Seite vorfinden. Anhand der Umschreibung sollen die Teilnehmer dann den aus ihrer Sicht passendsten Navigationsbegriff auf die Karte schreiben. Wäre die Umschreibung also beispielsweise: „Möglichkeit, die Kosten für eine Webseite zu berechnen“, könnten als Navigationsbegriffe etwa „Preisrechner“ oder „Kalkulator“ in Frage kommen.

Anschließend gruppieren die Testpersonen diejenigen Karten, die thematisch zueinander gehören und vergeben geeignete Oberbegriffe, die letztlich als Hauptmenüpunkte fungieren.

So wird sichergestellt, dass die Navigation für die eigene Zielgruppe verständlich formuliert ist.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Enquire now

Give us a call or fill in the form below and we will contact you. We endeavor to answer all inquiries within 24 hours on business days.