Прожарка tema.ru/start: Часть I
Что улучшить в главном сервисе для путешественников (по версии Артемия Лебедева)
Скоро майские праздники. Многие в эти дни планируют слетать не только на дачу, но и куда-нибудь подальше. А те, кто смотрит «Самые честные новости» Артемия Лебедева, уже давно уяснили, что tema.ru/start – главный сервис для путешественников.
С его помощью можно купить билеты на самолет, забронировать себе номер в отелях по всему миру и заказать туры. Казалось бы, идеально: всё, что необходимо, собрано в одном месте.
Я решил посмотреть на это «одно место» глазами клиента и ответить на вопрос: «а можно ли что-то улучшить в лучшем трэвел-сервисе по версии Артемия?» Оказалось, что можно, а в этой статье – первые полсотни наблюдений.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
С его помощью можно купить билеты на самолет, забронировать себе номер в отелях по всему миру и заказать туры. Казалось бы, идеально: всё, что необходимо, собрано в одном месте.
Я решил посмотреть на это «одно место» глазами клиента и ответить на вопрос: «а можно ли что-то улучшить в лучшем трэвел-сервисе по версии Артемия?» Оказалось, что можно, а в этой статье – первые полсотни наблюдений.
Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
Структура статьи
В первой части статьи мы совершим первые шаги на пути пользователя tema.ru/start: кратко ознакомимся с главной страницей, выберем пункты вылета и назначения, даты и число путешественников, а затем попытаемся отфильтровать и отсортировать листинг с результатами поиска:
Главная страница поиска
Форм поиска много не бывает
Помимо 3 форм поиска (авиабилеты, отели, экскурсии), в шапке страницы есть еще одно поле поиска. Зачем оно здесь – большая загадка.
Псевдоактивация полей
По умолчанию поле ввода города прибытия выглядит активным (подсветка, курсор), вводя клиента в заблуждение: вводить в этот момент он ничего не может, так как клавиатура еще неактивна.
Фокусируем внимание
В отличие от мобильной версии, при просмотре с десктопа «активируются» сразу две строки поиска. Куда именно начнешь вводить текст, начав печатать, непонятно.
Выбор городов
Определение города
При открытии сайта город вылета определяется автоматически. Было бы замечательно, если бы он еще и определялся корректно, учитывая, что я подключен к городской WiFi-сети в другом городе.
Выравнивание placeholder'ов
Placeholder'ы в полях по непонятной причине не выровнены по вертикали. Если вы считаете, что так смотрится даже лучше, напишите, пожалуйста, в комментах.
Путешествие к себе
При активации поля с городом прибытия система предлагает нам подставить в него свое имя. При этом виновата не система, а тот, кто промаркировал поле таким типом данных.
Отель +7 (999)
Поиск отелей также выделяется интересной автоподстановкой: при вводе текста мне предлагают подставить в него номер телефона. Как удобно!
Мультизадачность при выборе городов
В начале нашего «путешествия» мы уже столкнулись с тем, что активировались 2 формы. Однако это ещё не всё: при выборе города можно словить и такое. Что происходит, я не понимаю.
Коды аэропортов
При вводе в поле названия аэропорта в подсказке указывается не его код (DME), а общий код города (MOW). После выбора всё отображается корректно, но можно было бы и здесь поправить.
Жмешь return? Жми дальше
При нажатии на кнопку return на экранной клавиатуре происходит автоподстановка подсказки, но поле не деактивируется: чтобы завершить ввод, приходится отдельно нажимать на кнопку «Готово».
Текст кнопки return
При вводе названий городов текст кнопки return на клавиатуре («перейти») не соответствует целевому действию. Вариант «Далее» был бы более уместен.
Return в экскурсиях
В отличие от первых двух форм, поле ввода экскурсий вообще никак не промаркировано и не адаптировано под контекст. Поэтому вместо более подходящего текста мы видим просто «Ввод».
Лишние подсказки
Подсказки над клавиатурой при вводе названий городов не только излишни, но и перекрывают собой подсказку в интерфейсе: их можно убрать на уровне HTML.
Неожиданные подсказки
Когда клиент вводит название города, можно встретить подсказки, которые явно не совпадают с текстом, который уже был введен. Логика их появления не совсем понятна.
Прокрутка подсказки по билетам и отелям
Если подсказка не вписывается в экран и перекрывается клавиатурой, при попытке её прокрутить она исчезает, и выбирается город, который мы зажали пальцем.
Скрытие подсказок
При этом, если мы нажимаем на кнопку «Готово» и поле деактивируется, подсказка, наоборот, не исчезает и продолжает отображаться поверх интерфейса.
Прокрутка подсказки по экскурсиям
Подсказка по экскурсиям реализована еще более креативно: из-за того, что текст подсказок не вписывается в экран по ширине, её можно скроллить ещё и горизонтально.
Обработка ошибок
В отличие от поиска билетов и отелей, в форме поиска экскурсий обработка ошибок не предусмотрена: опечатался – изволь поправить сам.
Быстрое стирание городов
Если ты ошибся и выбрал не тот город, быстро стереть его не получится: соответствующая кнопка в полях городов отправления и прибытия отсутствует.
Города vs. экскурсии
При вводе города в поиске экскурсий в подсказке появляется не город, а весь список экскурсий, который был бы более уместен в формате листинга на более позднем шаге customer journey.
Переключение между формами
Переключаясь между полями одной формы, можно попасть уже в другую форму. Например, переключившись с экскурсии вверх, мы попадаем на выбор дат заезда в отель. Так лучше не делать.
Выбор дат путешествия
Даты по умолчанию
Даты полета установлены по умолчанию. Интересно, каков шанс, что мои планы совпадут с предлагаемыми сервисом датами? В большинстве случаев их придётся выбирать заново.
Скругление углов и обводка полей
Про внутренние тени в полях я уж промолчу, но делать одни углы скругленными, а другие – нет (слева) и где-то забыть про обводку – это, вероятно, новая школа дизайна.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
Highlight стоимости перелёта
Цены на билеты в разные дни могут отличаться. Чтобы их проверить, нужно каждый раз запускать поиск, хотя можно подсвечивать стартовые цены уже на уровне календаря.
График цен
Тем, кому важна цена билета, также полезно было бы ознакомиться с графиком динамики цен перелёта на будущие даты (который любезно не реализован).
Формат календаря
При выборе дат отображается только 1 месяц, который можно переключать с помощью кнопок: это предполагает лишние действия, да и процесс выбора дат разбивается на 2 отдельных шага.
Календарь можно было бы реализовать в виде вертикальной ленты, разбитой по месяцам, которая позволяла бы выбрать даты без переключения интерфейса.
Календарь можно было бы реализовать в виде вертикальной ленты, разбитой по месяцам, которая позволяла бы выбрать даты без переключения интерфейса.
Выбор гибких дат
Возможности выбрать диапазоны дат, в которые можешь полететь туда и обратно, в сервисе нет: хочешь подобрать более выгодные условия? Изволь просматривать дату за датой.
Анимация заголовков
При открытии календаря можно наблюдать анимацию уменьшения заголовка. Только мне кажется, что она неуместна? Если не согласны и я просто придираюсь, напишите, пожалуйста, в комментах.
Консистентность выбора дат
В то время как в поиске билетов и отелей даты можно выбрать сразу, в экскурсиях выбор дат доступен лишь на следующем шаге, в листинге. Формы можно было бы сделать консистентными.
Выбор числа пассажиров и гостей
Отображение числа гостей в отеле
При выборе количества гостей в отеле оно отображается мелким шрифтом в нижней части поля. Ведь свободного пространства там так мало.
Добавляешь? Увеличим
Если летит несколько человек и нужно добавить пассажиров, при быстром нажатии на кнопки изменения числа происходит не только желаемое действие, но и... зум экрана. Для чего? Понять сложно.
Кнопка выбора числа пассажиров
Кнопка выбора числа пассажиров выполнена во всю ширину экрана, прилипает к нижней его границе и визуально слабо отличается от хедера.
Скролл при выборе пассажиров
При выборе пассажиров и гостей можно столкнуться с неожиданной прокруткой экрана. Для чего она здесь, учитывая, что контент полностью вписывается в экран – загадка.
Нажимай – всё равно ничего не произойдет
Кнопки уменьшения числа пассажиров и гостей остаются активными даже при минимальных значениях: нажать на них можно, и они реагируют на нажатие, но ничего не происходит.
Классы обслуживания
При бронировании билетов можно выбрать только бизнес-класс и эконом (если не нажат бизнес). Более состоятельным туристам, видимо, предлагается обратиться в консьерж-сервис.
Смахивание карточек выбора пассажиров
Попытавшись выйти из карточек выбора числа пассажиров и гостей, смахнув их вниз, мы вернемся к главному экрану, только все введенные данные исчезнут, так как страница перезагрузится.
Возраст детей
При поиске отелей и выборе количества детей предлагается указать возраст каждого ребенка. При этом зачем требуется это указывать, не поясняется.
Фильтрация и сортировка листинга
Текст кнопки фильтрации
Пользователи уже давно привыкли к тому, как выглядят кнопки фильтров. Можно оставить лишь интуитивно понятную иконку, а текст упразднить: так кнопка будет меньше перекрывать основной контент.
Размещение фильтров
Фильтры отображаются в боковом списке и занимают лишь 2/3 экрана по ширине, хотя наиболее часто встречающийся формат – это bottom sheet, занимающий всю ширину экрана.
Лучшие билеты
В фильтрах можно выбрать опцию «Лучшие билеты». Но по каким параметрам они лучшие и как попадают в эту подборку, клиенту никак не поясняют.
Порядок расположения фильтров
В самом начале можно встретить фильтры по числу и длительности пересадок, в то время как фильтр по цене расположен лишь во второй половине списка, а время в пути – вообще в самом конце.
Группировка смежных фильтров
Фильтры по количеству и длительности пересадок разделены фильтром по наличию багажа, хотя эти 2 фильтра близки по сути и могли бы быть расположены рядом.
Блокировка вертикального скролла
При использовании ползунков вертикальный скролл не блокируется. Это снижает удобство их использования: если свайп не полностью горизонтальный, начинает прокручиваться весь экран.
Применение фильтров
Кнопки применения фильтров в интерфейсе нет. Это может вызвать у пользователей резонные вопросы: «Если я выйду из фильтров, применятся они или нет?»
Кнопки сброса фильтров
Кнопки сброса выбранных значений в фильтрах прилипают к правой границе экрана, хотя слева от них достаточно пустого места, и хоть на несколько пикселей их можно было бы подвинуть.
Окончания городов
В то время как окончания городов в фильтре времени прилета корректны, отобразить города в корректном падеже в фильтрах времени вылета забыли.
Скролл при закрытии фильтров
Каждый раз при закрытии фильтров происходит анимированный скролл страницы с листингом результатов поиска. Зачем он нужен, не совсем понятно. Если знаете, напишите, пожалуйста, в комментах.
Быстрые фильтры
Помимо экрана с фильтрами, в листинг в виде чипсов также можно вывести и быстрые, наиболее часто используемые фильтры: «прямой рейс», «с багажом» и т.д. Это позволит ускорить поиск.
Видимость сортировки
Сортировка спрятана внутрь фильтров, хотя по сути не является их частью. Это может вызвать проблемы с ее поиском и ввести пользователя в заблуждение, что она отсутствует.
Стоит заметить, что в e-com, где листинг товаров – один из ключевых интерфейсов, сортировку в фильтры прячут крайне редко: из 160 топовых приложений такой паттерн встречается лишь в 3-4.
Стоит заметить, что в e-com, где листинг товаров – один из ключевых интерфейсов, сортировку в фильтры прячут крайне редко: из 160 топовых приложений такой паттерн встречается лишь в 3-4.
Варианты сортировки
Текущие варианты сортировки можно дополнить ранним или поздним временем прибытия (по аналогии с временем вылета), а также длительностью пересадок.
To be continued...
Чтобы статья не превратилась в «Войну и мир», пожалуй, на 50 пунктах сегодня я остановлюсь. Но это далеко не означает, что спектр моментов для улучшения ограничивается лишь этими пунктами.
Что-то мне подсказывает, что многие недочеты, которые мы обсудили, были допущены намеренно. Право создателя сервиса – их допустить. А моё право – подсветить😉
Артемию и команде желаю успехов, а вы не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Что-то мне подсказывает, что многие недочеты, которые мы обсудили, были допущены намеренно. Право создателя сервиса – их допустить. А моё право – подсветить😉
Артемию и команде желаю успехов, а вы не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Все статьи по e-commerce