3

I know this question may have been asked before in a different way, but what I'm looking for is that with all the differences between links and buttons, what is important in displaying them in the eye of the end-user?

For example, it is said in UX guidelines or articles like this that the cursor shape should not be any different when dealing with buttons but links are the ones that need the hand shape cursor as a signifier to the affordance they have.

The question is what is a link or a button in the eye of the user? Is it important for the user to know whether it is a link they are clicking on or a button? Especially in websites where these options are used interchangeably. Should they be presented differently? If yes, what should be different in the way presenting them? How should a user distinguish between a link and a button? When should the shape of the cursor change, only on links that are shaped like links? on all links and buttons that function like a link (e.g navigation buttons)? Or on anything that is clickable on the web? If it should be changed only on links, what are the signifiers of ghost buttons or flat buttons? And also what are the other signifiers of a link or a button?

The very article suggesting that the hand shape cursor should be used only on links, use it on all its buttons and links itself namely everything clickable on that web page. Where are these boundaries? and is there anything like a universal guide that what should be done?

1

The question is what is a link or a button in the eye of the user?

In the eye of the users, links redirect you to another point, either to a new page, or a new spot inside a page or a document, that's why the hand icon is used when hovering over text links.

A button is no guarantee for a redirection, even though buttons get used often for that case, that is mostly because buttons raise a lot more awareness then text links.

At the end of the day, it's important to show the user that:

  • a text/button is a clickable element
  • if the text/button redirects him/her to a different page or spot

You do this by using normal and hover states for links and buttons, if you use text links you should make them visible by font-weight, underline and/or color so the user notices them as links and not as normal texts.

If your links redirect to a different page you should use an icon as well, or use a really obvious wording, for example: "Open in new window".

  • Thanks for your response, yet not a guide on where to use the hand shape cursor or other signifiers. Nowadays there are lots of buttons that actually function like a link. What is the best decision dealing with them? When is it just the issue of showing if it's clickable and when is it more than that? – Jack-in-the-box Sep 12 '17 at 9:06
0

I don't think this has strict guidelines simply because it's a bit too dependant on the user's level of experience.

Buttons and text links perform essentially the same role, they just have a different visual weight to it; buttons are important CTA's links (the preferred action), while text links are the lesser action.

I would personally use the same signifying cursor changes for both text links and buttons. Buttons and text links can exist in a vacuum; buttons are usually by themselves, accompanied by images and copy. Text links are often in rows, but can appear stand-alone in a text. You need to know if something is clickable, especially since buttons often also have a disabled state.

Their reasoning is that toolbars (almost) never have a hand-cursor. That makes sense; toolbars are a collection of different options. If you take a look at software, you'll see that none of the buttons or options ever have a hand cursor. They expect you to know you can click anything that resembles an option. With websites you have a broader range of people using it, and when they interact with clickable elements, they need to have reassurance that they can interact with it. This is also where the original esthetic of a button comes from; a raised element that can be 'pressed' down. This is valuable, especially since more and more websites use less affordances because of aesthetics and minimalism, a ghost button for example.

  • Thanks for your response, so you're saying basically everything should be treated as they are links when it comes to using signifiers like hand shape cursor? I know the goal is to show if they are clickable but what should be used when? :D It's still confusing to me... – Jack-in-the-box Sep 12 '17 at 9:16
  • 1
    I think as long as you're dealing with a broad range of users of varying skill levels, the safest bet is to always be as clear as possible. Always use the appropriate affordances; if you can click it, make it look that way. This means color and an underline for text links, and buttons with a raised appearance. Function over form. It's very trendy to stray away from conventions nowadays in order to get a more unique form or to be semantically correct, but don't let it get in the way of functionality :) depending on your users, you may end up with very confused people. Do what people are used to – Wanda Sep 12 '17 at 9:20

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.