Add indicator to shopping cart in Venia header

[ericerway]

This issue is for the following packages:

[X] venia-concept [ ] pwa-buildpack [ ] peregrine [ ] pwa-module [ ] pwa-devdocs

Description

As a shopper, I want to know if I have items in my Venia shopping cart for purchase so that I know what to do next as a shopper online.

(insert updated design here)

Assumptions

• Working shopping cart; ability to capture # of items (backend) for future consideration

Tasks

• [ ] Update Venia header with stateless shopping cart (empty)
• [ ] Update Venia header with shopping cart filled with >1 item (indicator)
• [ ] Review, test and UAT updated shopping cart across states
• [ ] Update documentation (as appropriate)

[ericerway]

Updated post-grooming and assigned to @ennostuurman -- @soumya-ashok can fast follow with any updates when she has time to reflect an indicator vs. counter approach. Thanks!

[ennostuurman]

hi @soumya-ashok

I did development on this issue today and it's technically almost ready, I only need to write some additional unit tests and do the layout.

Functionality: In this solution the cart indicator will show number of items in the cart, i.e. 1x product A + 2 x product B = 3, in case of an empty cart the counter will not be visible.

Can you confirm the above is correct functionality?

Layout There's a discrepancy right now between the used header cart icon , see screenprint, and the designs as per the Venia documentation, see https://magento-research.github.io/pwa-studio/venia-pwa-concept/component/header/ .

Can you confirm what is the preferred layout for this component / functionality?

Thank you.

---

Current cart icon Venia theme:

Layout as per documentation:

[soumya-ashok]

@ennostuurman The documentation needs to be updated. @jimbo and I would like to remove the counter altogether, use an outline cart icon for when the cart is empty, and a filled icon for when there is one item or more in the cart. The color for both versions of the icon would be #212121

Please let me know if you have questions.

[ennostuurman]

@soumya-ashok thank you I adjusted my previous changes accordingly and issued PR ^^ .

Screenprint cart icon empty cart:

Screenprint cart icon filled cart:

[brendanfalkowski]

I think this might be too subtle an idea for the real world. I'd bet 80% of people could not guess whether the cart is empty/full just from seeing the outline vs solid state. Whereas a counter leaves no question.

In a client's backlog, I actually have a ticket to make the counter even more prominent based on customer feedback that it's hard to read on small screens.

The current button:

Is changing to this:

It's minimal and functional having a counter. From an implementor's perspective, I think the solid/outline idea is something I would always end up changing.

[ennostuurman]

hey @brendanfalkowski thanks for chiming in! I agree with you and a visible counter was the original setup. But I'll leave this decision up to @soumya-ashok .

Just out of interest, what quantity do you use for the counter count? In the example you provided, the counter displays 22 items in cart. Is that total (different) products in cart or total of ordered items?

[soumya-ashok]

@brendanfalkowski and @ennostuurman - Thank you both for the feedback. The decision to leave the counter out is a temporary one because we are trying to work through some issues with the original ideas we were considering. I'll share the details here, and your feedback is welcome.

Design 1:

Here, the cart icon needs to be made smaller than all the other icons to keep the badge the same height as the other icons in the header.

Design 2:

Here, the cart icon can remain the same size as the rest of the header icons, but adding a number to it will shift the position over and change the spacing between that and the search icon.

@brendanfalkowski - would you mind sharing the entire header from your screenshot above?

• Are you starting with a fixed width for the cart badge?
• What is the maximum number of items you would list next to the cart icon before notating that there are more than X number? For example: 99+

[supernova-at]

What is the maximum number of items you would list next to the cart icon before notating that there are more than X number? For example: 99+

This is what I was going to comment on. While perhaps a cart with 99+ items in it is a relative rarity, deciding a "breaking" point like this is a great idea, lest our number completely overpower our icon or just look bad.

My initial thought was a notification indicator with no numbers could suffice, but that's likely not the case.

I found this discussion to have some useful ideas in it, specifically that the following is sometimes useful information:

