Оптимизация загрузки прайса: улучшили UX на 73%
При актуализации сайта клиники одной из главных задач была замена сложного прайса в виде html-таблицы на удобный и простой в управлении формат, который легко воспринимается пользователями.
Раскрывающийся список услуг, плавающая форма обратной связи для записи, поиск по прайсу, разные виды цен в зависимости от категории врача и наличия вилки стоимости — все это должно было упростить путь пациента до совершения конверсионного действия.
Но из-за такого обилия информации на одной странице загрузка шла медленно и ломала весь пользовательский сценарий. А кому приятно видеть более 10 секунд белый экран и гадать, работает ли сайт вообще?
Вот и нам стало неприятно. Но проблема, которую можно описать — это уже задача. Принялись ее решать.
Анимация и состояние загрузки
Мастером написания исключительно балдежного/работоспособного кода (Павлом Воробьевым) было решено изменить логику загрузки прайса и перейти к параллельной подгрузке товаров по корневым группам c использованием анимаций.
А теперь на человеческом: грузим все цены сразу, но делим их на группы (консультация, аппаратная косметология, эстетическая косметология и т.д.). А чтобы пользователь понимал, что система работает, для блоков категорий добавили лёгкие анимации на время подгрузки.
Дополнительно в блоке поиска вывели текстовое уведомление о том, что идёт загрузка цен.
Когда анимации завершатся, уведомление из поиска исчезнет, и им можно будет воспользоваться. Специально для кейса был взят комментарий создателя этой гениальной идеи:
«Пиши круто вышло всем спасибо всех люблю»
— Павел Воробьев, тимлид и fullstack-разработчик BTB digital
Результат для пользователя и бизнеса
Время до первого «ощутимого» отклика интерфейса заметно сократилось: пользователь моментально видел структуру прайса и первые группы, а не пустую страницу.
Поведение страницы стало предсказуемым: анимации и понятные статусы загрузки снизили количество уходов с прайс‑страницы и упростили поиск нужных позиций в большом каталоге.
«Вложила весь свой пользовательский опыт и гнев на долгие прогрузки, чтобы помочь пользователям сайта чувствовать другое»
— Анастасия Короткова, руководитель проектов BTB digital
Усовершенствованная прогрузка товаров с анимациями и прозрачным статусом загрузки — отличный способ улучшить пользовательский опыт на сайтах с большим ассортиментом. Такой подход позволяет избежать долгого ожидания, быстро показать ключевую информацию и обеспечить полноценный функционал поиска после загрузки. В результате сайт становится удобным, быстрым и клиентоориентированным, что положительно сказывается на лояльности и продажах.
