Статья для тех, у кого есть сайт, но как-то не очень с заявками.
— Доктор, вы знаете, я увеличил бюджет на контекстную рекламу уже в два раза, но заказов с сайта больше не становится. Вместо прибыли растет цена лида. Давайте уволим контекстолога?
— Подождите, дело может быть не в рекламе. Сначала проведем обследование. Возможный диагноз: недружелюбный сайт.
Дружелюбный сайт — тот, с которым пользователю удобно взаимодействовать. Он простой, логичный и понятный. А еще на него приятно смотреть.
Сделать сайт дружелюбным, значит продумать путь пользователя. Оттолкнуть может любой этап — от главной страницы, до неудобной оплаты.
Вот 7 критериев, по которым будем обследовать сайт:
1. Определиться с аудиторией
С этого начинается работа над любым сайтом. От характера пользователей зависит не только визуал, но и наполнение. Актуальное для молодых может отталкивать людей средних лет. Министерство финансов, скорее всего, не будет использовать яркие причудливые формы, анимацию, иллюстрации и движение в элементах – можно показаться несерьезным и убить доверие.
Вот как это может выглядеть:
Музей современного искусства хочет привлечь молодую аудиторию, внимание на проекты. Но сайт у него — безликий и пустой. Он не заинтересует не только молодых, но и любых посетителей.
Визуалу нужен характер, он должен отражать сферу.
«Современное искусство» — это что-то новое, трендовое, но никак не строгие классические элементы с отсутствием красок. Такой визуал не хочется рассматривать = не захочется и прийти в музей.
Рассмотрим сайт другого музея современного искусства — минималистичный стиль разбавлен интересными формами и аккуратными элементами.
Мадонна на материнской плате и фотографии экспонентов — хороший пример того, как можно передать настроение места.
Закругленные мягкие формы блоков располагают к себе молодое поколение. Для взрослых — ритм, заглушенные не отвлекающие цвета, строгость в иерархии текста и фото.
2. Выбрать стиль
Элементы во всех разделах сайта должны быть в одном стиле. А не как в примере. Иначе сайт не выглядит как единое целое и размывается образ бренда. Поэтому, если решили скруглять углы, то скругляем на всех фотках на всех страницах.
Нет общего стиля. Страницы одного сайта отличаются друг от друга — на первой перегруз ярких и скруглённых элементов, а на другой — пустое пространство и острые углы.
3. Соблюдать иерархию
Продумайте заранее, какая информация самая важная, чтобы сделать на нее акцент. Также не забывайте про крупность заголовков и подзаголовков. Каждый объект должен выполнять свою функцию, чтобы не сбивать пользователя с пути, не должно быть лишних деталей.
Кроме того, что нарушены баланс в композиции и размер отступов, мы видим плохую работу с текстом — главный заголовок (h1) теряется на фоне второстепенных (h2).
4. Убрать лишнее
Пользователя необходимо вести — чем меньше вариантов и отвлекающих факторов, тем проще сделать выбор и тыкнуть на нужную кнопку.
Сложная навигация + перегруз текста и акцентов = непонятно, куда смотреть в первую очередь и где найти нужный раздел
Сократить количество пунктов в шапке можно через подменю, если объединить их по смыслу. Разбивать большие блоки с информацией и избавляться от воды в тексте.
Тактика «запихнуть все, что у нас есть» не поможет. Необходим «воздух» (негативное пространство).
Здесь меню раскрывается. Пользователи смогут быстро найти нужный раздел, например, каталог, и только при наведении увидят ассортимент магазина. Так легче ориентироваться.
Продуманная навигация +1 балл к сервису.
5. Следить за пикселями
Плохой визуал может отпугнуть, поэтому помним про хорошее качество у изображений. Красота и аккуратность играют важную роль.
Неудачно использовали изображения маленького размера вместо иконок + хаотично расположили элементы. Из-за этого получилась пиксельная бахрома по краям иконки.
Если вы хотите украсить информационные пункты, используйте иконки в едином стиле, которые вписываются в визуал сайта.
6. Сделать тестирование и оптимизацию
Страницы быстро прогружаются? Кнопки работают? А ссылки ведут на правильные страницы? Сайт открывается со всех версий?
Проверьте готовый сайт по этим вопросам. Из-за ошибок в технической части может пострадать функционал сайта. Если пользователь не сможет положить товар в корзину из-за технических ошибок, то он не совершит заказ, а бизнес не получит денег.
Старайтесь не перегружать сайт элементами и не забывайте про оптимизацию изображений, чтобы видеофайлы не тормозили, а фотографии и анимация прогружались. Проверяйте и тестируйте.
Вот на этом сервисе можно проверить сайт.
7. Особое внимание мобильной версии
По статистике, больше 60% посетителей заходят на сайты именно со смартфонов. Одной десктопной версии недостаточно, нужно адаптировать под мобильную. Если адаптив кривой, возникают проблемы:
На первом поехали элементы, на втором нарушена сетка
Выравнивание на мобильной версии происходит иначе, чем на десктопе: элементы шире, поэтому их надо растягивать по всему экрану, чтобы не было зазоров.
Вот такой экспресс-анализ вы можете провести и понять — где теряется конверсия. Чтобы поймать конкретные места с утечками, используют метрику, тепловые карты сайта, вебвизоры и другие инструменты.
Но это уже к аналитике.
А у вас дружелюбный сайт? Напишите в комментариях