Поиск по сайту Поиск

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

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

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

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

пример плохого текста на сайте
как сделать хороший текст для сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10 общих правил интерфейса, кнопка назад

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

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

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

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

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

как убрать автозапуск видео

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

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

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

⌘⌘⌘

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

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

Итоги 2021 года: Cloud VPS на Windows, VIP-поддержка хостинга и искусство в дата-центре

Ещё один год приближается к финишной прямой — 2021 выдался действительно богатым на события для нашей компании. Поэтому редакция блога...
Read More

Самые читаемые посты в блоге за 2021: программирование, интересные факты и загадки

Компания REG.RU начинает подводить итоги уходящего года. Все 365 дней мы внимательно следили за тем, какие статьи вызывают у читателей...
Read More

Лучшие таск-сервисы для организации командной работы

Грамотное планирование — неотъемлемая частью нашей жизни, будь то ремонт квартиры, организация дня рождения или совместная работа над проектом с...
Read More

Жизненный цикл домена: регистрация, продление и новые владельцы

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

Что такое веб-портфолио и как его создать

Портфолио — собрание выполненных работ, проектов и других документов, которые демонстрируют ваш профессионализм и опыт. И, если раньше портфолио представляло...
Read More

Чек-лист для проверки сайта: распознаём фишинговые страницы «на глаз»

Согласно статистике 45% россиян столкнулись с фишинговыми сайтами в 2021 году. Поэтому сегодня, в преддверии покупок подарков к приближающимся праздникам,...
Read More

Всем игрокам подготовиться: 5 игр для изучения программирования

Самостоятельное изучение программирования может оказаться не только сложным, но и проблематичным: как не потеряться в огромном количестве учебников и документации?...
Read More

«Доменный брокер» или как REG.RU договаривается о покупке за вас

Давайте представим, что вы решили зарегистрировать домен, но оказалось, что он уже занят другим администратором или владельцем. Казалось бы, что...
Read More

Google Workspace: Gmail, видеозвонки, календарь и многое другое

Хотите выстроить работу в режиме удалёнки? Это не так уж и сложно. Организовать онлайн-офис вам помогут digital-инструменты, например, Google Workspace,...
Read More

Бесплатный SSL vs платный SSL-сертификат: какой выбрать?

Недавно мы уже отвечали на вопросы о том, что такое SSL-сертификат, как он связан с безопасностью сайта и данных пользователей....
Read More