114

After looking at some heatmaps and recordings I discovered that a lot of my users reselect the amount in their cart. It's already listed as 1, and they reselect it to be 1 again.

My target group is mostly 40+ year old users that aren't overly confident when buying online and my product is not a cheap impulse buy either.

I'm trying to figure out if it's unclear that the amount is already set to 1, or if they just do it to reassure themselves it's really set to 1 and they are not paying for 2. (even though the total amount is very clearly for 1 product).

Is this a thing users on other e-commerce sites do as well?

To me every unnecessary click is a negative one, but is it really in this case? is this something I need to 'fix' or does reselecting this amount make my users feel secure and happy?

EDIT Just to answer some frequently asked questions;

  • The remove option is not missing, it's next to the product image that is not in the screenshot I provided.
  • The order of price and discount is indeed very awkward and I'm in the process of changing this.
  • Bulk buying or discounts on multiple bikes is not an option, we have a separate site for b2b and in the many recordings I viewed, none of them selected a number higher than 1.

enter image description here

heatmap

8
  • 6
    @JaneDoe1337 I don't see how someone from this forum will give you a valid answer. I haven't heard of this behavior in e-commerce checkout processes, so it must be something from your particular interface. You need to do user tests and wait for users to click it so you can ask them why they did that. Mar 15, 2017 at 12:33
  • 34
    @KristiyanLukanov that by itself is already a valid answer to my problem...
    – Summer
    Mar 15, 2017 at 13:22
  • 68
    They might be looking to see if there is a "0" option if they want to remove the item from the cart and there is no other obvious way of doing so. Mar 15, 2017 at 16:17
  • 14
    Have you checked how the quantity is displayed in a variety of browsers? Have you checked if this user behaviour is specific to some browsers / operating systems / screen sizes / device types? It may just be that your drop-down customisation breaks on some devices?
    – jcaron
    Mar 16, 2017 at 0:24
  • 21
    If you're spending a four-figure sum then you want to check everything before committing. It's probably like kicking the tyres on a car: you don't really know what you're looking for but you want to take a little time to walk round it and check that everything is OK. And since clicking that button is about the only thing the user can do other than hitting "Commit", that's what users will do. Mar 16, 2017 at 10:15

14 Answers 14

214

Maybe because they are curious about what is inside this combobox's arrow.

Have you tried to change it to another component like a spinner ?

enter image description here

I don't have any particular research about it, it is just my guess.

11
  • 74
    This is probably it. In a dropdown, I personally would wonder what's inside, and click, even if just for curiosity's sake. A spinner seems like the best option to me.
    – Cullub
    Mar 15, 2017 at 14:34
  • 5
    If I want to buy 100 wizzbangs for my entire office this would be very irritating Mar 15, 2017 at 17:23
  • 74
    @RichardTingle It's usually possible to also type within a spinner; they just also have the +/- buttons.
    – Pokechu22
    Mar 15, 2017 at 17:27
  • 57
    @RichardTingle I bet they don't even have a 100 option in the dropdown as-is Mar 15, 2017 at 20:31
  • 12
    I agree, I generally am always compelled to click a dropdown just to see what's in it (Note: I am 35).
    – Jason C
    Mar 17, 2017 at 4:42
81

I don't think multiple clicks are a bad thing in the shopping cart. While here, some users will double check things. Unless you're seeing users drop out, I wouldn't worry about it.

If you want to understand why they're doing it, some think-aloud usability tests will tell you. (Don't ask them, after the fact, to remember why they did it; listen to their think-aloud and interrupt them in the moment to ask.)

9
  • 9
    Good point on the think aloud rather than ask.
    – Alvaro
    Mar 15, 2017 at 12:51
  • 3
    Yeah, we tend to distrust recall. Observations are the way to get honest data. Mar 15, 2017 at 12:54
  • 2
    @Alvaro A standard user test incorporates think aloud protocol. So If the user doesn't mention it while thinking aloud the researcher should ask the user. Mar 15, 2017 at 17:14
  • 1
    @KristiyanLukanov Thank you for the clarification :)
    – Alvaro
    Mar 15, 2017 at 17:32
  • 1
    I think the blue arrow of the combo stands out visually. A grey arrow might make them less curious. When it's flashy like that, I feel like I have to click there for some reason Mar 17, 2017 at 20:24
