Usability und Struktur: was eine Website bedienbar macht

„Je besser ein Nutzer eine Seite bedienen kann und sie für ihn logisch aufgebaut ist, desto mehr Besucher werden die Seite anschauen.“ So fasste die ursprüngliche Fassung dieses Beitrags aus dem Jahr 2006 den Zusammenhang zusammen. Der Satz gilt unverändert. Die Punkte, die damals darunter aufgelistet wurden, sind dagegen ein gutes Zeitdokument – und zeigen genau, wo sich die Anforderungen verschoben haben.

Die Liste von damals

Fünf Punkte nannte der Beitrag als die wichtigsten Faktoren für Bedienbarkeit. Der Reihe nach, mit dem, was heute daraus geworden ist.

1. Browser- und betriebssystemunabhängig entwickeln

Bemerkenswert differenziert formuliert: Eine Seite muss mit jedem Browser in jedem gewöhnlichen Betriebssystem benutzbar sein – „das schließt jedoch nicht mit ein, dass das Layout perfekt bleibt. Es kann ruhig ein wenig verzerrt sein, solange man sich noch auf der Seite zurechtfindet.“

Der ausdrücklich genannte Problemfall war Netscape 4.x. Das ist Vergangenheit, aber der Gedanke dahinter hat einen Namen bekommen: Progressive Enhancement. Erst eine funktionierende Grundfassung, dann Verbesserungen für Umgebungen, die sie darstellen können. CSS unterstützt das direkt:

