Chris’ Corner: Cursors

CSS has a bunch of cursors already. Chances are, you’re not using them as much as you should be. Well, should is a strong word. I can’t cite any evidence offhand that special cursors is some absolute boon to user experience or accessibility. But it certainly seems like a nice touch. Like:

.copy-button {
  cursor: copy;
}

Or

[disabled] {
  cursor: not-allowed;
}

These cursors are actually supplied by your OS, and thus can be altered by the OS. That’s a good thing, as some OSs let you bump up the size of the cursor (with a url() value), for example, which is good for accessibility. You can set custom cursors as well, which won’t get bumped up, which is bad for accessibility.

Looking around at our 2.0 Beta editor, I can see lots of CSS-provided cursor changes.

I’m pretty pleased with those!

An interesting aspect of “custom” cursors is that they are only obviously a problem if you replace the actual cursor itself. That doesn’t rule out doing things in addition or next to the cursor. Our own Rachel Smith’s site has rainbow paint splotches shoot out from behind the cursor, just for fun, but the cursor itself isn’t changed.

Kyle Lambert has a good article about doing useful things with the cursor with a particular focus on things Figma does. Here’s some of excerpts of good ideas:

When using the pen tool, the cursor displays preview points and potential path directions

During selection, the cursor indicates whether you can resize, rotate, or move elements

Each user’s cursor appears as a distinct color with their name attached, creating a sense of presence in the shared workspace. [… and they] act as a chat interface when a user types “/”

One of Figma’s latest features is a dynamic color picker interface. This provides a magnified view of the pixel selection, giving users a more precise color selection experience. 

Just interesting stuff! Not sure we’re seeing quite as much cursor innovation elsewhere.