B2B Portal Matrix section interface design.

started a topic over 3 years ago

I have not spent a lot of time with the B2B portal yet. It seems solid and I'm looking forward to a long and productive relationship with it. The more my customers can self server the better. I have more time to do other things.  :-)

I have let a few customers in there so far and one kind of surprising feedback I get is that 'it is broken' and does not work?  Talking it through over the phone it turns out that after clicking on the image of a product family (books in our case, soft and hard cover) they don't know what to do next.  One user was clicking on the green "ADD TO CART" button and stating that nothing happened. This person had not entered any number for the order.

I remember when I first saw the Matrix section and I think even I looked at it and wondered what to do next. We deal with booksellers and the concept of a product matrix is foreign to them. That would not be a serious problem if it were not for the fact the the interface design is not helpful. The fields where data should be entered are so faint that they are not recognisable. It is not clear that the headings above and beside the data entry fields are headings at all. There is no divider and there is no clarity as to what they pertain to. For some users it is perplexing. Once you work it out or are told it is of course easy and you may wonder how anyone could be so stupid but there you go.

This interface could really do with a professional interface designer's input. Would be sorted really quickly. About 60% of the people I show this to just don't get it.  Please see example screenshot attached.

The "LIST" view is much more familiar to my customers and as such much more intuitive. I wish I could have the portal default to this view and even go as far as to make the "MATRIX" view able to be disabled. Probably best to make all these views optional via radio buttons in the preferences. The spoiler for the "LIST" view is the fact that the icons under "IMAGE" look like generic missing image or broken link icons.  I thought that was what they were and put a call into support asking where the images were sourced from. The first support person had the same impression as me. It just looks broken and makes me wince every time I look at it. This aspect needs the input of an interface designer as well. Personally I'd just delete it till a more effective means of representing the product can be found. I understand an icon at that size would be useless.

With these issues successfully addressed it would be a much improved user experience.



8 people like this idea
  • This has been a consistent issue for our team, as well. It's very confusing for customers, and unfortunately for looks entirely unprofessional. 

    I can't figure out where the broken images are sourced from, and wish that I could get to the bottom of fixing it so our customer could have a more positive user experience. 

    This is one of the many reasons that we are considering migrating our B2B purchasing portal to WooCommerce. 

  •  Danae,
    You made the same mistake I did.  The images are sourced from either the product or family image.  Not sure which as I have images in both places.  The broken image link icon is not that at all.  Just a really poor choice of icon. When you have the images in place you need to roll over the icon and a large version of the image will pop up. It's not broken except in an interface design sense. It works as intended but it is the opposite of intuitive.  That icon is never replaced with a thumbnail which is what 999 people in 1000 would assume.


    1 person likes this
  • Hi Mark, 

    Appreciate your response here. Unfortunately, us understanding that the image link isn't broken doesn't make this more intuitive for our customers, and we're still hoping to optimize their shopping experience as much as possible.

    The lack of intuitive design for product family displays in the B2B is something I would love the development team to seriously consider. Things that have been named in other comment threads include: 

    • "broken" image links that only display when hovered over;
    • the product family description overriding the individual product descriptions (and those descriptions not being available when viewing the product families);
    • and the matrix display / product selection process being counter-intuitive (very different from how many e-commerce sites enable customers to select product variants from drop-down menus). 
    We're really looking forward to a more user-friendly design! DEAR is off to a great start with this integration, but it needs to be more robust to fully suit our customer's needs. 

    1 person likes this
  •  Danae,
    I totally agree with everything you say.  The B2B portal is really, really bad from a usability/interface design perspective. I strongly urge Dear to employ an interface design specialist and aim them at all their interfaces but start with B2B.   I have worked at a number of places producing web content/systems and most of them think because they can build a technically descent system that is all there is to it. The last place I worked at employed specialists for interface design and you soon learn to respect them. Would not cost much.  The B2B portal is relatively simple.
    While I am at it what is with the green tick acting as a save button in the latest Dear Inventory interface makeover? I just don't get it. Is there a difference between them?  If so what is it?  Don't get me started...   I don't have time now to go into it...  So many weirdnesses and so little time to document.  :-(



  • Mark, going back to your original request, i would like to add to it:

    • Matrix: this view is not needed at all, don't even know why it exists. The List view is more than adequate
    • List: needs to add Additional Attributes for product families for each variant. Unfortunately Additional Attributes are lost for Product families, despite being available for individual Products. The List view could have a simple table view with a column for each AA (with AA name in the header), the list of SKUs down the left side in row format, and the AA data for each SKU populated in the table

  • May I just correct myself there: I'm just looking at a product with more than 1 variable and I can see now that it does work better in Matrix mode.. however this should still be quite simply incorporated into 1 universal view which suits Product families with 1 or multiple variables

  • It is only in the past few months that I have had to deal with inventory management systems, and their relationships with e-commerce sites and shipping apps.  I keep running into issues which make me wonder and to be frank seem headbuttingly stupid. Sometimes they are stupid but at other times I can see that different products and different workflows have different requirements and mine may be niche. I can only speak for my applications and needs. I can see that, say clothing, would probably make good use of the Matrix view but for me and books where I have only hard and soft cover variants it does not make sense to me and confuses the hell out of bookshops/book resellers (my customers). Therefore my general suggestion would be to make is as user configurable as possible. I don't need or want to expose my customers to Matrix view. They complain that the site is actually broken because for them it is counter intuitive and unusable without guidance.   This is really bad. 
    I don't know what would work best even for me. I can see it is broken but hesitate to suggest specific solutions. In work I have done in the web area in the past the solution was to hire an interface design/usability specialist.  They can see the problems and quickly suggest solutions. I can't stress this enough.

    1 person likes this
  • Please allow us to choose either List or Matrix view. If you only have variants and the Matrix view is the default it looks like there are no products in the Family!!

  •  See also Product Families on the B2B Portal (

  • We agree.  The matrix view is really of no use, especially since it's hard to understand what to do with that feature.  Plus it ties into the product family setup which is its own beast.  Turning off the matrix view is our preference as well.  Right now,  it adds confusion on the portal and we want to keep things simple from a user experience perspective.  Please consider working on this request for your customers.  In conclusion, we concur with Mark "The "LIST" view is much more familiar to my customers and as such much more intuitive. I wish I could have the portal default to this view and even go as far as to make the "MATRIX" view able to be disabled."

  • There are two fundamental issues with the B2B's default layout.

    1. List view is far superior to Matrix view. ALL of my retailers have said how confusing matrix view is and I have had to do a demo video on how to select the view, which is obviously far from ideal, a B2B needs to be intuitive. Easiest solution, allow us to select which is the default view.

    2. SKU's should be shown as default and products should have the ability to be listed in SKU order, i.e. AV001, AV002, AV003. 
    Prices should also be shown as default, as on variable range price items, the user cannot see the price of each product until they select a quantity. 
    For anyone needing a work around I have added the SKU to the "Product Family Option 1 Name” as per the attached, which is far from ideal but as you can see, much more user friendly than the matrix view.

    This is such a basic feature to implement. Come on DEV Team, a 2 year request for basic features needs to be acted upon.

  • good idea

Login or Signup to post a comment

8 people like this idea
Log in or Sign up to post a comment