6

I'm working on some kind of B2B checkout process for car dealers who buy cars from my client.

In the 1st step of checkout, they have to choose between pick-up and delivery.

This is what I'm going for (work in progress): enter image description here

I want the user to really focus on these 2 options. When they'll have selected one, they will need to click on a "go to payment" button to proceed to step 2.

I'm thinking of making the "go to payment" button appear only AFTER they've selected one of the options. The interface would then look like this:

enter image description here

If I were to display the "go to payment" buttons from the start, I'd have to plan for an error message for the case when the user clicks on that button but no option was selected.

I like the idea of avoiding that error message. Without that button, the user would really focus on the 2 options without worrying on what to do next. The button would then appear when relevant.

Is there a risk of the user not noticing that button? I guess it will have to stand out a lot in the final design.

Do you see any other issue with this?

Thanks in advance

  • 3
    You can use disabled "Pay" button, so a user will understand/orientate in your UI in advance. And disabled button will not pay much attention. The bigger issue is a user cannot choose delivery method for each car. Use case: the user wants to pick up a vechicle in the nearest city by himself, but wants to use delivery service for the other vechicle. Also I'd try to use smart defaults for the delivery method. Though, this leads to the different layout (as I see it in my head ;) – Alexey Kolchenko Dec 30 '15 at 10:11
  • Thanks for your input. If the button is disabled it means I still have to plan for an error message. There is nothing more annoying that a button that doesn't do anything when you click on it. I'm not sure everyone will understand that it's disabled or why. Regarding the delivery service, for now my client isn't able to offer it for each vehicle, it will be "all or nothing", but that's a different issue :) I don't understand what you mean by "smart defaults", would you mind explaining that further? – Raphaëlle M Dec 30 '15 at 10:25
  • Alexey makes a very good point about picking different options for different vehicles, I would definitely give that some attention. – Franchesca Dec 30 '15 at 11:36
  • I agree but this is not an option for business & technical reasons that are out of my scope. – Raphaëlle M Dec 30 '15 at 12:23
  • An error message is okay, i think. sometimes user may click on make purchase button, but forget to first click on T&C button. then a little error msg will remind them. most times i shop at newegg, i forget to click T&C button, so i get error msg. somehow this is good, why? – Jedi Commymullah Jan 8 '16 at 23:41
7

I'd simplified the choice a user needs to do, by promoting the Delivery Service as an attractive and valuable offer.

So user need no to think on his choice (less cognitive load). Still, you provide some clues for him to push him gently to using Transport Service:

  • Display the distance between locations, providing the data for decison
  • Promote Transport Service by highlighting its advantages for the user

enter image description here

The advantages:

  • Less choice – less cognitive load. No disabled/hidden buttons!
  • More clear UI (you need no to display some details, at least until they will select an option)

To promote the service, you can still display the option on the next (payment) screen, letting them to use it:
enter image description here

  • Thanks for taking the time! Your suggestions are very interesting. I just worry that by requiring no action for pick-up the user may go to payment a bit too quickly and not take the time to consider both options. Do you see what I mean? – Raphaëlle M Dec 30 '15 at 12:28
  • @RaphaëlleM that's why I duplicated the service on the payment screen. Also did you do user research on why and when they decide to use the service, and when don't? This allows to gain better UX. Currently the background on my solution are both minimal and clear UI, and minimal cognitive loads, which are well-known heuristics. – Alexey Kolchenko Dec 30 '15 at 12:46
3

Minimize the visual noise and simplify the flow

Give the user a choice, but make it an easy one. Considering your transportation service is most popular, and probably most preferred by your client, you can position this as an offer. The clear choice is to simplify the cognitive load on the user end, by showing them it's easier to just to get their vehicles delivered, rather than having to deal with the hassle of having to pick them up themselves, but they still have the option to do so if they so desire. This also helps by hiding the content for the pick-up option initially, and then displaying only when the user clicks on that option, so the user is not overloaded with information, but be sure to include indication that if they click that option, more information will be displayed, such as a dropdown arrow.


Transportation Page

mockup

download bmml source – Wireframes created with Balsamiq Mockups


So -- How does this solve the button issue?

Simplifying the flow will allow the button to be more visible, and by having the transportation offer selected by default being most popular/preferred, we can reduce the click depth for the user, and speed up the checkout process. The user can evaluate the offer, choose to accept, and continue to payment with one click, instead of two by clicking on the option, then the continue button, or otherwise choose the pick-up option, which will require that additional step.

Since there is always an option selected by default, there would be no need to disable or hide the button. Once the user has made the conscious decision, they can go ahead and click continue.


Payment Page

For a fail safe, be sure to include helpful information on the order summary in case a user continues without looking at the offer and is confused by the delivery charge, and provide them an option to pick up their vehicles instead.

mockup

download bmml source

  • I like your suggestion. Simple and also puts convenient option first up. – gurvinder372 Dec 30 '15 at 19:01
  • I like it too, thanks. I think it's clearer from a user's prospective when there is a choice between 2 options. I was trying to be neutral by not having a default selection, but having one would probably lessen cognitive load and allow to mask some info at first, as you said. – Raphaëlle M Dec 31 '15 at 8:49
0

I wouldn't suggest that. Alternatively, you can place the button and disable it. Other user actions will enable that button(as per your requirement)

In my opinion, that would be a better practice

  • Do you have any reference to support your statement? – Benny Skogberg Jan 6 '16 at 8:55

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.