Благодарим за подписку!

Закрыть

Как юзабилити сайта влияет на коммуникацию

Мы тут про продвинутые механики рассылок рассказываем, CRM-маркетинг и планы по захвату мира. Но до них дело может и не дойти, если пользователь теряется на вашем сайте, не может зарегистрироваться, не знает, как оформить заказ. Ему проще уйти, чем разобраться в хитросплетениях сайта. И с кем тогда выстраивать коммуникацию? Кому отправлять письма, пуши и смски? 

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

Общие рекомендации

  • Понятность. Это самый главный пункт, на нем можно было бы и остановиться.
    Если посетитель не может сориентироваться на сайте и понять его тематику, то вам определенно стоит пересмотреть оформление сайта и контент.
  • Скорость загрузки. Сайт должен загружаться за 1-2 секунды, в противном случае, посетитель уйдет к вашим конкурентам, которые чуть более проворные.
  • Адаптивная верстка. Напоминаем, на дворе 21 век, львиная доля просмотров приходится на мобильные устройства. Ваш сайт должен корректно отображаться на телефоне, планшете, десктопе и в разных браузерах.
  • Доступное меню. Оно должно располагаться в шапке сайта или сразу под ней и дублироваться в футере.
  • Логичное название разделов. Приберегите креатив для других случаев. Разделы лучше называть привычным образом: «Контакты», «О компании» и т.д.
  • Кликабельные «хлебные крошки». Их наличие сильно облегчает жизнь посетителю сайта: он может в один клик перейти в вышестоящие разделы.  Мгновенный скроллинг. На длинных страницах предусмотрите кнопку «Наверх» или «В начало», которая перебросит пользователя на первый экран.
  • Текстовый формат контактов. Все контакты на сайте должны легко копироваться, поэтому используйте текст, а не картинки.
  • Закрепление контактов на странице и их адекватное количество. Не устраивайте посетителям квест по поиску контактов, расположите их в одном и том же месте на всех страницах сайта. И как бы ни было велико желание разместить все возможные способы связаться с вами, сдержите этот порыв. Чем больше выбор, тем труднее его сделать. 
  • Кликабельный логотип. Удобно, когда, нажав на логотип, можно попасть на главную страницу.
  • Карта сайта. Мастхэв для любого сайта, потому что это удобно и сильно облегчает жизнь. Расположить ее можно в футере.
  • Уникальный фавикон. Тоже удобная штука, которая позволит пользователю быстро отыскать вкладку с вашим сайтов среди миллиона открытых вкладок.
  • Отсутствие бесящих элементов. Видео, которое запускается со звуком, чаты с консультантами, которые вылезают на весь экран, заставляют пользователей думать о вас плохо. Возможно даже, неприличными словами. Поэтому если уж решили использовать такие вещи на сайте, позаботьтесь о том, чтобы их было легко закрыть.

Дизайн

  • Минимализм в дизайне. Откажитесь от концепции «дорохо-бохато», не пытайтесь воткнуть все достижения анимации на одну страницу. Чистый, лаконичный дизайн — вот что приведет вас к успеху.
  • Доступные кнопки СТА. На любой странице сайта можно сразу отыскать кнопку, чтобы заказать звонок, купить товар, оформить услугу. Она большая, яркая (без фанатизма, пожалуйста) и понятная.
  • Учет восприятия цвета. Красный цвет при оформлении заказа — это алярм и ошибка, а серый цвет кнопки сразу делает ее неактивной, даже если она вполне себе кликабельна.
  • Отсутствие хаоса на страницах. Избегайте принципа «то густо, то пусто»: располагайте элементы в соответствии с логикой, чередуйте их с пустым пространством, не пестрите иконками и лишними картинками. 
  • Оптимальный размер. Он имеет значение, когда речь идет об элементах на сайте. Посетитель должен попадать в кнопку с первого раза, а не после получасового прицеливания. Но гигантомания — это тоже плохо, не переборщите.
  • Сочетание цветов.  Фон и шрифты должны сочетаться по цвету. Чтобы было комфортно воспринимать информацию и чтобы глазки не болели от креативных цветовых решений.
  • Качество изображений.  Ученые могут рассмотреть мелкие камешки на Луне, а на многих сайтах фотографии сделаны на тапок. Не надо так. Используйте картинки в хорошем качестве, без сторонних водяных знаков и прочих дефектов.