76

From a non-UX designer perspective:

It looks like your €2.499,00 is crossed out while being replaced and highlighted by €650,00. This would be jarring to anyone who was expecting and prepared to pay €2.500,00, but then seeing a price that is considerably lower. If I could save €1.849,00 on a purchase I would definitely do everything I could think of to make sure that happens.

Of course, your €1.849,00 figure comes from €2.499,00 - €650,00, but €1.849,00 also happens to be almost 3x the €650,00 amount. So they may be clicking on the quantity expecting it to 'realize' it's trying to say 3 but was glitched/mistaken into saying 1.

One note: people may be doing this kind of action without really thinking about it, because they know whatever happens prior to payment is low-risk...you can click all the buttons, in any order you want, and there is no risk until you actually hit that final 'Submit payment' button. Worst case scenario, you empty the cart and start over. So even though it's easy to calculate 650*3=1950, people might just be thinking 6xx*3 (dealing with only the most significant digit) = 18xx (since 6*3=18). If they continue with checkout, then they eventually figure it out, but it's that initial, split-second reaction that might be causing them to check the quantity.

Instead of crossing out the €2.499,00 figure entirely, I'd leave it as normal text, and show that the €650,00 is subtractive (since it is a discount, after all). I don't know about localization, but usually just putting a - in front of the number would suffice. Then it's more obvious where that €1.849,00 figure is coming from. And while it's nice to highlight discounts, you also highlight the total discount down below - so you might want to play around with leaving the text in the Voordeel column as just plain black text.

Also in the lower right, the Subtotaal and Totaal being the same is a bit confusing. Should the Subtotaal be the sum of all Adviesprijs? I'd personally expect this layout:

Subtotaal (sum of all Adviesprijs)
Uw totale voordeel (sum of all Voordeel)
Totaal (Subtotaal - Uw totale voordeel)
9
  • 51
    The longer I look at the screenshot, the longer I tend to read the number in orange as the final price for a unit, and the last column as a quantity*price. Mar 16, 2017 at 11:34
  • 8
    You and @KubaWyrostek have a point, I believe. One possible improvement is to write the values below each other, as normal book-keeping or an invoice would do, and to underline the final sum; and yes, the discount should be preceded by a minus sign; and yes, the final value should be highlighted (e.g. be in bold font) because it is the actual central information, not the discount. Mar 16, 2017 at 13:41
  • 4
    This is exactly the thought I was having (I do not speak Flemish (?) so it does not help to understand). I belive that just adding - and = would clarify things up: i.imgur.com/Pe4fscV.png
    – WoJ
    Mar 16, 2017 at 20:44
  • @WoJ Dutch! ;) I completely agree, I have been vouching to make changes here for quite some time now but I can't come up with hard numbers to prove this needs to be changed.
    – Summer
    Mar 23, 2017 at 11:41
  • 1
    @JaneDoe1337: I made a quick round of Europe with Decathlon -- it is really 50/50 - so my comment was wrong. One learns everyday.
    – WoJ
    Mar 23, 2017 at 12:04
27

If you can, perform some testing and gather information about why are users clicking on the amount dropdown. Probably most users are clicking for the same reason.


That said, my guess is that it might not be absolutely clear that what there is behind the dropdown are plain numbers:

1
2
3
...

and users might think there could be other kind of options:

1
1 without X Pakket
2 with X Pakket
3 for 2
...

The dropdown you have is used to select between different options. And although each amount is an option, possibly this dropdown is not the best component in this case.

This is the dropdown from Amazon:

enter image description here

and from Google Store:

enter image description here

which, in my opinion, are quite similar to the way most browsers display the number input :

enter image description here


(My first thought was that users might want to check how much would 2 elements cost, but this is not the case as you say after opening the dropdown option 1 is selected.)

