«Тинькофф Путешествия»: небольшой юзабилити-обзор

Руководство по обеспечению доступности веб-контента (WCAG) требует, чтобы коэффициент контрастности основного текста по отношению к фону был не меньше 4,5:1. Если текст имеет меньший контраст, пользователям с плохим зрением будет трудно его читать.

На сайте «Тинькофф Путешествий» коэффициент контрастности названий полей «Откуда», «Куда», «Туда», «Обратно» составляет всего 2.88:1. Многим пользователям с плохим зрением будет плохо видно этот текст.

Низкий контраст серого текста в полях ввода

На сайте S7 Airlines высокий коэффициент контрастности текстов («Куда», «Выберите даты» и т. д.) по отношению к фону делает поля ввода более удобочитаемыми для пользователей с нарушениями зрения.

Правда, в поисковой выдаче на этом же сайте много важной информации все равно отображается мелким бледно-серым шрифтом. Так что пространство для улучшений всегда есть.

S7 Airlines. Контраст текста к фону составляет 7.21:1 и соответствует требованиям WCAG

Не всегда пользователи могут знать, как правильно пишется название города, а тем более аэропорта, откуда они собираются вылетать. В этом случае жизнь сильно облегчает автозаполнение, когда сайт автоматически определяет положение пользователя и подставляет нужный город в поле «Откуда».

При переходе на сайт поле «Откуда» автоматически не заполняется. Это некритичная проблема, но всё-таки подстановка города вылета сэкономила бы большинству пользователей пару кликов.

При переходе на сайт пользователь видит пустое поле «Откуда»

На сайте Lufthansa в поле «Откуда» автоматически выставляется город, из которого совершается переход на сайт

Сайт автоматически подставляет в поле вылета аэропорт города, из которого приходит запрос

Продолжу тему с названиями городов. Пользователи могут делать ошибки, заполняя поля «Откуда» и «Куда», и лучший способ предотвратить эти ошибки — помочь им с написанием города. Поэтому полезно, когда сайт предлагает варианты по мере ввода текста в поле.

На сайте «Тинькофф Путешествий» функция подсказок реализована. Если в поле «Откуда» или «Куда» начать набирать «Петер» вместо «Санкт-Петербург», то в выпадающем списке можно будет выбрать подходящий вариант.

      По мере ввода названия города в поле пользователь видит подсказки

Сайт Lufthansa требует ввести полное название города. Например, при попытке купить билеты до Санкт-Петербурга, по запросу «Петер» или «Петербург» не будет предложено никаких вариантов.

Сайт Lufthansa не предлагает пользователю подсказок по мере ввода названия города

Тут всё просто: смысл используемых иконок и условных обозначений должен быть понятен пользователю и не вводить его в ступор.

Если время прилёта приходится на следующий календарный день, в выдаче на сайте «Тинькофф Путешествий» появляется красный значок «+1». Понять, что он означает, можно лишь по всплывающей подсказке или «опытным путем», посмотрев, в каких рейсах ещё он встречается.

Прилет на следующий календарный день обозначен красным прямоугольником с надписью «+1», значение которого может быть непонятно                                                                                                     неподготовленному пользователю

То, что время прилёта приходится на следующий календарный день, обозначено надписью «+1 день» прямо над временем прилета. Возможно, ещё лучше было бы, если бы вместо этой надписи была бы просто написана дата прилёта.

S7 Airlines. Для рейсов, прилетающих на следующий календарный день, стоит пометка «+1 день»

Некоторым пользователям важно, услугами какой авиакомпании они пользуются, но логотипы авиакомпаний знают или помнят далеко не все. Информация о компании-перевозчике должна быстро считываться еще на этапе выбора среди предложенных вариантов.

На десктопной версии сайта «Тинькофф Путешествия» в списке рейсов обозначены только логотипы компаний, без их названий.

В мобильной версии сайта «Тинькофф Путешествий» всё хорошо: ясно указано название авиакомпании, а логотип выполняет лишь вспомогательную функцию.

Отображение в начале выдачи результатов вариантов с самым дешевым и самым быстрым рейсами экономит время пользователя на то, чтобы сориентироваться в предложенных вариантах.

