В статье рассматриваются распространённые ошибки коммерческих сайтов. Автор на реальных примерах разобрал недочёты, снижающие конверсию сайта, и поделился практическими советами по работе с этим показателем.
За год через сервис улучшения юзабилити сайтов AskUsers.ru прошло более 14 тыс. анкет асессоров; были получены отчёты по 473 интернет-ресурсам.
В общей сумме эти сайты получили 15 822 замечаний. Все обнаруженные недочёты разделили на шесть групп:
Условия заказа;
Доверие;
Удобство (usability);
Логика действий;
Контент;
Технические ошибки.
Из них больше всего замечаний приходилось на такой аспект, как условия заказа:
Далее автор подробно рассмотрел каждый из шести выделенных типов ошибок. Он также привёл вопросы, которые помогают выявить недочёты по указанным группам, показал примеры ошибок и правильного оформления.
Условия заказа (4118 замечаний)
Вопросы для проверки:
Найдите на сайте товары или услуги, подходящие вам, и попробуйте заказать online. Всё ли получилось? Какие сложности возникли? За счёт чего можно было бы сделать оформление заказа удобнее?
Укажите 5 ваших критериев выбора заказанного товара или услуги. Расположите их в порядке значимости для вас. Предложите несколько решений, которые подтолкнули бы вас заказать товар на этом сайте.
Примеры ошибок этого типа:
№ 1
На данном сайте ошибка заключается в том, что оформление заказа и страница корзины сделаны в одном шаблоне. Когда пользователь переходит из корзины на страницу оформления заказа, он не должен видеть лишнюю информацию. Эта страница не должна быть выполнена в общем шаблоне. Однако 90% существующих интернет-магазинов реализованы именно так.
№ 2
На этом примере ошибка в том, что пользователя уводят со страницы заказа в корзине на страницу с карточками товаров. Таким образом, он отвлекается от целевого действия – оплаты уже выбранного товара.
Как надо
Страница оформления товара должна быть выполнена НЕ в основном шаблоне. Нужно оставить пользователю возможность вернуться к просмотру товаров, но эта информация не должна отвлекать его от основного действия – перехода к оплате товара. Хорошо, если товары в корзине отображаются в свёрнутом виде:
Удобство (3665 замечаний)
Вопросы для проверки:
Посмотрите предложенный сайт и ещё 4 сайта данной тематики. Составьте свой рейтинг, проставив каждому из сайтов оценку от 1 до 10. Обоснуйте оценки.
Какая информация является, по-вашему, самой важной на сайте? На какой/каких страницах она подробно раскрыта? Сколько нужно кликов, чтобы добраться до неё с главной/внутренней страницы?
Пример ошибок этого типа:
На этом сайте кнопка «Купить» – малозаметна и расположена в нестандартном месте. Кроме того, асессоры отметили сложности при работе с фильтрами.
Как надо
При заполнении формы заказа подсказки должны быть возле окон, окна должны подсвечиваться:
При этом форма не должна быть слишком длинной:
Если есть такая возможность, можно предложить такой вариант: пользователь оставляет онлайн-заявку, указывая лишь номер телефона для связи. При желании он может заполнить подробную форму, пройдя по соответствующей ссылке на сайте:
Контент (3552 замечания)
Вопросы для проверки:
Посмотрите основные страницы сайта. Можете ли вы понять, о чём они, бегло пролистав их? Оцените удобство восприятия контента 5 просмотренных страниц сайта по 10-балльной шкале. Что можно улучшить?
После 3 секунд на сайте вам хочется остаться на нём или сразу его закрыть? Почему? Куда вы посмотрели в первую очередь (3 элемента сайта)? Куда вам хочется нажать в первую очередь и почему?
Примеры ошибок:
№ 1
На данном сайте отсутствует описание товара, его фотография не отображается.
№ 2
На этом примере видно, что текст на странице идёт сплошным полотном. Это неудобно и сложно для восприятия.
Как правильно оформлять контент:
Доверие (2789 замечаний)
Вопросы для проверки:
Данный сайт вызывает у вас доверие? Стали бы вы пользоваться услугами этой компании или обратились бы в другую? Почему? Оцените свой уровень доверия к данному сайту по 10-балльной шкале.
Попробуйте найти в поиске сайт конкурента, который вызывает у вас больше доверия? Почему? Укажите несколько основных причин. Укажите адрес понравившегося сайта и количество просмотренных сайтов.
Пример ошибок этого типа:
На данном сайте страница «О нас» не вызывает доверия у пользователей. Во-первых, нет внятного заголовка; во-вторых, текст решает задачи SEO, а не привлечения внимания пользователей.
Как надо:
Этот сайт вызывает большее доверие, поскольку предоставляет важную для пользователей информацию: способы оплаты, скидки и бонусы на сайте и т.п.
Также важно приводить информацию о сотрудниках компании и её руководстве, отзывы клиентов и т.п.:
Логика действий (943 замечания)
Вопросы для оценки:
К какой тематике относится данный сайт? Как быстро вы это определили? Соответствует ли содержимое сайта ожиданиям от сайта данной тематики? В чём именно это выражается?
Перечислите 5 задач, которые можно решать с помощью этого сайта? Каждую из задач оцените по 10-балльной шкале в зависимости от её степени важности/актуальности для вас.
Примеры ошибок:
№ 1
На этом примере не сразу понятно, чем занимается данный сайт. Многие пользователи не могли найти на нём корзину. Также было не видно, что товар уже добавлен в корзину.
№ 2
Здесь убрали страницу корзины и оформления заказа. Нажимая «Купить», вернуться к товарам пользователь не может. Несколько товаров одновременно купить невозможно.
№ 3
На этом примере пользователь хочет купить товар (рыболовную удочку), но не может понять, как это сделать. Кнопка «Купить» оформлена в виде лукошка. При наведении курсора она делается чуть больше, то есть элемент – активный. Однако логика всё равно не ясна – нет всплывающего окна с информацией о том, что товар добавлен в корзину.
Как надо
Главное, чтобы у пользователя было понимание, что нужное действие произошло.
Технические ошибки (755 замечаний)
Вопросы для проверки:
Посмотрите основные страницы сайта. Назовите главные моменты, которые вам не понравились и почему? Предложите несколько решений, которые помогли бы сделать данный сайт удобнее.
Какими способами можно оформить заказ на сайте? Перечислите все. Достаточно ли вам представленных вариантов? Все ли из них для вас понятны? Какие еще способы вам были бы удобны?
Примеры ошибок:
№ 1
На данном сайте «поехала» вёрстка.
№ 2
Этот сайт – взломан.
Баги могут быть самыми разными.
Основные выводы:
элементы должны располагаться в привычных местах (корзина – в правом верхнем углу; кнопка «Купить» должна быть кнопкой «Купить», а не лукошком и т.д.);
пользователи должны понимать, что они совершают действие;
пользователи также должны понимать, что действие произошло;
активные элементы должны быть контрастными;
формы должны быть проще, с проверкой и подсказками;
пользователя ничего не должно отвлекать от целевого действия;
пользователь должен получать ответы на интересующие вопросы.
Доклад Дениса Нарижного, автора сервиса AskUsers.ru, на тему: «Работа с конверсией: узнать, где вы теряете клиентов, просто!» прозвучал на All in Top Conf, которая проходила в Москве с 16 по 17 февраля 2016 года.
Обсудить
Комментарии