Tipps zum Designen von nützlichen und benutzbaren Fokus-Anzeigen

Wenn man beschließt, die Standard-Darstellung des Fokus des jeweiligen Browsers zu ändern bzw. abzuschalten, muss man ein gutes Konzept entwerfen, um ein eigenes Fokus-Design anzulegen. Der Vorteil davon ist, dass der Fokus dann in allen Browsern gleich aussieht. Außerdem sind die Standard-Fokus-Darstellungen der Browser nicht mal besonders gut bzw. nicht konsistent, deshalb ist es eine gute Idee, diese Anzeigen selbst zu gestalten.

Es gibt viele Benutzer, die sich auf diese Anzeigen verlassen, um zu wissen, wo einer Webseite sie sich befinden. Das sind vor allem Screenreader-Nutzer, Menschen mit eingeschränkter Bewegung und Power User (z. B. Web Developer).

Die meisten interaktiven Elemente sind fokussierbar, z. B. Formular-Felder und Kontrollkästen, Menü-Einträge, Links, Buttons, Tooltips (ausgelöst durch hover), Widgets (z. B. ein Kalender).

Zusammenfassung: Effektve Fokus-Anzeigen gestalten

• Guter Kontrast
• Passende Form und Größe zum zugehörigen Element
• Das Farbschema ist passend, aber sticht dennoch hervor
• Muss nicht für alle Elemente gleich sein
• Animation helfen dem User, die Fokus-Bewegung zu verfolgen
• Sollte für ältere Browser auch funktionieren
• Sollte in allen Browsern gleich aussehen

Tipps fürs Designen

• Mache eine Liste aller fokussierbaren Elemente. Wie viele Variationen gibt es von jedem? Gibt es primary und secondary buttons, die verschiedene Farben nutzen und wird die Fokus-Anzeige bei beiden funktionieren?
• Denke an dein Farbschema. Benutzt du eine callout / highlight Farbre? Würde diese Farbe auch für den Fokus funktionieren? Falls nicht, gibt es eine andere Farbe, die funktionieren könnte?
• In vielen Fällen könnte ein guter Fokus-Status auch der Hover-Status sein. Wenn der Hover-Status, den es schon gibt, sehr offensichtlich ist, könnte man ihn auch als Fokus-Status benutzen.
• Es ist generall eine gute Idee, den nativen Browser Fokus-Style mit einem eigenen Style zu ersetzen, damit der Style in allen Browsern gleich ist

Wie bei vielen anderen Elemente auch, ist es besser, die Fokus-Styles schon von Anfang an zu berücksichtigen und zu designen, es macht die Sache einfacher und das Design ist dann insgesamt zusammenhängender. Wenn man sowieso schon andere Stati wie z. B. hover definiert, kann man auch gleich den Fokus mit berücksichtigen. Auch beim Implentieren kann dies dann zusammen erledigt werden.

Quelle: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators (deque, Link öffnet in einem neuen Fenster)