Задумывались ли вы, почему некоторые сайты хочется закрыть сразу, даже если контент нас заинтересовал? Секрет в том, насколько комфортно устроен сайт и легко ли найти нужную информацию. Не раздражает ли нас цветовое оформление. Из этих и многих других факторов складывается то, что называют юзабилити сайта.
Чек-лист, что проверить на сайте
- Технический аудит (скорость загрузки и отсутствие ошибок). Главная страница загружается за 1–3 секунды (в идеале все остальные тоже). На сайте минимальное число технических ошибок.
- Адаптивность. Сайтом удобно пользоваться с разных устройств (смартфонов, планшетов, десктопов).
- Главная страница. Попав на домашнюю страницу сайта, пользователи сразу понимают, какие товары или услуги предлагает ваша компания.
- Навигация. У сайта чёткая простая структура и есть поиск. Названия всех элементов сайта (от домена до заголовков и кнопок) однозначно воспринимаются пользователями.
- Единообразие интерфейса и форм. У всех страниц и форм сайта сходная структура и оформление.
- Читабельность. Оформление текстов не затрудняет восприятие информации.
Рассмотрим каждый пункт подробнее.
Скорость загрузки и ошибки
Посетителям комфортно, когда страница загружается за 1–2 секунды. Добиться такой скорости помогут подходящий хостинг и оптимизация сайта. Оптимизированной считается страница с простой структурой, минимизированным кодом и без тяжёлых форм.
Узнать скорость загрузки своего сайта можно с помощью сервисов PageSpeed Insights, Loading.Express и подобных им. Вот результаты скорости загрузки Яндекса в PageSpeed Insights. Он загружается очень быстро. Это, с одной стороны, связано с тем, что на странице немного контента. А с другой — с тем, что содержимое страницы оптимизировано для оперативной загрузки:
Кроме скорости загрузки важно, чтобы на сайте было как можно меньше технических ошибок. Они напрямую связаны с восприятием качества сайта. Очевидно, что неработающие кнопки, битые ссылки или некорректная вёрстка негативно влияют на мнение пользователей. Постарайтесь не допускать технических ошибок или оперативно устранять их.
Адаптивность
Адаптивность — это способность сайта выглядеть одинаково хорошо и на десктопе, и на смартфоне, и на планшете. Чтобы добиться этого, можно использовать адаптивную вёрстку или сверстать для каждого варианта свою версию.
Если у сайта простая структура и немного контента (например, сайт-визитка), выбирайте адаптивную вёрстку. Благодаря ей элементы страницы подстраиваются под экраны планшетов и смартфонов.
Если же на сайте много разделов и контента, подготовьте отдельную мобильную версию. Как правило, это неполная версия сайта, в которой на главную страницу вынесены главные разделы и возможности.
Главная страница
Главная страница на то и главная, чтобы выражать основной посыл вашего сайта. Убедитесь, что, оказавшись на главной странице сайта, пользователь поймёт, чем занимается ваша компания и что вы ему предлагаете.
Например, сайт интернет-магазина М.Видео. По главной странице понятно направление (интернет-магазин). Разделы сайта повторяют классификацию товаров. Кнопка «Купить» намекает на то, что к целевому действию можно перейти с первой страницы:
Навигация
У сайта должна быть простая структура и упорядоченное меню, тогда пользователь сможет быстро выполнить целевое действие. Помогают ориентироваться на сайте следующие настройки:
- Кликабельные «хлебные крошки» (путь от домашней (главной) страницы до текущей). Благодаря им пользователь понимает, на каком уровне сайта он находится, и может перейти на уровень выше в один клик.
- Кнопка «Наверх», если страница занимает больше одного экрана.
- Возможность вернуться на главную страницу благодаря кликабельному логотипу в шапке или текстовой ссылке в футере (информационном блоке внизу страницы).
- Кнопка возврата в браузере работает корректно на всех страницах сайта. Чтобы при нажатии пользователь попадал на шаг назад, а настроенные фильтры/формы сохранялись.
- Поиск по сайту, который позволит пользователю найти конкретные товар/услугу/статью. Принято размещать строку поиска (или иконку лупы) в правом верхнем углу.
Сайт Vichy — удачный пример. В нём есть «хлебные крошки», которые позволяют ориентироваться в каталоге. Названия разделов краткие и однозначные. Мы понимаем, что найдём в разделах «Лицо» (средства по уходу за лицом), «О марке» (История бренда/текст о компании). Отыскать конкретную позицию можно через поиск, он расположен в правом верхнем углу.
Чтобы пользователям было удобнее ориентироваться на сайте, используйте точные формулировки. Например, раздел «Коллекция» на сайте кажется слишком общим. Лучше выражаться конкретнее: «Пальто, куртки и пиджаки», «Свитеры и кардиганы».
Пользователь должен понимать, что произойдёт, когда он нажмёт на кнопку или перейдет по ссылке. Для кнопок лучше использовать глаголы в инфинитиве: «Подписаться», «Купить», «Перейти в корзину». Неудачный пример названия кнопок: «Готово», «Продолжить», «Дальше». Если человек отвлечётся от сайта и, вернувшись, увидит эти кнопки, он не вспомнит, на каком этапе находился.
Формулировки важны не только в служебном тексте на сайте, но и в имени домена. Выбирайте домен, который будет связан с вашей деятельностью или торговой маркой, чтобы его было легко запомнить или напечатать. Вы можете подобрать подходящий домен на сайте хостера.
Единообразие интерфейса и форм
Дизайн и структура должны быть единообразными для большинства страниц. Если все страницы будут свёрстаны по-разному, у пользователя не закрепится образ вашего сайта как единое целое. Ориентироваться на хаотичных разрозненных страницах сложнее.
Удачный пример — единообразный интерфейс сайта BAGAAR. Шапка сайта с логотипом и основными разделами закреплена и не пропадает при скролле страницы вниз. Футер повторяется на всех страницах сайта.
Позаботьтесь и о единообразии форм (инпута) на сайте. В формах должны быть чётко указаны обязательные поля, а также даны примеры/советы для заполнения. Приветствуется, если формы на разных страницах организованы единообразно.
Читабельность
Последнее общее правило: оформление текста не должно отвлекать пользователя от контента. Для этого подберите подходящий для чтения шрифт (чаще всего выбирают вариант с засечками: Times New Roman, Bodoni и др.). И придерживайтесь правила контрастности: тёмные цвета — для текста и светлые — для фона или наоборот.
Последнее общее правило: оформление текста не должно отвлекать пользователя от контента. Для этого подберите подходящий для чтения шрифт (чаще всего выбирают вариант с засечками: Times New Roman, Bodoni и др.). И придерживайтесь правила контрастности: тёмные цвета — для текста и светлые — для фона или наоборот.
Помните, что вы пишете тексты в первую очередь для пользователей, а не для поисковой системы. Текст на сайте не должен состоять из бессвязных ключевых фраз или повторять ключевое слово в каждом предложении.
Визуальная составляющая — первое, с чем сталкиваются пользователи, попадая на сайт. По исследованию InstantShift (англоязычное digital-сообщество), для 94% людей дизайн — мерило, по которому они определяют, вызывает ли сайт доверие.
В узком понимании дизайн относится только к оформлению внешнего вида сайта. В широком и более современном понимании — это мостик, связывающий пользователя и сервис. Его главная цель — быть функциональным и удобным. В статье рассмотрим, что делает дизайн таковым.
Чек-лист, что проверить в веб-дизайне
- Функциональность и умеренность. Убедитесь, что дизайн не отвлекает пользователей от содержания сайта и целевого действия.
- Композиция и акценты. Тщательно продумывайте структуру и расставляйте акценты, чтобы пользователи не пропускали нужную информацию.
- Цветовая гамма. Выбирайте подходящие цвета, которые не будут сливаться и затруднять чтение.
- Единообразие элементов. Следите, чтобы однотипные элементы на разных страницах сохраняли единообразие и последовательность.
- Типографика. Оформляйте тексты так, чтобы они быстро просматривались и легко читались.
- Качество визуального контента. Используйте оригинальный визуальный контент, чтобы проиллюстрировать важные тезисы.
Давайте рассмотрим каждый из пунктов детально.
Умеренность
Заходя на сайт, мы сканируем его взглядом, чтобы найти то, за чем пришли. Если это интернет-магазин, ищем интересующие нас товары, если медиа-портал — свежие статьи, которые хотим прочитать. Но если на страницах много лишнего (информации, блоков и «украшений»), найти нужное сложно.
Помните, что веб-дизайн — не автономное расположение или нагромождение элементов. Он должен быть функциональным, то есть решать задачи пользователей. Поэтому один из ключевых пунктов веб-дизайна — умеренность.
На что обратить внимание, чтобы на сайте не было лишних элементов:
- Уберите с главной страницы всё второстепенное и не относящееся к цели пользователей. Оставляйте только то, что введёт их в курс дела и ответит на главные вопросы, расскажет о лечении их «боли». Для фильтрации подойдёт вопрос: «Зачем этот элемент здесь».
- Освободите место. На сайте должно быть достаточно «воздуха», то есть пустого пространства. Оно выделяет контент и позволяет сфокусироваться на нём.
- Отключите автозапуск видео, лупов и гифок. Оставьте пользователю иллюзию выбора. Кнопка Play позволит ему погрузиться в материал в удобное время. Кроме того, движение и мигание на фоне отвлекает от содержания.
- Будьте креативны в меру. Авторский дизайн — безусловно, украшение сайта, но с ним можно переборщить в интерфейсах. Если креатива слишком много, он может заслонить пользу и назначение сервиса. На первом месте должны стоять функциональность дизайна и решение задачи пользователя
Композиция и акценты
Композиция — это то, как соотносятся между собой части целого. А акценты — то, как выделяются важные элементы. Если на сайте нет чёткой композиции — это сразу бросается в глаза. В нём «непонятно, что хотел сказать автор». При создании любого сайта стоит учитывать законы композиции.
Можно возразить, что композиция и акценты зависят от типа сайтов, сферы бизнеса или вовсе индивидуальны. Несомненно, логика расположения элементов интернет-магазина отличается от размещения блоков новостного портала. Да и композиции двух магазинов могут не совпадать.
Но есть базовые принципы. Они основываются на том, как работают внимание и восприятие человека. Не учитывая их, нельзя сделать цельный и понятный сайт.
Правило третей
Придерживайтесь правила третей. Оно пришло в дизайн из живописи и связано с золотым сечением. Чтобы применить его, наложите на страницу «сетку», которая разделит страницу на 3 равные части вдоль каждой из сторон. Получится 9 одинаковых прямоугольников. Четыре центральные точки пересечения будут притягивать больше всего внимания.
Туда целесообразно помещать якорные объекты и акценты, потому что эти области неосознанно притягивают взгляд большинства людей.
Паттерны сканирования
Левый верхний угол — точка отсчёта в системе координат. В большинстве языков текст читается слева направо и сверху вниз: взгляд движется по странице сайта аналогично.
При движении он повторяет начертание буквы F. Верхняя перекладина слева направо → нижняя перекладина в том же направлении → вертикальный отрезок сверху вниз. Зная это, располагайте важные элементы в последовательности F-паттерна.
Кроме него есть Z-паттерн. Он характерен для сайтов с альбомным позиционированием. Взгляд скользит по траектории буквы Z: верхняя перекладина слева направо → диагональ → нижняя перекладина слева направо.
Акценты
Не забывайте об эффективности простых акцентов. Акцент — это выделение элемента из ряда однотипных. Он привлекает внимание за счёт того, что отличается от других. Сделать акцент можно самыми разными способами. Начиная от выделения цветом, размером, расположением, заканчивая нестандартной анимацией.
Цветовая гамма
Цвета, использованные в интерфейсе, влияют на восприятие сайта и настроение пользователя. Слишком яркие или несочетающиеся, они могут вызывать неосознанное отторжение. Поэтому к выбору цветов нужно подходить серьёзно. Вот, на что стоит ориентироваться:
- Если у бренда есть корпоративные цвета, используйте их. Это повышает узнаваемость и вызывает доверие. Согласитесь, на сайте Сбербанка странно бы смотрелась цветовая гамма, отличная от фирменного зелёного.
- Избегайте цветов, которые не подходят под тематику сайта или резонируют с ней. Например, розовый не ассоциируется со сферой недвижимости, поэтому не подойдёт для оформления сайта ЦИАН. Его связывают с отношениями или товарами для женщин.
- Используйте 2–3 цвета в оформлении интерфейса. Чем больше цветов, тем сложнее их гармонично сочетать. Для трёх цветов используйте соотношение 60-30-10. 60% — одноцветный фон, 30% — цвета иллюстраций или текста, 10% — для акцентных элементов.
Выбирайте для фона неяркие цвета, которые не мешают сосредоточиться на контенте. Подойдёт белый и оттенки серого, бежевого.
Чтобы проверить, будут ли сочетаться цвета интерфейса, используйте колористические цветовые круги. Это диски, размещённые на одной оси. На их поверхностях отображаются все основные цвета светового спектра и возможные оттенки и контрасты.
Также можно использовать различные онлайн-сервисы (colorscheme.ru и другие).
Делайте элементы контрастными, то есть отличающимися по яркости.
Единообразие
Дизайн должен быть консистентным, то есть непротиворечивым и единообразным. Если однотипные элементы на разных страницах отличаются, это делает дизайн непоследовательным.
Например, если на главной странице гиперссылки подчёркиваются и выделяются оранжевым, а на другой — не подчёркиваются и выделяются синим, то на второй их могут не идентифицировать как кликабельные элементы.
Проследите, чтобы схожие элементы оформлялись единообразно. Это касается величины отступов, размеров заголовков одного уровня и схожей организации иконок, форм, активных и неактивных элементов.
Типографика
Текстовая информация в большей или меньшей степени представлена на всех сайтах. Самое важное, чтобы текст был интересен, понятен и полезен вашей целевой аудитории. Но если хороший по содержанию текст оформлен абы как, это снизит его эффективность.
Правила оформления текстов называются типографикой. Это отдельная область, которая требует глубокого погружения. Мы выделили только основные критерии, которые повышают читабельность текста:
- Разбивка текста на абзацы до 10 строк. Это помогает избежать сплошной простыни, которую тяжело воспринимать.
- Оптимальный размер кегля основного текста: 16–20 px. Мелкий шрифт не вызывает желания погрузиться в чтение. В сочетании с простынёй текста является убийственным приёмом для глаз пользователей.
- Внутренние отступы меньше внешних. Рассмотрим на примере. Если вы установили межстрочный интервал 1,3, то расстояние между абзацами должно быть как минимум в два раза больше (от 2,6 px). Это позволяет визуально группировать однотипные элементы и отделять их от других.
- Умеренное количество выделений. Выше мы говорили об акцентах, а ещё выше — о минимализме. Пришло время совместить эти два принципа в третьем. Не переусердствуйте с выделениями. Если в тексте через слово полужирное начертание, сочетающегося с курсивом, подчёркиванием и цветовыми врезками, это произведёт эффект разорвавшейся бомбы. В негативном смысле.
- Не используется больше трёх шрифтов. Иначе возникнет ощущение небрежности и хаотичности.
Качество контента
Под конец коснёмся очевидного. Не используйте некачественный визуальный контент. К нему можно отнести плохо оптимизированные изображения и видео, которые медленно грузятся сами и снижают скорость загрузки сайта в целом. Стоковые фотографии, набившие оскомину. Маленькое количество пикселей в изображениях, которая превращает их в кашу на экранах с большим разрешением.
Найдите дизайнера, который будут наполнять сайт оригинальными и уникальными фотографиями и иллюстрациями. Со временем (при удачном стечении обстоятельств) у вас может появиться узнаваемый стиль, который будут копировать на других веб-сайтах.
Рассмотрим каналы коммуникации с клиентами на сайте и то, как сделать их удобными.
Чек-лист, что проверить в коммуникации на сайте
- Онлайн-чаты. Операторы быстро отвечают на вопросы пользователей. Окошко чата не мешает работе с сайтом.
- Форма обратной связи. Не спрятана и через неё легко отправить сообщение.
- Формы подписки, поп-апы и пуш-уведомления. Не надоедают пользователям.
- Служебные тексты написаны человеческим языком.
- Контакты и соцсети. Легко можно найти контактную информацию и страницы компании в соцсетях.
- Отзывы и комментарии. Клиенты могут оставлять фидбэк на вашем сайте.
Теперь рассмотрим пункты подробнее.
Онлайн-чаты
Онлайн-чат (чат поддержки) — это окошко для связи со специалистами в режиме реального времени. В чатах решаются срочные проблемы пользователей.
Что учесть, чтобы онлайн-чат был эффективен:
- В чате отвечают быстро (в течение одной минуты). Оперативность — главное свойство чатов. Если пользователи не получают быстрых ответов на вопросы, в этом канале связи нет смысла.
- Чат недоступен, когда операторов нет в сети. Если у вас нет круглосуточной поддержки, настройте чат так, чтобы он отображался только в рабочие часы. Если чат нельзя отключить на время, предлагайте клиенту оставить контакты, и связывайтесь с ним позже.
- Чат не открывается сразу вместе с сайтом. Пользователю нужно время, чтобы познакомиться с контентом. Открывайте чат на 3–4 экране или отложите появление на 20–30 секунд. Другой более радикальный выход — вообще отключить активные уведомления и оставить только кнопку. Протестируйте, какой вариант больше подходит вам.
- С посетителями общается не бот, а реальный человек. Стоковые аватары консультантов и скриптовые фразы производят неприятное впечатление, особенно, когда бота выдают за настоящего человека. Постарайтесь избегать этого: выделяйте для чата сотрудника, который сможет помочь клиентам.
Форма обратной связи
В форме обратной связи люди оставляют развёрнутые отклики. Чтобы отправить сообщение, пользователь просто вводит свой email и отзыв в форму на сайте. Ему не нужно открывать почту в соседней вкладке. Это экономит время и удерживает на сайте.
Разберём, какими бывают формы:
- Обратная связь. Пользователей просят поделиться предложениями, жалобами или благодарностями для повышения качества обслуживания.
- Сообщить о проблеме. Клиенты описывают возникшие у них проблемы.
- Вопрос руководителю. Для обращения к директору (любому начальнику).
- Обратный звонок. Пользователь оставляет номер телефона, на который перезвонит консультант.
Что учесть, чтобы форма была эффективна:
- Форму должно быть легко найти. Обычно её размещают на странице «Контакты» или отдельным полем в подвале сайта.
- Не больше 2–3 обязательных полей. Никто не любит сообщать о себе лишнее. Узнавайте только необходимую информацию: email для связи, само сообщение. Даже имя не должно быть обязательным полем.
- В форме можно писать длинные сообщения. Не устанавливайте ограничение в 1000–2000 знаков. Всегда есть риск, что клиент не уложится в лимиты и вы оборвёте его на полуслове. Добавьте в форму полосу прокрутки и автосохранение — это облегчить жизнь «многословным» клиентам.
- Клиент должен понимать, что его сообщение отправлено. Можно настроить всплывающее уведомление или ответ по электронной почте. Поблагодарите за обращение и объявите приблизительное время обработки его заявки.
- Если планируете собирать персональные данные пользователей, обязательно публикуйте политику конфиденциальности и добавляйте чек-бокс «Я ознакомлен с политикой конфиденциальности». К персональным данным относятся ФИО, email, паспортные данные, адрес, телефон и т. п.
Формы подписки, поп-апы, пуш-уведомления
Формы подписки, поп-апы и пуш-уведомления — это инструменты, с помощью которых можно увеличивать базу клиентов (а значит продажи) и повысить лояльность. Их роднит нацеленность на увеличение конверсии.
Разберём эти каналы связи и рассмотрим основные ошибки, которых нужно избегать.
Форма подписки
С помощью формы подписки можно превратить посетителя сайта в подписчика. В формах предлагают что-то полезное (информацию об акциях, скидки, интересный контент) в обмен на подписку по электронной почте. После подписки человек получает на указанную почту сообщения об акциях, новинках, персональных скидках и т. п.
Поп-ап
Поп-ап — всплывающее окно на сайте. Его используют по-разному: чтобы проинформировать о чём-либо, как форму подписки, как cookie-соглашение и так далее. Главное при разработке поп-апа — помнить, что он не должен мешать пользователям.
Для юзабилити сайта вредны всплывающие окна, которые закрывают весь экран, блокируют прокрутку и клики. За чрезмерное использование поп-апов Яндекс даже может пессимизировать сайт в выдаче. Например, если несколько окон размещаются на одной странице, или встречаются слишком часто, или если их трудно закрыть.
Следовательно, настраивать поп-апы следует так, чтобы при их появлении клиенты могли продолжать пользоваться сайтом в штатном режиме.
Пуш-уведомление
Пуш-уведомления (push) — это всплывающие сообщения, которые приходят в браузере или на мобильный телефон. Используются, чтобы взаимодействовать с теми подписчиками, которые разрешают отправку пуш-уведомлений.
Какие ошибки допускают при настройке этих каналов связи:
- Оповещения всплывают слишком быстро. Здесь работает та же логика, что и с онлайн-чатами. Клиенту нужно время, чтобы понять, подходит ли ему ваше предложение. Если оповещение, чат или форма подписки мешают ему, он покинет сайт.
- Оповещения появляются несколько раз. Если пользователь закрыл поп-ап, проигнорировал форму подписки и блокировал пуш-уведомление — это значит, что он не заинтересован в предложении. От того что ему чаще придётся проделывать однотипные действия, чтобы отмахнуться от оповещений, — человек не передумает.
- Пользователь не понимает, на что подписывается. Формулируйте пользу конкретно («Отправляем письма о новых акциях», «Присылаем новые товары раз в месяц» и т. п.). Не обманывайте ожиданий: присылайте то, что обещали и когда обещали (не реже и, тем более, не чаще).
- Контент не персонализирован. Старайтесь сегментировать базу подписчиков и присылать каждому сегменту наиболее подходящие новости и предложения. Выделить группы пользователей поможет анализ данных, полученных при регистрации, или поведенческого фактора.
- Не продумано время отправки пуш-уведомлений. Пуш-уведомления рассчитаны на то, что получатель отреагирует на них мгновенно. Если вы не учли часовой пояс пользователя или время, когда контент будет воспринят лучше всего, пуш-уведомление не достигнет предполагаемого эффекта.
Служебные тексты
Служебными текстами называют короткие сообщения на сайте, которые комментируют действия клиента. Например, когда он оформил заказ или положил товары в корзину. Проверьте, чтобы эти тексты легко читались. Если одно предложение занимает три строки, а язык похож на чиновничий, перепишите тексты.
Пользователям не нужны канцелярско-бюрократический или недоступный юридический язык. Главное, чтобы тексты были полезны, а информация понятна. Уберите штампы и канцеляризмы, чтобы улучшить текст.
«Оплата осуществляется в начале следующего месяца», «во избежание похищения пароля» расходуют время клиента. Можно сказать короче и проще: «оплатите услуги в начале месяца» и «чтобы ваш пароль не украли». Однако следует избегать и другой крайности — панибратства и нарушения личных границ (переход на «ты», жаргоны, неуместные и неоднозначные шутки).
Если у вас нет опыта работы с текстами или редактора сайта, воспользуйтесь сервисом «Главред». Он оценивает слова и предложения в тексте по 10-балльной шкале. Текст содержит «стоп-слова» или конструкции, которые не несут информации и усложняют речь? Он получит меньший балл. Не обязательно бороться за высшую оценку, но учесть рекомендации сервиса стоит.
Контакты и соцсети
Контакты вашей компании нужны, чтобы клиенты могли связаться с вами не только теми способами, которые мы рассмотрели выше. Контакты могут включать:
- электронную почту компании,
- телефон,
- адреса офисов,
- карту проезда,
- часы работы,
- реквизиты для оплаты
Не забывайте и о социальных сетях. Компаниям, у которых есть страницы в социальных сетях, стоит указывать их на сайте, чтобы клиенты могли подписаться на них или поделиться понравившимся материалом у себя на странице, в ленте или истории.
Отзывы и комментарии
Отзывы и комментарии не являются непосредственным каналом коммуникации между организацией и клиентом. Но они демонстрируют открытость компании и помогают потенциальным клиентам принять решение на основании опыта других людей.
Благодаря отзывам можно изучить, как клиенты относятся к продукту. Чего им не хватает, а какие свойства, наоборот, вызывают положительную оценку. Если отзыв пишет клиент-критик, вы можете поработать с его возражениями и ответить на них. Это не гарантирует того, что он станет клиентом-промоутером, но может повысить лояльность пользователей, которые увидят ваш диалог.
Пользователям должно быть просто оставить отзыв. Позвольте писать без регистрации (со вводом капчи от ботов) или использовать свои аккаунты соцсетей. В этом случае вы повысите шанс получить отзывы реальных людей.
Однако это не значит, что у отзывов не должно быть модерации. Модератор сможет проверять отзывы и фильтровать спам, антирекламу, заказные отзывы и т. п.
Мы рассмотрели самые распространённые каналы и формы связи, которые используют для коммуникации с клиентами на сайтах. Помните, не бывает универсальных решений, которые подходили бы всем компаниям. Тестируйте различные форматы, меняйте элементы и анализируйте.
Рассмотрим, какими должны быть основные элементы сайта в сфере e-commerce.
Чек-лист, что должно быть в интернет-магазине
- Общие параметры. На сайт установлен SSL-сертификат, все страницы сайта содержат однотипную шапку и подвал, а также проработаны каналы коммуникации с клиентами.
- Главная. Главная страница привлекает внимание и побуждает к покупке. Важно, чтобы сразу было понятно, что вы продаёте.
- Каталог товаров. Пользователь может изменить количество товаров на странице. Настроены гибкие фильтры, а также добавлены привлекающие внимание категории.
- Страница товара. Указана необходимая информация о товаре, обязательно — стоимость и наличие.
- Корзина. Значок корзины расположен в привычном месте, на странице нет лишней информации, проработано взаимодействие с товарами.
- Страница оформления заказа. Можно оформить заказ без авторизации. Страница простая, наглядная и предусматривает выбор способа оплаты и доставки.
- Помощь, условия доставки, оплаты, гарантии. На странице подробно изложены ответы на вопросы о работе магазина, условия доставки, возможные способы оплаты и гарантии для пользователей.
- Контакты. Перечислены данные для связи.
- Личный кабинет. Понятна польза от регистрации на сайте. Соблюдены технические аспекты процедуры.
- Программа лояльности. Выбрана подходящая система вознаграждений, которая мотивирует пользователей покупать чаще и при этом не работает в убыток.
- Новости. На сайте рассказывается об актуальных событиях и изменениях в жизни интернет-магазина.
- О компании. Повествование об истории и ценностях компании ведётся не обезличенным тоном и выделяет ваш интернет-магазин.
Теперь эти же аспекты, но подробнее.
Общие параметры
Рассмотрим общие рекомендации ко всем страницам интернет-магазина.
SSL-сертификат
SSL-сертификат — криптографический протокол безопасности. После установки на сайт доступно безопасное соединение HTTPS. Этот префикс отображается в строке браузера и свидетельствует о том, что данные, которые вводит пользователь, защищены от третьих лиц.
Установка SSL-сертификатов желательна для всех сайтов, так как это улучшает ранжирование в поисковой выдаче. Они также помогают защитить данные клиентов от перехвата, поэтому вдвойне рекомендуется устанавливать их на сайты интернет-магазинов.
Шапка и подвал
Шапка — это верхняя область сайта, в которой отображаются основные разделы. А подвал — нижняя, содержащая дополнительную информацию (договор оферты, лицензии и свидетельства, иконки соцсетей и так далее). Эти области должны быть идентичными для всех страниц сайта.
Для интернет-магазина это имеет особое значение, так как в шапке закрепляются не только основные разделы, но и элементы, которые пользователи должны видеть везде: телефон, поиск, иконка корзины, личный кабинет.
Если магазин работает в нескольких городах, в шапке размещают метку с выбором региона (города).
В подвале интернет-магазина помещается юридическая информация, необходимая для работы интернет-магазина.
Коммуникация с клиентами
В сфере e-commerce от коммуникации с клиентом и степени её проработанности зависит размер прибыли. Если покупатель не разобрался в вопросе и не смог связаться с консультантом, он пойдёт на тот сайт, где работает онлайн-чат или можно заказать обратный звонок. Если не предложить пользователю оставить свой email и не высылать на него акционные предложения и персональные скидки, покупательская активность на сайте будет ниже.
От общих параметров перейдём к тому, какие страницы должны быть в интернет-магазине и какими их стоит делать.
Главная
Попадая на главную страницу, пользователь должен сразу понимать, что продаётся в интернет-магазине и чем он отличается от других. Отличие помогает сформулировать УТП — уникальное торговое предложение, выделяющее ваш магазин в своей нише. Продемонстрируйте товары или расскажите о миссии магазина, чтобы зацепить потенциального покупателя, а заодно отсеять нецелевую аудиторию.
Кроме понятности от главной страницы требуется заинтересовывать и побуждать к покупкам. Сделайте сайт визуально привлекательным и функциональным, чтобы добиться этого.
Также на сайт можно добавить яркие баннеры, рассказывающие об акциях и новинках, или продемонстрировать популярные товары.
На главной странице рекомендуется выставлять и товары со скидками. Демонстрация выгоды привлекает покупателей.
Каталог товаров
Каталоги содержат перечень товаров с кратким описанием (название, фотография, цена) и кнопкой для покупки. Если товаров немного, каталог делают одностраничным.
Главное в таких каталогах — удобная навигация. Добавьте возможность сортировать товары по цене, названиям, статусам (новинка, хит и т. п.) и выбирать их количество на странице (оптимально 15–20 штук).
Если же ассортимент широкий, каталог стоит разбить на несколько разделов или даже добавить подразделы. Например, в интернет-магазинах одежды товары сначала разделены по адресату (мужская, женская, детская), а внутри уже разбиваются по типам одежды.
Также мы рекомендуем использовать разделы с акционными, популярными, новыми товарами. В них собраны те же товары из других категорий, отфильтрованные по тому или иному признаку.
Фильтры
Гибкие фильтры позволят покупателю быстрее подобрать товары по интересующим его критериям. Перечислим основные рекомендации для этого инструмента:
- можно применить 2 и более фильтров одновременно;
- отображается число найденных товаров;
- результаты быстро загружаются;
- есть кнопка «Очистить», позволяющая сразу снять все фильтры.
Страница товара
Страницы товаров должны быть информативными и однотипными. Основные элементы страницы товаров:
- Название товара: уникальное наименование.
- Описание: краткое перечисление свойств и параметров товара, его артикул, оформляется списком.
- Фотография: одна или несколько фотографий товара с разных ракурсов, возможность увеличить изображение и рассмотреть детали.
- Цена: должна выделяться на странице. Если на товар действует скидка, зафиксируйте новую цену рядом со старой.
- CTA-кнопка: call to action — призыв к действию, кнопка должна выделяться, а надпись быть точной («Положить в корзину», «Купить», «Добавить в корзину» и т. п.).
Корзина
Корзина — это промежуточный этап между выбором товаров и оформлением заказа. Не загромождайте страницу лишними деталями. Эта страница должна содержать информацию о количестве выбранных товаров и сумме покупки. Перечислим рекомендации к этому элементу.
Размещайте иконку «Корзины» в правом верхнем углу сайта. Пользователи привыкли видеть её там, и отсутствие значка в привычном месте не оправдает их ожиданий.
- На иконке отображается количество товаров, положенных в корзину.
- Товары в корзине кликабельны, то есть на их страницы можно перейти.
- Присутствует статус «есть/нет в наличии» и количество товаров.
- Товар можно удалить или, наоборот, увеличить количество предметов.
- Чётко видна конечная стоимость покупки.
- Отражена информация о скидках, доставке, возврате и гарантиях.
- Добавлен блок промокода, если система промокодов используется.
- Контрастная кнопка перехода к оформлению заказа.
- Авторизованные пользователи могут добавить понравившиеся товары в раздел «Избранное».
Вы можете использовать механику «похожие предложения» и настроить подбор смежных товаров, которые отображаются на странице заказа. Также её можно использовать, если товара, который выбрал пользователь, нет в наличии. Так вы предложите ему релевантную замену. Основной принцип — выбирать действительно соотносимые товары, а не рандомные.
Оформление заказа
Оформление заказа стоит продумать до мелочей и сделать максимально простым и удобным для пользователей. Ведь именно этот этап напрямую связан с получением прибыли.
Часто проблема связана с тем, что оформление заказа невозможно без регистрации или авторизации на сайте. Покупателям приходится тратить лишнее время и отвлекаться от конечной цели: оплатить покупку. Позаботьтесь о пользователях, которые не хотят регистрировать личный кабинет или торопятся.
Добавьте возможность быстрой регистрации или оплаты в один клик, чтобы упростить оформление заказа.
Упрощённая форма регистрации должна содержать минимум полей (ФИО, телефон для связи, адрес доставки и email).
Другие обязательные элементы оформления заказа: выбор способа оплаты и доставки. Оба эти компонента должны содержать варианты, из которых покупатель сможет выбрать удобный для себя. Также стоит позаботиться о безопасности, прозрачности и открытости. Покупатель должен видеть, сколько стоит доставка, когда заказ придёт, и получать чек о транзакции.
Интернет-магазины предлагают такие варианты доставки, как самовывоз, постамат, курьерские и почтовые службы. Определите, как ваши клиенты будут получать заказы, и дайте им возможность выбрать удобный способ. Кратко прокомментируйте особенности каждого варианта, сроки, стоимость и не забудьте дать ссылку на подробное описание условий доставки.
Предоставьте несколько способов оплаты на выбор. Одним покупателям удобно оплачивать покупки банковской картой онлайн, а другие предпочтут расплатиться с курьером после получения товара.
Оплата онлайн должна быть конфиденциальной и безопасной. Удостоверьтесь, что транзакции защищены от злоумышленников.
Если оформление заказа происходит в несколько этапов, покупатель видит, на каком именно он находится и сколько их осталось до совершения покупки.
Настройте триггерное сообщение о завершении процедуры. Тогда после оформления заказа на email покупателя придёт сообщение о действиях на сайте. В сообщении укажите свои обязательства по транспортировке товара, сроки, необходимые действия для получения. Также это сообщение может содержать благодарность за покупку.
Помощь, доставка, оплата и гарантии
Исчерпывающее описание способов оплаты, доставки, гарантий потребителей стоит собрать в особый справочный раздел. Отдельно можно зафиксировать справочную информацию о работе интернет-магазина (помощь по работе с сайтом).
В этих справочных разделах пользователи смогут найти ответы, если у них возникнут дополнительные вопросы. Оформить разделы можно в виде простого перечня пунктов или раскрывающимися блоками вопросов-ответов. Главное — закрепите ссылки на эти страницы в подвале сайта.
- Опишите все предоставляемые способы доставки с указанием стоимости, сроков, тарифов и дополнительных сервисов. После прочтения этого мануала у покупателя не должно оставаться вопросов «Могут ли доставить покупку без моего участия/в субботу/рано утром» и т. п.
- Опишите все варианты способов оплаты и всего, что касается биллинга вашего интернет-магазина (подарочные сертификаты, программа лояльности, бонусные баллы и т. п.).
- Разместите информацию о гарантиях на товар (возможности обмена или возврата). Предупреждён — значит вооружён. Вы сможете ссылаться на эти разделы в спорных ситуациях.
- Также этот раздел может включать договор оферты, соглашение об обработке персональных данных, прочую информацию юридического плана.
Контакты
Страница «Контакты» на сайте интернет-магазина выполняет сразу две функции. Во-первых, информационную: вы сообщаете обо всех каналах связи с магазином. Во-вторых, контактоустанавливающую: покупатель видит, что вы не скрываетесь, а также может проверить, не фейковую ли информацию вы указали.
На этой странице рекомендуется размещать следующие данные:
- телефон (лучше, чтобы номер был закреплён в шапке или подвале сайта);
- физический адрес (если у интернет-магазина несколько представительств в разных городах, указывать их все, добавлять виджет карты);
- email для связи (на корпоративную почту могут поступать предложения о сотрудничестве или обратная связь);
- форма обратной связи (чтобы пользователи могли написать вам с сайта);
- ИНН, ОГРН, банковские реквизиты (и другие регистрационные данные продавца).
Личный кабинет
Личный кабинет на сайте предназначен для покупателей, которые планируют поддерживать длительные «отношения» с магазином. Например, в личном кабинете человек может один раз добавить адрес доставки или данные банковской карты, чтобы затем они «подтягивались» при оформлении заказа. Также там хранится информация обо всех заказах пользователя, его бонусах, статусах в программе лояльности и т. п.
Но новых пользователей, у которых нет опыта работы с вами, нужно убеждать в том, что регистрация на сайте выгодна. Расскажите о пользе от того, что клиент потратит время на регистрацию, или предложите ему бонусы к заказам. Другие рекомендации к Личному кабинету:
- Регистрация ЛК простая и не занимает много времени.
- Предусмотрена возможность быстрой регистрации через соцсети или Google-аккаунт.
- Нет лишних полей и сущностей (например, вместо логина стоит использовать почту пользователя).
- Есть чек-бокс «Подписаться на рассылку». У пользователя должна быть возможность не ставить галочку и, соответственно, не получать письма.
- Используется форма Double Opt-In (подтверждение регистрации при переходе по ссылке из письма).
Программа лояльности
Программа лояльности — это система поощрений, которая стимулирует покупать больше и оставаться с компанией дольше. Чем больше покупательская активность клиента, тем больше вознаграждений (бонусов и привилегий) он получает. У компании при этом растёт оборот и прибыль.
Программы лояльности бывают разными: начисление бонусов, кешбэк, многоуровневая система скидок, скидки у партнёров и так далее. Чтобы система работала, нужно подбирать такую модель, которая будет привлекательна для ваших клиентов и выгодна бизнесу. Рассмотрим распространённые ошибки:
- Работа в убыток. Так получается, когда на бонусы клиентам тратится больше средств, чем составляет конечная прибыль от их покупок. Проанализируйте средний чек и рассчитайте соотношение прибыли к убытку.
- Неподходящая модель. Выбор системы должен основываться на количестве лояльных клиентов, среднем чеке и частоте покупок. Это очень индивидуальная история, в которой не бывает общих решений. Советуем не копировать чью-то программу, а прежде проанализировать свою целевую аудиторию и погрузиться в расчёты.
- Недостаточная мотивация. Помните, что конечная цель программы лояльности — мотивировать клиентов покупать больше. Мало предложить большие бонусы, нужно, чтобы предложение было релевантно и имело ценность для ваших клиентов.
Новости
Размещайте на сайте актуальные новости интернет-магазина, информацию об акциях, изменении режима работы, коллаборациях, партнёрские материалы — всё, что показывает покупателям современную повестку дня. Если последние новости вашего магазина датированы 2018 годом, у пользователей может сложиться впечатление, что магазин заброшен и не работает.
О компании
На странице «О компании» размещают историю бренда, делятся принципами и ценностями магазина, показывают «отцов-основателей» и т. п. Цель этого контента — показать, что за магазином стоят настоящие люди, которые творят историю, и таким образом создать почву для доверительных отношений.
Распространённые ошибки в рассказе о компании:
- Использовать общие фразы, которые встречаются на страницах каждого второго интернет-магазина. Например, «Добро пожаловать», «Для нас важны качество и оптимальный сервис» и т. п. Такие слова не несут полезной информации и не выделяют вашу компанию.
- Обезличенный тон. Сухая датировка событий также не располагает покупателей к доверительным отношениям с вами.
- Отсутствие позиционирования. Если у вашего магазина отсутствует концепция, он не будет выделяться на фоне остальных площадок вашего сегмента.
Учитывая эти советы при разработке сайта, вы сможете создать ресурс, который позволит сделать ваш бизнес успешным и завоевать доверие пользователей.