Конверсия сайта минус 0%? Тогда мы идем к вам! 25 советов по юзабилити, которые реанимируют даже мертвого.

Привет, это X Studio. Рассказываем, как дать сайту вторую жизнь и поднять процент конверсий. Внутри - подробный чек-лист, который поможет вам понять, нужен ли вашему сайту редизайн. Сохраняйте, чтоб не потерять.

В физическом проявлении сайт – это машина (ЭВМ). Но если в «в карбюраторе конденсат», ехать она будет криво, урывками, а то и вовсе встанет. В случае с сайтом – он ляжет, но сути это не меняет.

Так что же мешает приложить пальцы к запястью своего драгоценного веб-ресурса и проверить его пульс уже сейчас, не дожидаясь серьезных сбоев?

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

Сайты начинают деградировать сразу после своего рождения. А дней через 720 не заметить это уже сложно: они стареют визуально, структурно и морально, приводят всё меньше лидов и начинают сдавать по прочим маркетинговым KPI.

Сайты болеют и это неизбежно! Так что если ваше детище:

Ещё тысячу лет назад Авиценна научил врачей делать выводы, анализируя пульс пациентов. Не бойтесь, с сайтами гораздо проще, чем с людьми. По сути, у электронки всего два состояния – «работает» и «не работает», но мы чуть расширим эту палитру:

Пациент скорее жив, чем мёртв

Это как раз про «бегать и паниковать». Зачем? Про упущенную выгоду слыхали? Пока веб-страница тупит и её хозяин по этому поводу тупит, бизнес теряет возможный доход, каждый день, каждый час, 24/7. Тут поможет редизайн сайта, достаточно и частичного: подшаманить внешний вид, внести не затрагивающие структуру правки.

Пациент скорее мёртв, чем жив

Эта история уже про редизайн полный. Здесь не прокатит лайтово причесать визуал. Понадобятся глобальные изменения не только во внешнем виде, но и в структуре и в юзабилити. Просто «более современные кнопочки и продающие цвета» при таком диагнозе клиентов не прибавят.

КинА не будет – электричество кончилось...

Вот тут уже не помогут ни редизайн, ни припарки. Вспоминаем мудрость индейцев и слезаем с дохлой лошади. Если она на последнем издыхании – пристрелите. В такой ситуации вбухивать ресурсы в реанимацию – тушить костёр деньгами.

Полный редизайн – это не только изменение шрифтов, цветовой палитры и графики, но и глубокое вмешательство в технические и стратегические аспекты. Сюда входят и модернизация архитектуры для улучшения производительности, и адаптация под разные устройства, и анализ пользовательского фидбэка для определения слабых мест в UX.

Ухудшение именно пользовательского опыта – первый и самый явный признак того, что сайту нужен редизайн. Прогибы в UX проявляются в:

Причинами таких проблем становятся пренебрежение трендами, замороченная навигация, кривой путь пользователя, долгая загрузка страниц, плохая совместимость с браузерами и АНТИадаптивный для мобильных устройств ветхий дизайн.

Клиенты к нам часто обращаются за помощью, когда у них резко падает процент конверсий. И здесь первым делом важно понять: это технические аспекты, или трафик не целевой, или продукт не отвечает требованиям рынка? Может, просто нужна SEO-оптимизация, либо придётся ампутировать. Сестра, наркоз!

Найти первоисточник проблем помогает аудит сайта и рекламных кампаний. На его основе составляется roadmap и список задач. И не забываем, что даже если сайт сделан с учётом всех принципов UI/UX, то всё равно необходимо время, чтобы он стал эффективным. А когда симптомы не проходят долго, промедление уже чревато большими проблемами.

Если структура страниц неудобна для клиента – дело «швах». Вспомните хождения по кругам ада в попытках купить билеты Аэрофлота онлайн. То же касается сайтов, собранных в простых конструкторах, где возможность выбора ограничена парой вариантов. При запущенной стадии юзабилити и непродуманности путей пользователя переделывать сайт болезненно дорого – начинайте с чистого листа.

Создание сайта с нуля и редизайн схожи по структуре, но... Редизайн немного дешевле. И он способен влиять на пятый элемент, квинтэссенцию эффективного сайта — его юзабилити. Это определяет два архиважных момента для пользователя:

Это они ↑ конверсии, ↓ отказы, ↑ лояльность покупателей, стимулируют выполнять целевые действия и в итоге приносят вам деньги. Благодаря им у бренда подрастает положительная репутация.

Страница должна загружаться максимум 2 секунды, иначе пользователь сочтет это за техническую ошибку и закроет сайт. Тяжелые анимации, несжатые изображения, большие видео замедляют скорость загрузки.

2. Адаптивность

