Subtlety, Buttons and Custom Cursors

Let's talk about buttons.

Integral to any ecommerce site, buttons enable your shoppers to interact with your site by allowing them to navigate, choose options, add to cart, etc. Without them, your site would just be a product catalog.

I want to talk about them because I came across an interesting article on custom cursors that could be beneficial to some sites, and useful as a conversation starter.

Button, Button, Who's Got the Button?

You know, we've written about buttons in our design guide:

Buttons are tools that enable users to perform a task. Some tasks are more important than others, and creating effective buttons with the right combination of size, color, position and wording is required.

Good design can subconsciously communicate priority to users. Using the right combination of these components buttons will guide the user through the tasks required to achieve the main purpose or use case of a website.

So let's look at our best practice designs for two important buttons: the Add to Cart and Add to Wishlist buttons on the product detail page:

Looking at them, I think there are three important lessons to be learned:

  1. Choose a color deliberately. For primary buttons, such as the Add to Cart we, to quote the design guide, "use saturated colors to provide stronger visual weight that catches the user's attention". In this vein, you avoid using this color for elements without similar gravitas to avoid confusing the user. Noticeably, we don't color the Add to Wishlist this way; this prevents it clashing with the Add to Cart, which is the primary call-to-action on this page.
  2. Make them big. It's a law of physics that the more massive you make something, the greater the pull into it is. Big buttons are hard to miss and draw people in.

  3. Use the imperative mood. Or, in other words, short, simple commands starting with verbs. When an element on the page appears as prominently as a button does and it tells them what it does (or what to do) then people are inclined to click it.

Buttons are important, and, as you can see, we put a lot of thought into them. But are we at the peak at what we can achieve?

Quiet as a Mouse

Now let's talk about mouse cursors.

If there's one design standard that seems to be consistent throughout web development, it's default cursors. Every browser has a default user agent stylesheet that recognizes 32 different states. These states are things like the pointer, which typically shows when you can click something, to the lesser-known nesw-resize, which used to when resizing something from either the top-right or bottom-left corners. And, really, we rarely mess with these defaults.

One time we do is buttons, in fact. By default buttons do not trigger the pointer state when hovered over, like links do. This seems natural as, after all, users associate the pointer with things you can click: if you there's no pointer then, at best, a user will pause before clicking anyway and, at worst, the user won't click it because they don't think they can.

So the intuition here is you keep the cursors as subtle as possible as to not disturb or jar the user. I get that, but as we discussed earlier: buttons are already promiment — and deliberately so — so is there a risk that a user will see a large, brightly coloured, directive (i.e., the Add to Cart button) and not click it? I imagine only the most cautious among us would see it that way.

Custom Cursors

So, let's circle around to the article I linked to at the top of the article: what about custom cursors?

I discussed in a previous article on hover states how you can draw users in to the buttons by encouraging them a little when they get close to performing the action you want. Specifically, I argued that making the Add to Cart a little bigger when a user gets close to it may encourage users to click it. When it comes to custom cursors, the same argument can be made — and it has the added benefit (or seperate benefit) of adding a little bit of flavor to a seemingly mundane action.

For the purpose of this discussion I'm actually going to look at the Add to Wishlist button. We know that it is de-emphasized in comparison to the Add to Cart: it's color is far more subdued and it's positioned to the right to the primary button. Wishlists can be purposed for a number of uses, but one I like is seen commonly on fashion retail sites: 'my favorites'.

On social media sites like Twitter, a heart icon is used by a user to indicate that they like something. So let's do that here.

One of the great things about the cursor property is that in addition to allowing you to override the default with one of the other cursors available, you can specify an image to be used instead. The image can be of the usual file extensions (PNG, GIF, JPG, etc.) but also SVG (just no animated GIFs). You specify the location of image in the following way:

cursor: url('[your image]'), auto;

Another cool thing you can do is convert the image to base64 to eliminate a HTTP request. So, what I did was find an image of a heart, converted it to base64, and then added the following code to the button's selector for the hover state:

cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQVEBgE0YdPfwAAAWRJREFUSMe1lj1Ow0AQhb/dEFf81DQRFBFFIiFEyRmgpEFQ0HIFukhwgfRcBG6QIgfIIWiRkzyKjNFmWSdObI802l17Zt7M7tuxHQkROMDbcgGrBwm7Qjo2Lt3a45X40EFmbIYDoO+CIEoEt/d9YFAACDoqyd4LzgRTgSIdBYmEYKOE7dTieKIKvODOjPKEYy6YRUnNNtjK4vmwtF7CONYfwZf5fNp6m0+vOAIEk5KsUvpe0S4XTP5IowQjmhIHzguGtCiCoQ843pZ4JzgBvlsEOQzPRCUXu8ZOMXeQeWshYyBvuII5KyZ2nMA5o13DVTgHTta7JOgC980yl0uL+w9+XPGibdOHtd6VAPqoCfC8cROD+dueALeVTiuYP1UMvLTxSrtebGvTN1GgWBc2ngqyfXnYFVyUABUAx4JMNQmfCc5LtuioNkAEdB0BnTcGEJ3RiwE8Cg7a/D68thk8/CfbqdH9ApMWkjfHYjo+AAAAAElFTkSuQmCC'), auto;

Note, at the end we put , auto — this just specifies a cursor to be used in case the specified one doesn't work. I've put together the following CodePen to illustrate how it looks; hover over the Add to Wishlist button:

See the Pen vGzGYL by Steve Goldberg (@sgoldberg) on CodePen.

I think it's pretty neat. It only applies when the user hovers over the button, the icon matches the behavior of the button (i.e., liking it) and it adds a little flavor to the element — one that I think is rather subtle.

Conclusion

The trend at the moment, and quite likely for a while, is for clean, flat designs. These designs emphasize clear pathways and calls to action and it can be controversial whether or not something like a custom cursor fits into that.

I'm not an expert designer, but from my perspective I think small things can work. For starters, our sites already include a variety of icons that serve either as placeholders (e.g., the search icon), reinforcers or visual hints. A custom cursor, admittedly, is new ground. And the convention is that you should avoid disrupting something standard throughout web design. But you never know, it could work for you: it could add a level of flavor, in fitting with your brand's voice and style.

Further Reading