3

When choosing to use plain button vs button with an arrow (most likely it's right arrow), how do you decide when to use which?

As I understand it, arrow on the button should be an affordance to action on another page. Most buttons point to another page though, so logically you might want to add arrows to all buttons. But it wasn't the case: some sites use them only on text buttons, while others used them on text and primary buttons and so on.

enter image description here Apple: arrow on “Learn more”...

enter image description here Uber: arrow on primary

Are there any guidelines on when to use arrow vs not to use?


If you decide to use the arrow, how do you decide which arrow to use?

Let's say you are going with the arrow. Now there are four arrows you can use (via uxmag):

→ A literal arrow symbol, with a stem and point (Unicode: 2192).

▶ A triangle with one point to the right (Unicode: 25B6).

'>' A “greater than” sign (Unicode: 003E).

'>>' A double or triple “greater than” sign.

The most popular I've seen are literal arrow and greater than / chevron right. Is there any semantic difference between those?

1
  • Would really help if you provide more details on where to find these interfaces so we can experience them ourselves.
    – Izhaki
    Commented Mar 29, 2017 at 0:12

2 Answers 2

2

I think your point about indicating an action (or a start of a process) on the next page may be right in most cases.

For me, an arrow is another form of making an action more prominent but it also very often indicates that you are going to leave the current view. This is important in many cases, especially when Users might want to do anything on the current page.

Buttons without arrows, no matter how significant they are, do not communicate that by their design (they may do so by wording though).

But still, I do not think there is a real rule here. This is more a reference to the dynamic nature of the action the arrow indicates.

-1

The way I see it is as a button and a link.

  • A button indicates an action to be accomplished [Sign up]. It might redirect you to some other page but the main idea is that it is going to fulfil a specific action.
  • A link redirects you somewhere else, we could consider the link action being [Visit].

If a link doesn't look like a link it might be useful to reinforce its meaning in some way, like with an arrow that indicates direction to some other place (a different page) which is what links do.

About which arrow to use, I would prefer an icon, but I believe which to choose is a matter of design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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