Do I need to show prices at this level?

[UpstateLeafPeeper]

Hello. I am designing a product catalog for my e-commerce site. On this page, on the left-hand side there is a menu of categories…

Categories:

• Books
• Magazines
• Music
• DVDs
• Misc

And on the right-hand side, is a listing of products in the chosen category.

For each listing, there is a product thumbnail and then summary information like…

Don’t Make Me Think
by Steve Krug
Jan 2014

Steve Krug’s guide helps designers understand the principles of intuitive navigation and intuitive information design. Witty, commonsensical, and eminently practical. It’s one of the best-loved and most recommended books on this subject… (more)

Would leaving the available book formats and pricing details for the Product Details page be annoying to customers?

I’m not trying to be secretive, however, I fear that putting the available book formats and pricing details will clutter up this page, which is simply a listing of all products in a given category.

My initial impressions were that these specifics would be better suited on the Product Details page, since there is where a person will actually choose the given product/format/size/color/etc and then (hopefully) choose “Add to Cart”.

Thoughts?

[bwclovis]

Oh MAN can I speak on this one, lol.

We had a redesign/ re-arch recently. At the time it was decided that prices would not be shown on any page until the customer entered there address and we localized them, even though we had segmentation abilities. We built the entire architecture around “no price till loclaize” with localization being the only true entry point into the shop area… guess what… no bueno.

So now we’re tasked with the issue of how to make it work by showing prices before localization (not as easy as it might sound since we didn’t set it up this way). What I’m saying is, a muti-billion dollar corporation found what a hand full of us knew going in, people want to see prices.

I’d probably do something like this:
Product Card Wireframe

[UpstateLeafPeeper]

@bwclovis

Oh MAN can I speak on this one, lol.

@bwclovis

We had a redesign/ re-arch recently. At the time it was decided that prices would not be shown on any page until the customer entered there address and we localized them, even though we had segmentation abilities. We built the entire architecture around “no price till loclaize” with localization being the only true entry point into the shop area… guess what… no bueno.

Where are you located at? And where all do you sell to?

@bwclovis

So now we’re tasked with the issue of how to make it work by showing prices before localization (not as easy as it might sound since we didn’t set it up this way). What I’m saying is, a muti-billion dollar corporation found what a hand full of us knew going in, people want to see prices.

Often the best way to learn how NOT to do things is to follow multi-billon dollar corporations!!

When I look at sites like Amazon and Barnes & Noble, they have prices, but I feel like both sites look cluttered - especially Amazon.

For me, I would never buy anything unless I drill-down to the product details page, which is where I had originally planned on spelling out the various formats a product is offered in (e.g. online, print, etc) and then spell out the pricing there.

But on second thought, I can see where people want to know prices immediately - although in my case, almost all books are the same price and thus it doesn’t seem like as big of a deal.

Attached are some mockups I did last night in LibreOffice. How does my basic presentation of the price look on the product catalog search results page?

z_Product Catalog samples.pdf (1.4 MB)

Also, related to my original question - and your comments - what should I do as far as navigation from the Product catalog to the Product Details page?

It seems like most e-commerce sites have an “Add to Cart” button in the Product Catalog search results, but again, I prefer not to do that as it clutters things up. (Since I am dabbling with responsive design on these last few pages, I am trying to streamline them as much as possible for mobile users.)

Again, for me, I would never buy something without researching the specifics on the Product Details page. And so in the sample attached above, I am assuming that people realize they can click on the book title to drill down, or they can click on the product image to drill down, and I also added in a slight clue by adding a “(more…)” link at the end of the product description.

What do you think about that?

[bwclovis]

Kay, you do you then. You can feel free to ignore months of analytic data for free.

Remember… your not building an experience “for you”, its for your hopeful customers, best of luck.

[coothead]

@bwclovis

I’d probably do something like this:

That’s a lot of code which also has a responsive issue…

Here is a simplified version…

Product Card Wireframe v2

coothead

[bwclovis]