Для тех, кто планирует путешествие заранее и не привязан к конкретным датам, может быть важна динамика цен на билеты. Глядя на динамику, пользователь будет понимать, в каких числах выгоднее планировать вылет.

На сайте «Тинькофф Путешествий» нет возможности ознакомиться с динамикой цен на билеты. Чтобы выбрать оптимальную дату вылета, придется перебирать все даты вручную.

В сервисе «Яндекс. Путешествия» динамика цен отображается прямо в календаре для выбора дат вылета и прилета.

Яндекс Путешествия. При выборе дат пользователь может сразу ознакомиться с динамикой цен на билеты и выбрать самый выгодный вариант

В идеальном случае у пользователя должна быть возможность приобрести билет без авторизации. Если такой опции нет, то необходимо объяснять, для чего нужна регистрация — например, для оповещения об изменениях в рейсе. По крайней мере, точно не нужно требовать у пользователя зарегистрироваться первым же шагом: он ещё ничего не заполнил, в любой момент может передумать, а от него уже требуют email и телефон.

На сайте «Тинькофф Путешествий» нельзя приобрести билет без регистрации/авторизации по номеру телефона. Зачем такое жесткое требование — не объясняется. В тексте под полем ввода написано, что на указанный номер пришлют СМС-код для подтверждения, и это ещё непонятнее: что надо будет подтверждать и какие обязательства на пользователя это накладывает?

На сайте Kupibilet блок для ввода контактных данных помещён в контекст покупки билета. Под полем расположено объяснение, зачем эти данные нужны. Но, возможно, ещё лучше было бы, если бы этот блок располагался под блоком с информацией о пассажирах. Если пользователь введет все данные о пассажирах, ему уже трудно будет отказаться от заполнения полей с контактной информацией.

Для многих условия провоза багажа — один из значимых критериев выбора билета. Поэтому пользователю должно быть понятно, какие условия провоза багажа, из описания на карточке рейса.

На сайте «Тинькофф Путешествия» в карточке рейса нет детальной информации об условиях провоза багажа. Указано только, что багаж включен или не включен в стоимость билета.

Удобно, когда условия провоза багажа отображаются прямо на карточке товара. На сайте Aviasales эта информация показана в виде иконок, по наведению на них появляется тултип с более подробным описанием.

Пользователю должно быть понятно, на каких условиях он покупает билет и можно ли будет его вернуть.

На сайте «Тинькофф Путешествий» в результатах выдачи никак не обозначено, является билет возвратным или невозвратным. Информация о типе билета в карточке рейса появляется только после нажатия кнопки «Купить»

В результатах выдачи на сайте «Победы» сразу отображаются типы билетов и понятна их стоимость. Для невозвратных билетов, возможно, всё-таки стоило бы добавить соответствующую пометку, чтобы не заставлять пользователей делать логические умозаключения о том, что если один тип билетов называется «возвратный», остальные такими не являются.

Некоторым пользователям важно знать, сколько осталось мест на интересующие их рейсы, чтобы понимать, стоит ли им поторопиться с покупкой билета.

В списке рейсов не отображается количество оставшихся мест на каждом из них, хотя эта информация может стать дополнительным критерием для принятия решения о покупке билета.

На сайте «Победы» количество мест на конкретном рейсе отображается в том случае, если их осталось мало. Благодаря этому пользователь может понять, что времени на длительные размышления у него может и не быть.

Как видно из статьи, с процессом поиска авиабилетов связано много важных мелочей. Забывать о них нельзя, если вы хотите сделать действительно удобный и полезный сервис. Даже поверхностный анализ сайта позволил выявить несколько юзабилити-проблем разной степени критичности. Да и другие сайты, решения с которых я показывала как удачные решения, на самом деле во многом нуждаются в улучшениях.

Полноценное юзабилити-тестирование на реальных пользователях позволило бы найти ещё больше проблем. Причем в данном случае лучше всего сработало бы сравнительное тестирование, чтобы увидеть, какие решения на сайтах конкурентов работают действительно хорошо, а какие — не очень.

Если вы хотите, чтобы мы провели юзабилити-аудит вашего сервиса или спроектировали новый интерфейс — оставьте заявку на сайте.