6
  • 33
    To be honest, if any site I use would send me an e-mail asking why I'm clicking something I would freak out and bail out right away.
    – ecc
    Mar 15, 2017 at 15:05
  • 6
    @ecc Thanks for the feedback. I didn't mean to send an email to a random client asking, but to have test users perform the task to analyze and try to gather conclusions. See this or this.
    – Alvaro
    Mar 15, 2017 at 15:25
  • What kind of Pakket? Beef flavor?
    – Nick T
    Mar 15, 2017 at 21:39
  • 2
    @Shautieh I'm not close to being 40+, and obviously my experience isn't universal, but personally there's a huge difference between the element they're using and the suggested one. The inclusion of both up and down arrows indicates (to me, at the very least) that we're dealing with a quantity that can be both increased and decreased. The single down arrow just indicates that there's a list of potential values, without telling me anything about what - if any - relation those values have. Mar 20, 2017 at 16:49
  • 1
    @AnthonyGrist You are right in saying those arrows have meaning, but even a few years ago there was no arrows that I remember of, and no difference between numeric and string inputs for example. If I asked my parents I'm pretty sure they never pay attention to these details. This said, I didn't downvote because this answer is better than what OP has ; I am just doubtful it's going to solve his problem entirely.
    – Shautieh
    Mar 21, 2017 at 1:03
23

I just managed to find your website and proceeded as if I was a customer. And maybe with a little bias, but I also clicked the 'amount' button out of nowhere.

It is hard to explain, but it is just a little 'tic'; as you are offering quite expensive products, the user wants to check that everything is 100% set up right (clicking it and verifying it's set to one gives the user a safe impression). The button in question is also the only button the user can click that does not ignite an action:

enter image description here

All other buttons will somehow change the product settings in one click and/or redirect the user to another page.

All in all; I think it's just a little piece of automatism of the clients checking their orders, I wouldn't recommend changing the button.

1
  • 40
    I should have figured a dutch website would be selling bikes...
    – Joel
    Mar 15, 2017 at 23:50
16

Another possibility, given the age of your users: All through the 1990s and early "aughts" a light gray like you are using meant "not an option". We called it "grayed out". So, to me, (I am in your user's age group) it looks like it's not active for some reason.

Also, you have one bright color on what I think is the discount rather than the price that is to be paid. I find that confusing, so I might adjust the quantity (my only real option) just to get a better sense of what I am looking at.

2
  • 2
    Maybe change the discount color to green - that might make more sense.
    – Cullub
    Mar 15, 2017 at 15:46
  • 6
    "Grayed out" is still a thing isn't?! Whole heartedly agree on the confusing choice of a bright color for the "discount" and more subtle color for the total.
    – MrWhite
    Mar 17, 2017 at 0:21
11

The "1" in grey on grey looks "disabled". Grey means "disabled". So some of your users probably think that the quantity is not set yet and click to set the quantity to 1.

The quantity is not the only problem. On the images, I see an accessibility problem. Several meaningful texts and figures are in grey on white or in grey on grey. 1) This may mean "disabled". 2) This is difficult to read.

Improving that would be a good idea.

2
  • The other problem is, where is the "remove this item from my order" action. There are second thoughts, and mis-clicks. Setting quantity to zero had better work(!) but a one-click "remove" operation is better.
    – nigel222
    Mar 16, 2017 at 16:43
  • @nigel222 - You have a good idea. The button or link "Remove" may be missing. Is the quantity "0" present in the list? I don't think so. So, indeed, the users who puzzle JaneDoe1337 may be trying to remove the item from the basket. Idea: they want "0", so they unroll the list, but they don't find "0" in the list. Mar 17, 2017 at 10:40
7

I would like to add something from my perspective. Aged 36 I could fall into your target group.

I don't know about localization in your case, but living in Baltics my order of thought and reading from left to right is Price - Discount = Price I pay and only then Quantity I buy.

In your case it does not mach my order, that makes me "uncomfortable" and I start to double check if my thoughts are in line of what webshop is showing and trying to sell me.

Another point would be How often people buy more than one item priced at 1849 EUR? Would that make quantity selector in this case obsolete?

2
  • 2
    Great point. Another approach I have seen on some sites is the quantity 1 is not changeable directly, but there is instead an "Order more quantity" (or something like this) link next to it. That doesn't add cognitive load on the "normal" users, while also letting people have the option of buying more quantity of an expensive item.
    – Masked Man
    Mar 18, 2017 at 6:40
  • 1
    It happens very sparingly that a couple will buy 2 of the same bikes but even then it's often in another color and listed as a new item. You have a good point here, thanks.
    – Summer
    Mar 23, 2017 at 11:36
6

I am one of the users who often messes with the quantity even though I will probably buy only 1 item.

