Go! Or a little about designing a date selection interface.


    The choice of dates (further, for simplicity, I will use the word calendar) on sites used often. Booking hotels, flights, cars, buying tickets. Such a hackneyed topic, as it seems, there is no point in writing about it.

    But ... not so long ago, I was faced with the task of designing a calendar for choosing periods. The range of choice of dates ranged from 2 days to several months.

    The target audience is quite heterogeneous: age from 35 to 60 years, computer literacy from beginners to confident users.

    Objective: to make the most convenient format for choosing dates, understandable to the target audience.
    Before design competitors were studied and tested, several articles were read on a given topic.

    I want to share conclusions and examples made as a result of the work. For someone, there will be no discoveries, but someone, I hope, will find something new and useful for them.

    The presence of the button “Done” (Confirm, Select, OK ...) in the body of the calendar


    People do not always come to the site with clear dates in their heads.

    They can indicate a period, reflect, change dates (starting, ending, whole period). Most sites hide the calendar immediately after choosing a date. www.booking.com , www.aeroflot.ru as an example. This behavior of the system annoyed users in a situation when a wrong date was chosen by chance or a final decision had not yet been made. “I pressed the wrong way” is especially important for older people, with poor eyesight, in a hurry or inability to concentrate. The reasons for this design are clear - less clicks, less load.

    But we do not always know who and how will interact with the interface. The conditions in which it will be.

    For this situation, a convenient solution is Google Flights . Walk on the dates in thought as you want, the calendar will be visible until you click on the “Done” button. Conveniently, there is a sense of control and understanding of the interface.



    Search results without extra clicks


    Such a function is well implemented on the website www.trivago.ru . I enter the necessary parameters, and the results are already loaded.



    Visual selection of the start and end dates


    Users left good feedback on the availability of such tips. The visual difference between the starting and ending dates served as peculiar anchors and facilitated work with the calendar.

    Some sites lacked current date indicators.

    Not to say that this fatal mistake, which greatly affects the convenience of interaction, but 6 out of 10 test participants noticed that they really lack such an indicator as a kind of “anchor” showing the relationship between the selected and the current dates.

    Example times : www.airbnb.ru

    It is clear which dates you can choose, and which you can not. The current date is not highlighted.



    Example two : www.ozon.travel/flight/

    Another solution: unavailable dates are not listed in the calendar. The current date is the first, leaving no doubt where to start the search.



    Example three : www.booking.com

    The current, accessible and unavailable dates are visually clear.



    Ability to quickly reset selected dates


    Useful if the user has decided to completely change the request. For quick cleaning, some users refresh the page. And there are situations that the user has selected dates, but updated the page by accident.

    If the user is accidentally updated, he is unlikely to be delighted with the need to fill all over again. If it is updated intentionally, it will see the saved dates and start driving new ones.

    To solve these problems, you can place a prominent “Reset” or “New Search” link next to the date entry somewhere in sight.

    This will allow you to quickly clear the search results, if necessary, and save data when you accidentally update.

    www.google.com/flights



    Prefilled fields


    On some testing sites, the “Date” field was already filled.

    In some cases, there was only the initial date, in some - the initial and final. This behavior of the interface caused discontent of the test and confused. Of course, each case must be considered individually.

    For example, the purchase of railway or air tickets, hotel reservations can take place much in advance. Then the current date is inappropriate.

    When booking tickets, for example, in the cinema, this approach may be justified.

    Below are examples of pre-filled fields. Conveniently? Worth thinking.

    Example one : www.rzd.ru



    Example two : www.trivago.ru



    Example three : www.rentalcars.com



    Auto fill date back


    Another common “trick” with a minus sign. When you enter the date “there”, the date “back” is automatically substituted. This is usually the next day.

    This interface behavior also caused dissatisfaction with its unpredictability and excessive autonomy.

    It is still worth thinking about when to help, and in what cases let people make a choice on their own.

    As an example for testing sites: www.booking.com , www.trivago.ru

    Ideas to note:


    Finally, good ideas that were not needed for development, but remained in the bank.

    Specifying the cost immediately in the calendar


    www.google.com/flights

    When you select dates there / back, the total cost of the flight is calculated. Separate color highlighted the cheapest flights. Conveniently, if the task is to find the cheapest option, or compare prices.



    Variants of display / switching between months


    When it is necessary to show several months at once, you can peep ideas and think about a convenient solution.

    Idea times : www.rentalcars.com



    Idea two : www.ozon.travel/flight/



    Idea three : www.swiss.com/ru/ru



    Visual separation of the weekend from weekdays


    The easiest question is: start the week on Monday or Sunday? It depends on the service provided and the target audience. If customers are more likely to order your services on weekends, highlight weekends and possibly holidays.

    www.skyscanner.net



    Mini Pedometer for fast transitions


    For planning short trips, etc. No need to open the calendar. Here you can also show search results.

    It should be remembered that mini-steppers are a good improvement when choosing dates, but you should not replace them with a full popup with a calendar.

    What to choose? First examine the purpose of the calendar and the date entry ranges. If dates go far into the past or into the future (for example, for booking a vacation), then a popup with a calendar is a good option.

    If the date range is rather short (less than six weeks - for example, when booking a medical appointment), be sure to think about adding a mini-stepper for faster tuning.

    One : www.bahn.de



    Two : www.google.com/flights



    Actually everything. As always, any opinions are accepted, criticism is welcome, for additional examples of good solutions of gratitude!

    Also popular now: