1

How to distinguish 'Add to basket' from 'Add to anything else'

over 8 years ago from , Co-Founder at zero.london

Hi guys, I'm doing some research to try to identify something that would help us to create a better UX distinguishing, on a social market platform, the action 'Add to basket' from 'Add to something', and it would be good to get some suggestions from the community. To give you some scenarios, Pinterest, for example, got the 'pin icon' to add something into a collection, some other site got a 'star icon' to add to a list. What would be a rational and solid visual solution to distinguish those actions? Thank you.

5 comments

  • Malte NuhnMalte Nuhn, over 8 years ago (edited over 8 years ago )
    • I feel that adding something to a basket is the one action that's pretty universally denoted by a shopping basket icon.

    • "Starring" or "hearting" something seems to have become the default action for "favouriting" (Safari, Chrome, Pinterest, eBay, Photos on iOS, Inbox, Sparrow, Google Maps). I think the convention is that there's no subsequent user intervention / choice (like "adding to a list").

    • Not looked at it in detail, but I feel actions that add something to a list with user intervention, or have a more specific outcome than favouriting typically have an explicit verbal call to action ("I'm going" for events on Facebook, "Want answers" for Quora).

    FWIW I think Spotify made a mistake replacing the Star with the "Plus" for that reason: "plus" doesn't give me agency but feels like it should...

    0 points
    • Giovanni Luperti, over 8 years ago

      Thanks a lot Malte for sharing your opinion.

      It's a tricky one also because I need to create consistency across platforms and screen sizes (from big desktops - where would be ok go with a verbal CTA - to small screens or native apps - where the flaxibility is much less).

      The basket icon is yes solid for an 'Add to Basket' action, but the confusion would come when you don't have just the '+' on a tile that is referring to 'Add to Collection' rather than 'Add to Basket'.

      Probably would be easier if I try to represent the 'collect' action and not the 'add to' action. But again, not easy, as most of the platforms out there are using the 'add to' behaviour applied to different scenarios and just few (so far on Fancy) have both 'Add to Basket' and 'Add to something'.

      If you have more thoughts please feel free to share.

      Thanks again!

      0 points
      • Malte NuhnMalte Nuhn, over 8 years ago

        Ok, I'm confused now :) Is this right: - you have two buttons, one to 'add to collection', and one to 'add to basket' - you're worried users won't understand the difference - you're worried that users will think '+' also adds something to a basket?

        If that's the problem, I'd seriously consider labeling the '+' action explicitly. I.e. "+ Add to collection"

        I understand it gets in the way of the design for small screens, so maybe you have an Inbox-style pop-over on the '+' that gives users different options to select from, with enough space for labels.. I suspect that the extra tap is worth the reduction in confusion.

        You could even have the 'add to basket' option in that pop-up.

        On a larger screen, you'd simply show both without the pop-up.

        But I'm really just guessing / back-seat designing now, without understanding the problem-set further :)

        0 points
        • Giovanni Luperti, over 8 years ago (edited over 8 years ago )

          Thanks again Malte!

          you have two buttons, one to 'add to collection', and one to 'add to basket' - you're worried users won't understand the difference - you're worried that users will think '+' also adds something to a basket?

          This is exactly it! :)

          Have a look at this if you get chance, to get a better understanding of the scenario: https://dribbble.com/shots/1896006-Shopa-Product-Tile?list=users&offset=2

          An user see the 'add' feature just when on hover (clicking on the tile and going to the product page when from mobile). The space is tiny and probably so far the '+' would be the best solution to go with, assuming the you wouldn't add anything into the basket from a product tile, if you don't see further details on the product (including size and other related variations).

          0 points
          • Malte NuhnMalte Nuhn, over 8 years ago

            Ah, ok.

            • I agree that "add to basket" can and should exist on the product detail view.

            • IMO the 'heart' and '+' are competing. Unless creating lists is VITAL for your application (like Pinterest's boards), I'd suggest making the 'heart' (or 'star') the main call to action, and develop a separate feature for then managing those 'favourites'. We did this at Artfinder; about 8-10% of our users used it. The rest were happy with one list / board / page of 'starred' items.

            In any event, curious to see what you decide on. And what metrics you get on the other side of the deployment. Always better to settle this kind of stuff with cold hard numbers ;)

            0 points