Du willst wissen, was Website-Usability ist? Dann schau dir mal deine Homepage an. Wie viele Elemente gibt es dort? Zwanzig? Dreißig? Hast du diverse uneinheitliche Links, die auf verschiedene Teile deiner Seite führen? Hast du ein Pop-up, das die Seite verdeckt? Hast du – der größte Schrecken aller Schrecken – einen Besucherzähler? Wenn die Antwort auf nur eine dieser Fragen ja ist, ist deine Website wahrscheinlich viel zu kompliziert und dir entgehen wohlmöglich die Vorteile guter Website-Usability.

Doch hör nicht nur auf uns: Schau dir die Webseiten an, die Auszeichnungen gewinnen, und du siehst eine große Gemeinsamkeit. Viele von ihnen sind unglaublich simpel und leicht zu bedienen und das aus mehreren Gründen. Der erste Grund ist, dass simplere Webseiten einfach besser aussehen. Der zweite ist, dass Einfachheit und Übersichtlichkeit wichtige Faktoren sind, um Webseiten benutzerfreundlich zu machen. Website-Usability ist einer der wichtigsten Faktoren für erfolgreiches Webdesign.

illustration: Die Grundprinzipien von Website-Usability
Illustration von OrangeCrush

In diesem Guide werden wir uns die Grundprinzipien der Website-Usability ansehen. Wir schauen uns an, was es ist und wie es mit barrierefreiem Designen und der User Experience (UX) zusammenhängt (bzw. inwiefern es sich von ihr unterscheidet). Zudem zeigen wir dir, wie du Website-Usability nutzt, um deine Seite zu designen.

Was ist Website-Usability?

Beginnen wir mit den Grundprinzipien: Was genau ist Website-Usability?

Website-Usability ist eine Eigenschaft von Webseiten, bei der diese so designt werden, dass sie sich auf die Bedürfnisse des Nutzers konzentrieren. Dabei werden Designprozesse genutzt, bei denen der Nutzer im Mittelpunkt steht, um sicherzustellen, dass Webseiten effizient und leicht von denen zu bedienen sind, die sie tatsächlich nutzen, statt von denen, die sie designen.

web design with good usability and navigation
Klarheit und Nützlichkeit sind die beiden Ziele der Benutzerfreundlichkeit von Webseiten. Design von akorn.creative
monochrome minimalist web design
Einfachheit ist der Schlüssel zur Benutzerfreundlichkeit. Design von Bluesjay

Über diese grundlegende Definition hinaus wird es allerdings etwas komplizierter. Tatsächlich wirst du schnell merken, dass es eine der komplexesten Aufgaben im Webdesign ist, deine Website nutzerfreundlich zu gestalten (indem du sie simpel gestaltest!).

Übersichtlichkeit und Nützlichkeit sind die zwei Ziele der Website-Usability und müssen bei Designern ganz oben auf der Liste stehen. Mit anderen Worten, Webdesigner haben die Aufgabe, Webseiten so zu gestalten, dass sie nicht nur gut aussehen, sondern auch genau so funktionieren, wie Nutzer es erwarten. Keine kleine Aufgabe, selbst für die erfahrensten Designer.

Die 5 Grundprinzipien der Website-Usability

