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.