2

When the design of the button has a mouse pointer on it, some might say users will be more attentive to the button if they see the cursor and think it is theirs. Others will suggest this is a confusing and ineffective approach. What's the best choice?

VIEW VIDEO BUTTON WITH POINTER

3

First, I will answer the question you asked. No don't put a cursor on the button. Putting a cursor on a graphic can be confusing, as you mentioned users see the cursor and think it is theirs. This may make them attentive to the button which can increase clicks but when the user is trying to do other tasks on the page it is distracting. If the button graphic is well designed then it will not need a cursor to draw attention.

However, my real suggestion would be to not embed buttons in the graphic in the first place. Why?

  1. Responsive design - when you resize the page your lead graphic is going to resize to fit the viewport (or atleast should if you want your page to look good on small devices) when it does your button will shrink as well. Right now that image (in full size) is 951px and the button 92px (so 10%). When that image is resized for an iPhone screen (320px) the button will be just 32px wide and text on it illegible.

    enter image description here

  2. Accessibility - If you embed the button in the image you lose all ability to put alt tags, titles, tab index, keyboard functionality, and tracking that you would normally want on your buttons and links. The button will be invisible to screen readers and search engine crawlers. You will have to put any information in the containing image which you would want to have it's own attributes instead.

I recommend putting the image on the page without the button image in it, then overlaying a real button on top of the image. This will fix both of these issues and allow you to change the image and button independent of each other.

1

A button already has affordance built into it "it looks like I can press it. It must do something"

There is no need to increase the affordance by adding a static cursor image over it; plus, that will likely confuse the user "why is my curso....oh hang on"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.