3

Currently, I'm using a slider / carousel (owl carousel to be exact) as a way to serve a lot of pricelist tables (per category) and images of the team (employees). And there are a lot.

Our users mainly uses mobile devices and I don't want to exhaust them on scrolling.

So far, the solutions that I thought of:

  • Accordion
  • Individual pages for each category of pricelist
3

To save some space on scrolling I'd suggest using an even thumbnails grid if the images are of same size or a "magazine layout" (think Pinterest gridlike mobile layout) for images of varied length. Magazine layout allows some space to add image description/metadata, so you don't have to employ accordion for that.

See image.

enter image description here

  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review – BDD Dec 25 '15 at 11:54
  • I disagree with your opinion that my answer doesn't provide an answer to the author's question. – Zoe K Dec 25 '15 at 16:32
  • After re-reading the question/answer, I agree. Looks like I jumped too quick on that review. Sorry about that. – BDD Dec 25 '15 at 16:38
  • No problem, it happens. – Zoe K Dec 25 '15 at 16:46
  • 1
    Sorry if you took this wrong. You're a seasoned user and you know the rules, my comment was an intend to avoid not to close your answer when I was reviewing it, so as you can see, very far from my intention to harm you in any way. This being said, let's assume your answer is correct. If tomorrow Pinterest changes the layout, your answer renders absolutely useless. Thumbnail grids could be very different, as an UXer I'm sure you know that. I hope this time you understand we're not doing this to harm you or anything, we're not paid either, but the rules apply to you (and me as well) – Devin Dec 28 '15 at 21:53
0

Beside carousel (which have lower conversion rate), you can also make your images as thumbnails and maximize them when user click on that.

  • What do you mean by lower conversion rate? also, what about the tables? they aren't images, it's like a list of menu by category. – castlenibill Oct 26 '15 at 7:31
  • because carousel hide all the items and only show one item at once. so if your images are pretty important, it's good to choose different method of displaying. there are good practices to implement better carousel with higher accessibility too. in the case of table, you either break it into two columns or make it as a tab. it's really depend how many columns and rows do you have. – Danial Kalbasi Oct 26 '15 at 13:07
0

I had similar problem before, a table of customer orders history. What I did was I convert it into cards, so there will one card for each order id. Let say you have 5 rows of customers, so the rows will be converted into 5 cards for mobile.

There are several ways to tackle this, let say you need to display multiple images of team members with their profile included, you could do it like this site (view in mobile) : https://redmart.com/sales

IMO, a bit of scrolling wont harm the experience ;)

0

If there are a lot of images then surely the user would like to see the most important items of them first up and then a link saying 'See All' etc.

I like Paytm's (mobile app version) approach of showing few of the items in a carousel and then giving a link to See All

Also, if the user is expected to do any kind of comparison of the data (such as prices) given in the image and it is possible that some images may not warrant any comparison between them (such as comparison price of a shampoo vs price of bread) as they are not of the same category then I would go with your second option i.e. segregate images by the category first and then showing the cards/list/carousel (possibly giving all three options).

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.