Jens Oliver Meiert

100 Usability-Tips (Revision)

Artikel vom 8. Mai 2006 (↻ 26. August 2008). ISSN 1614-3124, #23.

Dieser Artikel ist eine Komplettüberarbeitung von Christian Strangs Artikel »100 Usability Tipps«, denn:

Die Orthographie unterminiert schon per se den gesamten Artikel […]. Viel schwerwiegender aber ist, dass viele Punkte undifferenziert sind, einige gar schlicht falsch, und ein paar […] redundant.

– Jens Oliver Meiert: Re: 100 Usability Tipps (2006).

Die Absicht hinter dem Originalartikel ist jedoch sehr gut, und er beinhaltet auch viele richtige und wichtige Punkte, die konkret nicht nur Usability, sondern auch Design und Barrierefreiheit betreffen. Die Revision ergab einen Rundumschlag – alle Punkte wurden geprüft, umgeschrieben, ergänzt, mit weiterführenden Links untermauert beziehungsweise erweitert und anschließend umsortiert –, neue Punkte kamen allerdings nicht hinzu, ganz im Gegenteil: 58 Tips haben überlebt.

Bitte beachten Sie, dass diese Tips weder Anspruch auf Vollständigkeit erheben noch unumstößlich sind.

Inhalt

  1. Inhalte
  2. Stöbern und Suchen
  3. Gestaltung
  4. Gestaltung von Formularen
  5. Allgemein

Inhalte

  1. Achten Sie auf Orthographie.
  2. Schreiben Sie kurze Sätze ohne Ausschweife.
  3. Schreiben Sie gemäß umgekehrter Pyramide: Das Wichtigste, das Ergebnis zuerst.
  4. Setzen Sie kein Wissen voraus und erläutern Sie Fachbegriffe.
  5. Gebrauchen Sie Zwischenüberschriften.
  6. Aufzählungen sind leichter zu überfliegen und können die Übersicht verbessern.
  7. Verwenden Sie bildschirmoptimierte Schriften. Serifenlose Schriften gelten am Monitor als besser lesbar, allgemeingültig ist dies jedoch nicht.
  8. Die Textgröße sollte groß genug zum bequemen Lesen, aber klein genug zum besseren Überfliegen sein.
  9. Auch wenn dies Aufgabe des User-Agents ist: Schriften sollten skalierbar sein, und somit beispielsweise im Internet Explorer 6 problematische »px«-Angaben nicht gebraucht werden.
  10. Verwenden Sie nicht nur aussagekräftige Überschriften, sondern schreiben Sie generell guten Mikrocontent.
  11. Trennen Sie Werbung von Inhalten. Verwirren und täuschen Sie Benutzer und Besucher nicht, und wahren Sie Ihre Glaubwürdigkeit.
  12. Technisch: Die Dokumentstruktur sollte im HTML abgebildet werden (h1 bis h6 für Überschriften, p für Absätze, …).
  13. Technisch, bei Mehrsprachigkeit: Content Negotiation kann Benutzern die Wahl der gewünschten Sprache »abnehmen«.
  1. Vergessen Sie die »Drei-Klick-Regel«; konzentrieren Sie sich darauf, dass Benutzer ans Ziel kommen.
  2. Überfrachten Sie die Navigation nicht, weniger ist mehr. Breitere Strukturen sind jedoch effektiver als tiefe, obschon sich bei sehr tiefen Hierarchien eine konkave Struktur empfiehlt.
  3. Bieten Sie ein Inhaltsverzeichnis (Sitemap) zur Orientierung an, vor allem wenn Ihr Angebot sehr umfangreich ist. Sitemaps sind natürlich ebenso zu testen wie andere Seiten, (kostenpflichtigen) NN/g-Richtlinien zum Trotz.
  4. Zeigen Sie dem Benutzer, wo er sich befindet, zum Beispiel über Hervorhebung in der Navigation oder »Breadcrumbs«.
  5. Plazieren Sie Suchfunktionalität sichtbar.
  6. Nehmen Sie dem Benutzer Arbeit ab: Der Benutzer sollte nicht die Wahl haben müssen, Suchbereich und -optionen zu definieren, sondern die Suchfunktion ihm das passende Ergebnis ausgeben. Weitere Optionen können zudem separat (zum Beispiel auf der Ergebnisseite) angeboten werden.
  7. Die Suchergebnisse sollten nur relevante Daten einschließlich Kontext vermitteln.