e.g. linkedIn shows me a 3 pending connections ... when I look some time later, I see that ... the number has increased to 4

Admittedly in our case though, the number will only increase via explicit user interaction (adding things to cart).

[brendanfalkowski]

@soumya-ashok — The site is https://ne.carrierenterprise.com.

Wide screen:

Narrow screen:

I would follow design 2, but increasing the font-size further. Given the choice between highlighting the state (empty/full) and the count (value), I'd probably always argue for the quantitative use of the UI space.

@ennostuurman — I've had that debate :) and always argue for displaying "total units" not "unique items" because if I place 3 didgeridoos in my cart, and the cart says 1 that can be confusing where 3 would probably never be confusing.

[soumya-ashok]

@ennostuurman For your question regarding the number of items, the way you have it listed is how I assumed it would function. The actual total number of items regardless of the "type".

[soumya-ashok]

@brendanfalkowski Agree with you on the count being of higher importance. Will tweak the element based on this discussion.

@supernova-at For a B2C retail site example like Venia 99+ would be a rarity, but may not be in a B2B context. We don't have to worry about that for now. I was curious about the upper bound because it impacts the space occupied by the counter. Thanks for the feedback!

[soumya-ashok]

@ennostuurman Let's go ahead and use the below treatment for the cart. The image shows the following states:

1. No items
2. 1-10 items
3. More than 10 items

@ericerway As an enhancement, I'd like to explore adding an animation in the following cases to call attention to the cart:

• When an item is added to the cart
• When the shopper returns to the session after a time interval

Will discuss the animation layer with @jimbo when we're ready to add this in.

[brendanfalkowski]

@soumya-ashok — Looks really good 👍 I'm not sold on the threshold idea the more I see it.

Most of my work is B2B, and they do have 1000 item orders but it's always in the user's interest to see an accurate summation of their cart volume as a sanity check.

There's easily room in the UI for 4 digits, and with a threshold you trade a usable character for the + sign so it's not ever saving space (actually consumes more).

I'm sure there's a psychology study showing a high count subtly dissuades checkout, but showing an accurate number there helps reinforce the mental model for their cart.

FWIW, I would probably remove the ceiling in B2B projects, but Amazon does 99+ so all-in-all that seems like a better default.

[soumya-ashok]

@brendanfalkowski thanks! I agree that a + is less meaningful than an actual number and if we can show 10+ we can probably show up to 99 without using the +.

Appreciate the additional context on B2B. Since my knowledge of that realm is limited, does the number of items in the cart in a B2B scenario impact buying decisions? I would assume that those purchasers are very used to seeing high numbers in the cart and it would be the price for a bundle or unit of a specific type of item that would govern the decision to add it to the cart in the first place.

[brendanfalkowski]

@soumya-ashok — I'm most familiar with B2B selling as a distributor, which roughly means they have three types of buyers.

1. A small company where the buyers is also quoting/installing a specific "job" they're doing for their customer.
2. A mid-size company where the buyer is an entire role, and they're sourcing materials for many jobs constantly.
3. A large company where the buyer is stocking the company's own warehouse/inventory channel so individual jobs avoid buying behaviors entirely and save time.

Prices for industrial goods are generally competitive/interchangeable and instead are chosen based on the required efficiency/durability of the job. Buyers might have brand loyalty, but they're buying to spec not shopping for value/emotion. There might only be 1 or 2 items with that exact spec/cost, so they just buy it. Actual price is often irrelevant too because it's just passed to the end-customer with a fixed markup.

It's not the norm (most order under 20 items), but there are regularly orders with hundreds of line items. In that context, a buyer wouldn't be phased by the sums. For restocking orders they're just topping up a spreadsheet.

[ennostuurman]

@brendanfalkowski thanks for the detailed answers. :+1: It certainly helped my understanding of cart counters. Displaying "total units" seems the most logical approach both for B2C and B2B in terms of clarity and sanity check.

@soumya-ashok thanks for picking up the discussion, interesting to see how much rationale there can be behind a seemingly obvious UI detail. I have some additional questions:

