Das Wort „Usability“ ist in aller Munde. Doch was ist diese Benutzerfreundlichkeit (oder eigentlich „Benutzbarkeit“)?

Primär bedeutet es die Ausrichtung an den Bedienungsmöglichkeiten des Kunden: an seiner Wahrnehmungsfähigkeit, seiner Erfahrung mit Bedienung derartigen Sachen und seinen geistigen und körperlichen Interaktionsmöglichkeiten. Einen weißen Text auf weißem Hintergrund kann im Normalfall niemand wahrnehmen. Das spreizen der Finger auf einem iPhone löst eine bestimmte Aktion aus – wann und welche sagt dem Benutzer seine Erfahrung. Man soll auch nicht von einem Rentner erwarten, dass er mit seiner Maus ein Doppelklick auf einem wenige Pixel großem Aktionsfeld ausführen kann. Das Alles gehört zur Usability. Sie ist im Internet ebenso wichtig wie im Cockpit eines Flugzeugs. Was in welchem Maße oder unter welchen Voraussetzungen gilt, möchte ich hier zusammenstellen und von den Lesern diskutieren lassen. Die Reihefolge ist nicht immer wertend gemeint, wenn auch als Checkliste mit einer langsam sinkenden Priorität zu betrachten.

  1. Der Benutzer weiß, wo er sich befindet. Wichtig vor allem bei Großunternehmen, Ämtern und Organisationen. Corporate Design gibt dem Benutzer die Sicherheit immer noch dasselbe Angebot (Portal) vor sich zu haben. Gleich bleibende Gestaltung und Abläufe müssen nur einmal kennengelernt werden, danach greift man auf die Erfahrung der allerersten Seite zurück.
  2. Die Internetseite muss inhaltlich dem entsprechen, was der dahin führende Hyperlink oder Seitentitel auch ankündigt. So wird der Benutzer nicht mit leeren Versprechen auf Seiten geködert, die er bei richtiger „Ausschilderung“ nicht besuchen würde. Stellen Sie sich vor, jeder dürfte in Deutschland Wegweiser (auch falsche) aufstellen – Sie kämen sicher von München nach Berlin, nur eben über Hannover!
  3. Es muss erkennbar sein, was eine Interaktionsfläche ist und was nicht. Bei der Unterscheidung orientieren Sie sich am besten an der Wahrnehmungsfähigkeit und Erfahrung der Nutzer: blasses Rot und blasses Grün ist für Farbblinde grau, so dass ein Farbentausch (als Hinweis auf eine Interaktionsfläche) nicht wahrgenommen werden kann. Es darf aber auch keine größere Erfahrung der Nutzer voraussetzen, als sie praktisch vorhanden ist: bis heute ist eine Farben-wechselnde Fläche für die Surfer nur dann ein Link, wenn auch der Maus-Cursor in Zeigefinger wechselt. Der „Zeigefinger“ ist insgesamt sehr universell, genauso wie die Unterstreichung. Knöpfe (vor allem im grauen Standard-Design) werden ebenfalls als Aktionsfelder wahrgenommen. Ihre Beschriftung sollte z.B. den folgenden Satz erweitern:  „Ich möchte jetzt…“ („Bestellung aufgeben“, „Bekannte finden“, „Profil speichern“, „Abfrage starten“)
  4. Jede ausgeführte Aktion gibt ein wahrnehmbares (am besten sichtbares) Feedback. Formulare, die nach dem Klick auf „senden“ keine Rückmeldung geben und die Daten nicht löschen, werden mehrfach abgeschickt. Verschwinden nur die Daten ohne eine Rückmeldung, glaubt der Benutzer, die Eingaben verloren zu haben. Änderungen an Bereichen, die bei der Ausführung nicht sichtbar sind, sind unkomfortabel und ebenfalls ärgerlich (man zwingt den Benutzer zum hin und her scrollen). Gleiches gilt für Eingabefelder, die ohne zusätzliche Aktionen an den Server übertragen werden (AJAX), sonst sucht man vergeblich nach einem „speichern“-Button.
  5. Die Größe gibt den Ton an. Je größer ein Text ist, desto eher und wichtiger erscheint er in den Augen des Betrachters. Zu viel große Texte führen zum „Herumirrenden Auge“. Man sieht alles und nichts. Zu viel Kleintext ohne Unterteilung, Absetzung oder Überschriften führt ebenfalls zur „Blindheit“. Der Text sollte „scanbar“ sein – man muss anhand von Stichworten erkennen, in welchem Teil des Textes was zu finden ist.
  6. Der Navigationsbereich muss als solcher erkennbar sein. Oben oder links gilt als am besten geeignet. Allerdings sind Punkte 3 und 4 ebenso wichtig. Meine Seite hält sich nicht an „links oder oben“. Dennoch sieht man, dass dieser Bereich etwas besonderes ist. Stichworte wie „Links“, „Archiv“, „Kategorien“ unterteilen den Bereich, eine Aufhellung des Textes unter dem Mauszeiger (und entsprechender Cursor) signalisieren: „Ich bin aktiv, kannst mich anklicken.“ Wenn Navigationsbereiche wie ein Teil des Logos wirken, werden sie auch oben übersehen.
  7. „Form follows function“ – das Design muss sich am Einsatzgebiet ausrichten. Lange Texte (wie in Romanen) möchten gelesen werden. Zu kleine Schrift oder unruhiger, Vordergrund-ähnlicher Hintergrund verhindert genau dies. Ein zu starker Kontrast zwischen Hintergrund und Vordergrund schadet auf Dauer den Augen auch. Soll das Auge hauptsächlich das Bild auf sich wirken lassen, sollte man ihm genug Platz zur Verfügung stellen und hervorheben. Begleittexte wirken bei Bildern als Unterschrift immer noch am besten. (Leicht zu erreichen z.B: mit yoxview).
  8. Der Wortschatz muss verständlich sein. Je nach Empfängergruppe kann „Proletendeutsch“ zielführender sein als Fachchinesisch. Der Wortschatz muss auch für die Hyperlinks gelten (wie in Punkt 2 beschrieben). Das „title“-Attribut des HTML erlaubt eine kurze Beschreibung, die als Entscheidungshilfe beim Drüberfahren eingeblendet wird. Nutzen Sie möglichst homogen Ihren Wortschatz: „Auftrag“ heißt optimaler Weise immer „Auftrag“ (und nicht „Order“, „Beauftragung“ oder „Gebot“ zufällig abwechselnd). Unverständlich Passagen umschreibt man kurz mit verständlicheren Texten („Zusammenfassung des Kleingedruckten“).
  9. Trotz unterschiedlicher Technik sollte das Design grundsätzlich überall gleich funktionieren und aussehen. Internet Explorer kann einen Webdesigner in den Wahnsinn treiben. Solange die Farben und Bilder gleich bleiben erkennt der Benutzer die Seite auch in diesem Browser wieder. Schatten und runde Ecken sind verzichtbar (wenn auch manchmal unter Tränen).

Immer Nützlich bei einer Prüfung:

  • IEtester (zeigt eine Internetseite, wie sie die Benutzer mit unterschiedlichen InternetExplorer-Versionen sehen würden)
  • Die eigene Seite mit den Augen anderer Nutzer (und deren Browser) sehen. Das geht! Eine Übersicht über die Dienste bietet z.B. diese Seite.
  • Einen Blick auf WCAG werfen. Diese Richtlinien zeigen, was man beachten muss, damit Ihre Seite für Menschen mit Behinderung nicht zu einem Hürdenlauf wird.