Checklisten

Die ultimative Usability-Checkliste

25. Mai 2007
von

von Stefan Nitzsche

Diese Checkliste erhebt keinen Anspruch auf Vollständigkeit, fragt aber viele der am häufigsten vernachlässigten Usability-Faktoren ab.

Inhalt:

Typografie:

  1. Vermeiden Sie Blocksatz beziehungsweise zentrierten Satz?Der Blocksatz ist in seiner Darstellungsqualität stark abhängig von verwendeter Schrift, Schriftgröße, seiner variablen horizontalen Ausdehnung et cetera. Sie können sich nie darauf verlassen, dass die durch den Stylesheet empfohlene Schrift zum Einsatz kommt. Sollte auf dem Client keine der empfohlenen Schriften installiert sein, werden sie durch generische Schriftfamilien ersetzt. Hinzu kommt, dass kein User Agent (UA) eine Silbentrennung beherrscht, so dass Textzeilen in Ihrer Darstellung unter Umständen bis zur Unleserlichkeit verzerrt würden.
  2. Nutzen Sie eine ausreichende Schriftgröße?Die Standardschrift sollte groß sein, damit die Größe nur von wenigen Besuchern geändert werden muss. Dabei sollten Sie natürlich an die Zielgruppe denken. Serifenschriften sollten generell größer dargestellt werden, als Schriften ohne Serifen, da sie mehr typografische Details enthalten, deren schlechte Darstellung auf kleinem Raum die Lesbarkeit stark reduzieren würde.
  3. Ist sichergestellt, dass eine Textzeile nicht zu viele Zeichen enthält?In der gängigen Literatur finden Sie verschiedene Empfehlungen, am häufigsten liest man, dass zwischen 60 und 80 Zeichen pro Zeile optimal sind. In der Praxis hängt das natürlich stark von Schrift und Zeilenabstand ab.
  4. Ist der Zeilenabstand groß genug, um optimale Lesbarkeit zu gewährleisten?Je mehr Zeichen eine Zeile enthält, desto deutlicher sollten die Zeilen voneinander entfernt sein, da das Auge sonst den Sprung vom Ende der Zeile zum Beginn der nächsten Zeile nicht schnell genug oder gar nicht schafft. Das sorgt auf Dauer für Ermüdungserscheinungen.
  5. Existiert genug Tonwertunterschied zwischen Vorder- und Hintergrund?Zu oft wird von viel Tonwertunterschied zwischen Vordergrund und Hintergrund gesprochen. Allerdings ist ausreichender Tonwertunterschied richtiger. Zu starker Kontrast ist nicht zu empfehlen, zu schwacher ebenfalls nicht – wie alles: eine Gratwanderung.

Technik:

  1. Ist die Seite über sprechende URLs erreichbar?Sprechende URLs sind wichtig, um vom bloßen Link darauf schließen zu können, was sich dahinter verbirgt. So werden dem Besucher zusätzliche Informationen gegeben, die seinen Entscheidungsprozess beschleunigen.
  2. Haben Sie sich dafür entschieden, Ihre Seite mit oder ohne www-Subdomain bekannt zu machen?Nicht nur Suchmaschinen stolpern über zweierlei Schreibweise, sondern auch Besucher. Hier empfiehlt es sich, auf eine einzige Schreibweise zu setzen und die andere per .htaccess-Datei auszuschließen.
  3. Kommt Ihre Seite ohne Frames oder Pop-Ups aus?Frames widersprechen dem ursprünglichen Gedanken des Webs: der Seite. Die Seite als kleinste Einheit des Webs sollte über eine eindeutige URL erreichbar sein – was bei Frames nicht der Fall sein kann. Auch der Clickstream, die Spur des Besuchers auf der besuchten Webseite, wird durch Frames verwischt, wenn beispielsweise mehr als ein Teil des Framesets zur gleichen Zeit ausgetauscht wird – die Funktion des Zurück-Buttons des UA leidet.

    Pop-Ups entziehen sich der Kontrolle des Besuchers und erzeugen so in jedem Fall erst einmal eine negative Benutzererfahrung, da sie die Aufmerksamkeit des Besuchers von der eigentlich gewünschten Seite auf ein Angebot ablenken, dass nicht angefordert wurde. Darüber hinaus werden sie, egal ob sinnvoll oder nicht, mit Werbung assoziiert und geschlossen, bevor ihr Inhalt vollständig geladen ist.

  4. Gibt die Webseite auf jede der Aktionen des Besuchers eine Rückmeldung?Jede Art von Rückmeldung vermeidet negative Benutzererfahrungen (UX), sogar Fehlermeldungen (wenn die Webseite beispielsweise freundlich auf Bedienungsfehler aufmerksam macht). Schlimmer ist es, wenn der Besucher eine Rückmeldung auf seine Aktion erwartet und gar nichts passiert.