When I get to a checkout page, it is common for me to be curious what the maximum value is in a quantity drop-down list, and I am even more interested in any possible discounts I might get if I purchase more than one. For example: On some websites, if I change the quantity to 2, or better yet to a higher number (5, 10, more) the price sometimes comes down. These "bulk discounts" are often listed in the item description, but not always. After checking to see what changes are made by my other quantity checks, I usually change it back to 1.

Another reason why I personally would select an item from the quantity list, even if only to select 1 when 1 is already selected, is to attempt to force an update on the page. If I changed some other option on the page but did not see the price change, I might wonder if the selection did not force an update of the other data. Looking at the screenshot posted in the answer from @Thomas, I can see you have, at the bottom, what appears to be a shipping selection. If I changed the shipping option and the 1.849,00 amount did not change, then I would click next on the amount and select 1 (even if 1 is what was already selected). If that also did not force a page update, I might look for another control on the page which I thought might force an update. In the end, if the 1.849,00 amount never changed, I would just think "Maybe that is not the total. Maybe there will be another page with a total on it." and I would continue. This behavior of mine would extend also to any other options you have that I might change.

These are common actions I perform whenever I am performing an online purchase checkout.

2
  • To safely force a refresh, +1.
    – Mazura
    Mar 22, 2017 at 1:43
  • They are not shipping options, but options to have insurance or a 'care package' with your bike. The shipping is listed near the total price, but there is no option to change it to something else, this happens in the next step. Which is very odd to me, but something we currently can't change yet due to restrictions of our template.
    – Summer
    Mar 23, 2017 at 11:35
2

When I see the one downward pointing arrow, it feels like a drop down menu where you have to make a choice before proceeding. The other options make it more clear that there is already a default option selected.

1

They are clicking on it because there is an arrow there and they are curious what the arrow does.

If there was an up-arrow and a down-arrow, they would realize that the arrows changed the value, but as it is, they think there might be a useful menu there.

1

As @nigel222 suggests, the button or link "Remove" may be missing.

Is the quantity "0" present in the list? I don't think so. So, indeed, the users who puzzle @JaneDoe1337 may be trying to remove the item from the basket. Idea: they want "0", so they unroll the list, but they don't find "0" in the list.

3
  • There is a 0 which does exactly that though.
    – EKons
    Mar 19, 2017 at 20:17
  • Having 0 I find not to be the best option. Its intent is not as clear as you would think. Having a separate link for the removal clearly states your intentions. Think of a site where you didn't have the link and you wanted to remove the item. You will ask yourself, "How do I remove this now?" Mar 22, 2017 at 12:01
  • It's not missing, it's next to the product image. The fact that it's not near the quantity might be an issue though, I'm looking into that.
    – Summer
    Mar 23, 2017 at 11:32
1

How do user remove something from their shopping cart? If there is no clear button (I don't see it in your screenshot, but it does not displays the whole page) then users try to put the 'aantal' to zero. If you are looking for buying stuff, you might add 2 or 3 items to your cart. To keep them and then afterwards again review the product specifics to ultimately choose the one you want. So then you need to remove 2 items from the cart. Because you only want to order 1 specific item. Maybe you can look in your log files to see if that happens a lot.(users setting the 'aantal' to zero)

1
  • There's a line of text that says 'remove product' next to the product image. I personally don't think this is the ideal place for it though so your comment is definitely valuable and I'm going to look into this.
    – Summer
    Mar 23, 2017 at 10:46
1

For what it's worth, I've done this myself.

For me the reason is nothing more than curiosity.

The more expensive an item, the more odd it seems to have a drop-down for the quantity - "oh sure, while I'm spending a couple of thousand Euros, why not spend two or three times as much".

Some products you might buy a few of if the discount is cheap. Biscuits, coffee, tea bags... but sometimes baskets and checkouts are designed for any type of product and when you add a product which a large majority of people would only want one of then a quantity dropdown starts to look out of place.

So then I think "well just how many of these does the seller think I might want to buy?" and so I click on the drop down just to see what the number goes up to. Maybe the drop-down goes up to 10 or 100 because I might be buying 100 spare batteries.

Then I laugh to myself (and stick with one)!

Ironically - you might now get more UX people coming to your site and looking in the drop down to investigate in context... and creating a self-fulfilling observation!

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