Website-Usability kann in 5 Kernpunkte unterteilt werden: Zugänglichkeit, Übersichtlichkeit, Verständnis, Glaubwürdigkeit und Relevanz. Hier ist eine kurze Definition der jeweiligen Punkte:

  • Zugänglichkeit. Zugänglichkeit beschreibt ganz einfach, wie leicht es ist, auf deine Website zuzugreifen. Die Zugänglichkeit deiner Website kann von deiner verwendeten Webhosting-Plattform beeinflusst werden und davon, wie kompatibel sie mit den Geräten der Nutzer ist, von denen aus sie auf die Seite zugreifen.
  • Übersichtlichkeit. Übersichtlichkeit ist der Kern der Website-Usability. Die Besucher deiner Website haben ein bestimmtes Ziel im Sinn, wenn sie auf deine Seite kommen, und wir versprechen dir, dass sie nicht das Ziel haben zu erfahren, wie gut du designen kannst! Wenn das Design deiner Website die Besucher ablenkt oder verwirrt, werden sie entweder länger brauchen, um das zu finden, wofür sie gekommen sind, oder ihr ursprüngliches Ziel komplett vergessen und die Seite verlassen. In jedem Fall verlassen sie deine Seite unzufrieden und kommen wahrscheinlich nicht zurück.
  • Verständnis. Verständnis beschreibt den Lernprozess des Nutzers, wenn er eine neue Seite besucht. Du hast vielleicht nicht das Gefühl, dass man deine Seite erst studieren muss, um sie zu nutzen, aber in Wahrheit erfordern es alle Seiten, dass man sie sich erst mal ein paar Sekunden genauer anschaut, bevor man mit ihnen interagieren kann. Der Großteil der Nutzer wird beispielsweise irgendwann wieder zurück zu deiner Homepage wollen und die meisten werden dazu nach einem Logo in der oberen linken Ecke suchen. Wenn deine Website anders funktioniert, brauchen sie erst ein paar Sekunden, um zu verstehen, wie sie zurück zur Homepage kommen. Wenn bei deinem Design die Usability im Mittelpunkt stehen soll, sollte es dein Ziel sein, diese Lernkurve so flach wie möglich zu halten.
  • Glaubwürdigkeit. Selbst wenn Kunden problemlos die gesuchten Inhalte oder Funktionen finden sollten, wird ihnen die Website nichts nutzen, wenn sie ihr nicht vertrauen. Es gibt viele Wege, um deine Glaubwürdigkeit mittels deines Webdesigns zu demonstrieren, beispielsweise indem du transparent kommunizierst, worum es bei deinem Unternehmen geht und welche Ziele es hat.
  • Relevanz. Relevanz ist wahrscheinlich das komplexeste Problem der Website-Usability, weil es hier darum geht, ob der Content, den deine Kunden zu sehen bekommen, ansprechend ist. Um ansprechenden Content zu kreieren, musst du sorgfältig definieren, wer deine Zielgruppe ist, herausfinden, was sie wollen, und so klar wie möglich ihre Bedürfnisse erfüllen.

Diese fünf Grundregeln sind die wichtigsten Aspekte der Website-Usability. Es kann schwierig sein, diese Elemente in der Realität umzusetzen, also lass uns ein Beispiel anschauen. Das vielleicht beste Beispiel für Website-Usability ist amazon.de.

screenshot Amazon homepage
Via Amazon

Amazon ist in vielerlei Hinsicht auf Website-Usability optimiert. Zunächst einmal ist die Desktop-Version sowohl für Tablets als auch Desktop-Geräte optimiert. Jede Seite ist dynamisch und das grundlegende Layout jeder Seite passt sich an die Größe des Bildschirms an, den der Nutzer verwendet. Die eigenständige Mobilseite hat eine sauberere Benutzeroberfläche und eine klare Hierarchie der Inhalte. Außerdem wurde sie so optimiert, dass sie besser mit langsameren Internetverbindungen funktioniert. Amazon.de hat zudem eine sehr geringe Downtime, trotz der Millionen von Nutzer, die die Seite jeden Tag besuchen.

Diese Benutzerfreundlichkeit ist kein Zufall. Auf ihrer Website erklärt Amazon deutlich, wie wichtig ihnen Benutzerfreundlichkeit ist: „Wir versuchen stets, die Benutzerfreundlichkeit unserer Seite zu verbessern, auch für Menschen mit Behinderungen.“ Für Screenreader empfehlen sie ausdrücklich ihre Mobilseite, da hier der Content sauberer präsentiert wird.

Website-Usability vs. Barrierefreiheit und UX

Website-Usability als Praxis und Funktion eines Webdesigns hat einige Elemente mit dem Konzept der Barrierefreiheit gemeinsam. Aber es gibt einen wichtigen Unterschied: Website-Usability bezieht sich auf alle Nutzer, wohingegen Barrierefreiheit sich auf Menschen bezieht, die in irgendeiner Form eingeschränkt sind.

Lifecoach-Website, die Zugänglichkeit und Benutzerfreundlichkeit zeigt
Eine innovative Kombination aus Bild und Text kann Barrierefreiheit und Website-Usability verbessern. Design von spoon lancer

