Не надо так: самые популярные ошибки юзабилити

О самых популярных ошибках юзабилити мы писали еще в 2013 году. Но даже спустя 8 лет эта тема осталась актуальна. Мы поняли это по просмотрам и комментариям, а еще по ошибкам на сайтах, которые мы находим в рамках веб-аналитики. Несмотря на то, что прошло много лет, они почти не изменились. Поэтому мы решили обновить статью и напомнить, как делать не надо.

Ошибка № 1. Слабый первый экран

Исследование международных агентств We Are Social и Hootsuite за 2020 год показывает, что пользователь задерживает взгляд на первом экране сайта на 2,6 секунды. Если он не находит необходимой информации или не видит преимуществ компании — уходит.

Как заинтересовать посетителя за три секунды, рассказывал мой коллега Максим Абдрахманов. Если хотите сделать идеальный первый экран, то обязательно прочитайте. В статье же мы разберем две самые частые ошибки: слишком много информации и слишком мало.

Проблема: мало информации

Попав на сайт, пользователь ориентируется по основным пунктам:

• шапка сайта с названием и логотипом;
• заголовок и текст страницы;
• изображения на первом экране.

Информация на первом экране должна отвечать на три вопроса пользователя:

1. Что это за компания?
2. Чем она занимается?
3. Почему я должен купить у них?

Плохой пример и хороший пример, который отвечает на эти вопросы:

Проблема: много информации

Часто на главной странице сайта стараются разместить всю информацию о компании. Но такой подход — тоже ошибка. Вниманием посетителей нужно грамотно управлять, поэтому стоит описать только ключевые преимущества, а лишнее — вынести в дополнительные разделы.

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

Всю лишнюю информацию можно убрать на другие страницы. Например, информацию о компании разместить в разделе «О нас», скидочные предложения — в разделе «Акции».

Не стоит забывать при этом про удобное навигационное меню, чтобы пользователь быстро нашел эти страницы. Но подробнее об этом уже в следующем пункте.

Ошибка № 2. Запутанная структура сайта

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

Типичную ошибку с неправильной структурой можно увидеть на скриншоте ниже.

У агентства недвижимости присутствовал блок «Новостройки» в виде отдельного раздела и подраздела. На самом деле одни новостройки относились ко вторичному жилью, а другие — к новостройкам от застройщика. Во время первого визита это неочевидно. Структура вводит в заблуждение: нет разграничения на вторичную и первичную недвижимость, всё комом. Вот как эту же проблему решили на сайте другого застройщика.

Подобрать жилье можно с помощью удобной таблицы. Пользователь сразу видит варианты — вторичное жилье или новостройки. Под каждый из запросов пользователя есть свой вариант формы.

Чтобы сайт был понятным, его структуру необходимо продумывать еще на этапе создания или редизайна. Для этого выстраивайте четкую иерархию. О том, как это сделать, рассказал мой коллега Тимур Азизов в статье «С чего начать разработку сайта».

Ошибка № 3. Не оформлена страница 404

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

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

Когда-то мы ей вдохновлялись, чтобы создать наш «Лидогенератор 3000», который может выдать случайную подборку статей с полезным советом.

Ошибка № 4. Сложные формы

Задача коммерческого сайта — продать товар или услугу. Формы на сайте — идеальное решение для этой задачи. Но очень часто владельцы перегружают их лишними пунктами. Не делайте так, упрощайте путь пользователя к покупке.

Ниже форма для покупки путевки в санатории. Насколько удобно было бы отвечать на все вопросы?

Все секреты идеальной коммуникации с пользователем перед заявкой мы рассказали в статье про 21 способ улучшить форму на сайте, а здесь поделимся тремя основными:

1. Упростите форму до нескольких полей.
2. Создайте два варианта: более подробную для тех, кто уже точно знает, что хочет приобрести, и краткую — с именем и номером телефона для тех, кто не знает.
3. Кешируйте ячейки, чтобы при необходимости пользователь мог не заполнять данные заново.

Ошибка № 5. Недоработанная мобильная версия

По данным исследований компании Mediascope, 70% российских пользователей каждый день выходят в сеть с мобильных устройств. После самоизоляции время использования интернета выросло еще на 12%.

Сейчас почти невозможно встретить сайт без мобильной версии, но если о наличии заботятся многие, то о качестве далеко не все. Какие же проблемы встречаются чаще всего?

Проблема 1. Длинные формы

Если в полной версии сайта длинная форма — это проблема, то в мобильной версии — это катастрофа. Начинается она с того, что форма может неправильно отображаться на разных типах устройств (10 полей адаптировать сложнее, чем 2). Заканчивается тем, что пользователю просто лень такое заполнять.

Проблема 2. Скорость загрузки

У скорости загрузки, как и у форм, есть две стороны. Первая — пользовательская. Никто не будет ждать по две минуты, пока загрузится сайт. Вторая — сеошная. Скорость загрузки — один из факторов ранжирования. То есть, не заботясь о скорости загрузки, вы отрезаете себе потенциальный трафик.

Проблема 3. Некликабельный номер телефона

В некоторых нишах 90% заказов идет с мобильных устройств. Например, если человек хочет вызвать эвакуатор, то скорее всего он будет звонить из стрессовой ситуации, с плохим интернетом. Поэтому на сайте должна быть возможность позвонить в один клик.

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

Проверить мобильную версию сайта можно здесь.

Ошибка № 6. Слишком много баннеров

Осторожно используйте всплывающие окна. Иногда пользователь может не выдержать и уйти с сайта из-за навязчивых попапов. Да и многие браузеры блокируют их самостоятельно, чтобы не загромождать экран.

Особенно бесполезно показывать пользователю всплывающие окна, когда он еще не изучил контент на сайте. Большое число попапов часто приводит к высокому показателю отказов. Человеку проще зайти на другой ресурс, чем отбить рекламную атаку.

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

Ошибка № 7. Неоформленный контент

Ошибки с контентом можно разделить на внешние (как контент отображается для пользователя) и внутренние (сам текст).

К внешним проблемам можно отнести:

• неправильное выравнивание текста,
• отсутствие межбуквенных пробелов и интервалов между строками,
• использование слишком контрастных цветов фона и текста,
• большое количество или отсутствие выделенного текста — курсива, жирного шрифта.

Чтобы пользователю было комфортно, позаботьтесь не только о визуальном оформлении, но и об удобочитаемости. Сносите стену текста: выделяйте ключевые слова, используйте списки и подзаголовки, публикуйте короткие параграфы и разбавляйте контент изображениями.

Для того, чтобы пользователь захотел прочитать ваш текст — готовьте для него интересную и легко воспринимаемую информацию. Не надо использовать литературные эпитеты там, где можно описать преимущества кратко и ясно, чтобы читатель точно увидел их.

Итог

Ошибки юзабилити могут быть разными: для одного сайта нужно сделать более заметной кнопку «корзина», для другого — улучшить форму обратной связи, а для третьего — переделать структуру всего сайта.

Чтобы понять какие ошибки необходимо исправить, понадобится юзабилити-тестирование. Но для начала просто зайдите на свой сайт и честно скажите себе — оставили бы вы на нем заказ? Ответы на какие вопросы вы хотели бы получить? Какой информации не хватает?

Исправьте ошибки юзабилити и сразу заметите, как это поможет увеличить количество посетителей и заявок.