Аптеки Озерки: авторский надзор за редизайном сайта

О клиенте

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

Задача

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

Методология

Провели авторский надзор за макетами в течение четырёх месяцев. Проверяли каждый экран на соответствие прототипам: страницы товаров, каталог, корзину, личный кабинет, карту аптек, формы регистрации и оформления заказа. Макеты готовились для пяти разрешений экрана: 320, 768, 1024, 1280 и 1440 пикселей.

Основные находки

Поле поиска теряется на странице

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

«Поле поиска теряется на фоне остального более яркого контента. Оно не выглядит как поле ввода»

Цена товара оказалась в слепой зоне

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

«Люди просматривают страницу слева направо, и правый столбец традиционно используют для рекламы и второстепенной информации»

Термин «Описание» непонятен для лекарств

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

Кнопки активны при незаполненных полях

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

Корзина не учитывала сложные сценарии

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

Результат

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