Barrierefreiheit, so wie wir wie es auch genauer in unserem Artikel über barrierefreies Webdesign erklären, bedeutet, Webseiten und Apps so zu designen, dass sie auch für Menschen mit Behinderungen nutzbar sind. Dies kann bedeuten, die Website so zu gestalten, dass sie mit verschiedenen Assistenzgeräten kompatibel ist, oder einfach wohlüberlegtes Design zu nutzen. Weltweit leben geschätzt eine Milliarde Menschen, beziehungsweise 15 % der Weltbevölkerung mit einer Behinderung. Indem du deine Website barrierefrei gestaltest, vermeidest du es, Nutzer zu verprellen.

Für Website-Usability zu designen beinhaltet viele derselben Techniken wie das Designen für Barrierefreiheit, geht aber noch darüber hinaus. Tatsächlich betrachtet man Barrierefreiheit am besten als eine Unterkategorie der Usability: Beide haben das Ziel, deine Website für so viele Menschen wie möglich nutzbar zu machen, aber Barrierefreiheit konzentriert sich speziell darauf, deine Website für Besucher mit Behinderungen nutzbar zu machen. Du könntest dich beispielsweise dazu entscheiden, sehr kontrastreichen Text zu nutzen, damit Nutzer mit Sehbehinderungen deine Website einfacher nutzen können. Dann merkst du möglicherweise, dass dieser Text für Smartphone-Nutzer leichter zu erkennen ist und du dadurch deine Website für alle Nutzer leichter nutzbar macht.

Website-Usability wird auch häufig mit einem anderen Webdesign-Konzept verwechselt: User Experience (UX). Website-Usability stellt man sich am besten als Unterkategorie der UX vor, da UX sich in der Regel auf mehr als nur Web-Interaktionen bezieht. UX beinhaltet alles von Interaktionen zwischen Mensch und Maschine bis hin zur Anthropologie der künstlichen Intelligenz. Die meisten UX-Kurse betonen, dass die Erkenntnisse, auf die sie sich stützen, für unglaublich viele Umstände und Geräte gelten, nicht nur für Webseiten.

einfache website für Subsea Valley
UX bedeutet, einheitliche Benutzeroberflächen auf verschiedenen Geräten sicherzustellen. Design von Mike Barnes

In Sachen Webdesign bedeutet dies, dass das Ziel der Website-Usability darin besteht, die Website benutzerfreundlich zu gestalten, wohingegen das Ziel von UX-Design darin besteht, für ein klares, intuitives und schließlich angenehmes Erlebnis auf der Website zu sorgen. Stelle sie dir folgendermaßen vor: Wenn das Designen für Website-Usability bedeutet, eine simple Navigationsleiste zu designen, bei der der Nutzer weniger als eine Sekunde benötigt, um herauszufinden, wie sie funktioniert, bedeutet das Designen für UX, diese Navigation und alle Buttons der Website in einer auffälligen Farbe zu designen, die sich vom Hintergrund absetzt und den Blick des Nutzers auf sich zieht.

Für Website-Usability designen

Jetzt denkst du vielleicht, dass diese allgemeinen Prinzipien nicht viel mit dem eigentlichen Designen von Webseiten zu tun haben. Doch tatsächlich stimmt das Gegenteil. Die Kernprinzipien der Website-Usability haben Einfluss auf wirkungsvolles Design und sollten bei allen Designentscheidungen, die du beim Erstellen deiner Website triffst, eine Rolle spielen.

web design mit klarer navigation
Eine klare Navigationsstruktur ist wichtig für Website-Usability. Design von MercClass

Dich an diese Grundprinzipien zu halten, wird nicht nur deine Website besser machen, sondern kann dir auch jede Menge Geld für Webdesign sparen. Wenn du beim Designen deiner Website von Beginn an die Bedürfnisse der Nutzer denkst, optimierst du den Design- und Entwicklungsprozess.

Folge diesem Fahrplan, um sicherzustellen, dass deine nächste Website so benutzerfreundlich wie möglich ist.

1. User Research

User Research, also die Zielgruppenanalyse, ist der wichtigste Teil beim Designen für Website-Usability. Bevor du mit dem Designen deiner Seite beginnst – selbst wenn du einen Webdesigner engagiert hast, um das für dich zu tun – solltest du mithilfe von User Research herausfinden, was deine Nutzer benötigen und was sie von deiner Website erwarten.

