I've come across this interesting problem with an app I'm designing. On the mobile dashboard, the user will have a footer menu with a "shopping" menu option. Right now I have it set to use the same "shopping cart" icon as the cart, which is located in the upper right corner.

The best solution I've come up with is using a "bag" icon for the shopping and keeping the "cart" icon for the cart.

How would you solve this? I'm not a fan of the bag icon, so I'm open to all suggestions. Do you think the average user is going to recognize the bag icon and think "shopping"?

enter image description here

enter image description here

  • 2
    The two buttons lead to different pages correct? Generally you do not want to use the same icon for two different actions. – Brandon Alexander Harwood Jul 20 '18 at 18:58
  • Cart Vs Bag? Go with a bag and use the same notification pattern as cart so users will know they have 1 item in their bag. It will be engaging and will make the user feel good about a different experience. Generally, users are fed up of seeing the same cart icon everywhere :) – DPS Jul 20 '18 at 20:33
  • Im voting down. Its in community guidlines to avoid this sort of questions. – xul Sep 19 '18 at 7:56

In my opinion, shopping bag icon for going back to shopping is actually perfect, as well as shopping cart icon is perfect for...well, shopping cart. I am a big fan of shopping apps (mainly clothing and food) and those icons are pretty much the 2 icons are always used.

It also depends what the shop is for (in food apps, they will often have an icon of food item, like a tomato, or their logo as their 'shopping' link. If it's clothing, tag or hanger icons. If it's video games, a gaming controller/joystick, etc.

If in doubt, you could try shopping tag for going back to shopping icon:

enter image description here

Hope this helps.

  • I forgot about the tag! This is might be the best option. I also like the idea of using items as a shopping icon. The app is for clothing, so maybe a shirt icon could work... I'll play around with it. Thanks! – Zach Ward Jul 24 '18 at 20:28
  • no worries. glad it's helped – aly.i.ux Jul 24 '18 at 21:40

This is a quite common pattern. The basic idea is:

  • you have a main action (shopping) that has sub-actions
  • action has a boolean status (active/inactive) as the result of such sub-actions
  • you need to notify the user that something has changed as a result of performing a sub-action of such action

With this in mind, we can easily define a visualization

See the image below:

enter image description here

The first two are based on the old iOS interaction guidelines for quicker visual understanding (they have changed now to full icons with color, but for explanation sake I think is easier with line/filled):

  1. line icon (default)
  2. filled icon (active)

So, as long as we keep icons consistent, users may find relatively easy to notice that something has changed.

However, it's not enough. It's better to add some context as you already did in your mockup, do we'll add the number of elements that have changed.

From here, I think we are covered on the notification part. Now... do we use this on the top bar, the tab bar or a combination of both? This is something you should decide based on testing. But for reference:

  • if you want to go the "tab bar only route", you could use the approach I'm showing in the image.
  • else, you should use 2 DIFFERENT ICONS, and notification should probably be on top (again, test)
    • in this case, whether you use a bag or cart or tag or whatever icon should be based on... yeah you got it: testing!
  • an alternative option could be to move everything shopping (including wishlist inside shopping) to the top and have a dedicated CTA on the top bar, but this will require some re-architecture, so just mentioning it here
  • If you're suggesting that the shopping icon can be both the cart and a shopping page, I'm not sure I agree, but It is something I will definitely be doing user testing for. My thought is, the user would like to know whats in their cart without having to click on a shopping icon, and then navigating to their cart. Keeping these separate could also push the user to finally make the purchase, instead of letting items sit in their cart forever. – Zach Ward Jul 24 '18 at 20:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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