Bilder/Multimedia:

  1. Haben Sie effektive alt-, title- und longdesc-Attribute bei allen wichtigen Elementen genutzt?Das alt-Attribut ist gedacht, um dem Besucher einen alternativen Text zu einem nicht darstellbaren oder nicht geladenen Element anzubieten. So kurz wie möglich, und so lang wie nötig.

    Das title-Attribut ist gedacht, um dem Besucher zusätzliche, aber nicht unbedingt notwendige Informationen zu dem damit ausgezeichneten Element anzubieten. Oft wird es als Tooltip angezeigt.

    Das longdesc-Attribut sollte eine ausführliche, textliche Beschreibung des damit ausgezeichneten Bildes anbieten.

  2. Haben Sie anstelle von Bildern Text für wichtigen Inhalt verwendet (Image Replacement)?Image Replacement meint das Ersetzen von HTML-Elementen durch Bilder, wobei der eigentliche Inhalt des ersetzten Elements nicht mehr angezeigt wird. Solche Ersetzungsverfahren sollen trotz der Darstellung von Bildern die Struktur und Semantik eines Dokuments erhalten.
  3. Erhält der Besucher absolute Kontrolle über das Starten/Steuern von Multimedia-Inhalten?Nichts veranlasst einen Besucher schneller und effektiver dazu, eine Seite zu verlassen, als ein nicht erwarteter, automatisch startender, multimedialer Inhalt. Derartiges Verhalten von Inhalten ist in jedem Fall zu unterbinden.
  4. Informieren Sie den Besucher über Größe und Länge von Multimedia-Inhalten?Der Entscheidungsprozess, einen Multimedia-Inhalt zu starten (das gilt übrigens auch für Downloads), wird nicht nur durch Informationen, wie der zu erwartende Inhalt, die Vorschau und den Kontext gestützt, sondern auch maßgeblich durch das Ergebnis einer Korrelation von Bandbreite, Länge und Größe des Formats beeinflusst. Sie vermeiden eine negative Benutzererfahrung (UX) durch das Angebot der für diese Korrelation notwendigen Informationen.

Inhalt:

  1. Haben Sie darauf geachtet, die Datenmenge pro PI möglichst gering zu halten?Diese Regel berücksichtigt nicht die Datentransferbeschränkung des Hostings, sondern die Ladezeit. Die Ladezeit wird auch positiv von einer möglichst geringen Anzahl an HTTP-Requests pro Seite beeinflusst, der Anzahl von zu ladenen Dateien.
  2. Nutzen Sie relative anstelle von absoluten Werten?Die Nutzung von relativen Werten zur Formatierung und Positionierung von Elementen räumt dem Besucher die Möglichkeit ein, mit Hilfe der Einstellung der Schriftgröße durch den UA das Layout zu beeinflussen.
  3. Nutzen Sie Listen (ul/ol/dl), um Dinge aufzuzählen?Content Chunking, also das Stückeln von Inhalten, motiviert Besucher wesentlich stärker dazu, am Bildschirm zu lesen, als lange Textwüsten. Er hat dadurch das Gefühl, kurze, prägnante und wenig redundante Informationen aufzunehmen. Ihm erscheint das Lesen effektiver. Dieses Gefühl ist wichtig, da das Lesen am Bildschirm etwa 25 % langsamer geschieht als auf Papier und die Augen schneller ermüden.
  4. Bietet Ihre Webseite Stylesheets für alternative Medien (Print, Projection, Aural) an?Das absolute Minimum ist ein alternatives Stylesheet für die Druckausgabe. Eine Webseite ist für die Ausgabe auf dem Bildschirm bestimmt. Es ist Pflicht der Ausgabe auf Papier, durch einen dafür optimierten Stylesheet Rechnung zu tragen. Für andere Medien wird derzeit selten optimiert, obwohl ausreichend Möglichkeiten dafür vorhanden sind. Das Fundament für eine Optimierung bildet in den meisten Fällen das Ausblenden der für das spezielle Medium nicht notwendigen Elemente.

