1

Context

Currently, I'm working on Product Listing page of a web-store. Products shown on the web-store can basically be rented out and we have defined rental prices for different time duration such as monthly price, weekly, daily, per hour, per minute. If the store owner has setup all of these prices, then we need to show them all in the product card.

Current Card looks like this:

enter image description here

As I am involved in the redesigning of the web-store, I wanted to change the look and feel of the product cards so that more cards can be fit in one row and information can be displayed properly when it comes to visuals.

Here is what I have mocked:

enter image description here

Problem

In the redesigned mock-up, we can see that only the first three price breakdowns are visible. I want to show rental prices which are per hour and per minute. For that I need extra horizontal space.

What I had in mind was to introduce a carousel inside the card in the prices section which can be used to view the remaining two prices. Will that be a good ux pattern?

Something like this:

enter image description here

Let me know what you think of this ux pattern and any alternatives that we could introduce for such case. Thanks !!

Improve this question
5
  • What's the use case for the per hour and per minute? Has this demand come from the customer or is it simply a breakdown of the month/week/day cost?
    – DarrylGodden
    Commented Jul 11, 2019 at 9:13
  • Its a simple rental cost breakdown. User can choose to add any of the 5 rental costs (yearly, monthly, day wise, hourly, per minute)
    – Sheraz
    Commented Jul 11, 2019 at 9:41
  • No, I get what it is, do your users need it? Does someone rent a laptop for 1 minute?
    – DarrylGodden
    Commented Jul 11, 2019 at 9:44
  • @DarrylGodden Its not just the laptop. The asset can be of any type. The web-store will be user configured and hence we can't hold back on providing all the available options to the user. Someone could rent any small thing for lets say 20 minutes. In that case cost per minute would come to use.
    – Sheraz
    Commented Jul 11, 2019 at 9:51
  • But given what is possible, to what users will actually need & use are tow different things. If you want to be totally flexible you could put an indicator and a calculator, I'll post what I mean now.
    – DarrylGodden
    Commented Jul 11, 2019 at 9:56

2 Answers 2

Reset to default
2

I see some of things in your explanation:

1 - Putting prices in a slider prevents the user from seeing all prices at the same time to make a comparison and requires to interact with the card. I think that's not what you're looking for.

2 - The landscape format space intended for the image is too long, twice the height, is it necessary this proportion/size for a laptop or a tablet?

3 - What's the priority element to show? Which one should have a relevant visual space:

  • The image?
  • The info?
  • The prices?

I think by adjusting the image proportion, the card is better optimized, allowing to visualize all its components.

card

One tip, in editorial design, the currency is almost never the same size as the price figure. As it's a repetitive element and an obvious information for the user, it's usually smaller, which favors optimizing space.

Improve this answer
3
  • Yes totally agree with the points that you have mentioned. Slider hides the necessary information which creates visibility issue. I can never be sure of the image size as it will be variable but I like how you visualized the card by placing price breakdown on the right of the card.
    – Sheraz
    Commented Jul 11, 2019 at 10:15
  • I think the problem is not so much the image size as the proportion. In your original card fits a truck with trailer 😉
    – Danielillo
    Commented Jul 11, 2019 at 10:20
  • Yes that is true !!!
    – Sheraz
    Commented Jul 11, 2019 at 10:24
0

As your rental periods are so flexible, I would change to a mini-calculator with a guide price, like this:

enter image description here

This allows you to be more succinct in designing your cards, save space and gives users the ability to get an accurate quote for their rental period, with a bit of adjusting, you could show discounts for extended rental periods in the quote.

Improve this answer
4
  • Its a valid suggestion but I think you imagine multiple cards with such controls in a grid view then that would put a lot cognitive load on the user. Such card option would look suitable on Product Detail page but on the listing page, I just want to keep the information in VIEW ONLY mode with a navigation button.
    – Sheraz
    Commented Jul 11, 2019 at 10:17
  • On a multiple product page I would only include the example rate (from $5 per hour) the calculator is for the actual product page. This doesn't prevent you from including other "example" prices, it just help with not having to have too many, as you said - there's cognitive overload in that too.
    – DarrylGodden
    Commented Jul 11, 2019 at 10:25
  • But then the problem remains the same because we want the user to have a glimpse of all the rental costs on the product listing page which includes monthly rent, weekly etc.
    – Sheraz
    Commented Jul 11, 2019 at 10:28
  • Well something has to give, I'd like to see the design that an put all the rental periods, when you're talking down to a minute, without bloating the design, making it look a mess and overwhelming the user.
    – DarrylGodden
    Commented Jul 11, 2019 at 10:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.