Sigh… every forum has someone.

1. The image service has a fixed height width so of course it’s not responsive, wasnt even trying to make it that way.
2. If you can explain why I might have an image container, feel free to explain.
3. You provided a one trick pony, I provided an extendable, reusable component. If you can’t see/ understand the benefit of how I did my code, perhaps asking rather than saying “oh it’s a lot of code” would provide you a lesson in why I did what I did.
4. I can’t tell you how bad an idea it is to just style tags in a large… or frankly any application.

Again, my advice, take it or leave it. The only thing that bothers me is some of the advice being put out there is incorrect, best of luck.

[coothead]

@bwclovis

You provided a one trick pony, I provided
an extendable, reusable component…

I think that you might find that my one trick pony has,
by it’s lack of complexity, simply deceived your eyes.

An Extendable, Reusable Product Wireframe

coothead

[bwclovis]

Umm… no its not… How about if I wanted the image next to the text, or the text all one line. Sorry but, I really dont think I can be any help if your answer is “but mine is simpler” without understanding the whys of the complexity. Again, best of luck.

[coothead]

Hi there bwclovis,

How about if I wanted the image next to the text…

So, you want to move the goalposts now?

Whilst you’re waiting for a possible response to the “what if” game
you might like to cast your optics over these…

1. The image service has a fixed height width so of course it’s
not responsive, wasn’t even trying to make it that way.

img {
    display: block;
    width: 100%;
    height: auto;
 }

…will take care of that.

2. If you can explain why I might have an image container,
feel free to explain.

I have no idea why you might have an image container.
Could it be that you are suffering from Divitis.

4. I can’t tell you how bad an idea it is to just style tags…

In that case, to convince me, and others who may not see any
good reason to slap class attributes on every HTML element,
can you please give us links to the source of your assertions.

And finally…

The image next to the text

coothead

[UpstateLeafPeeper]

@bwclovis

Kay, you do you then. You can feel free to ignore months of analytic data for free.

Who is Kay?

Who are you talking to? Hopefully not me…

@bwclovis

Remember… your not building an experience “for you”, its for your hopeful customers, best of luck.

I said that I can see why you chose to add pricing info up front, so I was agreeing with you…

I also explained why i originally wasn’t sure if i should do this.

And I posted some mockups that did exactly what you suggested.

Sure hope the mods deleted a posted before yours, because I’m not following your response to me…

[UpstateLeafPeeper]

@bwclovis

Sigh… every forum has someone.

1. The image service has a fixed height width so of course it’s not responsive, wasnt even trying to make it that way.
2. If you can explain why I might have an image container, feel free to explain.
3. You provided a one trick pony, I provided an extendable, reusable component. If you can’t see/ understand the benefit of how I did my code, perhaps asking rather than saying “oh it’s a lot of code” would provide you a lesson in why I did what I did.
4. I can’t tell you how bad an idea it is to just style tags in a large… or frankly any application.

Again, my advice, take it or leave it. The only thing that bothers me is some of the advice being put out there is incorrect, best of luck.

How did my nice thread get all messed up?

@bwclovis, above you seem frustrated with me. And now this thread has taken a detour with an argument started about coding approaches.

Rewind…

I asked if I need to add pricing details to the Product Catalog search results. (Later I asked about the need for an “Add to Cart” button.)

Above I said my initial thoughts were to leave these out as they clutter things up. But then I came up with a minimalistic pproach to at elast add the pricing up front - which is what @bwclovis was recommending.

I was not asking about how to code things.

Where did all of this “tension” come from, people?

[UpstateLeafPeeper]

@bwclovis

Kay, you do you then. You can feel free to ignore months of analytic data for free.

Remember… your not building an experience “for you”, its for your hopeful customers, best of luck.

@bwclovis,

Are we still not speaking?

Considering that I made a mockup applying your advice, I’m not sure what else you expect? Of course, as I alluded to above, maybe you weren’t responding to me, so I’m worried about nothing…