9

When you want to softly steer people into an option, do you place the preferred button left or right to the other one?

More Details Specifically it is about registering with a Facebook account, or with a custom 'local' account. We think our product is better by providing Facebook features, but for logical reasons people are hesitant to register with their FB account. So we provide both options, with explanations.

But as you all know, a lot of people (like myself) just quickly click through dialogs without reading, just because they assume it gets them what they want. So we rather have the 'default' option the one that we think gives them the best experience.

3
  • This is very broad--can you provide some additional context and explain what you're trying to do in more detail? Feb 12, 2014 at 22:44
  • possible duplicate of OK/Cancel on left/right? Feb 12, 2014 at 23:38
  • I've added more details.
    – Dirk Boer
    Feb 13, 2014 at 9:50

3 Answers 3

4

Don't style options differently when they're variations of the same thing.

It's pushy to offer two methods for registering and then nudge the user to the one that you want the user to use; you're not letting the user decide on his/her own without your bias.

Code Maverick's example, while usable, doesn't actually apply to the original question. The Confirm and Cancel buttons do different things, and emphasizing the former is acceptable and helpful: the dialog window reasonably assumes that the user wants to follow through with the action that's triggered the dialog window in the first place.

The TC's scenario is like when a company lists its pricing packages beside each other. Usually the most expensive one isn't styled to make it stand out, even though for obvious reasons the company wants you to pick it.

2
  • 1
    Did you read my post or just look at the image and make assumptions? My image was only used to demonstrate how to combine different techniques of steering. The content is irrelevant. Feb 16, 2014 at 2:59
  • My point is that the content is relevant (ie, consider whether the choices are variations or not). You've answered the question directly but I've answered in a way that re-frames the question.
    – Tim Huynh
    Feb 16, 2014 at 18:42
8

When I want to steer a user into clicking one button over the other, I typically do one or more of a few things to the button I prefer them to click:

  1. I pre-select (or focus) the button, which is an obvious way of showing the default action you wish the user to take.

  2. I use a different color background for the button showing a clear distinction between the two.

  3. I use a bolder font weight on the text of the button, which is a more subtle way of nudging the user in the right direction.

Any of these could be used on their own, but the power comes when you combine them.

I made this for another answer, but it demonstrates perfectly the power of combining all three:

confirmation modal

3
  • I am not too sure I like this particular style. It seems like "cancel" is not a clickable option. I would rather have the main action as a button and the other one as a link, or, if you rather have two buttons, to have one in focus as a default action.
    – EdGG
    Feb 14, 2014 at 7:58
  • @EdGG - You are more than welcome to leave your own answer =D As far as the style in my image goes, as I mentioned, I pulled it from another answer of mine. It was only used to demonstrate how to combine the different techniques I had mentioned. Feb 16, 2014 at 3:03
  • To generalize, you can achieve this with Contrast and Proximity (or lack of it). @CodeMaverick's example nudges you because the 'confirm' button is highlighted due to its contrasting color. If you had more than 2 buttons, you could space all the buttons in a way, an then provide more space to the one you wanted to nudge people to click.
    – jff
    Feb 18, 2014 at 13:31
1

There are many options:

  1. to pop out by button color - as in the example of Code Maverick
  2. to make default button as a button on the left, and secondary action - as link on the right
  3. to place button above, and text below

I think 2nd option - the best in your case. You make the button "Sign up now" and link "Signup with Facebook" below.

But sometimes you need to calm down users with "We don't post anything to your FB wall" - this is another story.

Your Answer

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

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