1) Looking at the previous discussion it looks like we're abandoning the 10+ approach and instead will always show "total units"?

2) Referring to your previous comment about animations:

• "When an item is added to the cart" In the current setup an animation won't be visible as the mini cart is opened instantly after an item is added to the cart and overlaps the header with mini cart icon both on desktop and mobile, see desktop screenprint.

• "When the shopper returns to the session after a time interval" . In default state the mini cart is closed so an animation on the mini cart icon or counter will be visible. Another option I was thinking about is that we could open the mini cart panel again after repeat visit *) This requires an extra click / tap in case the user want to continue shopping, but at least they've seen what's still in their cart and in the case the user only wants to checkout it saves an extra click. So in both cases we have increased cart visibility and most likely increased conversion in the latter. But these are just personal thoughts not backed by any true UX research;-)

*) We need to define what returning to a session means, is that returning to an open session after x time, or returning after a session is closed, or both?

[soumya-ashok]

@brendanfalkowski Appreciate the detailed response, I understand the B2B context and persona better now.

@ennostuurman

1. Yes, we can go with an actual number on the counter.

2. On the topic of animation, the shopping cart is actually not supposed to automatically open when an item is added during an active session. The original intent was to have the counter update and a toast display with the message "item added to cart". The shopper needs confirmation that the action was successful but I find that automatically opening the cart in a mobile context takes over the screen and is quite a jarring interaction - this would be addressed by the toast. I feel like opening up the cart and constantly urging the user to checkout does interrupt their shopping flow, especially if they already intend to add multiple items to the cart. We have not been able to perform any quantitative validation on this but the small sample set of people we have interviewed had similar opinions. I'll see if I can find secondary research that supports or disagrees with this.

However, opening up the cart automatically when the user returns to the session after a gap could be a good way to call attention to the status of their cart since the indicator would be quite subtle if it happened just on the cart icon.

And yes, we do need to define what "returning to a session" means and how long we persist cart status. Some sites like Asos let you know when you add an item to the cart that they will "hold" it for an hour. I find this useful but not sure what the level of effort involved in implementing a feature like this is.

[ennostuurman]

@soumya-ashok

• I updated PR #https://github.com/magento-research/pwa-studio/pull/664 according to the designs in https://github.com/magento-research/pwa-studio/issues/617#issuecomment-447493564 .
• the counter reflects the total number of items in the cart
• as discussed instead of the 99+ we will always show the real qty , see attached screen prints the layout is now even fool proof for 9999 items ;-)

@ericerway

As soon as above change has been approved I would like to continue with next mini cart improvements

• changing the current mini cart panel behaviour, the panel now opens automatically after an item is added to the cart, this is not a desirable effect, see Soumya's comment in this ticket https://github.com/magento-research/pwa-studio/issues/617#issuecomment-448216969 .
• I am missing functionality to be able to click and navigate to the products in cart

Looks like there are no issues created yet for the above items, see https://github.com/magento-research/pwa-studio/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+minicart . I can create them if you agree that these are issues ;-)

[soumya-ashok]

@ennostuurman Thank you for the work, looks great! There's just one thing that may have been missed. I believe we decided on an outline cart icon when there are no items in the cart and this would switch to a filled icon with a number when at least one item is added.

[ennostuurman]

@soumya-ashok thank you, that was my first impression too however looking at the designs here https://github.com/magento-research/pwa-studio/issues/617#issuecomment-447493564 the empty cart is also filled.

However if you feel an outline cart for no items in cart is better from UX POV, I can change this as yet.

[soumya-ashok]

@ennostuurman The design initially did have a filled icon because the outline version wasn't in the library I was using, but it is now. Here is an example of the outline icon - https://magento.invisionapp.com/share/8ZPPEYD7BGS

I do think the outline icon to indicate an empty cart works better than a filled one.

[ennostuurman]

hi @soumya-ashok, thank you for the confirmation.

I updated PR #664 to show the shopping cart icon with an outline layout when the cart is empty , see screenprint.

[supernova-at]

Closed by #664.