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.

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:

• Provide a toggle switch, similar to how some websites have audio, motion, and light/dark toggles
• If a user has prefer-reduced-motion¹ enabled, turn off custom pointers – I think it’s likely that if they don’t want to see animations, they don’t want your fancy pointers either

I also have some suggestions for making custom pointers better:

• Make sure the contrast is higher than everything else
• Don’t use a color used elsewhere in the design – the pointer could become invisible
• Outlines and shadows help the pointer stand out
• Use click targets that are larger than your pointer – if you’re going to make my pointer giant and inaccurate, at least make the links and buttons easier to click.
  • The pointer should not be able to cover multiple links or buttons
• Animate the click targets to make it obvious when the pointer is over them – outlines, underlines, contrasting colors, splash effects, etc.
• Don’t add latency – custom smoothing and acceleration can cause users to overcompensate and miss the target
  • This is just as infuriating as custom smooth scrolling implementations
  • Sometimes, a custom pointer adds latency by itself
• Don’t change the pointer into a button – I’ve seen some contact buttons that snap to the pointer and hide the pointer itself, making me question where I’m clicking. The snapping button effect is fine, but don’t hide my pointer

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.