Формы для сбора данных

  • Форма обратной связи.  Должна быть. Точка.
    А еще она должна быть удобной: без регистрации, нужно лишь оставить какой-то свой контакт (телефон, емейл). И ее легко найти: привычное расположение — на странице с контактами.
  • Минимум полей при заполнении форм. Не нужно просить пользователя ввести паспортные данные, СНИЛС, телефон родителей и кличку собаки, чтобы отправить вам отзыв или сообщение. Достаточно имени и емейла/телефона. А если вам все же нужна дополнительная информация, объясните пользователю зачем.
  • Отметка обязательных полей. Вам ведь не сложно поставить звездочку, а посетителю не придется гадать, что нужно ввести, а что можно и пропустить.
  • Возможность видеть вводимый пароль. Как человек, который регулярно промахивается мимо нужных букв на экране телефона, автор считает эту фичу главной, а людей, который ее предусматривают на своем сайте, святыми.
  • Использование подсказок и автозаполнений. В идеальном мире все поля имеют не только название, но и описание или пример заполнения.  А еще круто, когда предлагается список вариантов для автозаполнения. 
  • Проверка корректности ввода данных. Обидно, если собранные с сайта емейлы нельзя использовать в дальнейшей коммуникации, потому что они выглядят так: ivantsarevich#mail.com. 
  • Мгновенная проверка данных. Заполнили поле, и оно тут же проверилось, не перезагружая страницу.
    Согласитесь, очень бесит, когда сидишь минут 10, вводишь все данные, жмешь «Отправить», и оказывается, что в каком-то поле опечатка, страница обновилась, давай все заново, этакий ты растяпа. 
  • Сообщение об ошибке. Логичное продолжение предыдущего пункта. Если где-то ошибка, то нужно на нее указать: подсветить поле, выделить цветом или всплывающим уведомление. А еще хорошо бы рассказать, как эту ошибку исправить. Например, сменить раскладку или проверить Caps Lock.
  • Возможность корректировать информацию. У пользователя должна быть возможность вернуться на шаг назад. Особенно важно это при оформлении заказов: одно неверное движение, и ваш новый телефон уедет по другому адресу.
  • Польза регистрации. Если вы просите пользователя зарегистрироваться, объясните, зачем и какие бонусы он за это получит.  Это объяснение лучше разместить над кнопкой регистрации.
  • Галочка о согласии на обработку персональных данных. Проставленная подписчиком галочка — эквивалент живой подписи, она доказывает согласие на обработку данных. Не следует проставлять галочку за клиента, за это вас покарает Роскомнадзор.
  • Обратная связь. Хорошим тоном считается, если пользователь получил письмо с данными регистрации, письмо о том, что его заявка принята или он подписан на рассылку.
  • Дружелюбные попапы. Если на сайте используются всплывающие окна, то ненавязчивые и с заметной кнопкой закрытия. 

Текст и картинки 

  • Читабельные тексты.  Даже если вы топите за SEO, то, пожалуйста, пощадите посетителей вашего сайта. Здорово, что они его так быстро отыскали, но важно, чтобы этот сайт оказался полезным для них. Поэтому тексты должны легко восприниматься и быть понятными. 
  • Лаконичные тексты. Однажды автор статьи пошел в эти ваши интернеты за рецептом лазаньи, спустя два часа неплохо ориентировался в истории Италии, технологии производства пармезана и знал, что «λάσανα» на греческом означает «горячие пластины». Рецепт наверняка был на этом сайте, но голодный обморок не дал до него добраться. Поэтому меньше слов, больше дела.
  • Форматирование текста. Используйте подзаголовки и дробите текст на абзацы, выделяйте ключевые слова. Чередуйте текст с картинками для наглядности и простоты восприятия информации. Не используйте нижнее подчеркивание, оставьте его для ссылок. И НЕ ИСПОЛЬЗУЙТЕ КАПС БЕЗ ВЕСКОЙ ПРИЧИНЫ!
  • Единообразие шрифтов. На всех страницах сайта должны быть одинаковые шрифты. Вы можете использовать несколько разных шрифтов, главное, не переборщить. Оптимально два-три. 
  • Размер кегля. Стандартными считаются размеры от 12 до 16 пикселей. Этого достаточно, чтобы текст было удобно читать.
  • Информативность заголовка. Долой креатив, да здравствует логика! Из заголовка должно быть понятно, о чем говорится на конкретной странице.

Это, конечно, не самый полный список. Но даже его достаточно, чтобы понять, насколько удобно и комфортно пользоваться вашим сайтом. Если у вас есть сомнения по поводу юзабилити вашего сайта, мы поможем их развеять 🙂


Эксперт по цифровому маркетингу