Navigation:

  1. Unterscheiden Sie in der Navigation die aktuelle Seite von den inaktiven Seiten?Ein Standanzeiger informiert den Besucher zu jeder Zeit darüber, in welchem Bereich der Webseite er sich befindet. Diese Rückmeldung ist wichtig, damit der Besucher sich intuitiv auch in einer komplexen Struktur zurecht findet.
  2. Nutzen Sie sprechende Link-Texte?Nicht nur bei der Indexierung durch Suchmaschinen ist das verlinkte Element wichtig, sondern auch für die Entscheidung des Besuchers, einem Link zu folgen. Daher sind Texte wie „mehr“ oder „hier“ nicht geeignet, verlinkt zu werden.
  3. Nutzen Sie Skip-Links, um bestimmte Bereiche der einzelnen Seiten leichter zugänglich zu machen?Skip-Links sind nicht nur für die Nur-Text-Darstellung einer Webseite sinnvoll, sondern beispielsweise auch, um Abschnitte eines umfangreicheren Dokuments komfortabel erreichbar zu machen. Auch der „Zurück zum Seitenanfang”-Link ist ein Skip-Link.
  4. Nutzen Sie das title-Attribut für alle Links?Mit Hilfe des title-Attributs können Sie nicht nur zusätzliche Informationen über das Ziel des damit ausgezeichneten Links anbieten, sondern beispielsweise deutlich machen, ob es sich um einen Link innerhalb der besuchten Webseite handelt, oder ob der Link den Besucher auf eine andere Webseite führt.
  5. Nutzen Sie Breadcrumbs?Die Breadcrumb-Navigation ist als Best Practice für komplexe, umfangreiche Webseiten ein absolutes Muss. Aber auch bei kleinen Webseiten bietet diese Art der Navigation nur Vorteile. Sie stellt dem Besucher jederzeit die Information zur Verfügung, wo auf der Webseite er sich befindet, und zwar in Relation zu darüber liegenden Navigationsebenen.
  6. Existiert eine Suchfunktion?Eine Suchfunktion ist eine der wichtigsten Schnittstellen zwischen Besucher und Webseite. Gerade auf komplexen Webseiten (Jakob Nielsen empfiehlt eine Suchfunktion ab 200 Einzelseiten) können Sie dem Besucher nicht abverlangen, die benötigte Information manuell zu suchen.
  7. Verlinkt Ihr Logo auf die Startseite?Nach vielen Jahren hat sich die Praxis bewährt, das Unternehmenslogo mit der Homepage (Startseite) zu verlinken. Fortgeschrittene Besucher von Webseiten kennen diese Vorgehensweise und erwarten sie häufig.

