Как юзабилити-аудит помогает найти барьеры, которые мешают посетителям интернет-магазинов становится клиентами.
Специалист юзабилити-отдела Алевтина Данилова взаимодействовала с сайтом как представитель целевой аудитории, который хочет совершить покупку. Она выбрала для аудита следующий пользовательский сценарий:
Что делает новый, еще не знакомый с сайтом пользователь? Быстро осматривается: видит наверху логотип и слоган «производим и продаем» и понимает, что компания является производителем. Чуть ниже строчка «магазин садового декора, парковой скульптуры и кованой мебели» — это полезный текст, который подтверждает, что покупатель попал в магазин, где он сможет найти необходимые товары.
Рисунок 1. Фрагмент главной страницы
Обычно первому знакомству со страницей пользователи уделяют не больше 3—5 секунд, быстро прокручивая ее. За это время посетитель главной страницы увидит только множество красивых, но бесполезных картинок. И, скорее всего, не поймет, что они означают.
Рисунок 2. Блок с иллюстрациями-разделами на главной странице
Рисунок 3. Названия разделов при наведении курсора на иллюстрацию
На самом деле картинки — это иллюстрации основных разделов сайта. Если на них навести курсор, появится сопроводительный текст. Но даже если пользователь это обнаружит, он столкнется с необходимостью проделать это с каждой картинкой.
Наш покупатель не замотивирован это делать, поэтому после 1—2 экранов с иллюстрациями он вернется в начало страницы, чтобы воспользоваться навигационным меню или поиском по сайту. Поэтому он не увидит блоков с товарами, которые размещены ниже иллюстраций — хиты, новинки и скидки. И не сможет быстро понять соотношение цены и качества товаров на сайте.
Рисунок 4. Главная страница и блок с разделами сайта (obi.ru и ulmart.ru)
Если пользователь захочет поискать товары в дороге или за обедом со смартфона, он без труда сможет это сделать — сайт адаптирован под мобильные устройства. Однако есть неприятный сюрприз — окно с акцией, которое закрывает весь экран.
Рисунок 5. Окно с акцией при открытии сайта со смартфона
Предложение неуместно для нового пользователя: он еще не знает, на каком сайте оказался, а его уже просят оставить личную информацию — адрес электронной почты. Чаще всего пользователи недовольно закрывают всплывающие окна, даже не прочитав, что им предлагают в обмен (скидку). В данном случае проблема еще серьезнее: окно отображается некорректно, и пользователь не может понять, какую скидку ему предлагают, и на что она распространяется.
Самое удачное время для скидки — когда посетитель сайта уже познакомился с товарами, но сомневается, стоит ли покупать их. Поэтому акционное предложение уместно на карточке товара и в корзине — тогда оно будет побуждать к заказу выбранного им товара.
Для поиска товара можно воспользоваться каталогом и поиском по сайту. Попробуем найти дровницу для мангала с помощью каталога. На сайте основные категории товаров выведены в меню — это удобно, сразу понятно, что здесь можно купить. Однако меню имеет и несколько недостатков.
Если пользователь медленно просматривает категории одну за другой, то первая проблема, с которой он сталкивается — названия разделов. Они не написаны естественным языком, на котором обычно говорят посетители. Приходится мысленно переводить названия «с русского на русский»: «Мебель садовая» → «Мебель для сада» или «садовая мебель». Сложно представить себе потенциального покупателя, который сказал бы: «Я хочу посмотреть мебель садовую» или «Я бы купил фигуру садовую!» .
Рисунок 6. Категории товаров
Представьте, что вы пришли в большой супермаркет, и на схеме с основными отделами увидели название «…». Вы бы захотели пойти в эту часть магазина, если бы пришли за конкретными покупками? Маловероятно. Пользователь на сайте также не сможет понять, что означает многоточие, какие товары содержит подобный раздел. Он вряд ли захочет его посетить и потому так и не узнает, что в этой категории находятся новинки.
Рисунок 7. Раздел «…» в меню
По сценарию пользователь хочет купить мангал и дровницу, поэтому он наводит курсор на раздел «Мебель садовая» и сталкивается с очередным препятствием. Он вынужден читать все названия по порядку, пока не увидит нужный, потому что разделов много и нет подсказок, к какой категории относятся нужные товары.
Рисунок 8. Раздел «Мебель садовая»
Рисунок 9. Пример выпадающего меню с подкатегориями
Посетитель нашел нужную категорию «дровницы для мангала» и перешел к ней. Теперь ему нужно посмотреть товары и подобрать нужный.
Первая задача на сайте эффективно решается карточками товаров с крупными фотографиями: можно перейти к изучению подробной информации, добавить товар к сравнению или сразу купить его.
Слева пользователь видит список всех подразделов, включая тот, в котором он находится. Однако эта страница никак не выделена, что может дезориентировать. Также неочевидно, почему на странице «Дровницы для мангала» предлагается посмотреть «Комплекты садовой мебели».
Рисунок 10. Дровницы для мангала, каталог в левой части страницы
Другая проблема вытекает из первой: для быстрого подбора товаров обычно предлагается два решения — сортировка товаров по параметрам (например, цене или популярности) и фильтры. Однако до блока с фильтрами еще нужно долистать: он расположен под категориями каталога, примерно на третьем рабочем экране.
Рисунок 11. Расположение фильтров в каталоге
Допустим, пользователь выбрал один из параметров, но не нашел подходящий товар. Чтобы изменить настройки, ему придется снова прокрутить страницу вниз. Обычно параметры фильтра меняются несколько раз, поэтому выбор товара превращается в утомительный процесс.
Рисунок 12. Пример навигации по подразделам и расположения блока с фильтрами (ulmart.ru)
Страница с детальным описанием товара — одна из ключевых, так как именно с нее пользователи чаще всего добавляют товар в корзину. Отметим несколько барьеров, которые могут препятствовать покупке.
Крупный баннер справа отвлекает внимание от фотографии и описания товара и опускает на второй экран информацию о доставке, которая влияет на решение о покупке. Сам баннер не выполняет никакой функции, номер телефона хорошо заметен пользователям в шапке сайта.
Рисунок 13. Баннер в правой части карточки товара
В блоке «Доставка» не указана стоимость. При этом уведомление, что ее сообщит менеджер после оформления заказа, бесполезно. Потенциальный покупатель всегда может задать вопрос представителю компании или перейти на сайт конкурента, где сумма указана, и купить товар там.
Рисунок 14. Блок с информацией о доставке товара
Рисунок 15. Пример информации о доставке (mvideo.ru)
На сайте нельзя выбрать способ доставки и оплаты покупки, поэтому заказ оформляется просто и быстро: пользователю необходимо заполнить всего четыре поля, из которых обязательны только два.
Рисунок 16. Оформление заказа
Минимальное количество полей для оформления заказа — хорошее решение. Единственный недостаток формы — пояснения для и без того очевидных полей.
Мы часто рекомендуем использовать подсказки, чтобы пользователи не боялись оставлять свои данные. Например, в форме подписки на новинки или акции можно указывать, как часто будут приходить письма, и гарантировать сохранение конфиденциальности персональных данных. Для формы заказа это избыточное решение: большинство пользователей хотя бы раз делали онлайн-покупки и понимают, зачем им необходимо указать контактную информацию.
Рисунок 17. Пример маски, которая отображается при заполнении поля «телефон» (obi.ru)
Наш специалист прошел путь пользователя на сайте — от первого просмотренной страницы до оформления заказа. Проблемы, которые были выявлены в ходе экспресс-аудита — лишь видимая часть айсберга. В следующих выпусках, посвященных юзабилити, мы расскажем о других методах исследований, проведем тестирования с живыми пользователями и расскажем, что делать, если кажется, что очевидных проблем на сайте нет, но посетители не выполняют целевых действий.
Одна из рекомендаций аудита требует комментариев: наш юзабилити-специалист обратила внимание на названия категорий и порекомендовала использовать максимально простой и понятный язык в навигации и текстах на сайте. На структуру сайта и названия страниц и разделов часто влияют SEO-требования — не идут ли они вразрез со здравым смыслом?
Вам будет интересно
Для завершения подписки вам необходимо перейти по ссылке,
присланной по указанному адресу email.
Пожалуйста, попробуйте еще раз
