Популярные ошибки юзабилити сайта

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

Ошибки в создании дизайна сайта

Юзабилити элементов

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

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

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

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

В зависимости от размера экрана наслоиться на какой-то из элементов может и белый текст на белом фоне, потому что только так пользователь сможет его прочитать.

Грамотным решение данной проблемы будет простая подложка.

Стили

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

Упростит процесс использование разной насыщенности – нормального и жирного шрифтов. Для выделения контента этого будет вполне достаточно.

Цветовой блок

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

УТП

УТП слишком большого размера сложны для прочтения. Особенно трудно читается длинный текст, выровненный по центру. Оптимальными будут УТП размером в 100-150 символов. Лучше, конечно, уложиться в 100, так как 100 – это идеальный размер description на мобильном устройстве. Когда текст меньшего размера, читать его становится легче.

Кроме того, как и в случае с фотографиями, текст не должен наслаиваться на объект изображения. Такое наслоение раздражает пользователей. Изображения должны быть отделены от текста, чтобы при любом разрешении подобного не происходило.

Визуальная иерархия

Размеры заголовков верхних уровней должны быть больше, чем нижних. По аналогии должны быть выдержаны и все остальные внутриблочные иерархии. Заголовки уровня H3 должны быть меньше заголовков уровня H2.

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

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

Обводка кнопок

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

Количество цветов

Оптимально будет использовать в дизайне сайта два цвета. Черный и ваш фирменный. Белый в расчет не берется. Три цвета – это уже много, а четыре – перебор.

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

Дизайн статей

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

Ошибки в навигации сайта

Слишком большое меню

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

Непродуманное меню

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

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

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

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

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

Категории на сайте должны быть прописаны правильно и четко под ключевые слова. Худшими вариантами ключевого названия категории будут «Услуги» или «Товары». Для таких услуг лучше создать отдельный блок.

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

При создании сайта ориентируйтесь на то, по каким принципам они делаются в вашей сфере и следуйте им.

"Подвал" (Footer) сайта

На каждой странице сайта подвал должен оставаться одинаковым

Ошибки в коде

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

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

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

Тепловая карта

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

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

Для сбора такого рода информации существуют специальные сервисы, например, Microsoft Clarity.

Заключение

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

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

Подпишитесь на нашу рассылку
чтобы ничего не пропустить