Struktur:

  1. Existiert eine konsistente Gesamtstruktur bzw. Outline?Eine intuitiv verständliche Gesamtstruktur ist nicht nur bei umfangreichen Webseiten Pflicht. Nur eine logisch nachvollziehbare Struktur unterstützt den Besucher auf der Suche nach für ihn wertvollen Informationen.

    Die Outline (Überschriftenhierarchie) ist für Webseiten nicht weniger wichtig, als die Strukturierung eines umfangreichen, wissenschaftlichen Textes. Der Besucher wird es durch eine längere Verweildauer danken, wenn er Struktur und Hierarchie der dargestellten Inhalte intuitiv erfassen kann.

  2. Sind alle Elemente gemäß der Benutzererwartung positioniert?Mit den Jahren der Internetnutzung hat sich bei Besuchern eine stereotype Erwartungshaltung eingeschlichen, bestimmte Elemente an den gleichen Stellen von Webseiten finden zu wollen. Im Allgemeinen können Sie annehmen, dass Besucher beispielsweise das Unternehmenslogo links oben erwarten, eine Suchfunktion rechts oben und Links zu Themen wie „Impressum“ und „Datenschutz“ im Seitenfuß.
  3. Haben Sie das Design in einem Raster angelegt?Ein Raster ist die anschaulichste Erscheinungsform der Ordnung in der Gestaltung einer Webseite. Es zeigt dem Besucher, wie Elemente angeordnet werden, so dass er nicht nur innerhalb von Sekunden eine Erwartung an die Webseite entwickelt, sondern sich, eine gewisse Logik im Raster vorausgesetzt, intuitiv zurechtfindet. Das Raster trägt maßgeblich zur Wiedererkennbarkeit einer Webseite bei, während sich andere Gestaltungsparameter (Farben, Schriften, multimediale Elemente) ändern können.
  4. Passt sich Ihr Design an die Größe des Viewports an?Der Trend, dem Besucher größtmögliche Freiheit zu geben, während er eine Webseite betrachtet, spiegelt sich auch darin wieder, die Entscheidung über die Ausdehnung der Webseite im Viewport nicht dem Gestalter zu überlassen, sondern dem Besucher oder dem von ihm benutzten UA. Dabei gibt es zwei Richtungen, in denen das Design flexibel sein muss: in der Horizontalen, die durch Größe des Viewports bestimmt werden sollte, und in der Vertikalen, die im Wesentlichen durch Art und Menge des Inhalts bestimmt werden sollte.
  5. Haben Sie individuelle Titel (title) für jede Seite vergeben?Schon alleine der semantische Gebrauch des title-Tags verbietet eine identische Benennung aller Einzelseiten einer Webseite, aber individuelle Seitentitel sind nicht nur für die Indexierung durch Suchmaschinen eine große Hilfe, sondern auch für den Besucher. Der Seitentitel wird vom UA zur Beschriftung des Fensters genutzt, in dem die Webseite dargestellt wird. So lassen sich auch im minimierten Zustand Rückschlüsse auf den Inhalt dieses Fensters ziehen.

Formulare:

  1. Werden Besucher nach einer Validierung auf Eingabefehler freundlich und informativ aufmerksam gemacht?Nach Bedienungsfehlern in Formularen erwartet der Besucher eine Rückmeldung in Form eines freundlichen Hinweises. Die Webseite muss ihm mitteilen, an welcher Stelle er welchen Fehler gemacht hat. Im Idealfall geschieht diese Validierung in Echtzeit (AJAX), zumindest aber innerhalb der Webseite (PHP) und auf keinen Fall durch den UA (JavaScript).
  2. Ist sichergestellt, dass Besucher lediglich die Tabulator-Taste benutzen müssen, um in der korrekten, logischen Reihenfolge das Formular auszufüllen?Formulare müssen so gestaltet sein, dass der Besucher nicht die Maus nutzen muss, um zwischen Formularfeldern zu springen. Er soll zu diesem Zweck die Hände nicht von der Tastatur entfernen müssen. Dabei darf die Reihenfolge auf keinen Fall beispielsweise dem Erscheinungsbild des Formulars folgen, sondern darf ausschließlich der logischen Folge der abgefragten Daten entsprechen. Nutzen Sie das Attribut tabindex.
  3. Erhält das erste Eingabefeld automatisch den Fokus?Damit der Besucher nach dem Aufbau der Seite sofort mit dem Ausfüllen des Formulars beginnen kann, ohne selbst das erste Eingabefeld suchen zu müssen, sollte es automatisch den Fokus erhalten.
  4. Nutzen Sie das label-Tag?Um zwischen Beschriftung und Eingabefeld eine logische Verbindung zu schaffen, existiert das label-Tag. Dieses Tag sollte in jedem Fall genutzt werden. So muss der Besucher, um ein bestimmtes Eingabefeld auszuwählen, nicht zwingend mit Hilfe der Maus in das Eingabefeld klicken , sondern kann auch auf dessen Beschriftung klicken.

Qualitätssicherung:

  1. Haben Sie nicht nur Markup und Stylesheets, sondern auch Outline, Zugänglichkeit, Performance und so weiter getestet?Zu einer benutzbaren Webseite gehört nicht nur die Validierung von Markup und Stylesheets, sondern auch ein Test der Struktur (Outline-Konsistenz), der Accessibility (Zugänglichkeit) und Performance (Ladezeit).
  2. Haben Sie die Seite in den gängigsten UAs getestet?

