I have a flow where the user has to select quantity first and then select address and then select payment method and place order. but when I went through data found that most of the users are the not clicking on quantity they are directly clicking on pay.

please refer to image

enter image description here

  • I can't seem to get which page is being shown here. The product page? The cart page? The personal details page? All in one?
    – user68158
    Commented Sep 17, 2018 at 11:48
  • Separate Address selection and payment to different screens Commented Sep 17, 2018 at 12:00
  • 1
    Can you set default quantity to zero? What is the "payment" section supposed to be? Commented Sep 17, 2018 at 22:30
  • @Acccumulation yes by default quantity would be zero , in payment there are two section because user can get upto 5 devices for free but he has to pay 199/month for those 5 devices , after crosiing the free devices user has to pay 4800 per devices
    – Harshith
    Commented Sep 18, 2018 at 6:59
  • Then "charges" would be more appropriate than "payment". This format is terribly confusing. Commented Sep 18, 2018 at 14:55

3 Answers 3


The UI isn't using colors well. The red button at the top is connected with the red button at the bottom. Most users will have to do discovery to figure out that there are black buttons, blue buttons, grey buttons, and green ones too.

Get the colors unified so users can easily read your interface and help users by giving them steps.

Your current UI is only using positioning on the page to indicate to users what to do. Simply explain to users how to use the tool. Using the button color in the step numbers connects those step numbers to the buttons.

Here's an example of clearing up some of the colors and using steps:

enter image description here


This depends on your target audience. Perhaps customers simply don't need more than one product at the same time, which makes it appear as if they are skipping the option, whereas businesses might select multiple products.

However, I find the quantity selector to look rather invisible compared to the rest of the page. Perhaps it would help to make its buttons colours to stand out more. Besides, it's common to notify users about how the quantity affects the grand total.


While the other answers are correct, the fundamental "why" is one of few things

Cognitive load users are trimming "superfluous" information because of the amount of possibilities being presented. Many sections (Versions, Benefits, Personal Details, Features, Payments) with fair amount of complexity in each to consider and all at the same level of visibility. When users do this automatic mental trimming in an unintended way the UI is in trouble.

Use sections to direct this mental modelling.

Goal does user want more than one? If user is clicking to "pay for 5" option but have only ordered one can not assume they actually want multiple. May be a misunderstanding (as below). Only missed the "quality" if sure actually wanted more.

How do you know quantity intended?

Comprehension does the payment options affect the number purchased or vice versa? Do not assume user understands your business terms as well as you do

  • user may only want one but mistakes the payment options that are appropriate for their choice
  • or they think that the payment option should automatically override the number intended to order

Where possible remove "gotcha's" rather than educate user

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.