hover ist tot, lang lebe acitve

hover active pseudoklasse css

Ursprünglich als Visualisierung einer Link-“Berühung” gedacht, werden mittlerweile auch andere Elemente mit der Pseudoklasse :hover modifiziert und erweitert. Laut der W3C-Spezifikation ist es zugelassen, die Eigenschaft für alle HTML-Elemente zu verwenden, also z.B. auch für input, table oder div-Container. Ob diese Anwendungen immer sinnvoll und aus Usability-Sicht von Vorteil sind, ist eine andere Frage. Richtig eingesetzt kann der Einsatz der Pseudoklasse aber große Usability-Verbesserungen mit sich bringen, z.B. in großen unübersichtlichen Tabellen, bei denen man zur besseren Übersicht Zeilen und Spalten markiert.

Dennoch ist mit der Entwicklung des mobilen Webs und der Steuerung über Touchscreens ein Umdenken erforderlich. Ganz so dramatisch wie im provokativen Titel behauptet, ist es natürlich nicht. Die Pseudoklasse :hover ist mit seinen vielen Möglichkeiten für Designer im heutigen Webdesign kaum wegzudenken und wird bei klassischen Websites auch weiterhin ihre Daseinsberechtigung haben. Bei der Arbeit mit modernen Touchscreen-Interfaces wird man allerdings auf die Hilfe der Klasse verzichten müssen, denn dieser Status ist beim neuen Bedienkonzept nicht mehr abbildbar. Eine Herausforderung für jeden Designer, denn für eine gute Usability galt bisher immer, dass ein Link mit einem Hover-Status versehen werden muss. Der Status dient als zusätzliches Merkmal, einen Link oder Button kenntlich zu machen. Viele Nutzer „erkunden“ Websites mit dem Mauszeiger und werden so durch Hover-Effekte auf Links aufmerksam. Für das Design neuerer Interfaces gilt: Klickbare Flächen und Elemente müssen auf ersten Blick und ohne “Ausprobieren” und langes Erkunden als solche erkennbar sein, Buttons müssen ganz klar gekennzeichnet werden, denn: Der permanente “Cursor” wird durch den temporären Finger ersetzt wird.

Richtig problematisch wird es bei Anwendungen, bei denen Funktionen über :hover aktiviert und deaktiviert werden und die dann über Touchscreens schnell nicht mehr navigierbar sind.

Aber was hat :hover mit :active zu tun?

Im Prinzip erstmal nichts, außer, dass es sich bei :active ebenfalls um eine Pseudoklassen handelt, die den nachfolgenden Status von :hover beschreibt. :active wird in dem Moment aktiv, in dem ein Nutzer einen Klick ausführt. Oft wird hinter der Klasse die Funktion vermutet, ausgewählte Links zu markieren, aber es handelt sich wirklich nur um den kurzen Moment des Ausführens.
Bisher lag die Klasse eher im Schatten von :hover und wird immer noch oft vernachlässigt. Jetzt könnte sie aber helfen, die Lücke, die das Wegfallen von :hover hinterlässt, zu schließen. Da der Nutzer nicht mehr sieht ob er gerade einen Link oder klickbarers Element berührt, wird es umso wichtiger dem Nutzer ein Signal zurückzugeben, sobald eine Funktion “ausgeführt” wird.

Was meint ihr? Ist die Herausforderung für den Designer, eine gute Usability zu erreichen, durch den Wegfall größer geworden? Oder gibt es noch andere Alternativen?

UPDATE: Apple arbeitet einem kürzlich veröffentlichten Patent zufolge an der Umsetzung von hover-Gesten für Multi-touch-Geräte.

Posted by

My name is Niclas and I'm an UX Designer from Hamburg, Germany, currently working at Geometry Global. You can follow me on Twitter and Facebook.

  • Pingback: t3n.de/socialnews()

  • Ich glaube bei iPhone und iPad gibt es automatisch eine “:active”-Funktion…

  • Niclas

    @Stadtpirat: Genau, im Safari passiert das auf iPhone und iPad bereits automatisch. Aber darauf sollte man sich generell wohl nicht verlassen :)

  • Ich sehe für unsere Konzepte und HTML-Entwicklung hier keinen Änderungsbedarf, da wir ohnehin immer definieren “a:hover, a:active” — also Hover und Active gleichsetzten. Das halte ich für die praktikabelste Lösung, da es meist schon genug Arbeit ist, einen schönen Hover-Zustand mit Design und Kunden abzustimmen.

    Seit einigen Monaten ergänzen wir unsere Konzepte/Prototypen aber auch durch den a:focus-Status. Der wird nämlich beim Navigieren mit der Tastatur verwendet. Ohne diesen Status, würde der “Suchen”-Button hinter dem Such-Inputfeld nur bei MouseOver seinen hover-Zustand bekommen. Mit :focus dann auch, wenn man mit der Tastatur weitertappt.

    Im CSS heißt es dann “a:hover, a:active, a:focus”.

    PS: Das WordPress-Comment-Notification-Plugin wäre sehr praktisch! :-)

  • Niclas

    Hi Tobias,
    danke für deinen Input. Es ist natürlich sehr praktisch, wenn man sich sowieso schon mit dem Thema auseinander gesetzt hat.
    Der Hinweis auf die :focus-Klasse ist auch sehr gut, denn mit den CSS-Pseudo-Klassen lassen sich sehr wichtige und sinnvolle Funktionen ziemlich einfach umsetzen.

    PS: Gute Idee, Plugin ist installiert :)

  • Pingback: Usability von Drop-Down Menüs – FRONTAND()

  • Pingback: brazenfacedly avocative aroideous()