The current layout of our grid view is 5 Items and the description text is cramped. I did a mock up of 4 items per row and it gave the description more room to breathe.

Now my question is that if I go to 4 items per row, what would be the best practice on how many items to show per page. Current 5 items per row are increments of 15. enter image description hereenter image description here

  • can you share a mockup and give more context about the nature of items that you want to put in a row? – gurvinder372 Dec 28 '15 at 16:54
  • Added pictures - Red current Green future – Stephen Dec 28 '15 at 17:05
  • 2 out of 3 e-commerce sites I use (flipkart, paytm and snapdeal) show only three items per row. Snapdeal shows 4. – gurvinder372 Dec 28 '15 at 17:34
  • The problem I have with using less than 4 is that the pictures shown are the max size for the search results. For Snapdeal, what are your results per page increments? – Stephen Dec 28 '15 at 17:36
  • You can certainly put some horizontal margin between items. Items shouldn't get into each other space. – gurvinder372 Dec 28 '15 at 17:38

In short: You need to re-design the search results view ideally to improve the user experience.

I assume you need an ideal solution to increase the cells of your company (business goal) in an easiest way for your users (users' goal)?

Then it's not about the grid. It's about UX.

Consider a user is searching for a jig blade. The search results are non-usable: the user needs to explore the three pages of the same-looking images. And the descriptions are (almost) the same, as well!

The search task requires too much cognitive efforts. The efficiency, effectiveness, and users' satisfaction is low. The usability fails.

enter image description here


Compare how the manufacturer presents all the options on their site. A bit technical, but it's very clear for users, and it takes only 12 lines!
enter image description here

So changing the grid isn't the ideal solution at all.

As @filip has pointed in the comment, users need a mean for easy finding an item they need. Easy comparision could be done with sortable table. Though, it isn't the only way to improve the UX. And for search results which contain the items from the different categories, it's (probably) not the best one.

| improve this answer | |
  • 1
    I guess that in reality you wouldn't search for jig blade. You would search for something more specific like 'jig blade bosch t111c'. 'Jig blade' is a category and should be browsed as such. Then a table view might be a good solution because all items have the same comparable properties with corresponding headers. – filip Dec 29 '15 at 9:38
  • @filip there could be broad viriety of queries, and thinking in categories is a perfect shortcut for memory. Still, the answer remains the same: it's not about grid, it's about UX. And you had a perfect point in your comment: they need easy comparision tool. My formulation was less concise. – Alexey Kolchenko Dec 29 '15 at 10:25
  • 1
    The manufacturer sheet is efficient because it's specialized. The whole design is based on the images being very rectangular. Which is good, of course, but it also means this approach won't work for a more generic interface that uses square images. Edit: also, your red box of 'the same item' is incorrect. They're the same size blade but not the same size/type of teeth. – PixelSnader Dec 29 '15 at 13:28
  • @PixelSnader I don't call for using rectangular images, I've just shown the better option (though, it could be used). And my point is changing the grid (from 4 to 3 items per row) is wrong direction from UX point of view. Also the items in the red rectangle are DO the same from a user's point. The text is the same. No differences are specified in the search results, see the original view. – Alexey Kolchenko Dec 29 '15 at 14:27
  • Thanks for the input. The results I wasn't really talking about since I searched "ground" just to get a product result. We do have a list view but my question is solely on having a grid view. Although our search is an issue but that is due to the engine we are using. I just need help on the number of items per page if we stuck with 4 items per row. – Stephen Dec 29 '15 at 15:32

My suggestion for the grid view would be to present a photo of the item (in a square box in a row of 5, with a short caption that is sufficient to distinguish it from similar items) and then show the text description when you roll over the item.enter image description here

For jig blades, have them shown diagonally on the picture as then the blade is at the maximum magnification that it can be in a square box.

| improve this answer | |
  • For the blades, I'd have both a normal (maybe slightly angled) version, and a zoomed-in detail of 1 inch. That'll give better info about the type of jig. Teeth are listed as TPI, Teeth Per Inch, already. – PixelSnader Jan 5 '16 at 16:00
  • But putting TPI in the product description makes the user read all the descriptions as they look for what they need. A big image - or a separate line for TPI - would make the page more scannable. – Ken Mohnkern Jan 5 '16 at 16:02
  • I wasn't sure what the essential info was, but the descriptions in the original screenshot look too detailed and not easily scannable. Good idea about the zoomed-in screenshot. – Yvonne Aburrow Jan 5 '16 at 16:04
  • The image is the least useful differentiator between the different products here. They literally all look the same, so using it as the only thing the customer can base their visual scan on is a mistake. If the design needs more space to make the descriptions usable, then the design needs to use more space. – Racheet Jan 5 '16 at 16:42
  • That is true of the saw blades, but less so of the other products being displayed. My point about making the descriptions shorter was that they are TL;DR (too long, didn't read), not that they clutter up the design. – Yvonne Aburrow Jan 6 '16 at 11:09

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.