5

This is an airport transfer quotation form I've created.

quotation form

The user will first select the pick up, destination and number of passengers.

Then, they will retrieve the type of vehicle, price and estimated time.

At this point and if the user desires, I ask the user to take the following actions:

  1. Add a return transportation or another transportation
  2. Enter they're email address and get a 2 euro discount
  3. Continue with the booking

Since these actions are completely different from each other I'm not sure if it's correct to place them on the bottom of the form. Are there any better practices for this kind of request? What is the best location for these?

A live example of this form can be found at www.simontaxi.com

  • Here's a question... Can they do all of those things, or is there only one path they can take? For instance, I would love to add my email, add another transportation point and then continue with the booking. Is that possible? – Majo0od Jan 30 '15 at 17:03
  • A user can add up to 4 'transportations' and will receive an additional discount on each. the email is optional ( the purpose of the email is to send a quotation email + link back to the website so they wont forget my website and come back later when they are ready to book ) the continue booking button shows the total of the 4 transportation and take the user to the next step so yes they can do all those things – Simone Vescera Jan 30 '15 at 17:13
  • So really "continue booking" is the final step. Clicking that will take them to the checkout page? – Majo0od Jan 30 '15 at 17:21
  • yes, clicking on continue booking will take them to the last step – Simone Vescera Jan 30 '15 at 20:30
  • Based on the above url it's very clear that you have ONE button that is more important than every other, and that's the continue button at it will change the users progression. Due to this my first instinct would be to not style the add button at all as a cta, and simply have it as a visual prompt between the current block, and the continue button (it's kind of asking "do you need more transfers?"). – Nikolas Jeleniauskas Jan 31 '15 at 18:56
4

My proposal:

  • The buttons opposed to each together -> better distinctiveness and scannability .
  • The buttons have a more square-like shape -> they're easier to tap, less missing taps , better usability
  • The buttons (which are also the actions) are together and mirrored, and the email input is closer to the other form's inputs -> more consistent design.
  • Added arrow icon in the continue button -> better scannability.
  • Bottom right position of the continue button matching with mobile user expectation / mental models related to flow.
  • Numbers are in a different row and not at the end of it => Better scannability
    (not sure if it would be positive talking about the price from a marketing point of view)

If you want the relevance of the email input to be more or less in the same level as the button, reducing the buttons height and increasing the one on the input, plus a background change (a more colored one, now is gray) will make it.

enter image description here

  • Can you explain why you think this is better? – JonW Jan 30 '15 at 17:44
  • 1
    Yes. The two possible actions are opposed and bigger => better distinctiveness and scannability . The two buttons are more square-like so they're easier to tap => less missing taps , better usability. The two buttons are at the same level => more consistent design. Idk if it's better for action flow, but I don't see it being worse for sure. Added icon in continue button to improve scannability. Bottom right position matching with mobile mental models related to flow. Numbers are in a different row not at the end of it =>+scannability (not sure if it would be positive talking about the price) – Alejandro Veltri Jan 30 '15 at 17:57
  • Hi JonW thanks for your time, i think this is better than mine, i will try placing both buttons at the same level, this will make it easier to tap for mobile users,also the arrow icon was already in my mind and yes it looks nice and easier to understand.. – Simone Vescera Feb 1 '15 at 17:44
1

Right now, you're asking too much from the user. I would ask for the email on the checkout screen, which I think makes more sense. That would leave you with two calls-to-action and makes it much simpler to resolve.

One should be primary and one secondary. Primary with a high contrast between the text and button, secondary with a lower contrast. Solid background buttons combined with so called "ghost" buttons work well in this cases.

Btw, is "Transfer" the same as "Transportation"? If yes, you should only use one word to avoid confusion.

  • Hi, Yes i agree with you. the problem of moving the email field on the check out screen is that most of the visitors are not ready to book yet, most of them are just getting quotations around, i provide the cost at the first step placing the discount on the second step won't make any sense. – Simone Vescera Feb 1 '15 at 18:01
0

I went to the live example you provided and I used it.

Your GUI is very, very good and I had no trouble understanding what was happening. I wouldn't change a thing. In fact, others should use it as a model of web design simplicity. Kudos!

  • Thanks i'm happy to read this kind of positive comments :-) – Simone Vescera Feb 1 '15 at 18:03

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.