Differences between links and buttons in a web app or a website in action, affordance, and user experience

Question

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?

Answer 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".

Answer 2

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.