4

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


How links look:

"create new" link

How buttons look:

various buttons

How buttons look:

input


  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
5

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.
8

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.

  • This is just the look and feel - visual not code'ish – felixhu Dec 21 '17 at 16:51
  • I fully agree with Chase Sandmann If your style your links to look like buttons don't expect users to be able to tell difference between them. I would go with underline + colour different to your main body text. – Awfor Dec 21 '17 at 18:34
  • Thirded. A line in the Style Guide I manage says "Links are for locations, buttons are for actions", though it also mentions the common counter example the buttons used to move forward and back through multistep processes. – dennislees Dec 21 '17 at 23:16
  • @Awfor I am sorry if my broken English confuses you, but buttons should look like buttons after all, same with links. – felixhu Dec 22 '17 at 8:45
  • @dennislees I like the approach "Links are for locations, buttons are for actions" – felixhu Dec 22 '17 at 8:45
5

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.

  • In fact, links look like bullets. I'm trying to fix it with underlining. If a bullet point is a link - same procedure? – felixhu Dec 22 '17 at 8:55
3

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).

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.