Custom Cursors, Part One: Business Analysis

Cursors are a type of feedback that applications give us when we're using pointing devices like mice, trackpads, and so on. A cursor indicates where within the app our device is currently pointing and may also tell us what we can do there.

Consider the following barebones case of using a mouse with a browser. When we're not pointing at anything in particular, we get a simple arrow. Hover over text and the cursor changes to that strange shape that we've learned over time means that we can select text. Hover over a text link and our cursor changes to a hand, telling us that we can click. (If you're on a Mac, then, for some reason, it looks like Bugs Bunny's hand, but with five fingers.) Hover over a button and we get the same arrow we get when pointing at an empty region of the interface; hmm, that's disappointing.

Even without deep customization of the cursor, we can do a lot with CSS to make the preceding experience more pleasant. Consider the following case of reinforcing our brand with color, typography, etc. and helping the user understand that that the button is clickable by telling the browser to use the pointer cursor when we're pointing at the button. This small change is achieved with cursor: pointer.

Actually, our only limits are those of CSS and JavaScript. As we'll see in Part Two, it's fairly simple to find the cursor on the screen, associate other DOM elements with it, and/or replace the cursor altogether.

I can only think of one case in which it's likely.

• We're not changing the non-visual functions of the cursor, so assistive technologies such as screen readers shouldn't be affected.
• We're not changing anything related to motor skills or hearing.
• Like anything else we do, we need our customizations to be big enough and to have sufficient contrast with their environment for people with reduced or differing vision to use them as well as, or better than, the standard cursors. Also avoid any flashing that could cause problems for persons with epilepsy.
• The potential problem I see is that persons with reduced cognitive abilities may struggle with the unfamiliarity of an altered cursor. I suggest figuring this into the ROI calculation we'll talk about next.

In UX (user experience) design, the most basic question to which we must constantly return is "What is our goal? What do we want to facilitate for the user?". Let's look at how a customized cursor can help us achieve certain goals.

If the goal is to facilitate efficient consumption of dense content, then a cursor will be used very little and a departure from the standard cursors would just be a distraction with little to no benefit.

Consider reading, say, the Wikipedia article on Ukraine-NATO Relations; sure, there are lots of interactive elements and more than one type of interaction, but they're all pretty clear and most people are just there to read and maybe use a link to get to another reading experience. A cursor that departs from norms doesn't do anything to help the user efficiently consume the article or get to the next one.

If the goal is to facilitate efficient interaction with a UI packed with information and clickable options, then the cognitive load required for this behavior is already fairly high. For most dense UIs, a custom cursor will likely raise the cognitive load required of the user and make her interaction less, not more, efficient.

Consider what a burden it would be to have to learn what your cursor is doing and what its different forms mean while searching for items in Amazon's already-dense UI or entering information into and retrieving it from the dense UIs common to business software.

Consider cases in which the primary goal is to conduct some sort of business, such as promoting or selling a product, but a strong secondary goal is to take the user out of the ordinary, create an elevated impression, capture mindshare, and invoke the feeling that a higher price point is justified.

For instance, you don't visit Rolls Royce to have the same experience you have at Toyota; you don't want a Target experience when you visit Prada.

If you're developing interactions that are unfamiliar to the user, then you'll want to give them plenty of indications of what the interactive elements are and what will happen when the user uses them. The very best bet option here is to make the interactive elements themselves understandable on any screen size, without requiring the user to also reference the cursor to gain understanding of the interaction. That said, it's possible that a custom cursor might be an effective reinforcement of this information. However, understand that the cost to develop a novel interaction will be high, some users may not get it no matter what you do, and others may feel frustrated at having to learn a new way to do something. If you're just looking for a fancy way to navigate through a range of products or present your vacation slideshow, then you're much better off with a mildly innovative spin on a familiar, battle-tested pattern.

In the following example, I initially expected to scroll to get more content, because that's what's most common in my experience of these types of apps. Then I saw the instruction to "Click & Drag Down to Explore", so I clicked and dragged in the empty part of the screen. I then clicked and dragged beside the "Zendetta" header since that's the visual anchor that caught my eye. The glowing red circle near the bottom is eye-catching, but I thought it was just an illustration of the action I was supposed to take. From the time the app loaded, it took me about 5 seconds to realize that I was supposed to click on the red circle and drag it.

Whatever one thinks of this novel interaction and its text instructions, one way the developers' cloud have clarified their intent would be to attach to my cursor an arrow that constantly pointed at the red circle no matter how I moved my mouse. That would have prompted me to move my cursor to the circle and drag it.

If you think a custom cursor is right for one of your use cases, then check out an implementation in Part Two.