Посетителей становится больше, а продажи не растут? Возможно, дело в юзабилити. Даже самый интересный контент и большой ассортимент не заставят пользователя остаться на сайте, если он оформлен в ядовито-ярких цветах, шрифты «пляшут», а поиск нужного раздела/товара превращается в настоящий квест.
Как сделать так, чтобы потенциальному клиенту было приятно смотреть на ваш сайт и совершать на нем покупки?
- Поработать с техническими параметрами сайта.
- Заняться дизайном.
- Наладить удобную обратную связь.
- Настроить все атрибуты интернет-магазина.
Работа с сайтом
Загрузка страницы должна происходить незаметно для пользователя. Оптимально — за 1-3 секунды. Достичь этого можно, если правильно подобрать хостинг и оптимизировать содержимое страниц.
Проверить скорость загрузки страницы можно при помощи сервиса PageSpeed Insights. Например, для торговой платформы Poisk-podbor.ru с примерно 4 млн товаров, результат теста выглядит так:
Наличие обязательных атрибутов для интернет-магазина:
- шапка и подвал, одинаковые для всех страниц;
- каталог товаров с возможностью выводить на экран разное число единиц;
- фильтры (ценовой диапазон, размер, бренд);
- однотипные товарные страницы;
- корзина;
- форма заказа;
- условия оплаты, доставки и возврата;
- контакты;
- личный кабинет с историей заказов.
Например, сайт «Икеа»
Зайдя на главную страницу, пользователь должен сразу понять, что предлагает интернет-магазин (какие товары, услуги, акции и т. д.), видеть контакты и призыв к действию. Например, на главной странице eldorado.ru сразу видно, что продается бытовая техника, есть бонусная программа, скидки. Здесь же вынесены преимущества магазина.
Адаптивность — когда сайт сам подстраивается под размер окна браузера и выглядит одинаково красиво и на ПК с диагональю 20", и на смартфоне 6". Чтобы проверить, как выглядит сайт на разных мобильных устройствах, не нужно иметь в запасе арсенал гаджетов. Для этого есть специальные сервисы: responsivedesigntest.net, mattkersley.com и другие.
Если на сайте много товаров/разделов, вместо адаптивной версии создают абсолютно новую, мобильную.
Навигация — это проводник пользователя к целевому действию: переходы по разделам разного уровня (например, одежда – женская одежда – платья, брюки, юбки), возможность в один клик вернуться на верх, назад или на главную страницу, кликнув по логотипу в шапке сайта, наличие строк и поиска и т. д.
Например, сайт «Ив Роше».
Читабельность. Перед покупкой товара клиент хочет почитать описание шампуня или состав ткани на костюме, но шрифт слишком мелкий или сливается по цвету с фоном. Клиент попробует напрячь зрение и разобрать, что же там написано, но скорее всего, это вызовет у него раздражение и желание поискать схожие товары на другом сайте.
Сравните эти два варианта – сайты http://www.fivedoves.com/ и https://www.gridbooks.com/
Единство стиля на всех страницах упростит навигацию. Пользователь привыкает к внешнему виду сайта, расположению пунктов меню, строки поиска, фильтров и далее легко ориентируется.
Дизайн
Дизайн должен быть:
- умеренным, чтобы визуальная составляющая не отвлекала посетителя от целевого действия;
- с акцентами — выделяйте важное (кнопка «купить», раздел «новинки» и т. д.) цветом, шрифтом, анимацией;
- гармоничным по цвету — если у компании есть корпоративные цвета, используйте их на сайте (например, «Билайн» четко ассоциируется с черно-желтым, «Сбербанк» с зеленым), для подбора сочетающихся между собой цветов можно пользоваться колористическими кругами или онлайн-сервисами, например, colorscheme.ru.
Неотъемлемая часть дизайна — типографика или правила оформления текста, повышающие читабельность.
Вот несколько интересных фактов:
- чтобы текст хорошо воспринимался, комбинируют не более трех шрифтов;
- оптимальный размер шрифта — 16-20 px;
- межстрочный интервал соотносится с расстоянием между абзацами как 1 к 2;
- оптимальный размер абзаца — 10 строк.
Теперь сравните эти два скриншота. На них представлен один и тот же текст, но одинаково ли он читабелен?
Обратная связь
Страница загрузилась быстро, клиент легко нашел товар, отметил приятный дизайн сайта, но покупку так и не совершил – не состоялась коммуникация. Как ее обеспечить:
- Подключить онлайн-чат, где время ответа консультанта (живой человек, не бот) не будет превышать 1-2 минуты. Если чат недоступен 24/7, настройте его так, чтобы он отображался только в рабочие часы. Не запускайте окно одновременно с загрузкой страницы, пусть посетитель осмотрится. Есть сайты, где чат появляется спустя 20-30 секунд, есть те, где окно не всплывает, а ненавязчиво «ждет» вас в правом нижнем углу страницы – оба варианта рабочие, нужно тестировать, какой лучше подойдет вашему сайту. Например, на сайте ЦУМа иконка онлайн-чат выглядит вот так:
- Сделать форму обратной связи в подвале сайта, на страницах товаров или в разделе «Контакты», чтоб пользователь легко ее нашел. Форма должна быть простая, с минимальным количеством полей. Не ограничивайте длину сообщения и обязательно отправляйте подтверждение того, что заявка принята. Это может быть письмо на почту с указанием примерного срока рассмотрения заявки или всплывающее окно на сайте, например, как у «Глория Джинс»:
- Организовать рассылки, пуш-уведомления. Дайте клиенту возможность получать новости и спецпредложения на почту, по sms , в виде всплывающих окон в браузере – по его усмотрению.
- Предоставить как можно больше каналов связи – реальный адрес офиса/магазина, страницы в социальных сетях, телефон (лучше многоканальный, бесплатный), электронная почта.
- Предусмотреть поле для отзывов – это важный источник информации о том, что на вашем сайте хорошо, а что требует доработки. Для посетителя это помощь в принятии решения о покупке, показатель того, что с магазином есть обратная связь.
Юзабилити играет одну из ключевых ролей для клиента. Если покупку в вашем магазине совершать удобно и комфортно, то шанс, что покупатель сделает заказ, существенно выше. Поэтому юзабилити нужно уделять много внимания.