Все статьи

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

1. Контраст текста

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

«Тинькофф Путешествия»: Можно улучшить

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

Скриншот формы поиска авиабилетов с низким контрастом текста

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

Пример хорошего решения

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

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

Скриншот формы поиска авиабилетов с низким контрастом текста

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

2. Заполнение города в поле «Откуда»

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

«Тинькофф Путешествия»: Можно улучшить

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

Скриншот формы поиска авиабилетов с незаполненным полем Откуда

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

Пример хорошего решения

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

Форма поиска авиабилетов с заполненным полем Откуда

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

3. Подсказки по мере ввода названия города

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

«Тинькофф Путешествия»: Хорошо

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

Скриншот выпадающего списка с подсказками

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

Как не надо

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

Отсутствие подсказок по мере ввода названия города

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

4. Использование иконок и условных обозначений

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

«Тинькофф Путешествия»: Можно улучшить

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

Прилёт на следующий календарный день обозначен значком +1

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

Пример хорошего решения

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

Прилет на следующий день обозначен понятным образом

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

5. Информация об авиакомпании

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

«Тинькофф Путешествия»: Можно улучшить

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

Список рейсов, где авиокомпании обозначены только логотипами

В десктопной версии сайта для обозначения перевозчиков используются только логотипы

«Тинькофф Путешествия»: Хорошо

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

Обозначение авиакомпаний в мобильной версии сайта

В мобильной версии сайта используются не только логотипы, но и названия авиакомпаний

6. Результаты поиска: отображение самого дешевого и самого быстрого рейса

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

«Тинькофф Путешествия»: Хорошо

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

В результатах поиска сразу заметны самый дешевый и самый быстрый результаты

Как не надо

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

Верхним в результатах выдачи идет самый дешевый рейс

Aviasales. В результатах выдачи сложно быстро отыскать самый быстрый рейс

7. Возможность посмотреть динамику цен на билеты

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

«Тинькофф Путешествия»: Можно улучшить

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

Календарь для выбора дат вылета и прилета без указания динамики цен

На сайте нет возможности ознакомиться с динамикой цен на билеты

Пример хорошего решения

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

Вариант отображения динамики цен на авиабилеты в зависимости от даты

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

8. Требование авторизации для покупки билета

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

«Тинькофф Путешествия»: Можно улучшить

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

Форма ввода номера телефона для покупки авиабилета

Пользователю сразу предлагается ввести номер телефона и подтвердить его по СМС без возможности пропустить этот шаг. Неочевидно, для чего именно это нужно

Пример хорошего решения

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

Форма ввода контактных данных помещена в контекст покупки билета

Ввод контактных данных помещен в контекст покупки билета и сопровождается текстом, объясняющим, зачем это нужно

9. Условия провоза багажа

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

«Тинькофф Путешествия»: Можно улучшить

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

Карточка с описанием авиаперелета. Информации о багаже нет

Из карточки рейса нельзя понять, какие именно условия провоза багажа на выбранном рейсе

Пример хорошего решения

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

Подробное отображение условий провоза багажа на карточке рейса

В карточке рейса представлена информация о стоимости и опциях провоза багажа

10. Тип билета

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

«Тинькофф Путешествия»: Можно улучшить

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

В списке билетов на рейсы не обозначено, какие из них невозвратные

В списке результатов не показано, какие из рейсов предполагают невозвратные билеты

Пример хорошего решения

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

Подробная информация о типе билетов отображена в виде иконок

Пользователю предоставляют информацию о типах билетов и их стоимости

11. Количество оставшихся мест на рейс

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

«Тинькофф Путешествия»: Можно улучшить

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

Фрагмент экрана поисковой выдачи

Для рейсов в выдаче не отображается количество оставшихся мест

Пример хорошего решения

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

Фрагмент экрана поисковой выдачи с указанием количества оставшихся мест на выбранном рейсе

В результатах выдачи отмечены рейсы, на которые осталось мало мест

Заключение

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

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

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

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!

Тэги

Поделиться статьей

Поделитесь своим мнением
Ваше оценка отправлена!
Стоила ли статья потраченного времени?