How to separate links from buttons?

Question

I am struggling with how my users don't understand the difference between buttons and links.

---

How links look:

How buttons look:

How buttons look:

---

1. Is the difference visual understandable?

2. Show links that they open a new page or expand a "show more" box?

---

Edit:

Links are for locations, buttons are for actions (dennislees)

• That is what i am attemting to aim at

Answer 1

Links go places. Buttons do things.

Don't think about that too hard; but buttons change the system state. Links are "reversible" and indicate a trivial action that the user can undo with the BACK button.

Generally I agree with other answers – you have a visual design problem.

1. Links should be a text color that offers significant contrast to the body text and, even better, they should be underlined for extra clarity. More info: Beyond Blue Links: Making Clickable Elements Recognizable
2. Text fields should be an outlined box, ideally with a slight shadow inset. Yours is a square gray field; it looks disabled. More info: Website Forms Usability: Top 10 Recommendations
3. Your buttons are okay.

Answer 2

Why are your links buttons at all? Links should just be actual anchor tag links so users can use their browser's right-click menu if they want to open them in a new tab or other link-specific actions. The distinction is also helpful for screen readers.

If you want to know how to style links so they're visually distinct from text, an underline is usually the way to go. If you want something a little fancier, there are many sites that can give you examples such as this one that suggests adding an animation to the underline, but keep in mind that anything you add that makes it look less like the standard link will make it harder for users to use heuristics to find them.

Answer 3

I think the problem is that the link looks like a bullet item here. It doesn't really indicate that it's a link. Usually link- tag- has a visual indication that it's a link such as underline and/or different font color.


To answer your two questions:
1. Is the difference understandable and logical?
- Not really. Buttons or Input with a placeholder are clear but Link doesn't really look like a link.

2. Do you think people will click on a link and know that a new page will open or will extend a "show more" box?
- In order to make people expect such action, they should first know that they are clicking on a link. The response afterwards such as opening a new window or tab naturally comes in user's scenario if the user knows that it's a link. I'm not quite sure with the second part of your question "extending show more box". But click on a link doesn't really extend something on the same page. If that's what you're planning to make, it's rather a toggle button than a link.

(Toggle button example)

I hope this helps.

Answer 4

Don't get confused!

Button should look like button and links as links.

Quick tip:

• Underline links and color them as per your brand's guidelines. Yes, you may lose Dribble like cute UI but site will be accessible
• Your button's style seems okay to me, but make sure you have only one primary button on one fold. You need to style them similar to buttons(bulge, shadow, border etc)
• Inputs must look like input boxes with white background and a border. Yes, I know there will be exceptions like google's material design and other cute dribble designs, but they can be enriched with sensible placeholder

Do you think people will click on a link and know that a new page will open or will extend a "show more" box?

The agenda of having links, buttons is to guide users to take an action and people are aware of it( I don't have any statistic though).