UA Mac OS Mac OS Mac OS

  1. Funktionieren alle Links?Eine Fehlerseite, die durch ins Leere führende Links verschuldet wird, führt zwangsweise zu einer negativen Benutzererfahrung. Durch regelmäßiges Testen aller Links können Sie Besucher vor einer solchen Erfahrung bewahren.
  2. Existieren individuelle Fehlerseiten?Sie müssen vermeiden, dass ein Besucher durch einen fehlerhaften Link lediglich eine Standard-Fehlerseite empfängt. Eine individuelle Fehlerseite kann ihm automatisiert Seiten vorschlagen, die der eigentlich gewünschten ähnlich sind (Spell Check) und eine Suchfunktion, aber zumindest die Navigation enthalten. ™

Stefan Nitzsche ist seit rund zehn Jahren für zahlreiche Firmen als Screendesigner, Webentwickler und Dozent tätig. Besonderen Wert legt er auf technische und gestalterische Qualität – Design (Gestaltung), Usability (Benutzbarkeit), Accessibility (Zugänglichkeit) und
Credibility (Glaubwürdigkeit) stehen an erster Stelle.”

Erstveröffentlichung, 25.05.2007

15 Kommentare zu „Die ultimative Usability-Checkliste
  1. Felix Nagel am 19. Dezember 2008 um 16:52

    Guter Artikel, vielen Dank dafür.

    Ein Fehler hat sich aber eingeschlichen:
    “Im Idealfall geschieht diese Validierung in Echtzeit (AJAX), zumindest aber innerhalb der Webseite (PHP) und auf keinen Fall durch den UA (JavaScript).”

    Das sollte wohl eher so in die Richtung geschrieben stehen:
    “Im Idealfall geschieht diese Validierung in Echtzeit (JavaScript), in jedem Fall abgesichert durch serverseitige Validierung per (PHP).”

    Schließlich ist AJAX nur bei komplexen Validierungen (die DB Anbindung erfordern) nötig und beruht schließlich auf JS also vom UA gestartet und theoretisch auch gefaked.

    Grüße Felix

  2. [...] Dr. Web: The Ultimate Usability Checklist (in German) An extensive German usability-checklist writte by Stefan Nitzsche. [...]

  3. [...] Dr. Web: The Ultimate Usability Checklist (in German)An extensive German usability-checklist writte by Stefan Nitzsche. [...]

  4. [...] invitations to tender, when interviewing usability providers or when reviewing proposal documents. Dr. Web: The Ultimate Usability Checklist (in German) An extensive German usability-checklist writte by Stefan [...]

  5. [...] Dr. Web: The Ultimate Usability Checklist (in German) An extensive German usability-checklist writte by Stefan Nitzsche. [...]

  6. [...] invitations to tender, when interviewing usability providers or when reviewing proposal documents. Dr. Web: The Ultimate Usability Checklist (in German) An extensive German usability-checklist writte by Stefan [...]

  7. [...] Dr. Web: The Ultimate Usability Checklist (in German) An extensive German usability-checklist writte by Stefan Nitzsche. [...]

  8. Pyramid Consulting R&D Labs am 8. Oktober 2009 um 19:28

    [...] Dr. Web: The Ultimate Usability Checklist (in German) An extensive German usability-checklist writte by Stefan Nitzsche. [...]

  9. [...] & Checklists The Usability Toolkit Key questions to ask your usability testing supplier (PDF) Dr. Web: The Ultimate Usability Checklist (in [...]

  10. [...] Dr. Web: The Ultimate Usability Checklist (in German) An extensive German usability-checklist writte by Stefan Nitzsche. [...]

  11. [...] man hier bei Dr.Web Author: Jan Categories: Uncategorized Tags: Comments (0) Trackbacks (0) Leave a comment [...]

  12. [...] Dr. Web: The Ultimate Usability Checklist (in German) An extensive German usability-checklist writte by Stefan Nitzsche. [...]

  13. Zinit Solutions am 31. August 2012 um 14:52

    Der Artikel ist eher für Programmierer, als für Website-Betreiber geeignet. Solche Art Analyse soll von den Experten gemacht werden. Der Mensch, der sich kaum in solchen Sachen orientiert, kann kaum seine Fehler festzustellen. Solche grundsätzliche Analyse muss man besser überlassen.

  14. [...] Die ultimative Usability-Checkliste, <span >zum Artikel [...]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!