Custom mouse pointers can reduce usability

The scourge of the circle pointers

I’m not a fan of the recent trend of custom mouse pointers on websites. They’re usually a large circle or other shape, and make trying to click things frustrating. It’s like fat-fingering a tiny button on your phone, yet you’re used to the precision a desktop pointing device provides, and the circle pointer takes that away from you.

circle-shaped pointer hovering over some links

Take the image above. I’m hovering over a list of links, and since the circle is so large, the designer made it transparent so you can see the links below. It’s not that clear what I’m hovering over. Yes, you can see that the hovered link changed color, but when zoomed out on a desktop screen, it’s not obvious. Now imagine a bright, light-filled environment, throw in some glare, and now you’re just clicking blindly – and that’s not including vision and motor impairments.

Some designers do this right with larger (read: gigantic) click targets, better contrast on the circle, and large, splashy hover effects, but since it’s trendy, the effect is often added with little thought towards usability.

It’s not just the web – games and apps do this too

Changing the system pointer doesn’t just happen in web design. Many games and apps that use their own graphics engine have to reinvent the wheel, and make their own pointer. Some try to match the OS pointer, others design it to match the game’s theme. Often, they end up with an ugly pointer that doesn’t respect screen scaling, and might also be low-resolution. For example, Eve Online’s pointer is almost invisible when running at 4k with 200% scaling, it’s about the size of a typed character and doesn’t scale. Some users resort to installing a third-party pointer app that gives you a gigantic pointer in games that don’t handle scaling well.

How can we improve custom pointers?

I will admit, custom pointers can be cool, and add a playful effect to your design. However, due to the usability issues, I would make sure to provide a way for users to turn it off.

Some ways you can do that on the web:

I also have some suggestions for making custom pointers better:

Suggestions?

If you have any suggestions, thoughts, or just want to share your frustrations with custom pointers, please let me know using the button below.


  1. prefers-reduced-motion on MDN ↩︎