/* Grundfassung -- funktioniert ueberall */
.karten { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Verbesserung nur, wo verfuegbar */
@supports (display: grid) {
  .karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

Was sich verschoben hat: Die Browser gleichen sich heute weitgehend. Die eigentliche Unabhängigkeit betrifft inzwischen Geräte und Eingabearten – Maus, Finger, Tastatur, Sprachsteuerung, Screenreader.

2. Die Standardauflösung

Hier ist der Beitrag am deutlichsten überholt – und gerade deshalb aufschlussreich. Damals galt: „inoffiziell wird von allen Webmastern 800 x 600 Pixel als Standard angesehen.“ Rund fünf Prozent der Nutzer surften noch mit dieser Auflösung, und unter diesen fünf Prozent, so die Begründung, könnten potenzielle Kunden sein.

Die Denkweise – eine Zielauflösung, plus Rücksicht auf eine Minderheit – ist mit dem responsiven Webdesign vollständig verschwunden. Es gibt keine Standardauflösung mehr, und der Bereich reicht von etwa 320 Pixeln beim Telefon bis über 2500 auf dem Monitor.

Interessant ist aber, dass die Haltung richtig war: Auch eine kleine Nutzergruppe darf nicht ausgeschlossen werden. Nur ist die Gruppe heute eine andere. Wer die Fünf-Prozent-Überlegung von damals ernst nimmt, denkt heute an Nutzer mit Screenreader, mit vergrößerter Schrift oder mit eingeschränkter Motorik.

3. Schriftlesbarkeit

Der Beitrag stellte fest, dass Texte am Bildschirm schwer zu lesen sind und lange Texte ungern gelesen werden – „es sei denn sie suchen gezielt bestimmte Informationen“. Diese Beobachtung ist die Grundlage dessen, was heute als Scanverhalten beschrieben wird: Nutzer lesen nicht von oben nach unten, sondern suchen.

Daraus folgt, was gute Textgestaltung im Web ausmacht: aussagekräftige Zwischenüberschriften, kurze Absätze, das Wichtigste zuerst. Dazu kommen heute messbare Werte statt Faustregeln – etwa 16 bis 20 Pixel Schriftgröße für Fließtext, 60 bis 80 Zeichen Zeilenlänge, mindestens 4,5:1 Kontrastverhältnis.

4. Ladezeiten

Die Begründung von damals ist die zeitgebundenste der ganzen Liste: „Besonders für Modem- und ISDN-User sind kurze Zeiten von großem Vorteil, sie sparen einfach Geld.“ Nach Zeit abgerechnete Einwahlverbindungen sind Geschichte.

Das Thema ist trotzdem nicht kleiner geworden, sondern größer – nur mit anderer Begründung. Ladezeit entscheidet heute darüber, ob jemand bleibt, und fließt als Rankingfaktor in die Suchergebnisse ein. Gemessen wird mit den Core Web Vitals:

• LCP – wann das größte sichtbare Element steht. Zielwert: unter 2,5 Sekunden.
• INP – wie schnell die Seite auf eine Eingabe reagiert. Zielwert: unter 200 Millisekunden.
• CLS – wie stark das Layout während des Ladens springt. Zielwert: unter 0,1.

Die damals genannten Mittel – gute Bildkompression und ein Aufbau, „der möglichst wenig Code in Anspruch nimmt“ – sind dieselben geblieben. Nur heißen sie heute WebP oder AVIF statt optimiertes GIF, und der schlanke Aufbau betrifft JavaScript statt Tabellen und Frames.

5. Animationen

Der Beitrag warnte doppelt: aus Gründen der Ladezeit und wegen der Wirkung – „ein Besucher ist von blinkenden oder sich bewegenden Dingen eher genervt, als an ihnen interessiert.“

Das Datenvolumen ist heute kein Argument mehr, die Wirkung schon. Dazu ist ein Aspekt gekommen, der 2006 nicht bekannt war: Bewegung kann bei manchen Menschen körperliche Beschwerden auslösen – Schwindel oder Übelkeit bei vestibulären Störungen. Betriebssysteme bieten deshalb eine Einstellung, die sich abfragen lässt:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Aus einer Geschmacksfrage ist damit eine Anforderung geworden.

Der zweite Teil: Struktur bleibt gleich

Der Beitrag stellte eine Frage, die heute noch trägt: „Ist euch schon mal aufgefallen, dass das Grundgerüst von Webseiten während man surft meistens gleich bleibt und sich oft nur etwas am Inhalt ändert?“

Die daraus abgeleiteten Regeln – Navigation von Anfang an am gleichen Platz, dasselbe für Logo und Inhaltsbereich, gleiche Hintergrundfarbe auf jeder Seite – sind unverändert gültig. Sie beschreiben, was heute Konsistenz heißt und in Designsystemen festgehalten wird.

Eine Ergänzung braucht es: Konsistenz bedeutet nicht Identität über alle Bildschirmgrößen. Eine Navigation, die auf dem Monitor waagerecht steht und auf dem Telefon eingeklappt ist, bleibt konsistent, solange sie an derselben Stelle und in derselben Form zu finden ist. Was verwirrt, ist nicht die andere Darstellung, sondern eine andere Logik.

Was heute dazugehört

Vier Punkte, die 2006 in keiner Usability-Liste standen und heute an erster Stelle stehen:

• Bedienbarkeit ohne Maus. Alles muss per Tastatur erreichbar sein, in sinnvoller Reihenfolge, mit sichtbarem Fokus. Ein outline: none ohne Ersatz ist einer der häufigsten Fehler überhaupt.
• Ausreichend große Bedienflächen. Auf Touchscreens gelten etwa 44 mal 44 Pixel als Untergrenze – ein Maß, das es zur Zeit des Originals nicht geben konnte.
• Verständliche Fehlermeldungen. Ein Formular, das nur „Fehler“ meldet, ohne zu sagen wo und warum, ist unbedienbar.
• Semantisches HTML. Überschriften in richtiger Hierarchie, echte Buttons für Aktionen, echte Links für Ziele, beschriftete Formularfelder. Das ist die Grundlage, auf der Screenreader arbeiten.

Fazit

Die Liste von 2006 ist in ihren Begründungen veraltet – 800 x 600 Pixel, Netscape 4, Modemkosten – und in ihren Grundsätzen erstaunlich robust: geräteunabhängig entwickeln, Text lesbar halten, schnell laden, Bewegung sparsam einsetzen, Struktur gleich lassen.

Der eigentliche Unterschied liegt woanders: Usability war damals eine Frage der Rücksichtnahme. Heute ist ein großer Teil davon messbar und in Teilen rechtlich verbindlich.

Bei Usability-Prüfung, Barrierefreiheit und Optimierung Ihrer Website unterstützen wir Sie als Webdesign-Agentur gerne.