Популярность сайта зависит от ряда параметров. И ежедневно в Интернете появляются новые площадки, которые со временем закрываются. Причина такого исхода обычно кроется в низкой посещаемости сайта. Даже при идеальном маркетинге нет гарантии, что посетители будут заходить на вашу веб-страницу. Поэтому нужно приложить максимум усилий, чтобы веб-сайт был удобным для пользователей. За удобство как раз и отвечает юзабилити. Основная часть целевой аудитории заходит за информацией, если же возникнут трудности в поиске нужного контента, то пользователь уйдет к конкурентам. В этой статье мы разберем, какие проблемы юзабилити существуют и как их исправить.
Анализ юзабилити сайта, что это?
Usability (юзабилити) – это показатель удобства сайта для пользователя. Именно от этого параметра зависит, задержится ли пользователь и совершит ли он конверсию. Разумеется, анализ usability – это проверка ресурса на удобства. Запустив сайт, нужно проверить каждую функцию, выявить все ошибки и устранить их. К примеру, возьмем интернет-магазин, занимающийся продажей спорт-товаров. У клиентов могут возникнуть проблемы при попытке оформления заказа. Когда идет заполнение данных, покупатель может застрять на определенном шаге, например, если кнопка отправки данных недоступна (некликабельна).
В Интернете существуют сайты, где стили прописаны криво, и некоторые элементы могут быть скрыты за другими блоками. Например, проблемы с кнопкой submit, из-за чего нажать на неё практически невозможно. Это один из примеров, но довольно часто встречаются и общие проблемы с дизайном, вроде все функции работают, но посетители все равно покидают ресурс. Это связано с тем, что внешний вид ресурса отталкивает. Яркие цвета, мелкий шрифт – причины, из-за которых бывает высокий процент отказов. Чтобы улучшить поведенческий фактор, нужно провести анализ проекта. Выше мы рассмотрели такой термин, как анализ юзабилити сайта, и что это такое, а теперь перейдем к тому, как правильно сделать юзабилити-тестирование и на какие параметры обращать внимание в первую очередь.
Как провести анализ интерфейса сайта
В первую очередь проверьте скорость загрузки страниц. Оптимальным вариантом считается 1-2 секунды, если дольше, то 50% пользователей покинут страницу, не дождавшись ее загрузки.
Чтобы исправить ситуацию и ускорить свой сайт, следует оптимизировать код, а именно, убрать лишние пробелы в коде, объединить стили, то же самое касается и javascript. Следует править htaccess и добавить кэширование страниц. При заходе веб-ресурс будет храниться в кэше, при повторном посещении страница будет подгружаться из кэша, что экономит время на загрузку.
Вот еще несколько шагов, которые следует выполнить:
1. Исправление ошибок в html – убедитесь, что все теги закрыты. Проверьте атрибуты в тегах, к примеру, class в документе может попадаться несколько раз с одинаковым именем. Идентификатор id должен встречаться с одним именем без дубликата.
2. Кроссбраузерность и кроссплатформенность – это важный показатель сайта, который должен одинаково хорошо отображается во всех браузерах и мобильниках. Пример, как это выглядит на мобильных устройствах.
Когда дело касается переносных гаджетов, то здесь блоки сайта должны вмещаться в дисплей без полос прокрутки. Этого можно добиться, прописав стили в файле css. Чтобы произвести настройки для смартфонов, добавьте в html мета-тег с атрибутом name и впишите туда viewport. Атрибут content тоже нужно заполнить значением “width=device-width, initial-scale=1.0”. Для указания стилей смартфона используйте команду media, и в фигурных скобках добавьте стили для смартфона, пример ниже.
3. Убедитесь, что все кликабельные элементы работают, и выполняют необходимые функции. Иногда встречаются блоки, которые выглядят как кнопки, но оказывается, что это часть дизайна. Лучше для объектов дизайна использовать отдельный стиль, отличающийся от кнопок.
4. Придерживайтесь единого стиля. Когда пользователь ищет информацию, он просматривает сразу несколько страниц, сделайте так, чтобы у них был единый дизайн. Если они будут отличаться, клиент решит, что уже находится на другом сайте. Заранее продумайте, каких тонов будет сайт, темных или светлых. Темный вариант отлично подойдет для использования в ночное время суток.
5. Избегайте перекрывающихся элементов и всплывающих окон. Бывают ситуации, когда посетитель ищет кнопку, а она спрятана за контейнером. Основная черта всплывающих окон (popup), они появляются в неподходящий момент и нередко бывают ситуации, когда крестик отсутствует, а закрыть можно только выполнив действие, например, подписаться. Лучше так не делать, а привязать pop-up к закрытию страницы. Например, пользователь прочитал статью и собрался уходить, в этот момент откроется окно c сообщением: “Собрались уходить? Заберите обучающий материал, оставьте email”. Вот пример похожего pop-up:
6. Доступность информации. Статья должна быть читаемой и полностью видна на устройстве любого разрешения.
7. Логика сайта. У ресурса должна быть определенная структура, чтобы клиент мог быстро достигнуть цели и найти интересующую информацию.
Краткие рекомендации о том, как провести анализ интерфейса сайта, мы перечислили выше, теперь разберем подробно элементы дизайна.
Внешний вид сайта – дизайн
Яркие цвета могут отпугнуть клиента, поэтому следует поработать с внешним видом и подобрать подходящую цветовую палитру. Если вы делаете светлым фон, то для текста уместно использовать серый, черный цвет. При разработке темного фона используйте белый текст. Header должен быть в едином стиле со всем сайтом. Пример игрового ресурса показан ниже.
Высоту шапки лучше указать 200-350 пикселей. Если сделать слишком большой header, то придется прокручивать, чтобы увидеть контент.
В footer (подвал), обычно размещается служебная информация, номера телефонав, email-адрес и многое другое.
Формы для отправки данных. При разработке веб-сайта, добавляются поля, где пользователь может оставить комментарий, пройти регистрацию или связаться с разработчиком и тут существуют правила для удобства заполнения полей. В первую очередь прикрутите ajax валидацию, чтобы при заполнении появлялись подсказки. К примеру, когда логин заполнен неправильно, то он отмечается красным цветом, в случае правильного заполнения зеленым. Посмотрите пример на картинке.
Выполнив это условие, вы сократите время на заполнение данных и пользователь будет допускать меньше ошибок, значит вероятность того, что он уйдет снизиться.
Оформление текста
Как провести анализ интерфейса сайта? Ряд советов, которые следует придерживаться, для оформления текста.
1. Шрифт не должен сливаться с фоном и быть слишком мелким. В первом случае это отпугнет не только пользователей, поисковые машины также негативно к этому отнесутся. Во втором случае, если сделать размер шрифта слишком маленьким, то это помешает восприятию контента. Оптимальный вариант 14px.
2. Списки и цветные блоки. Люди лучше воспринимают текст, если в нем есть списки и цветные блоки. Например, важные места абзаца выделить определенным цветом красным или зеленым.
3. Оформление. Заголовок и подзаголовок – для этого используйте h1 и h2. Требуется избегать того, чтобы подзаголовки были одного размера с текстом. Содержание тегов title и h1, должны отличаться.
4. Пользователи привыкли видеть ссылки выделенные синим цветом. Поэтому стоит придерживаться этого правила. Боковое меню лучше оформить ссылками с названием, а не картинками, как это делают на некоторых сайтах. Если меню создано картинками, то будет непонятно про что раздел. Активное меню выделяйте цветом. Это поможет быстрее разобраться, какая категория открыта. Такой вариант подойдет, если меню слишком большого размера.
Пример одного старого сайта по программированию показан ниже. Под цифрой 1 хлебные крошки из них понятно, что мы находимся в разделе OpenGl. В меню слева под цифрой 2 раздел выделен полужирным шрифтом, это подсказка где мы находимся. Не обязательно делать в точности, как показано на картинке, можно использовать стили, чтобы выделить пункт меню по особому.
Продолжение статьи – в блоге Convert Monster.