Почему они уходят: 6 разочарований пользователей на сайте

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

МНЕ НУЖНО ВЗЯТЬ ОЧКИ, ЧТОБЫ ПРОЧИТАТЬ ТЕКСТ НА ВАШЕМ САЙТЕ?

Несмотря на растущую популярность видеоформатов, большая часть информации по-прежнему подаётся текстом. Давайте проведём эксперимент:

Такой текст заставляет чувствовать себя бабулей, которая держит в руках газету перед лицом, чтобы разглядеть буквы. Ни один посетитель сайта не захочет ломать глаза, даже если на вашем сайте суперполезная информация. Поэтому делаем вывод: «Хорошая читаемость текста на сайте крайне важна для пользователя».

Как решить эту проблему?

Для идеального сайта минимальный размер шрифта — 16 пикселей (Google и Apple рекомендуют).
Не забывайте о сочетании цветов. Простой способ проверить читабельность текста на каком-то цветном фоне — воспользоваться специальными инструментами для проверки контрастности. Например, специальным плагином A11y. И не забывайте про цвета фона и текста для разных типов дальтонизма — протестировать их можно здесь.
Всегда тестируйте сайт на реальном устройстве, для которого он был разработан. Ставьте себя на место пользователя и анализируйте что и как он будет делать на вашем сайте, будет заходить на него с десктопа или с мобильного устройства?

ЛИБО МОИ ПАЛЬЦЫ СЛИШКОМ ТОЛСТЫЕ, ЛИБО НА ВАШЕМ САЙТЕ КРОШЕЧНЫЕ КНОПКИ

Хорошие и плохие кнопки на сайте. Картинка от Apple

Сейчас будет страшная история. Особенно впечатлительных просим отойти от экрана. В чёрную-чёрную пятницу тёмной-тёмной ночью один человек с чёрным-чёрным планшетом пытался купить себе одежду по скидкам. Он добавил все нужные товары в корзину и нацелился на кнопку «Купить»… но кликабельные элементы оказались некликабельных размеров. Спустя два дня и две ночи пользователь так и не смог нажать на нужную кнопку и поклялся, что никогда больше не посетит этот сайт. Настоящий кошмар для владельцев сайтов, согласны?

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

Что сделать, чтобы пользователи не уходили?

Согласно статистике 61% россиян пользуются интернетом на смартфонах. Поэтому (опять же) поставьте себя на место пользователя и проверьте, как кликабельные элементы вашего сайта отображаются на разных устройствах.
Убедитесь, что все кликабельные элементы на вашем сайте удобны для пальцев. Разработчики веб-сайтов считают, что размер кнопок должны быть не менее 48 на 48 пикселей по ширине и высоте (примерно как подушечка пальца).
Если же вам нужно сделать визуально маленькую кнопку (например, 24 на 24 пикселя) — просто сделайте область вокруг неё кликабельной.

ЭТОТ САЙТ МОЖЕТ НОРМАЛЬНО ЗАГРУЖАТЬСЯ? ПОЧЕМУ ВСЕ ПРЫГАЕТ?

Снова ставим себя на место пользователя. Итак, вы заходите на сайт, хотите нажать на кнопку. Вы наводите курсор, кликаете и вдруг понимаете, что нажали совсем на другую кнопку — вместо «Отмена» активизировалась «Купить». Хм, что-то явно пошло не так. Знакомо?

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

Пример «Сдвига контента», источник CSS-Tricks

Как это решить?

Чтобы предотвратить смещение контента на сайте, попробуйте измерить высоту динамического содержимого и жёстко закодировать его как «минимальную высоту» для контейнера в CSS.
Выбрать подходящий хостинг. Производительность сайта и загрузка динамического контента зависит от скорости и мощности хостинга, а также настроек сервера и оптимизации с CMS. Если они соответствуют требованиям друг друга и работают в единстве, то обеспечивают максимальную производительность проекту. Кстати в REG.RU вы можете бесплатно получить на тест 14 дней хостинга.
Подготавливайте изображения в формате «прогрессивный JPEG» — когда картинка появляется вся сразу. Поначалу картинка выглядит как набор огромных пикселей, и, по ходу загрузки страницы, постепенно загружается. Превратить картинку из формата JPEG в PJPEG можно с помощью специальных редакторов, например, Irfanview.

ЕСЛИ ЭТА ФОРМА СНОВА НЕ СОХРАНИТ МОИ ДАННЫЕ, Я РАЗОБЬЮ ЭКРАН О СТЕНУ

Случалось ли с вами такое, что вы заполняли форму регистрации на сайте, и, нажав на кнопку «Отправить», страница перезагружалась, а вся информация пропадала?

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

Как не потерять данные?

Используйте локальное хранилище (localStorage) или хранилище сеансов (sessionStorage), тогда пользователь увидит данные, которые уже вносил в соответствующие поля формы — вдруг кто-то случайно нажал на кнопку «Отмены». Это прямой путь к сердцу ваших клиентов.

КАК МНЕ ВЕРНУТЬСЯ НАЗАД? А-А-А-А!

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

Известный специалист по интерфейсам Якоб Нильсен писал о 10 общих правилах дизайна интерфейса, согласно одному их которых важно чётко показать пользователю «аварийный выход». При использовании сайта что-то всегда может пойти не так: человек ошибётся при вводе данных или нажмёт не на ту кнопку. Поэтому хорошая система умеет возвращаться на несколько шагов назад и даёт шанс всё исправить.

Как решить проблему?

Во-первых, убедитесь, что кнопки назад на страницах с формами или последовательными шагами (например, в мастере заказов, корзине) работают нормально.
Во-вторых, если на странице есть заполненные данные и пользователь хочет её закрыть, обязательно добавьте предупреждение. Например, «Вы действительно хотите покинуть страницу?» или «Внесённые данные исчезнут».

ЗАЧЕМ ЭТОТ АВТОЗАПУСК ВИДЕО? ВЫ ХОТИТЕ, ЧТОБЫ У МЕНЯ БЫЛ ПРИСТУП?

Возможно, вы тоже пару раз сталкивались с автоматическим запуском видео со звуком. К счастью, такого тренда сегодня нет, но изредка такие решения можно встретить. Если вам кажется это гениальной находкой, то — нет. Ни один пользователь не ожидает что контент начнёт воспроизводиться без его согласия. И, скорее всего, он немедленно покинет ваш сайт. Прощё уйти, чем искать, как это всё выключить (особенно если на вашем сайте крошечные кнопки).

Как не пугать клиента резкими звуками?

Добавлять на страницу видео, которые автоматически воспроизводятся, в целом нормально. Главное — позаботиться о свободе выбора посетителя сайта, поэтому по умолчанию отключите звук с возможностью его включить, если пользователю это покажется интересным.
Постарайтесь отключить музыку и звуки всплывающих плашек/окошек/чатов. И напишите в комментариях насколько часто вас пугал звук внезапно открывшегося чата, в котором «консультант-Егор-готов-вам-помочь».

⌘⌘⌘

Иногда, чтобы понять, насколько хорошо и эффективно работает сайт, достаточно просто попробовать сделать там что-то самостоятельно. Личный опыт — бесценен, и так вы сможете лучше понять ваших пользователей!

А если у вас пока нет своего онлайн-бизнеса или проекта, это легко исправить с сервисом REG.Site, где не требуются навыки разработки или программирования. Мы позаботились о том, чтобы ваш сайт выглядел круто на всех устройствах, а пользователя ничего не раздражало.

Выбрать красивый шаблон