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

За год через сервис улучшения юзабилити сайтов 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 года.