Was du als UX-UI-Designer wissen solltest
Die meisten kennen ihn noch nicht einmal. Und vor nicht allzu langer Zeit haben viele Web-Designer (mich eingeschlossen) laut aufgeheult, wenn sie entdeckten, dass auf ihrer Seite plötzlich so ein „hässlicher“ blauer Rand oder eine gestrichelte Linie um Schaltflächen und Links herum erschien. Warum? Wieso? Weg damit! – war oft die erste Reaktion; Also gleich mal den Entwickler anrufen und seinem Ärger Luft machen …
Aber soooo einfach ist es nicht. Es gibt diesen Zustand aus einem guten Grund.
Was ist der sichtbare Fokus-Zustand?
Der sichtbare Fokus zeigt nämlich an, wo du dich auf der Webseite, die du gerade besuchst, befindest. „Ja da, wo der Mauszeiger ist natürlich“ wirst du jetzt denken. Stimmt, aber es gibt viele Fälle, in denen die Maus und ihr Zeiger gar keine Rolle spielen. Einer dieser Fälle ist die Tastaturbedienung. Was manche nicht wissen: Mit den Tasten der Tastatur können alle interaktiven Elemente einer Website erreicht werden. Du kannst also quasi damit von Link zu Link „hüpfen“. Probier es mal aus: Du musst dafür die Tab-Taste nutzen. Rückwärts gehst du mit der Kombination aus Shift- und Tab-Taste.
Wie kann ich den Fokus-Zustand meiner Website sehen?
Wenn du eine gute Seite vor dir hast, siehst du jedesmal, wenn du die Tab-Taste bedienst, wie das Element, das du gerade angesteuert hast, optisch hervorgehoben wird. Ähnlich wie beim Maus-Over-Effekt, wenn du den Mauszeiger über einen Link oder einen Button platzierst.
Du siehst keine Hervorhebung bei Buttons und Links, wenn du über eine Seite „tabst“? Dann hast du gerade eine richtige Barriere entdeckt. Sie hindert viele Menschen daran, Websites zu bedienen.
Warum ist ein visueller Fokus wichtig?
Viele Menschen navigieren eine Website gar nicht mit der Maus. Das kann unterschiedliche Gründe haben. Vielleicht sind sie mit der Tastatur einfach schneller, oder sie können ihre Hände nicht so gut kontrollieren, oder sie nutzen ein ganz anderes Eingabegerät, das wiederum auf die Tastaturbefehle zugreift. Und natürlich nutzen immer mehr Menschen auch einfach ein Touch-Device – also einen Bildschirm, der auf Berührung reagiert. Sie alle können mit dem Mauszeiger und auch mit einem Mouse-Over-Effekt nichts anfangen.
Was ist ein ausreichend sichtbarer Fokus?
Ein ausreichend sichtbarer Fokus ist zunächst einmal eins: sichtbar. Und Sichtbare Dinge fallen auf jeden Fall in deinen Aufgabenbereich als Designer*in. Also nimm dir ein wenig Zeit und gestalte einen Fokus-Zustand, genauso wie du einen Maus-Over-Zustand oder eine schicke Micro-Interaction gestaltest.
Dabei kannst du dem sichtbaren Fokus viele schöne und ansprechende Designs geben. Ja es gibt Regeln, aber die gibt es ja immer. Und diesmal hältst du dich einfach daran, statt sie zu brechen 🙂
Hier sind die Regeln, die du beachten solltest.
- Verlasse dich beim Fokus-Design nie nur auf Farbe allein!
Nimm immer auch ein anderes Merkmal hinzu. Dabei gilt die Umkehrung der Farben, also Hintergrund- wird Vordergrundfarbe und umgekehrt als zusätzliches Merkmal. Auch Helligkeitsunterschiede gelten als zusätzliches Merkmal. Dann sollte aber auch der folgende Punkt zutreffen: - Das Kontrastverhältnis von Vorder- und Hintergrund sollte immer mindestens 3:1 betragen.
Noch klarer wird dein Fokus-Zustand, wenn du auch folgende Regeln beachtest. Sie sind noch nicht im offiziellen Regelwerk für die Barrierefreiheit im Web (WCAG 2.1.) enthalten, werden aber bald im nächsten Update WCAG 2.2 gelten:
- Die Fläche deines Fokus-Zustands sollte mindestens so groß sein, wie der Umfang der minimalen Box, die um dein auszuzeichnendes Element gelegt werden kann. Die Box muss dabei nicht sichtbar sein – es gilt die gedachte Box. Also zum Beispiel ist der Umfang deiner minimalen Box 110px+10px+110px +10px = 240px. Dann müsste die minimale Fläche deines Fokus-Zustands mindestens 240px betragen, also beispielsweise 2px x 120px, was einer etwas dickeren Linie am unteren Rand eines Links entsprechen könnte.
- Der Fokus-Zustand muss nicht unbedingt ein Rahmen um dein Element sein. Falls es kein Rahmen ist, sollte die Fläche aber mindestens so groß sein, wie eine 4px breite Linie an der schmalsten Stelle deines Elementes. Im obigen Beispiel wäre das eine Mindestfläche von 10px x 4 = 40px.
- Der Kontrast der Farben zwischen dem unfokussierten und dem fokussierten Zustand sollte 3:1 betragen.
Ok das klingt kompliziert. Aber es ist wie mit dem jeder anderen Formel: hast du es einmal kapiert, ist es ganz einfach. Und ja – du kannst auch ruhig deinen Augen trauen. Wenn du der Meinung bist, einen wirklich gut sichtbaren Fokus-Zustand gebaut zu heben, bestätigt sich das meist auch durch die Regeln. Hier einige anschauliche Beispiele:
Beispiele
Starte, indem du auf dem Desktop-PC deinen Tastatur-Fokus (Maus oder Tastatur) auf den kleinen Button links oben in der Box legst. Danach kannst du mit der Tab-Taste alle Buttons und Links ansteuern und den Focus-Effekt sehen. Mit Shift-Tab gehst du rückwärts.
Du möchtest mehr lernen? Kein Problem. In meinem Online Workshop zeige ich dir, wie du den Focus-State am Besten in dein Design integrierst und so anlegst, das Web-Developer*innen ihn gleich finden und einbauen können.
Zum Worskhop anmelden
Du möchtest erst mal weiter Tipps bekommen? Auch kein Problem, trage dich unverbindlich zu meinem Newsletter ein:
Schreibe einen Kommentar