Du wirst möglicherweise von den Ergebnissen überrascht sein. Es kann zum Beispiel sein, dass der Großteil deiner Kunden auf deine Seite kommt, um herauszufinden, wo sich dein Geschäft befindet, statt deine Produkte online zu kaufen, aber diese Information ist tief irgendwo auf der Kontaktseite versteckt. Das kannst du leicht lösen: Platziere die Adresse deines Geschäfts einfach auf der Homepage.

webdesign für kuchen-abo-website
Nutzer, die beispielsweise ein Lieferabo für Kuchen wollen, müssen verstehen, wie das Abo funktioniert. Webdesign von DSKY

Es gibt verschiedene Wege, um diese Analyse durchzuführen, aber User Journey Maps können ein sehr effektiver Weg für Designer sein, um darzustellen, wie Besucher sich auf einer Seite bewegen. Skizziere diesen Weg, um zu verstehen, wie sich Nutzer auf deiner Website bewegen und arbeite diese Skizze dann aus, um ein wirkungsvolles Design zu kreieren.

Wenn du für Website-Usability designst, darfst du nicht vergessen, dass du das Rad nicht neu erfinden musst. Auch wenn Innovation und kreative Designansätze großartig aussehen können, ist es manchmal am besten, bei Designs zu bleiben, bei denen die Nutzer wissen, wie sie funktionieren. Dies war die Herangehensweise von Microsoft, als sie das letzte Mal ihre Website neu gestaltet haben. Das Design sieht zeitgemäß aus, aber das Layout der Seite ist eines, das wir schon tausende Male zuvor gesehen und genutzt haben.

screenshot microsoft.com
Im Kern hat die Homepage von Microsoft einen sehr einfachen Aufbau. Via Microsoft.com

Gehen wir es mal Schritt für Schritt durch: oben links ist das Logo, das uns sagt, wo wir uns befinden. Oben rechts ist ein Suchfeld, mit dem wir die Seite nach Schlagwörtern durchsuchen können. In derselben Reihe wie das Suchfeld befindet sich ein Button, über den man sich einloggen kann, und der Warenkorb. All diese Webdesign-Elemente haben wir schon mal gesehen und wissen, was sie bedeuten. Mit anderen Worten, die Seite erfüllt das, was die meisten Menschen von einer Website erwarten.

2. Aufbau

Der nächste Schritt beim Designen für Website-Usability besteht darin, die Erkenntnisse deiner Zielgruppenanalyse zu nehmen und sie zu nutzen, um den grundlegenden Aufbau deiner Website zu erstellen.

Dabei solltest du auch hinterfragen, welchen Inhalt deine Website enthalten sollte. Gute Fragen, um dies herauszufinden, sind unter anderem:

  • Wonach suchen die Besucher meiner Website?
  • Welcher Inhalt ist meinen Besuchern am wichtigsten?
  • Welche Information benötigt jeder Besucher und welche Information ist nur für manche Besucher von Bedeutung?

Für etablierte Unternehmen mit einer langen Erfolgsgeschichte, vielen Produktlinien und mehreren innovativen Werbekampagnen kann die Tendenz dahin gehen, all diese Infos in den Mittelpunkt der Homepage zu stellen. Dies ist ein Fehler: Wenn sich zu viele Informationen auf deiner Seite befinden, wird dies deine Besucher überfordern und so dafür sorgen, dass sie deine Seite verlassen.

Definiere stattdessen drei Dinge (höchstens), die deine Besucher erreichen wollen, und gib jeder von ihnen einen eigenen Bereich auf deiner Website. An diesem Punkt solltest du in der Lage sein, die Navigationsstruktur deiner Website auf Papier zu skizzieren. Statt direkt in ein Webdesign-Programm zu springen, zeichne erst alles auf. Dies wird helfen, dein Design simpel zu halten, und zu einer verbesserten Website-Usability führen.

Ein tolles Beispiel für einen simplen, aber wirkungsvolle Aufbau ist die Nikes Website.

Nike website
Ähnlich wie bei Microsoft ist Nikes Navigation eindeutig. Via Nike.com

