Am working on a B2B browse page for m-site and App and was confused w.r.t. design of the same.

The issue that am facing is that on the browse page I want to enable choosing multiple SKUs together and show them on a single Product page.

For instance, If we have 100 options in a category, in case of a B2C website its fine to let users just click on one options they like and checkout whereas in case of B2B users want to complete an assortment , for example 10 options out of 100. So I need to enable this on the Browse page and product page.

Current option I am exploring is to give a button called "Select" below each option and than give the link below the screen to take users to Selected items.

Are there any best practices for such browse page or product page ?

  • I know what B2B and B2C are but what is SKU? Also if you can add images of what you have already, that would help. Jan 26 '17 at 11:57
  • "SKU" is the usual term for "stock number".
    – MMacD
    Jan 26 '17 at 13:03
  • Hi , by SKU I meant individual styles here (For example, If I have 300 styles of watches , I would display all of them on Browse page). I will have images, prices etc.In B2C, user would click on the one he likes but in B2B someone may just want to select 30-40 styles. Going to and Fro from Browse page to Product page to make this 30-40 choice is wierd.
    – Arun P
    Jan 27 '17 at 3:19

The conventional way is to provide a checkbox by each item to be selected and a single button ("select checked items") to pull them together. The same convention applies regardless of what the items are (goods to be ordered/returned, library books to be reserved/loan-extended, etc) or how (text, graphics, mixed) they're displayed.

  • NEVER ask for information you already have, or can figure out (it's infuriating, as you may know from your own experience).

  • No matter how much roaming around the customer does, do not lose any information. (This happens more often than you'd think, and it's so aversive that the customer often leaves and never returns)

  • Consider dividing the screen into 3 horizontal bands: the top quarter with a description of the order process for novices and how far along the customer is in the process; the middle half for order-building; the bottom quarter for detailed state information (items, quantities, running subtotal of cost, etc). It needn't be 1/4-1/2-1/4, it could be 1/5-3/5-1/5 or any other proportion, but organised as process description, order building, state summary.

  • Offer non-novices a list of their previous orders and the opportunity to simply repeat one of them, or use it as the basis for the current order. Of course this only makes sense if you're selling to people, e.g. retail grocers, who are likely to place repeat orders.

  • Use thumbnails (if that makes sense) and text to identify items on the "select items" page.

  • If your inventory is large enough and diverse enough, allow people to choose and sort subsets to be displayed on the "select items" page. People usually don't remember full details, so they might spend a lot of frustrating time trying to find some item because you don't have the items sorted in a way that's useful to them.

  • Offer the opportunity to do everything on the "select items" page, if possible (show prices, allow quantities to be selected, etc). Non-novices will appreciate that, if you make sure that you show changes from the last time they reviewed/ordered the items.

  • Always afford the ability to go to the individual-item page, where complete details about the item (sizes & quantities available, origin, ingredients, materials, etc) are provided.

  • Always afford ways to undo/redo choices made.

  • Always show changes from the previous visit, if there was a previous visit.

  • Thanks for the revert ! This is helpful and I considered this. From the viewpoint of making it intuitive for first time users , which of the below will be better : (a) Checkbox side by side each item and than displaying a button "Go to Checked Items" , or (b) Grey Select button side by side each item that changes color from grey to light blue and than have a single summary text for Example "5 products selected" below the page which is clickable . Or is there any better approach ? Idea is to make the experience as intuitive as possible for a first time user. Please suggest.
    – Arun P
    Jan 27 '17 at 3:30
  • @ArunP: What would you mean by "go to checked items"?
    – MMacD
    Jan 27 '17 at 13:30
  • Through this, I want to redirect users to a Multi Product page that has functionality to enter Qty of all products selected in last screen.
    – Arun P
    Jan 28 '17 at 15:11
  • @ArunP: Okay, understood. You mention that you're designing for novices. How much work are you willing to do to make the experience easy and non-threatening for them? I ask because, to novice users, EVERYTHING is difficult, confusing, and at least a bit threatening/frightening. You can make it easier for them, but it takes a lot of work. What I call the principle of Conservation of Obnoxiousness says that Someone Always Suffers. Either you suffer by making it easy for them, or they suffer because you don't :-) ...
    – MMacD
    Jan 28 '17 at 15:57
  • ... What makes the work harder is that novice users don't stay novice users. They quickly become experts and no longer want their hands held. So you have to design for that stage of their development too, and for every stage in between.
    – MMacD
    Jan 28 '17 at 15:59

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.