Проверяем, как сайт выглядит на мобильных устройствах: на месте ли верстка, не уехал CTA, читаемый ли текст

3. Фавикон

Фавикон - логотип, который выделяет сайт в поисковой выдаче. Он отображается в поисковой выдаче браузера, а также во вкладках сверху. Наличие обязательно

4. Региональная принадлежность, если ваша компания представлена на международном рынке

При открытии сайта должен точно определяться регион, в котором находится пользователь. При этом следует реализовать возможность сменить регион.

5. Страница ошибки

На сайте должна быть информативная страница с ошибкой 404. Она сообщает посетителю, что произошло, и содержит ссылки на основные разделы сайта

6. Удобство выбора языка

Если на сайте предполагается несколько языков, располагаем переключатель языков в шапке сайта, для того чтобы пользователь мог в любой момент добраться до него

7. Лого сайта ведет на главную

Логотип кликабелен и ведет на главную страницу, а на самой главной – не перезагружает страницу.

8. Свобода действий

У пользователя должен быть выбор, а также право в любой момент отменить решение (вернуться назад). Особенно важно для ключевых разделов и страниц.

9. Объяснение для деактивированных элементов

При наведении на неактивную кнопку или ссылку появляется краткое пояснение, почему кнопка/ссылка неактивна

10. Удобство клика по кнопке CTA

Проверяем, чтобы была кликабельна вся область кнопки, а не только надпись или отдельные элементы

11. Реакция активных элементов сайта на взаимодействие пользователя

У всех активных элементов сайта, которые должны взаимодействовать с пользователем, мы добавляем анимацию (при наведении, при клике)

12. Все основные пункты меню названы привычным для пользователя образом

Пункты меню названы привычным для посетителя образом – «Контакты», «О компании», «Доставка» и т. д., без лишнего креатива.

13. Открытие сторонних ресурсов в новой вкладке

Опционально – на текущей странице остается подробная инструкция по оплате, а страница платежной системы открывается в новой вкладке. Таким образом, клиент не остается один на один с, возможно, незнакомой ему платежной системой.

14. Качество изображений

Все изображения на сайте – качественные, четкие, без дефектов и сторонних водяных знаков. Тоже самое касается и логотипов

15. Отсутствие визуального шума

Яркие цвета, крупный цветной текст, анимация – используются минимально или вовсе не используются.

16. Паттерны восприятия цветов

Цвета кнопок, заливки полей используются с учетом их стандартного восприятия. Например: красный цвет - ошибка, серый - неактивный элемент.

17. "Воздух" в дизайне и блоках

Элементы и их блоки чередуются с пустым пространством, нет нагромождения, пестроты на страницах.

18. Фокус на целевой аудитории

В тексте используются простые, привычные и понятные для ЦА фразы и слова.

19. Оптимальный размер кегля

Для основного текста на сайте используется достаточно крупный кегль, чтобы пользователю было комфортно его читать (16-18px).

20. Анкорные ссылки

В тексте ссылки явно указывается объект, на который ведет ссылка (название статьи, товара). То есть пользователь точно знает, что он открывает по ссылке.

21. Сообщение об ошибке

Если посетитель ошибся при вводе данных, он получает информационное сообщение о том, в каком именно поле он ошибся (это поле также можно выделить цветом), почему это могло произойти, как это исправить. Сообщение располагается рядом с полем, в котором возникла ошибка, непосредственно на странице, а не в отдельном окне, в котором еще и нужно нажать кнопку «ок».

22. Предвиденное местонахождения ключевых элементов

Все стандартные элементы посетитель находит на привычных местах

23. Подстройка под F паттерны сканирования

Наиболее значимый контент размещается слева, так как наш взгляд скользит слева направо.

24. Кликабельные "хлебные крошки" (если сайт имеет много страниц)

Благодаря им посетитель всегда понимает, в каком подразделе сайта он находится, и может в один клик перейти в вышестоящие разделы.

25. Сквозное главное меню сайта

Разделы контактов, доставки и оплаты, каталога товаров, услуг или другие основные разделы должны быть в главном меню сайта. Так посетитель, попав на любую страницу, за 2 секунды найдет основную интересующую его информацию.

Ваша прибыль от сайта напрямую зависит от того, насколько клиентам удобно им пользоваться. Комфортный UX стоит на трёх китах: Навигация – Информация – Интерфейс. Тестируйте и ищите моменты, которые мешают пользоваться вашим ресурсом с удовольствием. Или доверьте это нам. Мы найдем уязвимые места на вашем сайте и поправим их, чтобы генерить конверсию на 50-100% выше, чем есть сейчас. До конца июля— на особых, выгодных условиях. А здесь мы оставили удобный чек-лист для проверки юзабилити сайта, проверьте ваш сайт самостоятельно или обратитесь к нам 🖤