1. Контраст текста
Руководство по обеспечению доступности веб-контента (WCAG) требует, чтобы коэффициент контрастности основного текста по отношению к фону был не меньше 4,5:1. Если текст имеет меньший контраст, пользователям с плохим зрением будет трудно его читать.
«Тинькофф Путешествия»: Можно улучшить
На сайте «Тинькофф Путешествий» коэффициент контрастности названий полей «Откуда», «Куда», «Туда», «Обратно» составляет всего 2.88:1. Многим пользователям с плохим зрением будет плохо видно этот текст.
Пример хорошего решения
На сайте S7 Airlines высокий коэффициент контрастности текстов («Куда», «Выберите даты» и т. д.) по отношению к фону делает поля ввода более удобочитаемыми для пользователей с нарушениями зрения.
Правда, в поисковой выдаче на этом же сайте много важной информации все равно отображается мелким бледно-серым шрифтом. Так что пространство для улучшений всегда есть.
2. Заполнение города в поле «Откуда»
Не всегда пользователи могут знать, как правильно пишется название города, а тем более аэропорта, откуда они собираются вылетать. В этом случае жизнь сильно облегчает автозаполнение, когда сайт автоматически определяет положение пользователя и подставляет нужный город в поле «Откуда».
«Тинькофф Путешествия»: Можно улучшить
При переходе на сайт поле «Откуда» автоматически не заполняется. Это некритичная проблема, но всё-таки подстановка города вылета сэкономила бы большинству пользователей пару кликов.
Пример хорошего решения
На сайте Lufthansa в поле «Откуда» автоматически выставляется город, из которого совершается переход на сайт
3. Подсказки по мере ввода названия города
Продолжу тему с названиями городов. Пользователи могут делать ошибки, заполняя поля «Откуда» и «Куда», и лучший способ предотвратить эти ошибки — помочь им с написанием города. Поэтому полезно, когда сайт предлагает варианты по мере ввода текста в поле.
«Тинькофф Путешествия»: Хорошо
На сайте «Тинькофф Путешествий» функция подсказок реализована. Если в поле «Откуда» или «Куда» начать набирать «Петер» вместо «Санкт-Петербург», то в выпадающем списке можно будет выбрать подходящий вариант.
Как не надо
Сайт Lufthansa требует ввести полное название города. Например, при попытке купить билеты до Санкт-Петербурга, по запросу «Петер» или «Петербург» не будет предложено никаких вариантов.
4. Использование иконок и условных обозначений
Тут всё просто: смысл используемых иконок и условных обозначений должен быть понятен пользователю и не вводить его в ступор.
«Тинькофф Путешествия»: Можно улучшить
Если время прилёта приходится на следующий календарный день, в выдаче на сайте «Тинькофф Путешествий» появляется красный значок «+1». Понять, что он означает, можно лишь по всплывающей подсказке или «опытным путем», посмотрев, в каких рейсах ещё он встречается.
Пример хорошего решения
То, что время прилёта приходится на следующий календарный день, обозначено надписью «+1 день» прямо над временем прилета. Возможно, ещё лучше было бы, если бы вместо этой надписи была бы просто написана дата прилёта.
5. Информация об авиакомпании
Некоторым пользователям важно, услугами какой авиакомпании они пользуются, но логотипы авиакомпаний знают или помнят далеко не все. Информация о компании-перевозчике должна быстро считываться еще на этапе выбора среди предложенных вариантов.
«Тинькофф Путешествия»: Можно улучшить
На десктопной версии сайта «Тинькофф Путешествия» в списке рейсов обозначены только логотипы компаний, без их названий.
«Тинькофф Путешествия»: Хорошо
В мобильной версии сайта «Тинькофф Путешествий» всё хорошо: ясно указано название авиакомпании, а логотип выполняет лишь вспомогательную функцию.
6. Результаты поиска: отображение самого дешевого и самого быстрого рейса
Отображение в начале выдачи результатов вариантов с самым дешевым и самым быстрым рейсами экономит время пользователя на то, чтобы сориентироваться в предложенных вариантах.
«Тинькофф Путешествия»: Хорошо
Как не надо
На сайте Aviasales первым отображается только самый дешевый вариант. Чтобы узнать, какой из рейсов займет меньше всего времени, необходимо просмотреть все результаты выдачи.
7. Возможность посмотреть динамику цен на билеты
Для тех, кто планирует путешествие заранее и не привязан к конкретным датам, может быть важна динамика цен на билеты. Глядя на динамику, пользователь будет понимать, в каких числах выгоднее планировать вылет.
«Тинькофф Путешествия»: Можно улучшить
На сайте «Тинькофф Путешествий» нет возможности ознакомиться с динамикой цен на билеты. Чтобы выбрать оптимальную дату вылета, придется перебирать все даты вручную.
Пример хорошего решения
В сервисе «Яндекс. Путешествия» динамика цен отображается прямо в календаре для выбора дат вылета и прилета.
8. Требование авторизации для покупки билета
В идеальном случае у пользователя должна быть возможность приобрести билет без авторизации. Если такой опции нет, то необходимо объяснять, для чего нужна регистрация — например, для оповещения об изменениях в рейсе. По крайней мере, точно не нужно требовать у пользователя зарегистрироваться первым же шагом: он ещё ничего не заполнил, в любой момент может передумать, а от него уже требуют email и телефон.
«Тинькофф Путешествия»: Можно улучшить
На сайте «Тинькофф Путешествий» нельзя приобрести билет без регистрации/авторизации по номеру телефона. Зачем такое жесткое требование — не объясняется. В тексте под полем ввода написано, что на указанный номер пришлют СМС-код для подтверждения, и это ещё непонятнее: что надо будет подтверждать и какие обязательства на пользователя это накладывает?
Пример хорошего решения
На сайте Kupibilet блок для ввода контактных данных помещён в контекст покупки билета. Под полем расположено объяснение, зачем эти данные нужны. Но, возможно, ещё лучше было бы, если бы этот блок располагался под блоком с информацией о пассажирах. Если пользователь введет все данные о пассажирах, ему уже трудно будет отказаться от заполнения полей с контактной информацией.
9. Условия провоза багажа
Для многих условия провоза багажа — один из значимых критериев выбора билета. Поэтому пользователю должно быть понятно, какие условия провоза багажа, из описания на карточке рейса.
«Тинькофф Путешествия»: Можно улучшить
На сайте «Тинькофф Путешествия» в карточке рейса нет детальной информации об условиях провоза багажа. Указано только, что багаж включен или не включен в стоимость билета.
Пример хорошего решения
Удобно, когда условия провоза багажа отображаются прямо на карточке товара. На сайте Aviasales эта информация показана в виде иконок, по наведению на них появляется тултип с более подробным описанием.
10. Тип билета
Пользователю должно быть понятно, на каких условиях он покупает билет и можно ли будет его вернуть.
«Тинькофф Путешествия»: Можно улучшить
На сайте «Тинькофф Путешествий» в результатах выдачи никак не обозначено, является билет возвратным или невозвратным. Информация о типе билета в карточке рейса появляется только после нажатия кнопки «Купить»
Пример хорошего решения
В результатах выдачи на сайте «Победы» сразу отображаются типы билетов и понятна их стоимость. Для невозвратных билетов, возможно, всё-таки стоило бы добавить соответствующую пометку, чтобы не заставлять пользователей делать логические умозаключения о том, что если один тип билетов называется «возвратный», остальные такими не являются.
11. Количество оставшихся мест на рейс
Некоторым пользователям важно знать, сколько осталось мест на интересующие их рейсы, чтобы понимать, стоит ли им поторопиться с покупкой билета.
«Тинькофф Путешествия»: Можно улучшить
В списке рейсов не отображается количество оставшихся мест на каждом из них, хотя эта информация может стать дополнительным критерием для принятия решения о покупке билета.
Пример хорошего решения
На сайте «Победы» количество мест на конкретном рейсе отображается в том случае, если их осталось мало. Благодаря этому пользователь может понять, что времени на длительные размышления у него может и не быть.
Заключение
Как видно из статьи, с процессом поиска авиабилетов связано много важных мелочей. Забывать о них нельзя, если вы хотите сделать действительно удобный и полезный сервис. Даже поверхностный анализ сайта позволил выявить несколько юзабилити-проблем разной степени критичности. Да и другие сайты, решения с которых я показывала как удачные решения, на самом деле во многом нуждаются в улучшениях.
Полноценное юзабилити-тестирование на реальных пользователях позволило бы найти ещё больше проблем. Причем в данном случае лучше всего сработало бы сравнительное тестирование, чтобы увидеть, какие решения на сайтах конкурентов работают действительно хорошо, а какие — не очень.
Если вы хотите, чтобы мы провели юзабилити-аудит вашего сервиса или спроектировали новый интерфейс — оставьте заявку на сайте.
Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!