3

I am building a website that offers 3 different pricing method. The only thing that differs between the 3 options is the period range.

For example ( lets say car hire): under 1 week - 10$ per day 1 - 2 weeks - 9$ per day 2 - 4 weeks - 7$ per day

The user will not choose the price plan. Rather, the user will choose the period for which he wants to hire a car and the relevant price method would be highlighted/bolded/....

I would like to see such UI first and think if I like it. Does anyone know a website that already offers such UI? Where can I see such UI? Maybe such UI has a known name?

|improve this question
  • Do you really need the specific number of days to be specified? – Alejandro Veltri Jun 20 '15 at 16:07
  • Yes, the price depends on a hire period... – Yura Jun 21 '15 at 12:50
  • It's very good to orientate yourself on something that exists in real life. Such as Pricetag-shapes where you write the price on. Because the user knows how the real world works and an UI is basically just a portal to connect Human-World and Machine-World. – BlueWizard Jun 22 '15 at 10:27
3

Many websites utilize "pricing windows" (unofficial term) to segregate what price applies to what service. I have created a basic mockup for you based on your question:

Pricing Windows

Examples:

Soundcloud GoDaddy

|improve this answer
  • Thanks Alan (+1)! do you know an example or two of such websites? p.s. What program did you use for doing the mockup? – Yura Jun 21 '15 at 12:50
  • 1
    Just edited my answer with some examples. – Alan Jun 21 '15 at 12:57
3

I would go for something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Note that:

  • You show the user all his options
  • The user can clearly see that the option on the right side have the best price.
  • With the text "Currently selected price" you give the user the impression that HE are selecting the PRICE, not that the system are choosing the price based on the DAY that he selected.
  • The text below the day number is very important. You drive the user to think about keeping the car more time showing him the advantages.
  • You can show a text like "Wow, you are getting our best offer!" when the user insert something between 14-28 days and when is more than 28 days, something like "C'mon, call us at +44 (0)207 123 4567, we should make a better price for you!" (only if you REALLY have a better offer to that number of days, obviously).
  • Much of this example rely on animations that happen on the air as the user inputs data. For example: the total and the suggestion below should appear only AFTER the user inputs the number of days. The price tables below should have less differences when the user enter the screen, but increase when he insert the number of days.

This is an example that can be adapted to every type of business, not only car rents.

Obs.: I got that phone number on the Internet, I have no idea of where it is from.

|improve this answer
  • Can someone explain me why the downvote? I didn't get it... – Dinei Jun 21 '15 at 16:07
  • 1
    Great, thank you for your answer! (+1) :) – Yura Jun 21 '15 at 22:10

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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