Skip to Main Content
Ideas Portal
Status In Planning Phase
Workspace Pressero
Categories User Interface
Created by Eric C
Created on Oct 15, 2021

Payment Methods should not be buttons

On the checkout page the first thing the user sees is Payment Method. If you have 4 payment methods active on your site, then the user sees 4 buttons. If the user clicks on a button it becomes the active payment method. There is a visual indicator and so the user can realize he or she selected a payment method because the state of the button changed. Fine.


However, if you have a site with only ONE payment method, the user sees a single button and 9 out of 10 people will click on it. Well guess what - this button does absolutely nothing. Here's a real life scenario: My site has Credit Card as the only method of payment. On the checkout screen the first thing the user sees is a big button that says Credit Card. At the bottom of the page is another button that says Complete Order. Any logical person would think they need to enter their credit card number before the complete the order, so the logical thing to do is click the Credit Card button.


Click this button and nothing happens. Click it again. Nothing. Now the user thinks something is wrong with the site. I tested this with people in my office and watched them do the SAME thing. This is a bad/confusing UI design and it needs to be changed. There's no valid argument as to why this should be a button.


I get that the buttons look cool when you have more than one payment method but all of my sites have one payment method - B2B sites have a Purchase Order button and my B2C sites have a Credit Card button.


Here's a screen shot. Tell me which button you'd click first...

https://www.screencast.com/t/1gjjuawkLTZu

Screen Shot

  • Attach files
  • Ryan Mastako
    Reply
    |
    Nov 9, 2021

    Agree with this. In the meantime, you could write some custom CSS to override the default styling.