Разборка №6. Функциональность vs доступности Отелло: почему крутые фичи и дизайн не всегда спасают метрики сайта

Привет, это Лиза из Лиги А.! В этом выпуске мы вместе с дизайнерами из студии Мера взялись разбирать сайт Отелло — популярный сервис по подбору отелей. Пробежались по главной странице, забронировали жильё и заглянули в код. В статье рассказываем, как сделать сайт более удобным и понятным для пользователей.

Это уже шестой выпуск, где мы разбираем сайты с интересными анимациями/фичами/задумками, которые нас зацепили. Смотрим на него как пользователи, разработчики и дизайнеры. Разбираем ключевые показатели, оцениваем пользовательский опыт и предлагаем конкретные улучшения для удобства, доступности и эффективности работы сервиса. На этот раз мы взяли агрегатор Отелло.

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

👾 Выбирайте персонажа и играйте

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

Прошлые выпуски, которые стоит глянуть. Смотрите, как мы разбирали:

— Сайт пива с анимациями

— Авиасейлс и его классные фичи вместе с Bauns

— Странные решения Циан вместе с UXART

— Умные колонки вместе с busy studio

— Зарубежный сайт с базами для ЛПР’ов на конструкторе с OUT.agency

Привет, это дизайнер Даша Шомникова из Меры! Я вместе с командой смотрела на сервис Отелло.

Сайт использует современный, яркий визуальный стиль, создающий атмосферу путешествий. В интерфейсе есть интересные решения, выделяющие его среди конкурентов, но некоторые элементы UX всё же вызывают вопросы — например, не всегда очевидно, как лучше взаимодействовать с функционалом.

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

Когда мы заходим на сайт, сразу видим раздел «Суперцены» в верхней части экрана. Выглядит интересно, в стиле «Мне повезёт» от гугла. Такая штука может быть полезна любителям приключений, которые хотят сменить обстановку, но ещё не знают, чем её заменить :)

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

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

👍 Очень круто придуманы разделы на главной

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

👍 Особенно впечатляет подборка для катания на лыжах

Очень круто, что в подборке собрана вся информация о горном курорте, вплоть до цены скипасса. Отелло непосредственно их не продаёт, но такая информация подкупает — пользователь сразу может рассчитать бюджет поездки, если собрался покататься на лыжах/сноуборде.

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

🤔 Не очень понятен раздел «Поймать выгоду»

Раздел не функционален и больше похож на рекламу. Если вы не копите бонусы «Спасибо», то скорее всего и не поймёте, зачем это нужно на главной странице.

Оплата частями может пригодиться, но не совсем понятно, в чём разница между «Эксклюзивными скидками» и «Суперценами». Эта часть главной считывается скорее как заполнение пустоты баннером.

❤ Приятно, что с любого места главной можно перейти к бронированию

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

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

Сначала нам нужно выбрать место, время и количество гостей. Допустим, мы вдвоём отправимся в Южно-Сахалинск с 24-25 января. Чтобы начать поиск отелей, нужно заполнить данные в поиске и нажать на кнопку «Найти». Так мы попадаем на экран с картой и вариантами отелей.

Экран выбора места для размещения делится на две части: справа мы видим карту, а слева краткую информацию. Стоит отметить, что фильтры выглядят обычно в плане дизайна, но при этом очень удобные с точки зрения пользователя — можно сразу нажать на популярные опции и отсортировать жильё.

Например, для горных курортах команда Отелло сделала отдельные фильтры, где пользователь может выбрать расстояние до подъёмника. У конкурентов я подобного раньше не видела.

🤔 Из минусов: карта не всегда сообщает пользователю важную информацию

Сразу из поиска мы попали на страницу с апартаментами. Стоит сказать, что предложения выстроены в непонятной иерархии. По какому принципу они упорядочены? По цене или звёздности? Вроде как нет.

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

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

На картинке видно, что в самой карточке есть информация о расстоянии до центра от апартаментов. Но на самой карте мы не понимаем, где находится центр

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

👍 Радует тот факт, что фотографии апартаментов можно полистать прямо с карты

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

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

Нам понравилось жильё с классным внешним видом и ценой. Давайте откроем его карточку и посмотрим информацию внутри.

👍 В карточке мы видим информацию о том, что на выбранные даты цены очень высокие и с одной стороны — это хорошо

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

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

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

Справа пользователя ждет небольшое «оглавление», навигация по элементам карточки жилья — удобно и заботливо.

🤔 Отсутствие кнопки «Забронировать» вверху всё же немного портит впечатление

Обычно путь пользователя на сайте-подборщике выглядит так: человек заходит, ищет варианты, находит, что нужно и хочет забронировать отель, чтобы быстрее пройти сценарий.

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

🤔 Такое решение может ввести пользователя в замешательство и отнять несколько секунд жизни, прежде чем он поймёт, что для бронирования номера надо поскроллить вниз. Для бизнеса эти несколько секунд могут быть решающими, ведь нужно довести клиента до целевого действия и получить прибыль как можно быстрее.

