100 Usability-Tipps (Revision)

Artikel vom 8. Mai 2006 (↻ 26. August 2008). ISSN 1614-3124, #23. Schwerpunkt: Usability (RSS-Feed für alle Themen).

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 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 bzw. erweitert und anschließend umsortiert –, neue Punkte kamen allerdings nicht hinzu, ganz im Gegenteil: 58 Tipps haben überlebt.

Diese Tipps erheben weder Anspruch auf Vollständigkeit noch sind sie unumstößlich.

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«.

Stöbern und Suchen

14. Vergessen Sie die »Drei-Klick-Regel«; konzentrieren Sie sich darauf, dass Benutzer ans Ziel kommen.
15. Überfrachten Sie die Navigation nicht, weniger ist mehr. Breitere Strukturen sind jedoch effektiver als tiefe, obschon sich bei tiefen Hierarchien eine konkave Struktur empfiehlt.
16. Bieten Sie ein Inhaltsverzeichnis (Sitemap) zur Orientierung an, vor allem wenn Ihr Angebot umfangreich ist. Sitemaps sind natürlich ebenso zu testen wie andere Seiten, NN/g-Richtlinien zum Trotz.
17. Zeigen Sie dem Benutzer, wo er sich befindet, zum Beispiel über Hervorhebung in der Navigation oder Breadcrumbs.
18. Platzieren Sie Suchfunktionalität sichtbar.
19. 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.
20. Die Suchergebnisse sollten nur relevante Daten einschließlich Kontext vermitteln.

Gestaltung

21. Achten Sie auf ein angemessenes »Datentintenverhältnis«.
22. 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.)
23. Verwenden Sie generell eher wenige als viele Farben. Eine Website, die zu bunt ist, kann weniger vermitteln und unruhiger wirken.
24. Beachten Sie, dass nur die 216 websicheren Farben auf allen Rechnern sicher dargestellt werden. (Diese 216 Farben sind lange nicht mehr die Norm.)
25. Nur die wichtigsten Elemente sollten über Farbe hervorgehoben werden. Profitieren Sie von Farbregeln für Informationsdesign.
26. Farben können Stimmung erzeugen, sollten aber unbedingt zur Kommunikation der Website passen.
27. Manche Farbkombinationen können, wenn sie nebeneinanderstehen, ein störendes Flimmern erzeugen und Verständnis und Benutzbarkeit erschweren.
28. Elemente, die ähnliche Funktionen haben, sollten auch ähnlich aussehen.
29. Große Elemente sind wichtiger als kleine.
30. Gebrauchen Sie bekannte Symbole, um bekannte Funktionalität zu kennzeichnen, zum Beispiel mit einem Warenkorb-Symbol auf Bestellseiten.
31. Seien Sie bei sich wiederholenden Hintergrundbildern zurückhaltend, um nicht die Lesbarkeit einzuschränken oder von den Inhalten abzulenken.
32. Setzen Sie Bilder ein, die zum Thema passen oder dabei helfen, schwierige Sachverhalte zu vermitteln.
33. Verwenden Sie »Thumbnails«, wenn viele große Bilder veröffentlicht werden sollen. Dies dient sowohl Übersicht als auch Ladezeit.
34. Animationen erregen Aufmerksamkeit, sind aber spärlich und mit Bedacht zu gebrauchen.
35. Links sollten als solche zu erkennen sein; unterstreichen Sie sie.
36. Verwenden Sie zur Abgrenzung von unterschiedlichen Bereichen keine unterschiedlichen Schriften.
37. Behalten Sie auf allen Unterseiten Struktur und Layout bei.
38. Verzichten Sie auf Blocksatz.
39. Vermeiden Sie, dass horizontal gescrollt werden muss.
40. Kennzeichnen Sie neue Inhalte.
41. Verzichten Sie auf »Intro-Seiten«: »Splash screens must die.«
42. Beachten Sie Konventionen, und damit nicht allein Konventionen zur Platzierung von Elementen. »Konventionen sind Ihre Freunde«, sagt Steve Krug.

Gestaltung von Formularen

43. Verzichten Sie auf unnötige Felder in Formularen.
44. Wählen Sie eindeutige Feldbezeichnungen.
45. Kennzeichnen Sie Pflichtfelder.
46. Bieten Sie genug Platz zur Eingabe von Daten.
47. Verwenden Sie Checkboxen und Radio-Buttons richtig.
48. Halten Sie sich auch hier an Konventionen: Buttons sollten wie Buttons aussehen.
49. Geben Sie eindeutige Hinweise, wenn Fehler auftreten.
50. Nach dem Auftreten von Fehlern sollten sich alle korrekt ausgefüllten Felder ihre Informationen »merken«.

Allgemein

51. 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.
52. Planen Sie Ihre Website, von den Inhalten bis zum Design.
53. Konzentrieren Sie sich auf Ihrer Website auf ein oder wenige Themen, um bessere Inhalte bieten und sich entsprechend positionieren zu können.
54. Verzichten Sie auf Elemente, die nichts mit dem Ziel Ihrer Website zu tun haben.
55. Weniger Elemente = kürzere Ladezeit = mehr Effektivität und bessere Nutzererfahrung.
56. Vermeiden Sie Wartezeit, kommunizieren Sie sie sonst.
57. Achten Sie auf Zugänglichkeit.
58. Testen Sie Ihre Website, für Mensch und Maschine.

Über mich

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Mit meinem aktuellen Umzug nach Spanien bin ich offen für eine neue Remote-Führungsposition im Frontend-Bereich. Beachte und empfehle gerne meinen Lebenslauf oder mein LinkedIn-Profil.

Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.