Gestaltung

  1. Achten Sie auf ein angemessenes »Datentintenverhältnis«.
  2. Kontrast erleichtert das Lesen, und schwarz auf weiß bietet den besten Kontrast. (Dieser Kontrast kann jedoch unter anderem für Menschen mit Meares-Irlen-Syndrom problematisch sein, für die schwarz/weiß das Lesen erschwert.)
  3. Verwenden Sie generell eher wenige als viele Farben. Eine Website, die zu bunt ist, kann weniger vermitteln und unruhiger wirken.
  4. Beachten Sie, dass nur die 216 websicheren Farben auf allen Rechnern sicher dargestellt werden. (Diese 216 Farben sind lange nicht mehr die Norm.)
  5. Nur die wichtigsten Elemente sollten über Farbe hervorgehoben werden. Profitieren Sie von Farbregeln für Informationsdesign.
  6. Farben können Stimmung erzeugen, sollten aber unbedingt zur Kommunikation der Website passen.
  7. Manche Farbkombinationen können, wenn sie nebeneinanderstehen, ein störendes Flimmern erzeugen und Verständnis und Benutzbarkeit erschweren.
  8. Elemente, die ähnliche Funktionen haben, sollten auch ähnlich aussehen.
  9. Große Elemente sind wichtiger als kleine.
  10. Gebrauchen Sie bekannte Symbole, um bekannte Funktionalität zu kennzeichnen, zum Beispiel mit einem Warenkorb-Symbol auf Bestellseiten.
  11. Seien Sie bei sich wiederholenden Hintergrundbildern zurückhaltend, um nicht die Lesbarkeit einzuschränken oder von den Inhalten abzulenken.
  12. Setzen Sie Bilder ein, die zum Thema passen oder dabei helfen, schwierige Sachverhalte zu vermitteln.
  13. Verwenden Sie »Thumbnails«, wenn viele große Bilder veröffentlicht werden sollen. Dies dient sowohl Übersicht als auch Ladezeit.
  14. Animationen erregen Aufmerksamkeit, sind aber spärlich und mit Bedacht zu gebrauchen.
  15. Links sollten als solche zu erkennen sein; unterstreichen Sie sie.
  16. Verwenden Sie zur Abgrenzung von unterschiedlichen Bereichen keine unterschiedlichen Schriften.
  17. Behalten Sie auf allen Unterseiten Struktur und Layout bei.
  18. Verzichten Sie auf Blocksatz.
  19. Vermeiden Sie, dass horizontal gescrollt werden muss.
  20. Kennzeichnen Sie neue Inhalte.
  21. Verzichten Sie auf »Intro-Seiten«: »Splash screens must die.«
  22. Beachten Sie Konventionen, und damit nicht allein Konventionen zur Plazierung von Elementen. »Konventionen sind Ihre Freunde«, sagt Steve Krug.

Gestaltung von Formularen

  1. Verzichten Sie auf unnötige Felder in Formularen.
  2. Wählen Sie eindeutige Feldbezeichnungen.
  3. Kennzeichnen Sie Pflichtfelder.
  4. Bieten Sie genug Platz zur Eingabe von Daten.
  5. Verwenden Sie Checkboxen und Radio-Buttons richtig.
  6. Halten Sie sich auch hier an Konventionen: Buttons sollten wie Buttons aussehen.
  7. Geben Sie eindeutige Hinweise, wenn Fehler auftreten.
  8. Nach dem Auftreten von Fehlern sollten sich alle korrekt ausgefüllten Felder ihre Informationen »merken«.

Allgemein

  1. Stellen Sie die Zielgruppe den Benutzer in den Vordergrund (»konzentriere dich auf den Benutzer, der Rest kommt von allein«, sagt Google), und sorgen Sie für eine positive Erfahrung. Oder gar ein Erlebnis.
  2. Planen Sie Ihre Website, von den Inhalten bis zum Design.
  3. Konzentrieren Sie sich auf Ihrer Website auf ein oder wenige Themen, um bessere Inhalte bieten und sich entsprechend positionieren zu können.
  4. Verzichten Sie auf Elemente, die nichts mit dem Ziel Ihrer Website zu tun haben.
  5. Weniger Elemente = kürzere Ladezeit = mehr Effektivität und bessere Nutzererfahrung.
  6. Vermeiden Sie Wartezeit, kommunizieren Sie sie sonst.
  7. Achten Sie auf Zugänglichkeit.
  8. Testen Sie Ihre Website, für Mensch und Maschine.

Über den Autor

Jens Oliver Meiert, Foto vom 23. Dezember 2015.

Jens Oliver Meiert ist ein deutscher Philosoph und Entwickler (Google, W3C, O’Reilly). Er experimentiert mit Kunst und Abenteuer. Hier auf meiert.com teilt und verallgemeinert und übertreibt er einige seiner Gedanken und Erfahrungen.

Mehr Jens gibt es im Archiv und bei Amazon. Wenn Sie eine Frage oder ein Anliegen (oder eine Empfehlung) zu dem haben, was er schreibt, senden Sie gerne jederzeit eine Nachricht.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Oder vielleicht auf Google+, Twitter oder XING hallo sagen?

Fehler entdeckt? Belohnung! E-Mail an jens@meiert.com.

Sie sind hier: StartseitePublikationen → 100 Usability-Tips (Revision)

Stand: 26. August 2008.

»Keine Epidemie oder Krankheit oder Naturkatastrophe […] wird eine Person umbringen, die nicht sterben will