👍 Приятная кнопка «Перейти к оплате»

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

Это экономит время пользователям: например, иностранным гражданам не нужно прикладывать дополнительные усилия и выяснять, подойдёт ли иностранный паспорт для регистрации.

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

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

UX и забота — 7/10. Не хватает интуитивности, пользователю не всегда все понятно
Фичи — 9/10. Есть то, чего нет у других
Красивость/чистота — 9/10. Десятку не даёт поставить однообразие блоков

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

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

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

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

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

На странице слишком много лишних обёрток вокруг элементов

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

В модальных окнах не фиксируется фокус

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

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

Страница на 92% следует основным рекомендациям по поисковой оптимизации и вроде хорошо ранжируется поисковиками. Или нет?

Закодированные параметры в URL, которые могут усложнять восприятие ссылки

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

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

Это значит, что ссылки нельзя открыть в новой вкладке привычными способами — через клик колесом мыши или сочетанием клавиш. С точки зрения реализации не совсем удобное решение, потому что пользователи часто открывают новые разделы в фоне, чтобы не закрывать текущие страницы.

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

Логотип, кнопка перехода в ЛК и закрытие плашки про куки сделаны через div с обработчиком клика

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

Всем пользователям скринридера остаётся только пожелать хорошего настроения

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

В форме подписки заголовок «Будем на связи?» на самом деле не заголовок, а просто текст

В целом, в тексте почти нигде не используются абзацы, что делает его менее структурированным. Это может запутать пользователей, например:

Форма не отправляется по нажатию Enter, только через кнопку, что неудобно для тех, кто привык работать с клавиатуры;
У поля ввода нет подписи, поэтому пользователям скринридеров будет сложно понять, что туда вводить;
При вводе почты неожиданно обновляется весь подвал, что может выглядеть странно;
Форма поиска отеля и модальное окно работают по такому же принципу: кнопки не выглядят как кнопки, а поля не подписаны;
Разобраться без визуальной подсказки непросто. Также у изображения с QR-кодом подпись настолько минимальная («qrcode») — пользователям с ограниченными возможностями остаётся только гадать, куда ведёт эта ссылка.

В одном из блоков вся карточка отеля обёрнута в ссылку, включая её содержимое:

Как это будет воспринимать скринридер при озвучке — даже страшно представить

💔 Карточки оформлены так, что незрячему пользователю сложно понять, где какая информация — без помощи зрячего разобраться почти невозможно

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

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

Реализация — 7/10. Не хватает нужных атрибутов, тегов и описания у кнопок/картинок
Метрики — 7/10. Есть хорошие моменты, но SEO и доступность сильно подводят

Доработать хэдер сайта — не очень понятно, зачем здесь бонусы «Cпасибо» и что с ними делать человеку, который ими не пользуется. Можно убрать их из хэдера и добавить уже в личном кабинете, если человек пользуется экосистемой сбера;
Добавить бесшовный переходов между страницами. Всё неплохо, но было бы ещё лучше, если бы модуль бронирования не перескакивал с места на место и всегда находился примерно в одной и той же области экрана;
Добавить СТА в моменте бронирования. Мы говорим про кнопку с предложением забронировать жильё наверху, чтобы пользователь не терялся на странице;
Переосмыслить раздел «Поймать выгоду». Не совсем ясно, для чего он нужен и какую смысловую нагрузку несёт. Если это реклама — нужно оформить её соответствующе, например, вынести основные мысли виде баннера или иллюстрации. Если это не реклама — заменить чем-то более активным и вовлекающим, чтобы пользователь мог повзаимодействовать;
Добавить состояние фокуса всем интерактивным элементам и полям ввода. А ещё доступное описание, если внутри только иконка, без явного текста;
Добавить доступные описания для кнопок и ссылок — отсутствие доступных описаний для кнопок и ссылок затрудняет использование сайта для людей с ограничениями, так как они не могут понять, для чего предназначены элементы;
Добавить альт-теги у изображений — без них у изображений пользователи с нарушениями зрения не смогут узнать, что изображено на картинке, что снижает доступность сайта для них;
Добавить атрибут lang — его отсутствие влияет на доступность, SEO и поддержку различных языков. Без него скринридеры могут неправильно озвучивать текст, поисковые системы — не корректно индексировать страницу, а пользователи, говорящие на других языках, не получат нужное локализованное содержание. Это мешает улучшению взаимодействия с сайтом для широкой аудитории.

Дизайнеры и разработчики, поделитесь — как вам дизайн сайта и реализация? Есть моменты, которые вы бы поправили, а мы упустили?

Телеграм канал Лиги А.

Телеграм канал Меры

Хотите увидеть разбор вашего сайта — посмотреть насколько он хорошо реализован, удобен и крут? Скидывайте ссылку в комментарии. Наш редактор Лера заберёт сайт и пойдёт с ним к разработчикам. А дальше они разберут его и подскажут, что можно улучшить.