Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

20 CSS-Cursor-Eigenschaften für bessere Usability

(Grafik: Shutterstock.com)

Schon mal darüber nachgedacht, den Cursor deinem Design anzupassen? Wir haben einige Beispiele rausgesucht, wie du mit dem Cursor deine Usability noch besser machen kannst.

Den Cursor als Usability-Werkzeug verstehen

Gesehen haben wir sie alle schon mal, die wunderschönen Cursor-Icons als Blume oder Tier – ein Klassiker bei Windows 95. Für die meisten ist das Geschichte, denn in der Regel verwenden wir heute überall den Standard-Cursor.

Und welches Icon hattest du? (Screenshot: gophertee.deviantart.com)
Mit welchem Icon hast du deinen Cursor gepimpt? (Screenshot: gophertee.deviantart.com)

Seitdem hat sich vieles in der Technologie geändert. Aber ein Element sieht genauso aus wie früher: Der Link. Selbst wenn wir nichts am CSS verändern, haben Links nach wie vor die Eigenschaften color: blue; und decoration: underline;. Dank der User-Experience hat sich dieser Stil so in unseren Köpfen eingeprägt, dass wir auf den ersten Blick erkennen, was zu tun ist oder was uns erwartet. Und ein Browser denkt noch weiter: er verändert beim Hovern den Cursor zu einer Hand, die etwas klicken kann – auch bekannt als Pointer.

CSS-Cursor-Möglichkeiten im Überblick

Die jQuery-Funktion draggable() symbolisiert den Prozess ziemlich gut. Mit der Funktion kann der Benutzer beim Klicken ein Element in alle Richtungen ziehen, aber so lange es nicht irgendwo steht, wird dem Benutzer nie bewusst werden, was er zu tun hat. Also fügt man dem Cursor die Funktion cursor: move; hinzu und löst das Problem, indem sich der Cursor der Geste anpasst. Es ist ja bekannt, dass wir Bilder besser wahrnehmen als Text. Und aus dem Grund sollten wir den Benutzer nicht einfach drauf los lassen und mit den vorhandenen Möglichkeiten zeigen, was zu tun ist.

See the Pen QNqMRp by Geoff Graham (@geoffgraham) on CodePen.

<script>

Der Cursor lässt sich nicht nur bei der jQuery-Funktion ändern, sondern auch mit vielen anderen wie beim Scrollen, Text schreiben, Verbot und vielen mehr. Wenn also die Möglichkeit besteht ein Verhalten besser zu symbolisieren, zum Beispiel durch den Cursor, sollte das ausgenutzt werden. Hier ist eine Liste mit 20 möglichen CSS Cursor-Funktionen.

Ebenfalls interessant:

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst