1

Some background: I have a large number of products that need to be presented like example below (3UP) and shifting by 3 each time (the layout and three at a time functionality is require). I am currently showing the number of products on the top left and the pages on the bottom. This is the best solution I have been able to come up with thus far.

Would love to hear your thoughts on the current implementation, something still feels "off" about this one.

enter image description here

  • can you specify a quantity for large number of products because 64 products could easily fit in a single vertical list of items – DaveAlger May 7 '15 at 18:10
  • Thanks for the reply! 64 is the example shown and would be pretty on par with the real thing. The client in this case requests this layout and pattern specifically so it really just comes down to the pagination pattern. (For example, in this case I am using the "Showing 1-3 of 64 Plans) which is the Yahoo Item Pagination pattern" for the nav on the top and a custom one I created for the bottom. But I'm not sure it would be intuitive for the end user – MrTDandy May 7 '15 at 18:12
  • 3
    i think the interface adds too much friction. you could replace all the paging with a scroll bar allowing a user to swipe left and right or even just read any swipe to the left "next 3" and swipe to the right "previous 3" though this will feel just as clunky as having to click and wait a bunch. – DaveAlger May 7 '15 at 18:40
  • 1
    This doesn't seem to be what you're looking at, but what seems "off" to me is that I can only see three products at a time. That means (a) I'm clicking "Next" a lot to page through the list to the product I want, (b) I have to click a lot of page numbers (1...22) to find the page I want, (c) I can do a quick comparison of only three at a time, (d) etc. – Ken Mohnkern May 7 '15 at 19:49
  • 1
    If you have large number of products, then what you have chosen (carousel view x3 per view) is not a recommended way to display the products. I would suggest to use normal page pagination and display at least 10 products per page. Also allow users to choose from drop down how many products per page they want to see. – Ades Jul 7 '15 at 4:33
1

The challenge here is that you are using a limited-view carousel for a full-on product catalog view. These are two somewhat contradictory things.

If it were just a carousel, I think what you have is fine.

But it looks like it's set up for users to filter, sort, and jump around. In those situations, seeing only 3 items at once isn't all that useful to a person. For example, odd are that sorting may not even change the first 3 shown, so there's no useful feedback for the user that what they are sorting on and filtering by is helping.

As such, just to throw out one idea, I'd suggest a basic view, and then the advanced view. Start with a nice simple carousel, but include a way to get to the full page tool to do proper sorting and filtering:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Then, if they click on the full view, show a more traditional full-page view of the products:

mockup

download bmml source

0

I'm making an assumption that you are displaying sets of products with each set having 3 total products. If this is the case and you can display your products in squares, this layout may contribute to a solution.

Product set grid

0

Only a slight adaptation of your sketch. Here's a very rough mockup: enter image description here

A regular 16x9 screen can hold 3 ISO format pages (A4, A5, etc) side by side. Browse at 4 speeds:

  1. click flip button, >, move over 1 page.
  2. click miniature page, move over 1 to 11 pages.
  3. click skip button, >>, move over 23 pages.
  4. click end button, >|, move to last page.

If a button is unusable, gray it out. Highlight the page you're on, and semi-highlight other pages at intervals to give a sense of context.

Colors, fonts, etc are all standin of course.

Toss your filters up top.

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.