Creating a universal form of data entry passenger
Consider the standard process of online buying a plane ticket, which can be divided into 3 steps:
Focus on step 1, and more specifically on the interface to overcome it.
I will consider in detail the implementation of clearance in four popular air ticket sales agencies:
AnyWayAnyDay
Ticket online
Ozon Travel
Sindbad
On the basis of the mistakes and advantages found during the detailed study of decisions, I will try to create a simple universal form of ticket issuance , this will be the goal of this article.
')
You can get to the checkout page not only from the agency’s website, but also from numerous cheap air ticket search services, for example from the Aviasales website, with which this article was prepared. Given this, it is worthwhile to thank Ozon and Ticket-on-line for capturing this page, and, thus, somehow orient the user, while their colleagues from Anywayanyday and Sindbad found that the user easily figure out where he got it.
My vision : The title should be an integral part of this and similar forms, in addition to complement it with a brief description of what and what the user needs to do:
In 3 cases, information about the flight, the ticket for which is issued, is located in the upper part of the page, and occupies a significant part of it, although it would seem that all the details of the flight (number of transfers, travel time, airlines, etc.) were studied and taken as satisfying the request at the stage of searching and comparing tickets, and you can limit yourself with a squeeze: “from / to / when / who / for how much”, without resorting to using hand-sized fonts. This is exactly what they did at the ticket-on-line agency, having forgotten only to indicate the time of arrival, and, for some reason, placed this block in a modest rectangle to the left of the fields to be filled in:
But what does the page on Ozon look like when buying tickets for a flight with 1 transfer?
Is not it a bit too much for the luggage 11 414rub.? (in fact, this is a hint that the baggage fee is charged separately and is not included in the ticket price, but it is located for the joy of success). When this image is displayed on a 13 ”monitor, only the“ there ”flight information is in the field of view, which is very sad for the“ Passenger data entry ”page.
On the Sindbad website, apparently for fidelity, we arranged both brief and detailed information about the flight, for some reason placing between them the choice of currency and method of payment:
You can easily find the cost of a ticket on all the sites in question, which is certainly good:
My vision : In my form I will place brief information and price at the top of the page:
Having dealt with the fact that how much to acquire, proceed to the entry of data about the passenger. It is worth noting that the number of passengers in all agencies is chosen before the search begins and in the process of registration it is not possible to add yourself a companion, accept this and fly one adult.
For the passenger it is necessary to fill in the following fields: Last name Name, date of birth, data of an identity document, gender, citizenship First, consider the location of these fields and the movement of the user's gaze with sequential filling.
At Anywayanyday all these fields are located in a line, the input field under the name, tips for filling in are located in the fields:
How to read this format user:
The agency Ticket-on-line field layout is vertical, tips to the right:
The user moves the view as follows:
Filling out such a form is easier and more familiar, if only because we read and write everything from left to right, top to bottom.
Sindbad and Ozon preferred a combination of these methods:
How the user will rush about filling out these forms is difficult to predict, so without arrows. Undoubtedly, everyone will cope with the filling in the end, no matter how the fields are located, the only question is convenience and time spent on this process.
Therefore, for my form, I will choose a vertical location.
Now let's go directly to the fields and tips:
Requirements are limited by the fact that you need to enter data in Latin letters, and here's how we are informed about the interfaces in question:
Sindbad when trying to dial the Russian mercilessly deletes what has appeared and prompts:
BiletOnline requires: "In English!"
Ozon when the input field is activated displays the prompt to the right in the field:
the name of the field itself is not displayed at the time of entry
The notification method on the AnyWayAnyDay site seems the most loyal
because warns the user before he starts typing something, and not as rude as BiletOnline does. But the winning location is still a rude one, because This prompt format can be easily transferred to fields whose size will be smaller than the text of the prompt, or if these will be fields for selecting values ​​from the list.
My vision : in my form I will write the name of the fields on the left, and the tips, with an example of filling, to the right of the input area
Why specify the floor when buying a plane ticket is a mystery to me, but since there is everywhere - you can not fail to consider. Presentation options are only two:
- pictograms from AnyWayAnyDay
-select from the list, for everyone else
Using the drop-down list to switch between two points does not seem justified, if only because a shift requires 2 clicks and not 1 as in the case when both options are presented on the screen at the same time. As a small improvement: you can replace the pictograms with words so as not to torture people with poor eyesight with the identification of a little skirt on the icon depicting a girl:
The choice of date of birth on the considered sites is presented in three options:
- manual input in dd.mm.yyy format
- manually enter the day and year values, select the month from the list
- select all values ​​from the list
Definitely say which one is the best is difficult, for someone it is more convenient to choose from the list, for someone to enter numbers with their hands. However, it seems to me that combining these 2 methods is not worthwhile, in order not to force the user to change the input device (keyboard / mouse) once again.
My vision : I’ll stop filling in all fields of the date of birth manually
ideally, after entering the month, the system should replace its digital designation with a full letter, so that after filling the field would look like this:
That this document is specified only on the websites Ticket-on-line and Ozon by means of the field "document type"
the rest offer to immediately enter the document number. Enter the number, it is not difficult at all, then the “expiration date” field follows, which needs to be filled only if the document is a foreign passport. Let's see what they offer us:
- Anywayanyday
no prompts, I try to enter the date, but I’ll put the cursor on the check box to the left of the field - here it is a hint:
fine, I just have a passport, but you can enter the date only by ticking the checkbox, otherwise the field simply does not respond
- Sindbad
Then they considered that the clue how to enter the value of the “year” field is much more important than the story about what this period of validity is. And for those who haven't figured it out - a check box “without an expiration date” facilitating the task, and the truth, let's do without it. At OZON and BiletOnline there is no such problem, because there the “expiration date” field appears depending on which document was selected from the list. This option is good for us.
My vision : I leave the "document type" field, and as a hint I will post a link to the reference article about which documents to go with:
To communicate with the customer of the ticket (and this is not necessarily the passenger himself) there is a block with contact information, where they are asked to indicate the phone number and e-mail. Everywhere it is done in different ways, most of all I liked the solution from OZON
where, in addition to the input fields, it is described why this information is needed. Immediately, in my opinion, the simplest phone entry field is a block for entering text, while competitors offer more sophisticated options:
My vision : Oh, something, and the user will probably enter his own contact phone number correctly, and you shouldn’t bother him with excessive format requirements, in my opinion, just an example in the prompt:
On this passenger clearance is completed, you can proceed to the next step: payment, or to the booking with the subsequent payment.
Only one agency (any airline) offers to pay for a payment or booking without leaving the data entry form, and the choice is provided in the form of radio buttons:
(there is another option “to book with the subsequent payment by card”, but I could not establish the pattern of its occurrence) The following is information about the commission, bank card details, the total amount and the “pay” button or confirm the reservation, depending on what is selected. I did not like this method. It seems that the user needs to more obviously show what actions are available to him, and, based on the chosen one, continue processing the request. What do other agencies offer after checking the correctness of the fields?
Ozon, after pressing the "continue" button, asks for authorization
it was after I chose the flight, filled in all the data, and for completeness of sensations there is no possibility to register for a new user, and you want to fly so much ...
Sindbad suggests choosing a payment method:
everything seems to be not bad, but, unfortunately, there is no way to change your data if a typo suddenly crept in, and you won’t know where the office in St. Petersburg is.
Ticket-on-line also does not allow for a return to editing, and still keeps secret how you can pay for a ticket:
My vision : It is necessary to show the user the available actions, in addition to this, it is worthwhile to place all the information that may be needed to make a final decision. The result was this form
Further developments imply 2 ways - to confirm the reservation, or enter credit card details. But that's another story.
The main difference of the mobile version of the site is due to the restriction of the visible area (at a readable scale), so as not to force the user to scroll a long sheet, we divide the whole process into three steps: filling in the passenger data, entering the document data, contact information. To reduce the horizontal component of the form, place the name of the fields above them, and the tips inside.
Good for all!
Focus on step 1, and more specifically on the interface to overcome it.
I will consider in detail the implementation of clearance in four popular air ticket sales agencies:
AnyWayAnyDay
Ticket online
Ozon Travel
Sindbad
On the basis of the mistakes and advantages found during the detailed study of decisions, I will try to create a simple universal form of ticket issuance , this will be the goal of this article.
')
1. Do I need a title on the page?
You can get to the checkout page not only from the agency’s website, but also from numerous cheap air ticket search services, for example from the Aviasales website, with which this article was prepared. Given this, it is worthwhile to thank Ozon and Ticket-on-line for capturing this page, and, thus, somehow orient the user, while their colleagues from Anywayanyday and Sindbad found that the user easily figure out where he got it.
My vision : The title should be an integral part of this and similar forms, in addition to complement it with a brief description of what and what the user needs to do:
2. Information about the purchased ticket
In 3 cases, information about the flight, the ticket for which is issued, is located in the upper part of the page, and occupies a significant part of it, although it would seem that all the details of the flight (number of transfers, travel time, airlines, etc.) were studied and taken as satisfying the request at the stage of searching and comparing tickets, and you can limit yourself with a squeeze: “from / to / when / who / for how much”, without resorting to using hand-sized fonts. This is exactly what they did at the ticket-on-line agency, having forgotten only to indicate the time of arrival, and, for some reason, placed this block in a modest rectangle to the left of the fields to be filled in:
But what does the page on Ozon look like when buying tickets for a flight with 1 transfer?
Is not it a bit too much for the luggage 11 414rub.? (in fact, this is a hint that the baggage fee is charged separately and is not included in the ticket price, but it is located for the joy of success). When this image is displayed on a 13 ”monitor, only the“ there ”flight information is in the field of view, which is very sad for the“ Passenger data entry ”page.
On the Sindbad website, apparently for fidelity, we arranged both brief and detailed information about the flight, for some reason placing between them the choice of currency and method of payment:
You can easily find the cost of a ticket on all the sites in question, which is certainly good:
My vision : In my form I will place brief information and price at the top of the page:
3. Passenger data
Having dealt with the fact that how much to acquire, proceed to the entry of data about the passenger. It is worth noting that the number of passengers in all agencies is chosen before the search begins and in the process of registration it is not possible to add yourself a companion, accept this and fly one adult.
For the passenger it is necessary to fill in the following fields: Last name Name, date of birth, data of an identity document, gender, citizenship First, consider the location of these fields and the movement of the user's gaze with sequential filling.
At Anywayanyday all these fields are located in a line, the input field under the name, tips for filling in are located in the fields:
How to read this format user:
The agency Ticket-on-line field layout is vertical, tips to the right:
The user moves the view as follows:
Filling out such a form is easier and more familiar, if only because we read and write everything from left to right, top to bottom.
Sindbad and Ozon preferred a combination of these methods:
How the user will rush about filling out these forms is difficult to predict, so without arrows. Undoubtedly, everyone will cope with the filling in the end, no matter how the fields are located, the only question is convenience and time spent on this process.
Therefore, for my form, I will choose a vertical location.
Now let's go directly to the fields and tips:
3.1 Last Name and First Name
Requirements are limited by the fact that you need to enter data in Latin letters, and here's how we are informed about the interfaces in question:
Sindbad when trying to dial the Russian mercilessly deletes what has appeared and prompts:
BiletOnline requires: "In English!"
Ozon when the input field is activated displays the prompt to the right in the field:
the name of the field itself is not displayed at the time of entry
The notification method on the AnyWayAnyDay site seems the most loyal
because warns the user before he starts typing something, and not as rude as BiletOnline does. But the winning location is still a rude one, because This prompt format can be easily transferred to fields whose size will be smaller than the text of the prompt, or if these will be fields for selecting values ​​from the list.
My vision : in my form I will write the name of the fields on the left, and the tips, with an example of filling, to the right of the input area
3.2 Gender
Why specify the floor when buying a plane ticket is a mystery to me, but since there is everywhere - you can not fail to consider. Presentation options are only two:
- pictograms from AnyWayAnyDay
-select from the list, for everyone else
Using the drop-down list to switch between two points does not seem justified, if only because a shift requires 2 clicks and not 1 as in the case when both options are presented on the screen at the same time. As a small improvement: you can replace the pictograms with words so as not to torture people with poor eyesight with the identification of a little skirt on the icon depicting a girl:
3.3 Date of birth
The choice of date of birth on the considered sites is presented in three options:
- manual input in dd.mm.yyy format
- manually enter the day and year values, select the month from the list
- select all values ​​from the list
Definitely say which one is the best is difficult, for someone it is more convenient to choose from the list, for someone to enter numbers with their hands. However, it seems to me that combining these 2 methods is not worthwhile, in order not to force the user to change the input device (keyboard / mouse) once again.
My vision : I’ll stop filling in all fields of the date of birth manually
ideally, after entering the month, the system should replace its digital designation with a full letter, so that after filling the field would look like this:
3.4 Identity Document
That this document is specified only on the websites Ticket-on-line and Ozon by means of the field "document type"
the rest offer to immediately enter the document number. Enter the number, it is not difficult at all, then the “expiration date” field follows, which needs to be filled only if the document is a foreign passport. Let's see what they offer us:
- Anywayanyday
no prompts, I try to enter the date, but I’ll put the cursor on the check box to the left of the field - here it is a hint:
fine, I just have a passport, but you can enter the date only by ticking the checkbox, otherwise the field simply does not respond
- Sindbad
Then they considered that the clue how to enter the value of the “year” field is much more important than the story about what this period of validity is. And for those who haven't figured it out - a check box “without an expiration date” facilitating the task, and the truth, let's do without it. At OZON and BiletOnline there is no such problem, because there the “expiration date” field appears depending on which document was selected from the list. This option is good for us.
My vision : I leave the "document type" field, and as a hint I will post a link to the reference article about which documents to go with:
4. Contact details
To communicate with the customer of the ticket (and this is not necessarily the passenger himself) there is a block with contact information, where they are asked to indicate the phone number and e-mail. Everywhere it is done in different ways, most of all I liked the solution from OZON
where, in addition to the input fields, it is described why this information is needed. Immediately, in my opinion, the simplest phone entry field is a block for entering text, while competitors offer more sophisticated options:
My vision : Oh, something, and the user will probably enter his own contact phone number correctly, and you shouldn’t bother him with excessive format requirements, in my opinion, just an example in the prompt:
On this passenger clearance is completed, you can proceed to the next step: payment, or to the booking with the subsequent payment.
5. Booking or payment
Only one agency (any airline) offers to pay for a payment or booking without leaving the data entry form, and the choice is provided in the form of radio buttons:
(there is another option “to book with the subsequent payment by card”, but I could not establish the pattern of its occurrence) The following is information about the commission, bank card details, the total amount and the “pay” button or confirm the reservation, depending on what is selected. I did not like this method. It seems that the user needs to more obviously show what actions are available to him, and, based on the chosen one, continue processing the request. What do other agencies offer after checking the correctness of the fields?
Ozon, after pressing the "continue" button, asks for authorization
it was after I chose the flight, filled in all the data, and for completeness of sensations there is no possibility to register for a new user, and you want to fly so much ...
Sindbad suggests choosing a payment method:
everything seems to be not bad, but, unfortunately, there is no way to change your data if a typo suddenly crept in, and you won’t know where the office in St. Petersburg is.
Ticket-on-line also does not allow for a return to editing, and still keeps secret how you can pay for a ticket:
My vision : It is necessary to show the user the available actions, in addition to this, it is worthwhile to place all the information that may be needed to make a final decision. The result was this form
Further developments imply 2 ways - to confirm the reservation, or enter credit card details. But that's another story.
Bonus: data entry form for the mobile version of the site
The main difference of the mobile version of the site is due to the restriction of the visible area (at a readable scale), so as not to force the user to scroll a long sheet, we divide the whole process into three steps: filling in the passenger data, entering the document data, contact information. To reduce the horizontal component of the form, place the name of the fields above them, and the tips inside.
Good for all!
Source: https://habr.com/ru/post/132030/
All Articles