The cart should mimic the physical world. In the physical world, 2 hats and 3 shoes are 5 items in total. Therefore the cart icon should show as 5.
If those hats come as a set of 2, they count as 1 item.
Most e-commerce websites I have used over the years assume the user reads from top to bottom and left to right so the CTA would work on the right depending on the region the website is aimed at.
EDIT: Figure B would be the option to use. The user has already reviewed their items in the basket so the important area is the delivery information and this would ...
The complexity is not in the icon, in fact the shopping cart icon is visually complex, but it's already adapted to the user's eye. The tricky thing about this case is that actions are being added to the shopping cart, so the icon to get is the action, not the cart.
I would personally separate the content from the action, emphasizing the action in each icon.
If someone would have presented me the designs above I would have guessed that the previous design was the new one.
Here is why:
On payment method screen, the cvv input has a clear connection to the payment method 'credit card'. This is crucial since not everybody might understand what the cvv is if it is not somehow in connection with the credit card.
There's a fourth option:
Shopping cart Modal Window
It's an optimal solution for both desktop and mobile
By having an independent scroll bar allows to view the total amount of items in the purchase keeping the same window height
It doesn't leave the current purchase page
Allows to include all the possible actions of a shopping cart in the window itself: ...
While I agree with New Alexandria re: run some testing, but if you want to just get something out - by default I see most carts organized by order of added items - first item at top > most recent added at bottom.
If you want to give the customer reassurance that something was added to cart, I would suggest exploring Toast messages and animation of your ...
probably any answer to this question will be inaccurate or overgeneralized. Specific individuals often use, and value, a shopping cart's contents in different ways.. They will make different assumptions. What is a 'correct' and 'natural' sort order for one person will seem broken to another.
You'll lose people from a marketing funnel, and a data analyst ...