Scroll
30 Juli 2021
Auch wenn es Homepage-Baukästen und vorgefertigte Designvorlagen heutzutage möglich machen, ohne jegliches Expertenwissen und durchdachtes Gestaltungskonzept vom Profi in nur wenigen Klicks eine eigene Website zu erstellen, so gehört doch viel mehr zu einem überzeugenden Webauftritt als mal eben ein paar hübsche Bilder und bunte Button zusammenzuklimpern. Nur wer beim Webdesign Köpfchen beweist und Seiten so gestaltet, dass sie leicht zu bedienen sind, wird seine Zielgruppe zufriedenstellen und seine Ziele im Web erreichen – im Klartext: Die Usability spielt eine enorme Rolle für den Erfolg Deiner Website! Du hast noch nie von dem Begriff gehört? Keine Sorge, wir erklären Dir hier alles, was Du zu den Grundlagen der Usability wissen musst und zeigen Dir, welche Faustregeln Du beim Webdesign beachten solltest.
Übersicht:
Usability, User Experience, UX?! – Wir schaffen Klarheit im Begriffs-Wirrwarr
The Key to Success: Darum ist Usability so wichtig für Deine Website
Time to check – Wie Du die Usability Deines Webdesigns prüfst
Erste Anlaufstelle: Google Analytics
Simpel aber effektiv: Live-Testing
So gelingt perfekte Usability – Grundregeln für effektives Webdesign
Stelle den User in den Mittelpunkt!
Erfinde das Rad nicht zwingend neu!
Mobilfreundlichkeit – Denke an die Wurstfinger!
Usability, User Experience, UX?! – Wir schaffen Klarheit im Begriffs-Wirrwarr
Fangen wir zunächst mit der Frage an, die Dir sicherlich schon auf den Nägeln brennt: Was versteckt sich hinter dem ominösen Begriff „Usability“? Übersetzen kann man das Ganze mit Bedienbarkeit oder Gebrauchstauglichkeit und das beschreibt auch schon sehr gut, worum es geht: nämlich wie gut ein Produkt – in unserem Fall eine Website – bedient werden kann. Genauer gesagt handelt es sich um „das Ausmaß, in dem ein System, Produkt oder Service durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektive, effizient und zufriedenstellend zu erreichen“ (DIN ISO 9241-11).
Häufig wird die Usability mit der User Experience – auch als UX bezeichnet – in einen Topf geworfen. Auf den ersten Blick mögen sich die Begriffe zwar ähneln, sie gleichzusetzen wäre allerdings ein Trugschluss. Denn während sich die Usability „nur“ auf die Handhabung eines Produkts bezieht, beinhaltet die User Experience das gesamte Erleben und Wahrnehmen der Produktnutzung – also neben der Bedienung noch weitere Aspekte wie etwa die Erfüllung der Erwartungshaltung, die Ästhetik oder die Freude bei der Nutzung. Kurzum: Die Bedienbarkeit ist ein Teil der UX – jedoch ein enorm wichtiger.
The Key to Success: Darum ist Usability so wichtig für Deine Website
Wenn Du das Potenzial Deiner Website voll ausschöpfen statt verschenken willst, kommst Du um das Thema Usability nicht herum. „Warum?“, fragst Du Dich? Da können wir Dir direkt mehrere Gründe nennen:
- Suchmaschinenoptimierung: Für das Ranking in den Suchergebnissen ist die Qualität der Website von zentraler Bedeutung. Suchmaschinen wie Google möchten ihren Nutzern Seiten präsentieren, die hochwertig sind und sie auf Anhieb zufriedenstellen. Kommen User über die Suche auf Deine Seite, finden sich dort jedoch nicht zurecht und klicken daher häufig nach wenigen Sekunden genervt wieder zurück zur Suchergebnisseite, sendet das kein positives Signal an Suchmaschinen. Aber auch Backlinks von anderen Websites wirst Du kaum ergattern, wenn Deine Seite aufgrund mangelhafter Bedienbarkeit nicht auf ganzer Linie überzeugen kann.
- Mehr Conversions: Wenn Nutzer sich prima auf Deiner Website zurechtfinden und ihr Ziel (bspw. einen Kaufabschluss oder eine Kontaktanfrage) ohne Hürde erreichen, führt das zu weniger Absprüngen und mehr Conversions. Denn mal ehrlich: Hättest Du die Geduld, erst stundenlang herumzutüfteln, wie Du in einem Onlineshop eine passende Jeans findest und den Bestellprozess abwickelst? Vermutlich würdest Du bereits nach kurzer Zeit das Handtuch werfen und einen anderen Shop besuchen.
- Stärkere Kundenbindung: Finden die Besucher auf Deiner Website ohne Umschweife und Frustration zu ihrem Ziel, sind sie nicht nur zufrieden mit Deiner Seite, sondern ebenso mit Deinem Unternehmen. Das wiederum führt dazu, dass sie Deine Website wahrscheinlich auch in Zukunft wieder besuchen und bei Bedarf erneut auf Dein Unternehmen zurückkommen werden.
- Weniger Supportaufwand: Gerade bei größeren Webshops kann es bei einer komplizierten Handhabung schnell zu einem hohen Supportaufwand kommen. Verstehen die Besucher nicht sofort, wie sie zu ihren gewünschten Informationen gelangen (bspw. zu den Bestell- oder Versandinformationen), ist der Kundensupport die nächste Anlaufstelle. Glänzt der Webshop jedoch in Sachen Bedienbarkeit, finden die Besucher selbstständig ihr Ziel. Ergo: Der Supportaufwand und die damit verbundenen Kosten sinken.
- Wettbewerbsvorteil: Deine Website tritt tagtäglich in Konkurrenz mit den Seiten Deiner Mitbewerber. Um herauszustechen und im Kampf um Traffic und Conversions die Nase vorn zu haben, musst Du die Nutzer voll und ganz überzeugen. Das bedeutet, dass Deine Seite einwandfrei zu bedienen sein muss. So schaffst Du Dir einen echten Wettbewerbsvorteil, denn wird die Usability bei Deiner Konkurrenz nicht großgeschrieben, suchen die User wahrscheinlich nach einer Seite, auf der sie sich besser zurechtfinden – und werden bei Dir fündig.
Du siehst also: Usability ist keineswegs bloß eine nett klingende Worthülse. Es gibt eine Menge gute Gründe, den Aspekt der Gebrauchstauglichkeit beim Webdesign genau im Blick zu haben und laufend zu optimieren.
Time to check – Wie Du die Usability Deines Webdesigns prüfst
Da Du nun weißt, wie wertvoll eine optimale Usability ist, möchtest Du bestimmt wissen, wie der Status quo Deiner Website in dieser Hinsicht aussieht. Doch wie überprüft man überhaupt, wie gut die Bedienbarkeit eines Webdesigns ist? Wir verraten es Dir!
Erste Anlaufstelle: Google Analytics
Einen ersten Eindruck, ob und wie gut sich User auf Deiner Website zurechtfinden, kann Dir Google Analytics liefern. Dort findest Du u. a. die Absprungrate – also den Anteil an Usern, die eine Seite der Website aufrufen und diese wieder verlassen, ohne eine weitere Seite zu besuchen. Ist diese sehr hoch, kann das ein Indiz dafür sein, dass der User auf Deiner Seite nicht zum gewünschten Ziel findet und die Bedienung unübersichtlich ist. Wie hoch allerdings „zu hoch“ ist, lässt sich pauschal nur schwer sagen, da sich die Absprungrate je nach Branche und Ziel der Website deutlich unterscheiden kann. So führt der Online Marketing-Experte Neil Patel in einem Blogartikel an, dass die Absprungrate bei einfachen Landingpages durchaus bei 70-90 % liegen kann, während sie hingegen bei Content-Webseiten mit einer hohen Sichtbarkeit durchschnittlich 40-60 % beträgt und bei Service-Seiten (bspw. FAQ-Seiten) mit 10-30 % üblicherweise noch geringer ausfällt.
Neben der Absprungrate kann Dir Google Analytics mit Blick auf die Usability noch weitere wertvolle Daten liefern. So etwa Informationen zu den Klickpfaden, die Du im Bericht „Nutzerfluss“ erhältst. Hier kannst Du einsehen, wie sich User auf Deiner Website bewegen und wo Sitzungsabbrüche stattfinden. Wenn Klickpfade vollkommen anders ausfallen, als dies von Dir vorgesehen ist oder einige Seiten mit ungewöhnlich vielen Abbrüchen herausstechen, können dies Anzeichen für Schwierigkeiten in der Bedienung sein.
Simpel aber effektiv: Live-Testing
Eine weitere sehr einfache Möglichkeit, mehr über die Usability Deines Webauftritts zu erfahren, sind Live-Testings. Lade ein paar Probanden ein – diese sollten natürlich nicht gerade Deine Webentwickler, sondern möglichst unbefangene Personen sein – und bitte sie Deine Page zu testen. Am besten bereitest Du hierzu einige Aufgaben vor, damit sie sich gründlich durch Deine Website klicken. Anschließend holst Du Dir das Feedback Deiner Testpersonen ein. Dazu bietet sich ein kleiner Fragebogen an, um gezielt Eindrücke zur Usability abfragen und die Ergebnisse später sammeln und vergleichen zu können.
Das Tolle am Live-Testing: Du kannst die Bedienbarkeit Deines Webdesigns bereits ganz am Anfang prüfen, denn Du benötigst nicht unbedingt eine fertig gebaute Website. Auch mit ersten Screendesigns und Wireframes kannst Du bereits ein Testing durchführen. So kannst Du mögliche Probleme in der Handhabung frühzeitig aufdecken und beheben.
Ausgeklügeltes User-Tracking
Einen noch detaillierten Einblick in die Usability bieten User-Trackingverfahren wie das Mouse-Tracking, bei dem Bewegungen des Mauszeigers aufgezeichnet und ausgewertet werden. Möglich ist dieses Trackingverfahren entweder im Labor mit einem ausgewählten Personenkreis oder mit speziellen Softwarelösungen, welche die Sitzungen Deiner realen Websitebesucher aufnehmen. Aus den Mausbewegungen werden häufig Heatmaps erstellt, anhand derer man auswerten kann, welche Elemente besonders stark – oder kaum – anvisiert und geklickt werden: Fokussieren die Nutzer ganz andere Elemente als Du vermutest? Gehen andere, viel wichtigere Elemente dagegen total unter?
Ganz ähnlich funktioniert das Eye-Tracking, wobei hier anstatt der Bewegung des Mauszeigers die Blickbewegungen der Testpersonen erfasst werden. So ist es möglich zu erfahren, in welcher Reihenfolge und wie intensiv sich User die einzelnen Seitenelemente anschauen. Dabei wird schnell klar, welche Bereiche besonders hervorstechen und welche kaum auffallen. Häufig wird das Eye-Tracking mit dem klassischen Live-Testing im Labor verbunden, um auch die unbewusste Wahrnehmung der Website-Nutzung zu erheben.
So gelingt perfekte Usability – Grundregeln für effektives Webdesign
Natürlich gilt es immer individuell zu überlegen, wie Du das Maximum an Usability für Deine eigene Zielgruppe aus Deiner Website herausholst. Dabei solltest Du vor allem die Ergebnisse aus Deinen Tests und Nutzerdaten als Grundlage verwenden, um gezielt an den wunden Punkten Deiner Website zu arbeiten. Wir können Dir jedoch darüber hinaus einige grundlegende Tipps mit an die Hand geben, die Du in jedem Fall beim Webdesign berücksichtigen solltest, um eine möglichst gute Usability zu gewährleisten.
Stelle den User in den Mittelpunkt!
Mache Dir bewusst: Das Webdesign muss vor allem Deine Seitenbesucher überzeugen! Daher solltest Du den User mit seinen Bedürfnissen und Kenntnissen immer in den Mittelpunkt stellen. Denn nur weil Dir die Bedienung Deiner Seite logisch erscheint und Du Dich sofort zurechtfindest, muss das nicht ebenso für den User gelten – schließlich hat er in der Regel nicht das gleiche Wissen über Deine Website und wie er dort an sein Ziel gelangt.
Der Nutzer muss das Design und die Bedienung direkt verstehen, ohne dass Erklärungen nötig sind. Mache es ihm daher so leicht wie möglich. Dabei solltest Du immer den dümmsten anzunehmenden User – kurz DAU – im Kopf haben. Das mag etwas fies klingen und selbstverständlich möchten wir Deine Zielgruppe nicht als dumm abstempeln, aber letztendlich geht es darum, dass jeder Deine Seite zufriedenstellend nutzen können sollte. Wenn Du Dir also unsicher bist bei Fragen wie „Versteht der User das tatsächlich?“ oder „Ist klar, dass man hier klicken oder scrollen muss, damit die gewünschten Informationen angezeigt werden?“, lautet die Antwort im Zweifelsfall immer „Nein“ und Du solltest überlegen, wie Du die Seite bzw. ihre Nutzung einfacher gestalten kannst.
Erfinde das Rad nicht zwingend neu!
Klar, eine langweilige Standard-Website sollte nicht Dein Ziel sein. Doch das Rad bei dem Design und der Navigation Deiner Website komplett neu zu erfinden und Deine User dabei nicht an die Hand zu nehmen, kann fatale Folgen für die Usability haben. Wenn Du Dich also neuer Designkonzepte bedienst, mache es den Nutzern einfach, diese zu verstehen und zu erlernen! Helfen können zum Beispiel vertraute Symbole, mit denen Du vorgesehene Handlungen für den User kenntlich machst. So kannst Du etwa mit einem Mauszeiger-Symbol signalisieren, dass der User an einer bestimmten Stelle etwas anklicken kann (bspw. ein Feld, hinter dem sich ein Text verbirgt), was für ihn auf den ersten Blick sonst möglicherweise nicht ersichtlich wäre.
Mobilfreundlichkeit – Denke an die Wurstfinger!
Heutzutage surfen wir nicht nur mit PC und Laptop im Internet, sondern nutzen immer stärker das Smartphone, um schnell etwas zu googlen, online neue Schuhe zu bestellen oder einen Artikel zu lesen. Daher hat sich inzwischen der „Mobile First“-Ansatz im Webdesign durchgesetzt: Bei der Entwicklung von neuen Webseiten steht die Gestaltung für mobile Endgeräte im Vordergrund statt wie zuvor üblich mit einem Design für große Bildschirme, die ganz andere Funktionen erlauben, zu beginnen. Das Ziel ist es, den Usern auf allen Geräten eine optimale Nutzung der Webseite zu ermöglichen.
Dazu solltest Du nicht nur sicherstellen, dass Deine Website mobil zu erreichen ist, sie sollte sich ebenfalls leicht per Touchscreen bedienen lassen. Das heißt: Alle Elemente müssen sich ohne Probleme mit den Fingern ansteuern lassen – auch wenn das dicke Wurstfinger sein sollten. Achte deshalb darauf, dass Bedienungselemente wie Button, Menüpunkte oder Social Media Icons eine ausreichende Größe und genügend Abstand zu allen umliegenden Elementen besitzen.
Alles muss erkennbar sein!
Besucher Deiner Seite sollten nicht erst eine Lupe benötigen, um den Content erkennen und Texte lesen zu können. Für Dein Webdesign bedeutet dies, dass Du einen möglichst hohen Kontrast zwischen Hintergrund- und Schriftfarbe wählen solltest. Zudem sollte sich die Schriftfarbe von regulärem Text und Links deutlich voneinander unterscheiden, sodass User sofort sehen, was sie anklicken können. Aber auch die richtige Größe des Contents und dass kein Element ein anderes verdeckt, ist sehr wichtig und sollte immer kontrolliert werden.
Wenn es darum geht, dass alle Inhalte zu erkennen sein müssen, solltest Du auch an Menschen mit einer Sehbehinderung denken. Da sie Deine Website nicht bzw. nur eingeschränkt selbst anschauen können, nutzen sie oft Screenreader. Damit diese den gesamten Content korrekt registrieren und Bilder „vorlesen“, solltest Du Fotos, Grafiken und Co. stets mit einem aussagekräftigen Alt-Tag kennzeichnen, um den visuellen Content in Text zu übersetzen.
Biete Orientierung!
Zu einer hervorragenden Usability gehört, dass sich User schnell auf der Seite orientieren – helfe ihnen dabei! Zum einen solltest Du die Navigation so einfach und übersichtlich wie möglich gestalten, damit es den Nutzern leichtfällt, zu den gewünschten Inhalten zu gelangen. Dazu trägt nicht nur ein gut strukturiertes Menü bei, Bread-Crumbs können ebenfalls eine gute Orientierungshilfe sein. Sie zeigen dem User, wo er sich gerade auf der Website befindet und welcher Pfad zu der entsprechenden Seite führt.
Zum anderen kannst Du mit einer visuellen Hierarchie wichtige Inhalte für den User betonen. Überlege also ganz genau, wie Du Elemente auf Deiner Seite anordnest. Mit unterschiedlichen Überschriftgrößen, Hervorhebungen oder Farben kannst Du dem User zusätzlich signalisieren, welche Textinhalte besonders von Bedeutung sind und seine Aufmerksamkeit direkt auf jene Bereiche lenken.
Nun kennst Du die Grundlagen der Usability und weißt, dass es allerhand zu beachten gilt, wenn das Webdesign effektiv, effizient und zufriedenstellend sein soll. Aber keine Sorge, gerne unterstützen wir Dich mit der Webentwicklung und helfen Dir, das Beste aus Deinem Webauftritt herauszuholen – melde Dich einfach bei uns!
Bildmaterial: ibreakstock - Adobe Stock // Patrick Daxenbichler - Adobe Stock // Andrii - Adobe Stock // baranq - Shutterstock