Веб-мастера, запуская свой проект, считают, что их веб-сайт достаточно удобен, но большая часть целевой аудитории может не разобраться в функционале. В итоге получается высокий показатель отказов. Чтобы улучшить свой проект, нужно постоянно проводить анализ и выявлять слабые места. О том, как оценить юзабилити сайта, пишет блог агентства интернет-маркетинга Convert Monster.
Что такое анализ юзабилити сайта
Usability (юзабилити) - это показатель удобства сайта для пользователя. Именно от этого параметра зависит, задержится ли пользователь и совершит ли он конверсию. Соответственно, анализ usability – это проверка ресурса на удобства. Запустив сайт, нужно проверить каждую функцию, выявить все ошибки и устранить их. К примеру, в интернет-магазине при заполнении данных покупатель может застрять на определенном шаге, например, если кнопка отправки данных недоступна (некликабельна).
Зачастую проблемой являются недостатки дизайна, когда все функции работают, но посетители все равно покидают ресурс. Это связано с тем, что внешний вид ресурса отталкивает.
Яркие цвета, мелкий шрифт – причины, из-за которых бывает высокий процент отказов.
Чтобы улучшить поведенческий фактор, нужно провести анализ проекта.
Как провести анализ интерфейса сайта
В первую очередь проверьте скорость загрузки страниц. Оптимальным вариантом считается 1-2 секунды (конечно, при наличии скоростного интернет-подключения), если дольше, то 50% пользователей покинут страницу, не дождавшись ее загрузки.
Чтобы исправить ситуацию и ускорить свой сайт, следует оптимизировать код, а именно, убрать лишние пробелы в коде, объединить стили, то же самое касается и javascript. Следует добавить кэширование страниц: при заходе на сайт веб-ресурс попадет в кэш, при повторном посещении страница будет подгружаться из кэша, что экономит время на загрузку.
Проверьте сайт на кроссбраузерность и кроссплатформенность – это означает, что сайт должен одинаково хорошо отображается во всех браузерах и мобильниках.
Когда дело касается переносных гаджетов, то здесь блоки сайта должны вмещаться в дисплей без полос прокрутки, то есть открываться на одной странице, без перелистывания.
Убедитесь, что все кликабельные элементы работают и выполняют необходимые функции. Иногда встречаются блоки, которые выглядят как кнопки, но оказывается, что это часть дизайна. Лучше для объектов дизайна использовать отдельный стиль, отличающийся от кнопок.
Придерживайтесь единого стиля. Когда пользователь ищет информацию, он просматривает сразу несколько страниц, сделайте так, чтобы у них был единый дизайн. Если они будут отличаться, клиент решит, что уже находится на другом сайте. Заранее продумайте, каких тонов будет сайт, темных или светлых. Темный вариант отлично подойдет для использования в ночное время суток.
Избегайте перекрывающихся элементов и всплывающих окон. Бывают ситуации, когда посетитель ищет кнопку, а она спрятана за контейнером. Основной раздражитель всплывающих окон (pop-up) в том, они появляются в неподходящий момент и нередко бывают ситуации, когда крестик отсутствует, а закрыть можно только выполнив действие, например, подписаться. Лучше так не делать, а привязать pop-up к закрытию страницы. Например, пользователь прочитал статью и собрался уходить, в этот момент откроется окно c сообщением: «Собрались уходить? Заберите обучающий материал, оставьте email». Вот пример похожего pop-up:
Источник: блог Convert Monster (здесь и далее)
Оцените доступность информации. Статья должна быть читаемой и полностью видна на устройстве с любым разрешением экрана.
Следуйте логике сайта. У ресурса должна быть определенная структура, чтобы клиент мог быстро достигнуть цели и найти интересующую информацию.
Работа над дизайном сайта
Яркие цвета могут отпугнуть клиента, поэтому следует поработать с внешним видом и подобрать подходящую цветовую палитру. Если вы делаете светлым фон, то для текста уместно использовать серый, черный цвет. При разработке темного фона используйте белый текст.
Header (шапка, блок в верхней части страницы сайта) должен быть в едином стиле со всем сайтом. Высоту шапки лучше указать 200-350 пикселей. Если сделать слишком большой header, то придется прокручивать, чтобы увидеть контент.
В footer (подвал), обычно размещается служебная информация, номера телефонов, email-адрес и т.п.
Формы для отправки данных применяются для возможности пользователя оставить комментарий, пройти регистрацию или связаться с разработчиком. Очень полезным будет внедрить в них подсказки, например, когда логин заполнен неправильно, то он отмечается красным цветом, в случае правильного заполнения зеленым.
Также необходим уникальный фавикон (небольшая иконка, которая отображается во вкладке браузера). Создав свой favicon, вы сделайте ресурс узнаваемым.
Как оформить текст на сайте
1. Шрифт текста не должен сливаться с фоном и быть слишком мелким. В первом случае это отпугнет не только пользователей, поисковые машины также негативно к этому отнесутся. Во втором случае, если сделать размер шрифта слишком маленьким, то это помешает восприятию контента. Оптимальный вариант 14 px.
2. Списки и цветные блоки. Люди лучше воспринимают текст, если в нем есть списки и цветные блоки. Например, важные места абзаца выделить определенным цветом.
3. Оформление с заголовком и подзаголовком. Избегайте одинакового размера шрифта подзаголовков и текста.
4. Оформление ссылок. Пользователи привыкли видеть ссылки, выделенные синим цветом, придерживайтесь этого правила. Боковое меню лучше оформить ссылками с названием, а не картинками, как это делают на некоторых сайтах. Если меню создано картинками, то будет непонятно, про что этот раздел. Активное меню выделяйте цветом. Это поможет быстрее разобраться, какая категория открыта.
5. Насыпьте «хлебные крошки» или «тропинки из ссылок». Используйте цепочки ссылок для открытой страницы, чтобы пользователь понимал, как он зашел на нее, например: каталог-распродажа-уценка-название товара. Это удобно, позволяет вернуться назад.
6. Правильно оформляйте цифры. Если в статье требуется работать с большими цифрами, то делайте пробелы каждые три цифры, вот так «3 524» или «3 172 731».
7. Установите дату статьи. Обычно читатели обращают внимание на число и год, когда была сделана публикация. Это нужно, чтобы понять, насколько информация устарела. Так как контент в сети быстро устаревает, большинство читателей хотели бы видеть актуальный материал.
Рекомендации по созданию внешнего вида интернет-магазина
Для того чтобы провести анализ юзабилити сайта для интернет-магазина, следует обратить внимание на наличие и работоспособность следующих элементов:
1. Логотип – придумайте уникальный лого, создайте его в Фотошопе, а потом разместите в шапке. Сделайте из logo ссылку, чтобы при нажатии на него покупатель попадал на главную страницу интернет-магазина.
2. Добавьте номер телефона, чтобы клиент мог связаться с сотрудником и задать вопрос. Если это городской номер, обязательно укажите код города, если этого не сделать, клиенты из других городов не смогут дозвониться.
3. Сделайте так, чтобы вся контактная информация была видна на всех устройствах. Клиенты могут заходить не только с компьютера, но и со смартфонов и планшетов.
4. В категориях должны присутствовать опции сортировки, т.е. нужно дать покупателю возможность отсортировать товары. Например, чтобы была возможность сделать выборку по цвету (черный или белый смартфон) или по цене. Пользователь сможет найти нужный товар, а значит шанс, что он сделает покупку, увеличится.
5. Добавьте сопутствующие товары. Покупатель должен видеть дополнительные предложения. В некоторых интернет-магазинах предлагают купить сразу несколько предметов (один из которых собрался заказать покупатель) по сниженной цене.
6. Предоставьте альтернативу. Если товар отсутствует, предложите покупателю другой вариант товара из этой же товарной категории.
7. Сделайте формы отзывов и рейтингов. Покупателям нужно дать возможность оставлять свое мнение и оценивать товар.
Дополнительные советы. Проверьте работоспособность всех функций и исправьте ошибки. Например, клиент пытается оформить товар, и застревает на определенном шаге. Нужно проверить, как работает регистрация и выявить сложности, чтобы их устранить.
Сервисы для проверки юзабилити
Чтобы лучше понять, насколько ресурс удобен, следует знать, как провести анализ юзабилити сайта. Для этого существуют разные площадки.
1. Google Pagespeed – проверяет ошибки и выводит рекомендации по их исправлению. Проверка происходит сразу по двум устройствам - компьютерам и телефонам. Рекомендации имеют теоретический характер. Он не учитывает оптимизацию для ускорения загрузки страниц и кеширование в автономном режиме. Проверяя сетевую задержку, он не берет в расчет обработку на стороне сервера. Замер показателей происходит с европейских серверов, а загрузка страницы зависит от местоположения сервера: чем ближе сервер находится к основной аудитории, тем быстрее загружается страница.
2. Анализ сайта pr-cy – вы можете бесплатно посмотреть Индекс качества сайта (ИКС - показатель того, насколько полезен ваш сайт для пользователей с точки зрения Яндекса), скорость загрузки страниц и другую информацию.
3. Яндекс метрика – она показывает статистику, имеет встроенный инструмент «Вебвизор», который записывает все действия пользователя и показывает их в плеере, таким образом можно отследить на какие кнопки нажимал посетитель и сделать выводы, насколько ресурс удобен. Тепловая карта кликов, позволяет показать точки, где были произведены щелчки. Карта скроллинга показывает, делал ли пользователь прокрутку или нет. Аналитика формы отвечает за воронку заполнения полей. Таким образом, наглядно видно, полностью клиенты заполняют поля или бросают на полпути. Карта ссылок отвечает за переходы по ссылкам: чем теплее цвет, тем чаще заходы.
4. Google Оптимизация (https://optimize.google.com/). Специальный сервис от Google, который занимается сбором информации о поведении посетителей. При анализе выводит результат, к примеру, какое расположение блоков будет лучшим вариантом для целевой аудитории или какой стиль формы принесет больше конверсий.
5. Hotjar – сервис, куда включены инструменты для юзабилити-тестирования. Здесь присутствуют тепловые карты, где можно посмотреть популярные области кликов. Добавлен скроллинг для отслеживания дочитываний. Существует сбор обратной связи, где копится информация о посетителях. Есть анализ воронки продаж и другие функции.
6. UsabilityHub – здесь присутствуют юзабилити-тесты, где проявляют активность реальные участники. Всего доступно пять простых тестов.
7. Plerdy – сервис который просматривает клики. Plerdy показывает статистику часто нажимаемых мест. Можно посмотреть клики по устройствам. Существует функции видеозаписи, аналог «Вебвизора».
8. Crazy Egg – показывает карту кликов и скроллинга. Главный плюс проекта, это то, что можно посмотреть, куда щелкают люди, которые перешли из внешних источников, социальных сетей или с поисковиков. Этот вариант будет полезен, если нужно проанализировать разные сегменты целевой аудитории. Инструмент платный, но 30 дней дается пробный период.
9. Inspectlet – проект для отслеживания целевой аудитории по кликам. Вы можете проверить, куда щелкают посетители, куда смотрят и таким образом оценить удобства. Бесплатный тариф включает в себя 1000 просмотров в месяц.
10. Фабрика Юзабилити – софт для тех, кто, кто не знает, как провести анализ юзабилити сайта.
Участникам платформы предлагают выполнить задания. Они пытаются найти способ оплаты, форму для заполнения и другие элементы, потом делятся своим мнением о работе вашего ресурса.