Die Marke bietet Sportbekleidung und Ausrüstung für verschiedene Sportarten und für verschiedene Arten von Menschen. Wenn du zum ersten Mal auf die Seite kommst, kannst du auswählen, wie du auf ihr navigieren möchtest: du kannst ihre Seite entweder nach Kleidung für Männer, Frauen und Kinder durchsuchen oder nach Sportarten. Wenn du zum Beispiel nach neuen Laufschuhen suchst, musst du dich gar nicht erst mit all den Tennis- oder Indoor-Schuhen beschäftigen, die sie ebenfalls anbieten. Nikes Website macht es super einfach, genau das zu finden, was du suchst. Und zwar nur das, was du suchst.

3. Engagiere einen Webdesigner

Der nächste Schritt, um eine benutzerfreundliche Website zu kreieren, besteht darin, einen Webdesigner zu engagieren. Selbst wenn du den Großteil deiner Seite selbst erstellst, kannst du mit einem erfahrenen Webdesigner, der den Look deiner Website kreiert, sicherstellen, dass dein Design auf den Grundregeln der Website-Usability aufbaut.

Vergiss nicht, dass alle guten Webseiten nach denselben Grundregeln der Website-Usability funktionieren, aber das bedeutet nicht, dass sie alle gleich aussehen. Wenn du nach dem richtigen Webdesigner suchst, arbeite mit einem, der nicht nur gut funktionierende Webseiten kreiert, sondern Webseiten, die effektiv ihre Marken vermitteln.

Testen der Website-Usability

Hier ist das Wichtigste, an das du beim Testen der Website-Usability denken musst: gutes Design ist ein Prozess, kein Ereignis. Unternehmen müssen die Benutzerfreundlichkeit ihrer Seiten fortlaufend testen und ihre Erkenntnisse nutzen, um ihre Webseiten noch besser zu machen. Du kannst nicht einfach Annahmen über die Entscheidungen deiner Designer und Entwickler treffen, du musst sie testen. Nur weil der von ihnen verwendete Aufbau auf dem Papier gut aussieht, heißt das nicht, dass der Endnutzer dasselbe nahtlose Erlebnis haben wird.

Homepage einer Website für Programmierer mit direkten Links zu beliebten Seiten
Gib dem Nutzer, was er will. Design von Mila Jones Cann

Aus diesem Grund ist ein Usability-Test der erste Schritt im Webdesign und auch der letzte.

Zu einem Usability-Test gehört es, Freiwillige zu finden und sie zu bitten, deine Website zu testen. Indem du ihre Klicks, ihre Mausbewegungen und ihr Verhalten überwachst, kannst du potenzielle Probleme oder Fehler im Design herausfinden. Die Teilnehmer können ebenfalls sagen, welche Probleme sie hatten und Feedback geben.

Während dieses Prozesses wirst du zwei Arten von Problemen aufdecken. Eine Art von Problem ist verhaltensbezogen: Deine Besucher finden nicht so einfach heraus, wie sie etwas auf deiner Seite tun können. Das zweite wir technischer Natur sein, falls etwas nicht so funktioniert, wie es soll.

Egal was bei deinen Tests herauskommt, du solltest diese Erkenntnisse nutzen, um zu Schritt 1 oben zurückzukehren. Eine Website zu designen bedeutet, dass du kontinuierlich das Erlebnis deiner Nutzer bewerten und dieses verbessern musst. Ansonsten werden sie ganz einfach woanders hingehen.

Website-Usability ist ein essenzieller Teil guten Webdesigns

Website-Usability ist nicht optional. Es kann auf jede Website angewandt werden und beschreibt, wie effektiv deine Website ist und ob sie eine lohnenswerte Investition darstellt.

Dieser simple Punkt kann schnell in Vergessenheit geraten: Dein Webdesign mag gut für Manager funktionieren, wenn sie es testen, aber diese wissen, was dein Unternehmen macht und wie es funktioniert. Für deine Nutzer kann das ganz anders aussehen. Den Fokus des Designs auf den Nutzer zu legen und darauf, was er erreichen möchte, kann deine Website benutzerfreundlicher machen. Und um sie benutzerfreundlicher zu machen, arbeitest du am besten mit einem professionellen Webdesigner zusammen.

Du brauchst ein schickes Webdesign, das die Bedürfnisse der Nutzer in den Vordergrund stellt?
Unsere Designer erstellen eine benutzerfreundliche und einzigartige Website für deine Marke.