6

I'm preparing wireframes for a huge company, and wondering if I should use '>>' or simply '>' on buttons for emphasis! (if yes which?)

What do you think? Or do you have any other idea, how to emphasize a single button? Is there a study on this matter?

It is a question especially because there are strict color restrictions, and mostly light colors can be used, which hardly stress the message and importance of buttons.

2
  • 2
    Can you add some examples of what you mean.
    – ChrisF
    Feb 4, 2011 at 13:12
  • Thank you ChrisF but I think we have already found the answer. But otherwise, for example buttons with textslike: - ask for loan - fill out online form Feb 4, 2011 at 15:10

6 Answers 6

7

Buttons are buttons - just use the button element for your environment (web, windows forms, etc. - whatever environment this is for) and it will stand out enough on its own. The only time it makes sense to use > or >> in the text of a button is when you are doing a "wizard" and you want to identify between "Next" and "Previous" at a quick glance.

4

I do this on buttons that emphasize moving through steps, such as a questionnaire.

I might do something like this:

<< Previous                             Save and Continue >>

In that case I'll also de-emphasize the Previous button through my color scheme or some other means so the user isn't distracted by it.

Arrows like this could also be used in a multi-step checkout process, a wizard, possibly registration, etc. But if the action you're referring to is just a one-step deal then I won't bother with the arrows.


As for emphasizing the buttons that you do have, don't be afraid to be bold. If you have just one or two buttons that are critical that they're noticed, then make them bigger than the others, or make them stand out in some way. It's even common to see a big call-to-action button in a loud color on the home page of many big websites.

  • http://www.geico.com/ While it's not my favorite site design, they do tons of business. They use orange for their most important call-to-action buttons (a color that doesn't otherwise belong).
  • http://order.papajohns.com/ Their big green "order now" button on the red background stands out. And notice they use the arrow. After all, ordering a pizza involves a few steps.

I just did a search for "call-to-action button" and came across this article with lots of good examples... http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/

3

I typically reserve << and >> on buttons for dialogs that manage two lists. List A would be available items, List B would be selected items. The 4 buttons that typically appear between the two lists are:

> - Move selected item from List A to List B

>> - Move ALL items from List A to List B

< - Move selected item from List B to List A

<< - Move ALL items from List B to List A

I realize an answer has already been selected, but no one mentioned this convention so I thought I would add it.

0
1

If you have normal buttons, where they clearly afford pressing there isn't any need to accentuate. The basic button is enough.

1

It's effective. However, make sure it's in the right context such as form wizard and pagination. Otherwise, I'd recommend you using button placement techniques to emphasize the button instead. How about placing the button at the center of interest? or use a strong wording?

1

Arrows are used in the following scenarios:

More Data - clicking the button inserts more data into the current layout, the arrows indicate where the data will appear.

In my understanding, the idea is to improve predictability of the results. Especially in automatic layout systems (such as the web), the programmer can not control how the screen will look after clicking the button, and the user may be confised due to the atomatic layout scrolling his current controls out of view.

Navigation - e.g. ^ go to top of page, v next chapter, or forward / backward navigation in wizards. Usually, the text indicates exactly what will happen, the arrows just give a directional visual cue in addition to the action to beexpected.

This pattern is common enough that the text isn't always necessary.

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.