Технический директор MyWebSupport
Если бы существовал способ составить безупречное техническое задание для создания интернет-магазина, электронная коммерция была бы похожа на санаторий. «Купил путевку», то бишь заказал магазин согласно чудесному ТЗ, а дальше все само собой. Но это невозможно, а потому разработка каждого ресурса, предназначенного для ecommerce – это индивидуальный и очень непростой процесс. При этом, сколь бы объемным ни было ТЗ, оно не гарантирует отсутствия ошибок. В этой статье мы остановим свое внимание на ошибках интерфейса.
Все значения термина интерфейс сводятся к тому, что это взаимодействие человека и механизма. В данном случае механизм – это сайт интернет-магазина. Пользователь видит перед собой графический интерфейс, и понятно, что это реализуется благодаря системе управления контентом (платформа, CMS, движок). Однако если пользователь пришел за покупкой, но быстро покинул сайт, не совершив ее, это выражение его мнения. Что-то ему не понравилось на этапе знакомства. Взаимодействие не сложилось. И есть вполне типичные ошибки, которые к этому могли привести.
Конечно, мы не дадим тут исчерпывающий обзор, ведь, как заметил классик, нельзя объять необъятное. И если на сайте низкая конверсия, анализ причин в каждом случае даст свой результат. Мы сейчас не про маркетинг, не про SEO и не про сложные приемы проектирования и программирования. Мы о тех проблемах, которые связаны с психологией восприятия.
I. Этап беглого ознакомления
Неинформативная шапка
Каковы бы ни были ваши представления о привлекательности и солидности, они не должны вступать в противоречие с юзабилити. Если первое, что видит посетитель – это «богатая шапка» на треть экрана, в которой яркие акценты делаются на логотип и графические финтифлюшки, а важную информацию приходится искать глазами, то в таких случаях говорят, что дизайн сделан для директора, а не для юзера.
Как правильно:
- Логотип служит не для красоты, а для описания вида деятельности интернет-магазина (атрибут alt, альтернативный текст). Логотип кликабелен и служит ссылкой на главную с других страниц.
- Контактная информация: несколько кликабельных номеров телефонов (8 800 либо с кодом города), кнопка обратного звонка, электронная почта, адрес.
- Время работы (если круглосуточно – заметно это указать).
- Если вы работаете в разных регионах или у вас есть офисы и точки выдачи в различных городах, то виджет с автоматическим определением либо возможностью выбора города.
- Корзина на видном месте (в правом верхнем углу).
- Ссылки на пользовательскую информацию (способы оплаты, способы и стоимость доставки, возможности возврата/обмена товара и пр.) на видном месте.
- Форма поиска по сайту на видном месте.
- Все ключевые элементы находятся в первой трети окна.
Одна и та же версия как для десктопного, так и для мобильного сайта
Сайт корректно отображается на экранах компьютеров и даже в разных браузерах. Но когда пользователь заходит с гаджета, где экран другой (со смартфона, планшета, другого мобильного устройства), то очевидны серьезные проблемы с интерфейсом. Самая очевидная ошибка – размер страницы превышает размер окна, добавляется горизонтальная прокрутка. Другая ошибка – сложно структурированное меню, по элементам которого трудно кликать с экрана. Третья ошибка – необходимость скроллить, чтобы совершить ключевое действие.
Как правильно:
Продумать, как сайт будет отображаться на экранах с разным разрешением, обязан разработчик. Десктопная и мобильная версии имеют свои особенности. Так, в десктопной версии есть полноценное меню, а для мобильной версии применяется такое решение как кнопка вызова меню сайта в углу (hamburger navigation icon). Она фиксирована и по аналогии с тем, как это делается с бургер-меню, стоит зафиксировать корзину.
Верстка с багами
Ввиду того, что сайт у каждого пользователя отображается по-своему, возможны разного рода досадные ошибки, связанные с неверным позиционированием элементов. Например, дизайн-то адаптировали, но на одной или нескольких страницах внедрили элемент, занимающий много места – и на мобильных устройствах появилась горизонтальная прокрутка. Или наоборот, у пользователя экран с большим разрешением – и у него неблагополучно выглядят фоны. Внедрили какой-то шорткод – и «съехали» элементы рядом. Элемент предусмотрен как кликабельный – а кликнуть по нему невозможно. Ну и так далее.
Как правильно:
Тут никак не обойтись без тестирования. Первым делом понадобятся валидаторы на W3C (HTML и CSS). Популярный сервис – https://validator.w3.org. Корректность микроразметки можно проверить инструментами поисковиков (валидаторы микроразметки есть и у Google, и у Яндекса).
- В основе дизайна – модульная сетка. Таким образом в случае изменений верстка не будет слетать.
- Все медиафайлы (фото, графика, видео) оптимизированы под веб-формат.
- Проверка в разных разрешениях (ширина макета подстраивается под разрешение экрана).
- Проверка масштабирования (в диапазоне от 70 до 150%).
- Проверка доступности и функциональности всех элементов на шаблонных страницах.
Слайд-шоу непонятного назначения
Возможность вывода слайдеров и каруселей на главной странице обычно предусмотрена. И действительно, нет смысла от них отказываться, но в чем здесь может быть ошибка? Дело в том, что слайдеры долго загружаются и для мобильных устройств вообще не предназначены. А раз так, то «для красоты» – это неуважительная причина их использования. К тому же слайды, сделанные кустарным способом и непонятно что по сути рекламирующие, противоречат принципу: первый экран должен быть максимально информативным.
Как правильно:
Информация на слайде должна обслуживать ваше торговое предложение. Один слайд – одно предложение, причем оно должно быть таргетированным, сезонным и, естественно, привлекательным. Конечно же, это должна быть не просто картинка: по ссылке пользователь должен попадать на страницу с подробным описанием предложения.
Функция важна, но не реализована
Понятно, что блоки с картинками, анонсирующие популярные разделы каталога на главной, уместно вписанные в другие страницы и позволяющие пользователю cross-sell’ить и up-sell’ить – это резонно и удобно. Есть и другие факторы юзабилити, которые должны работать в каждом конкретном случае. И не только в интернет-магазине, а в ряде коммерческих сайтов, которые хотят быть конкурентоспособными. Хорошо бы, но не реализовано. Почему? Потому что функционал используемого движка изначально этого не предполагал. А если технически движок слаб или устарел, то это сказывается и на удобстве юзабилити сайта. Например, вам нужны такие-то фильтры товаров и блоки, а они в движке не предусмотрены. Доработки же вручную сильно затягивают, усложняют и удорожают процесс.
Как правильно:
Тут можно только посоветовать перед тем, как выбирать разработчика или коробочное решение, тщательно разобраться, какие функции должны быть реализованы. Заложены ли они в функционал по умолчанию. А чтобы процесс создания интернет-магазина не превращался в клубок проблем, рекомендуем руководствоваться правилом: проект делается в определенной последовательности по итерациям, а не сразу по 100 500 пунктам ТЗ.
II. Этап поиска
«Неудобный поиск – способ подольше удержать посетителя»
Есть несколько причин того, почему навигация и поиск по фильтру в интернет-магазине неудобны. И все же причина не должна быть заведомо циничной. Ведь ваша цель – продавать! А если пользователь сходу не понимает, что тут есть и как тут искать, он минутку, может, и задержится, но это будет первый и последний раз. В этой же связи стоит упомянуть и другую ошибку: «Вы не сразу найдете ответы на простые вопросы!» Например, о наличии и способах доставки товара. Если пользователь готов совершить покупку, а ему предлагают квест «Сначала разыщи, потом уточни, потом столкнись с непреодолимым препятствием», то легко догадаться о его негативной реакции. А некоторые не поленятся найти выход своим эмоциям в виде отрицательного отзыва. Причем не на вашем сайте, где есть модерация, а на сторонних ресурсах.
Как правильно:
Разработайте сценарий поведения пользователя. Он должен быть предназначен для человека, который не привык пользоваться интернет-магазином и не хочет лишний раз думать. Как этот человек приходит к покупке с любой страницы сайта? Если он сейчас далеко от страницы того товара, который ищет, какие действия ему нужно проделать? Понятны ли ему эти действия, легко ли их выполнить?
Карту возможных путей покупателя (Journey Map) стоит отобразить в виде инфографики для внутреннего пользования. Исходная точка – откуда посетитель пришел на сайт, нужная финальная точка – подтверждение заказа. Чтобы этот путь был комфортным, интернет-магазин должен отвечать следующим условиям:
- хорошо структурированный, удобный рубрикатор, помогающий в несколько кликов попасть на нужную пользователю страницу. При этом надо учитывать: то, что кажется удобным разработчику, не всегда таково для пользователя. Проверяется только методом тестирования;
- форма поиска, зафиксированная на видном месте;
- фильтрация по всем основным параметрам (характеристикам, артикулу, коду, цене и т.п.).
Выборки товаров, возникающие в ответ на определенный запрос, должны иметь ЧПУ, а не реализовываться динамически. Это важно и для SEO, и для некоторых пользователей (например, чтобы сохранить себе или переслать кому-то ссылку);
- присутствует ссылка для возврата к списку товаров и хлебные крошки;
- на любой странице сайта есть визуальное напоминание о том, что пользователь хотел сделать покупку. Например, он захотел прочесть FAQ, а в отдельном блоке увидел «недавно просмотренные товары». Кликнул – и легко вернулся.
Навязчивость
Не все веяния моды хороши, и то, что может подойти одному, категорически неприемлемо для другого. Это относится к функционалу, который вроде бы предназначен для сервиса, но в реализации вызывает большие сомнения.
Ярким примером такого спорного момента является возникновение поп-апа (всплывающего окна) с предложением консультации. Сама по себе функция онлайн-консультанта вполне резонна, вопрос в том, удачно ли она реализована.
Во-первых, если это сопровождается отчетливыми звуками, то раздражает и может даже испугать. Во-вторых, окно, перекрывающее меню или часть контента, который просматривает пользователь, откровенно мешает.
В-третьих, если один раз пользователь уже закрыл окно, а на следующей странице оно выскакивает снова, то это веский повод покинуть сайт, как покидают назойливого собеседника.
Другие примеры навязчивого сервиса тоже всем известны. Их цель – добиться контакта с пользователем. Это и всплывающая форма подписки, и пульсирующий яркий значок сервиса обратного звонка, и поп-ап в стиле: «Уже уходите? Подождите, у нас вот что еще есть!»… Некоторые владельцы интернет-магазинов не знают меры, внедряя эти функции и превращая тем самым пребывание на сайте в раздражающий процесс. Таким образом теряется неисчислимое количество потенциальных покупателей.
Как правильно:
- любая функция, предлагающая мгновенную обратную связь, не должна мешать посетителю;
- если при тестировании кто-либо из опрошенных указывает на то, что его раздражает, это надо доработать таким образом, чтобы раздражения не вызывало;
- если пользователь один раз закрыл окно, оно не должно вновь всплывать на других страницах;
- если вы хотите, чтобы пользователь больше времени проводил на сайте, избегайте ярких пульсирующих элементов (вроде кнопки обратного звонка). Пусть элемент будет статичным.
Переход на карточку товара – и отказ
Уже на этапе тестирования можно обнаружить и упредить наиболее досадные ошибки, приводящие к тому, что потенциальный покупатель покидает магазин. Они таковы:
Отсутствие подробных характеристик товара
Казалось бы, наличие подробного описания – одно из основных требований, предъявляемых к товару в интернет-магазине. Однако распространены два вида ошибок. Первая: «Товар как товар, что его описывать!», и вторая – спарсить описания у конкурентов. Оба эти вида ошибок чреваты тем, что ваш магазин будет вызывать меньше доверия, чем вам бы того хотелось. А низкое доверие = низкая конверсия.
Как правильно:
Заказывайте описания у копирайтеров. Очевидно, что 100% уникальность описаний не всегда возможна и нужна, однако чем полнее будет представлено в карточке описание, тем лучше. Тут важна именно всесторонность описания, а не его уникальность. Сравнивайте свое предложение с конкурентами и добавляйте выгодные отличия: обзоры, отзывы, «плюшки» при покупке. Если вы уверены в качестве своего товара, предлагайте пользователям бонусы за оставленный отзыв. Дополнительно внедрите блок для cross-sell: похожие товары, популярные товары и прочие товарные рекомендации.
Еще лучше обзор товара: не забывайте про видео обзоры или презентации, пусть и короткие.
Неконкурентоспособные фото
Когда мы говорим о том, как важен для интернет-магазина качественный контент, мы в первую очередь имеем в виду качество фотографий товара. В самом общем приближении это означает, что фото оригинальные (а не скопированные у других) и профессионально выполненные.
Например, самые распространенные проблемы:
- загрузка неоптимизированных (очень больших) изображений десктопной версии сайта для мобильной версии;
- непрофессиональные фото (темные, снятые с единственного или неверного ракурса, эстетически сомнительные);
- некликабельное изображение – вот только 300 × 200 и больше никак. У конкурентов тем временем тот же товар представлен прекрасными фото и даже в 3D.
Как правильно:
- все изображения обработаны в графическом редакторе для максимальной визуальной привлекательности и уникализации;
- все, что важно для создания представления о данном товаре (размер, визуальные характеристики, функциональные детали, особенности) должно быть наглядно;
- при клике должна открываться увеличенная фотография товара;
- пользователь может посмотреть различные цветовые решения товара;
- наличие слайдера с фото в нескольких ракурсах является преимуществом.
III. Этап оформления заказа
На этом этапе скрывается так много ошибок, что в рамках одной статьи все перечислить невозможно. Остановимся на тех, которые явно свидетельствуют: здесь не подумали о психологии пользователя. Избежать этих ошибок, как и предыдущих, можно, если поставить себя на место будущих покупателей.
«Усложним вам оформление заказа!»
Интернет-магазины, в которых оформление заказа похоже на квест, обречены. Одним из мощных факторов отказа является обязательное требование пройти регистрацию. Ставим себя на место пользователя: он в принципе не хочет делать лишних движений. А если его заставляют заполнять десяток полей, да еще водить проверочный код, который трудно прочесть, велик риск, что вы потеряете покупателя. То же самое произойдет, если вы «утаите» важную информацию, либо он не разберется в логике действий.
Как правильно:
- у пользователя есть возможность логиниться на сайте через социальные аккаунты. Момент занесения личных данных пользователя в форму возникает, когда он необходим, не раньше;
- последовательность оформления заказа: выбор товара, выбор способа доставки, выбор способа оплаты, оплата, подтверждение заказа;
- до того, как заказ сформирован, покупатель получает информацию об общей стоимости заказа, о возможных сервисных сборах, стоимости доставки и прочих дополнениях, которые не должны приниматься к сведению постфактум;
- для каждого целевого действия – свой смысловой блок либо элемент. Если что-то пошло не так, он ясно видит, что именно и почему. Отредактировать информацию ему легко;
- требования ФЗ-54 соблюдены. Да, это уменьшает конверсию, но клиент обязан согласиться с вашей политикой обработки персональных данных, прежде чем отправит свой заказ или свои данные.
Содержимое заказа и факт покупки
На этом этапе пользователь платит, а потому важно, чтобы он получил от процесса удовольствие. Многие умудряются это удовольствие ему испортить, так пусть же это будет не ваш случай!
Как правильно:
- Содержимое корзины предельно наглядно. Есть картинка превью, краткое описание, количество, сумма за каждое наименование, другая информация вроде положенной скидки.
- Сформировав заказ, пользователь проверяет все параметры на странице подтверждения заказа и дает свое согласие на переход к оплате.
- Страница подтверждения заказа по содержанию соответствует выбранным способам доставки, оплаты и получения товара.
- После отправки заказа на сервер пользователь видит информацию «Спасибо за покупку». Там указан состав заказа и краткие сведения о программе лояльности (промо-код, бонус, подарок и т.п.) Также письмо с этой информацией дублируется на электронную почту покупателя.
Резюмируем. В числе факторов, которые определяют, совершит пользователь покупку или нет, визуальная составляющая является одной из основных. Если что-то не заложено в процессе проектирования – этого и не будет на сайте. Либо наоборот, вы внедрите такие элементы, которые будут отвлекать и раздражать пользователей в ущерб нужным действиям. При этом к отказу от покупки может привести любая, казалось бы, мелочь.
Мы неоднократно упоминали о необходимости тестирования, и очень важно, чтобы свое мнение высказали самые разные люди. Поэтому вот примерный список задач, которые можно поставить перед вашей фокус-группой:
— «Зайдите на главную страницу. Понятно ли, куда вам двигаться дальше, когда вы смотрите на первый экран (не листая вниз)?».
— «Вы собираетесь купить товар с набором характеристик A, B, C, D. Осуществите это намерение, начав с главной страницы».
— «Поищите товар с тем же набором характеристик, зайдя в соответствующую рубрику каталога».
— «Зайдите на страницу искомого товара, как будто вы перешли на нее по внешней ссылке. Возникло ли намерение купить? Если нет, то почему? Если да, то комфортно ли вам осуществить свое намерение?»
— «Перейдите из каталога на любую другую страницу (пользовательской информации, статью, личный кабинет). Легко ли вам вернуться к просмотренному товару?»
— «Есть ли на сайте мешающие и раздражающие факторы?»
Когда по результатам независимого тестирования станет ясно, что психологически люди готовы у вас покупать, вас можно поздравить: ошибки исправлены и теперь пора заняться развитием!