Проверка юзабилити сайта онлайн

Проверка юзабилити сайта онлайн

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

Работоспособность сайта

Перед тем, как приступить к анализу оформления сайта и поведения пользователей, убедитесь, что все страницы работают корректно в разных браузерах и на разных типах устройств: в этом помогут отчеты Яндекс.Метрики «Устройства» и «Браузеры». Для этого кликните на иконку «Отчеты по счетчику» рядом с нужным счетчиком и сформируйте их в разделе «Стандартные отчеты» → «Технологии».

Обратите внимание на скорость загрузки страниц: большинство пользователей интернета ожидают мгновенного ответа от сайта. Мы рекомендуем сократить время до загрузки до 5 секунд.

Проверить скорость загрузки страниц можно в отчете Яндекс.Метрики «Время загрузки страниц». Для этого кликните на иконку «Отчеты по счетчику» рядом с нужным счетчиком и сформируйте его в разделе «Стандартные отчеты» → «Мониторинг».

Навигация по сайту

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

Ключевые разделы меню должны соответствовать основным потребностям пользователя.

Принципы навигации не должны меняться на разных страницах.

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

Желательно, чтобы с основного экрана можно было перейти ко всем ключевым разделам сайта.

Группировка разделов меню должна быть произведена по очевидной для конечного пользователя логике: не следует выносить на один уровень общий и частный заголовок, например, «Женская одежда» и «Платья».

Логотип в шапке сайта должен быть кликабельным и вести на главную страницу.

Важные разделы сайта

• Контакты

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

Конечно, не стоит размещать полную информацию о компании в верхней части каждой страницы: лучше оставить один или несколько элементов в зависимости от ожидаемого поведения пользователей — телефон, e-mail, адрес ближайшего магазина или офиса.

• Оплата и доставка

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

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

• Гарантия и обмен

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

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

Элемент «Корзина»

Удобное расположение блока корзины поможет пользователю совершить конверсионное действие.

1. Необходимо располагать корзину в привычном для пользователей месте (в основном это верхний правый угол сайта).
2. Корзина должна быть доступна со всех страниц сайта.
3. Рекомендуется использовать привычные иконки (тележки, корзины и т.д.), контрастного по отношению к фону цвета.
4. Элемент «Корзина» следует отображать достаточно крупно, чтобы пользователь легко мог найти его при необходимости.
5. Рекомендуется отображать сумму заказа и количество товаров в корзине.
6. Для повышения конверсии на сайте можно предложить пользователю перейти в корзину сразу после нажатия на кнопку «Купить»/«Заказат» — например, добавив соответствующие кнопки либо всплывающее окно.

Эффективность работы корзины можно проверить при помощи отчета «Конверсии» Яндекс.Метрики, предварительно настроив цели. Также может помочь «Карта кликов» и «Вебвизор». Чтобы подключить эти инструменты, нужно выбрать их в настройках счётчика — а затем обновить полученный код на всех страницах сайта.

Форма заказа/заявки

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

Чтобы сделать форму более удобной, рекомендуем использовать автозаполнение полей. Желательно, чтобы при переходе на форму со страницы модели (либо аналогичной страницы) соответствующие параметры заполнялись по умолчанию. Это значительно ускоряет ввод данных и уменьшает ошибки пользователей.

Рекомендации по оформлению формы заказа/заявки:

Указывайте формат полей в форме — это поможет свести к минимуму ошибки пользователей при вводе данных.

Отмечайте обязательные для заполнения поля звездочками.

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

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

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

После заполнения формы рекомендуем отображать статус заявки (страница «Спасибо»). Пользователь, понимающий в каком статусе находится его заявка, с меньшей вероятностью будет искать и выбирать другие предложения.

После внедрения формы заказа на сайт необходимо тщательно протестировать работоспособность формы:

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

Оформление текста

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

Избегайте чрезмерного выделения текста шрифтами (большая часть сайтов строится на основе одного-трех шрифтов), а также «кричащих» цветов фона, текста и изображений.

Качество информации/наполнение сайта

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

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

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

Качество фото и видео на сайте

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

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

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

Мобильная версия сайта

Сегодня 29% всех визитов на сайты совершается с мобильных устройств, а 19% пользователей выходят в интернет только с мобильного или планшета.

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

Подробнее о проверке адаптации сайта для мобильных устройств читайте в разделе «Чек-лист по юзабилити мобильного сайта».

5 бесплатных инструментов для самостоятельного юзабилити-тестирования сайта

Аналитики американской компании Forrester Research выяснили, что около половины сайтов теряет клиентов из-за неудобного дизайна и других недочетов в юзабилити. Только представьте: неудачная форма заказа или некликабельная картинка — и потенциальный покупатель понес деньги конкурентам. Чтобы понять, нравится ли вашим посетителям сайт и удобно ли им делать на нем покупки, проведите юзабилити-тестирование.

Что нужно тестировать?

Если сайт уже работает, какие его элементы нужно протестировать станет ясно после аналитики. Реальный пример теста юзабилити компании Imaginary Landscape: из Google-Аналитики видно, что пользователи заходят на страницу с формой обратной связи, но заявку на звонок не отправляют. После юзабилити-тестирования стало понятно, что люди не хотят заполнять такое количество строк. Форму поменяли, количество строк сократили c 11 до 4, после чего конверсия выросла на 140%. Профит.

Еще тестируют картинки. Они должны привлекать внимание пользователей, вызывать правильные эмоции и побуждать к правильным действиям. Если по картам кликов видно, что на картинку нажимают, но она никуда не ведет, логично сделать ее ссылкой на что-нибудь полезное и актуальное. Либо наоборот: нажав на изображение, пользователи найдут интересную информацию, только они об этом не догадываются. Проблему решить легко. Достаточно сделать так, чтобы картинка реагировала на наведение курсора — немного увеличивалась или подсвечивалась, как бы приглашая на себя нажать. Но сначала нужно узнать о существовании проблемы, а для этого — провести юзабилити-тестирование.

Кроме прочего, тестируют:

• структуру сайта, чтобы сделать ее простой и понятной для пользователя;
• кнопки на кликабельность, особенно после того, как в моду вошел так называемый плоский дизайн;
• меню, чтобы определить, почему пользователи не заходят в некоторые разделы.

В общем, любые элементы, с которыми посетитель взаимодействует на сайте. Или не взаимодействует, но по нашему плану должен.

В идеале тестирование проводят специалисты: собирают данные, сегментируют ЦА, формируют фокус-группы, составляют анкеты, а после самого исследования анализируют результаты. Это долго и дорого, хотя и стоит того. Но получить общее представление о взаимодействии пользователей с вашим сайтом можно и самостоятельно, причем бесплатно. Для этого есть как минимум 5 способов.

1. Инструменты Яндекс Метрики

В рунете из бесплатных инструментов юзабилити-тестирования пока не придумали ничего удобнее и функциональнее счетчиков Яндекс Метрики. Чего стоит один «Вебвизор».

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

Чтобы установить «Вебвизор», авторизуйтесь на Яндекс Метрике и перейдите на вкладку «Добавить счетчик». В «Настройках» скопируйте код счетчика и вставьте на все страницы сайта.

Добавьте HTML-код счетчика на страницы своего сайта

Интерфейс Вебвизора

Вот так выглядит отчет «Вебвизора». А просмотр действий пользователя начнется при нажатии на значок воспроизведения.

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

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

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

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

2. UsabilityHub

Онлайн-сервис предлагает 5 простых тестов:

• Five Second Test — тест пяти секунд. Принцип таков: вы загружаете скриншот тестируемой страницы на сайт, участники теста смотрят на нее в течение 5 секунд, после чего дают свою оценку. Можно задавать разные вопросы, например, какой элемент больше всего привлек внимание, что запомнилось, о чем сайт и тому подобное. По завершении вы получите ответы участников теста в полном объеме + автоматически сгенерированное облако часто повторяющихся слов.

1.Загружаем скриншот страницы

2. Задаем участникам вопросы

3. Получаем отчет с ответами

4. Для наглядности изучаем облако

• Click Test — тест кликов.
  Действия те же, только вместо ответов получаем тепловую карту кликов. По ней мы увидим, что пользователи, к примеру, не жмут на стратегически важную (для нас) кнопку, зато активно кликают картинку. Дополнительно сервис предоставит отчет о количестве кликов и среднем времени щелчка.

• Question Test — тест вопросов.
  Вы спрашиваете о своем сайте — реальные люди отвечают.

• Navigation Test — анализ навигации.
  Позволяет понять, насколько удобно пользователям «лазить» по вашему сайту, понятна ли его архитектура и навигация.

• Preference Test — предпочтение.
  Поможет провести А/В тестирование дизайна сайта, приложения, листовки. Загружаете два варианта дизайна — пользователи выбирают, какой им больше нравится. Все просто и оперативно.

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

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

3. Usabilla

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

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

4. Optimal Workshop

На сервисе доступны такие инструменты:

• Treejack — тестирование «дерева» сайта.
  Помогает понять, как пользователи ориентируются на вашем сайте, выполняют ли те действия, которые вы от них ждете, или теряются в его дебрях. Для тестирования нужно расписать информационную архитектуру своего сайта в форму Treejack. Звучит страшно, но каждая строка формы подписана, если знаете английский — легко справитесь. Также нужно поставить задачи участникам тестирования, к примеру, найти мобильный телефон на сайте. На выходе получите исчерпывающую статистику в виде таблиц и диаграмм. Бесплатная демо-версия позволяет опросить 10 человек.

• OptimalSort — тестирование по методу сортировки карточек.
  Помогает выяснить, как пользователь думает, какие принимает решения и как ему проще достичь конечной цели на вашем сайте. Как это работает: все элементы контента сайта «выписывается» в отдельные карточки, а участникам предлагается отсортировать их так, как им было бы понятно и удобно. В результате вы получаете отчеты в виде таблиц, матриц, дендрограмм и понимание ментальной модели ваших пользователей. В бесплатной версии можно протестировать 30 карточек, опросив 10 человек.

• Chalkmark — опросы, тепловая карта.
  Помогает узнать первое впечатление о дизайне, показывает тепловую карту кликов и анализ первого щелчка. Для тестирования загрузите скриншот страницы, поставьте участникам задачи и ждите результаты в виде карты кликов, цветовой сетки и схемы подсчета количества щелчков.

Результаты тестирования макета сайта с помощью Chalkmark

В платной версии можно проводить онлайн-опросы с быстрой обратной связью.

5. Feng-GUI

В отличие от предыдущей тройки инструментов, этот не дает обратную связь от живых людей. Приложение на основе своих алгоритмов само генерирует карту внимания пользователя. То есть показывает, куда он посмотрит сразу после загрузки страницы и в какой последовательности (по мнению программы) его взгляд будет перемещаться с одного элемента на другой. Для тестирования вводим url нужной страницы сайта, жмем Analyze, через несколько секунд получаем заветную карту взгляда пользователя.

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

Не хотите разбираться в интерфейсах и статистиках англоязычных ресурсов? Идите в народ. К примеру, для оценки дизайна страницы разместите скриншот на revision.ru или подобных площадках, поинтересуйтесь мнением «местных» — web-дизайнеров, разработчиков и других специалистов. Проведите опросы в соцсетях, например, в тематических сообществах, или соберите фокус-группу среди своих знакомых. Для более или менее объективного анализа юзабилити достаточно опросить 5 респондентов (по некоторым данным 8) из своей целевой аудитории.

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

12 инструментов для оценки юзабилити сайта

Вы можете создать идеальный сайт, но какой в этом толк, если пользователь не может найти нужный раздел? Рассказываем, как провести анализ юзабилити.

Онлайн-сервисы для проведения юзабилити-тестирований подойдут компаниям, которые из-за нехватки времени или денег не могут позволить себе услуги UX-лаборатории.

Доступные инструменты для того, чтобы проанализировать юзабилити сайта, есть под рукой у каждого интернет-маркетолога, ведь исследовать поведение пользователей можно с помощью инструментов, входящих в привычные Google Analytics и «Яндекс.Метрику».

«Вебвизор»

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

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

Карта кликов

Это инструмент, который показывает статистику по кликам на всем сайте, конкретной странице или в разделе. «Метрика» подсвечивает нажатия мышкой разными цветами в зависимости от интенсивности.

Данные выгружаются в нескольких вариантах.

«Тепловая карта», в которой теплые цвета (красный, оранжевый, желтый) означают частые клики, а холодные (синий, голубой, зеленый) — редкие.

«Монохромная карта» — карта одного цвета, где насыщенный оттенок означает частые клики.

«Клики по ссылкам и кнопкам» — в этом варианте вы увидите на карте только статистику по этим элементам.

«Карта прозрачности» — страница сайта выглядит так, словно ее затянуло туманом. Точки, в которых сосредоточены клики, проступают сквозь него.

«Карта элементов», на которой отражены все элементы сайта.

Карта скроллинга

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

Аналитика форм

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

Content Experiments

Это инструмент для анализа юзабилити от Google Analytics. С его помощью можно провести бесплатное А/В-тестирование и сравнить эффективность начального и отредактированного варианта страницы.

Кроме сервисов «Яндекса» и Google, есть и другие платные и бесплатные инструменты, с помощью которых можно анализировать поведение пользователя и проводить юзабилити-тесты.

UsabilityHub

Популярная онлайн-платформа для общения дизайнеров, разработчиков, аналитиков и тестировщиков. Эксперты по юзабилити проверяют работу друг друга и зарабатывают рейтинг. Есть бесплатный вариант и подписки за $79, $199 и $396.

Предлагается несколько вариантов тестов.

Five Second Test

Вы загружаете скрин страницы, пользователи UsabilityHub смотрят на нее пять секунд и дают оценку.

Click Test

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

Navigation Test

Тест для анализа навигации ресурса.

Preference Test

Вариант для сравнения. Вы загружаете несколько вариантов дизайна, а пользователи голосуют за понравившийся.

Usabilla

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

У Usabilla есть демо-версия, в которой10 участников проведут бесплатный анализ юзабилити двух ваших продуктов. Фиксированного прайса на платную подписку нет, администраторы рассматривают заявку и определяют цену индивидуально.

Feng-GUI

Приложение, в основе которого лежит алгоритм, имитирующий взгляд пользователя в первые пять секунд. Чтобы проанализировать страницу, нужно загрузить скриншот. За $25 в месяц можно сделать25 тестов, еще есть вариант за $50 (50 скринов на3 месяца) и 275 проверок в год за $250.

Ovo Solo

Приложение для работы с респондентами от юзабилити-лаборатории Ovo Studios. Сервис стоимостью $99 записывает видео со звуком в тот момент, когда юзер работает с вашим сайтом или приложением. Чтобы наблюдать за этим в режиме реального времени, на второй компьютер устанавливается бесплатная версия Ovo Solo.

Testograf

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

У Testograf есть бесплатная пробная версия. Если решите пользоваться им постоянно, можно выбрать из разных вариантов: проведение опроса в течение60 дней стоит5 тысяч рублей, а годовая лицензия — от25 до50 тысяч рублей.

Qualarro

Сервис для обратной связи с посетителями сайта. С его помощью можно задать пользователю любой вопрос с вариантами ответа или без.

Допустим, вы рассказываете про тур в экзотическую страну и боитесь, что упустили важные детали, которые могут повлиять на решение клиента. Разместите внизу страницы форму с вопросом: «Есть ли еще какая-то информация об этой поездке, которую вам важно узнать?» Возможно, кто-то спросит, можно ли отправиться в путешествие с маленьким ребенком, или задаст вопросы о местной кухне.

У Qualarro есть бесплатная двухнедельная версия. Месячная подписка — $99.

GTmetrix

Онлайн-платформа, которая анализирует скорость загрузки страниц и причины ее снижения. После диагностики сервис дает советы о том, как исправить ошибки и улучшить ваш ресурс.

Ссылки загружаются на главной странице GTmetrix. Бесплатно можно проверить три URL, расширенная версия обойдется в $15, $50 и $150 в месяц.

Заключение

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

На практическом 16-недельном курсе «UX-аналитик» вы подробней познакомитесь с юзабилити-тестированиями и другими способами исследования пользовательского опыта. Во время обучения вас научат выбирать респондентов, проводить очные интервью и удаленные опросы и анализировать данные.

Как провести анализ юзабилити сайта онлайн

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

Как провести анализ юзабилити сайта

Аудит включает комплексную проверку разных параметров. Это можно сделать самостоятельно либо при помощи специалиста. На что следует обратить внимание?

1. Удобство навигации

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

2. Адаптивность к разным устройствам

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

3. Полезность контента

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

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

4. Скорость загрузки страниц

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

5. Дизайнерское оформление

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

6. Аналитическую статистику

Обзор аналитики позволяет проследить поведение посетителей на разных страницах сайта. С помощью Яндекс Метрики и Google Analytics можно увидеть, сколько в среднем люди проводят времени на сайте и на каких участках страниц задерживаются дольше. Через вебвизор прослеживается поведение каждого посетителя, в результате чего можно сделать выводы о пользе разных блоков. Общая сводка разделяет аудиторию по демографическим, возрастным данным, источникам переходов.

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

7. Техническое состояние сайта

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

8. Семантическую составляющую

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

9. Анализ конверсии

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

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

10. Плюсы проведения анализа юзабилити

• преимущество перед конкурентами;
• продвижение в поисковой выдаче;
• постоянное развитие проекта, следование современным тенденциям;
• возможность выгодно отличиться от других сайтов;
• использование всевозможных инструментов продвижения;
• увеличение конверсии;
• возможность провести точный аудит в зависимости от типа сайта.

11. Способы проведения анализа юзабилити

1. С помощью инструментов аналитики: Яндекс Метрика, Google Analytics, Woopra, Piwik и другие.
2. Отзывы пользователей. Их можно изучить на своем сайте, на отзовиках или через специальные формы с опросниками.
3. Тестирование нескольких групп. Для этого нужно предоставить несколько разных версий сайта или страницы. Каждая фокус-группа проходит по определенному сценарию от первого посещения до совершения конверсии. Специалист наблюдает за каждой группой через инструменты аналитики и делает выводы, какая версия лучше.
4. Наблюдение за фокус-группой. В этом случае исследование проводится с одной группой, которая включает представителей целевой аудиторию. Им предлагается совершить определенные действия на сайте. После этого маркетолог определяет слабые места на сайте.

Бесплатные инструменты анализа юзабилити

Usabilla

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

Feng-GUI

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

UsabilityHub

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

Optimal Workshop

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

Bitmodern

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

Частые ошибки после проведения аудита

Примеры анализа юзабилити выявляют наиболее распространенные ошибки, которые встречаются на сайтах:

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

Запомнить

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

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

Как лучше проверить юзабилити сайта: методы и инструменты тестирования

Дата публикации: 2017-01-13

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

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

Юзабилити сайта (от англ. Usability) — это удобство в его использовании. Чем выше юзабилити, тем выше качество сайта, тем проще и быстрее посетитель может достичь свой цели — например, сделать заказ или найти какую-то информацию.

Основными проблемами, которые можно выявить при проверке юзабилити сайта, являются:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

сложная или непонятная структура;

отсутствие нормальной навигации;

неуместное использование рекламы;

неудачное расположение или дизайн элементов;

слишком медленная загрузка.

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

Что такое юзабилити-тестирование?

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

Как проходит процесс тестирования в «лабораторных условиях»?

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

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

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

Использование фокус-группы

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

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

Данный вид проверки юзабилити сайта онлайн позволит проанализировать продукт с позиции конечного пользователя и получить ответы на следующие вопросы:

отвечает ли структура и дизайн интерфейса целям бизнеса;

на какие элементы пользователь обращает больше всего внимания;

удобная ли навигация;

быстро ли пользователь может адаптироваться к интерфейсу и его функционалу;

нормально ли работает механизм обратной связи;

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

производит ли продукт правильное впечатление;

имеются ли различия в реальных и конверсионных пользовательских маршрутах.

Где взять эти самые фокус-группы? Для этого существует множество сервисов для тестирования юзабилити с помощью фокус-групп (askusers.ru, usabilla.com, sitepolice.ru и др.); можно также воспользоваться помощью специализированных компаний.

Минусом данного метода является его платность. Для получения нормальной выборки (не из 2-х человек) вам потребуется немалый бюджет. Кроме этого, привлекая к исследованию фокус-группы, вы, скорее всего, получите только перечень проблем, решение которых вам придется искать либо самостоятельно, либо с помощью специалистов.

Инструменты для оценки юзабилити

Как еще можно проверить юзабилити сайта онлайн? В интернете существует огромное количество различных инструментов, как платных, так и бесплатных. Приведу самые полезные, на мой взгляд:

Google Analytics Content Experiments. Это бесплатный и доступный всем инструмент, с помощью которого вы можете тестировать практически любые изменения на веб-сайте, чтобы понять, способствуют ли они снижению показателя отказов или увеличению конверсии.

Для подключения инструмента перейдите в Google Analytics и найдите вкладку «Поведение» — «Эксперименты». Чтобы настроить эксперимент, нужно произвести несколько действий:

задать название и цель эксперимента. Целью может быть посещение веб-страницы, покупка товара, присутствие пользователя определенное время. Цель можно создать свою или выбрать из предложенных Google Analytics;

выбрать процент распределения трафика. Это количество посетителей, которые будут видеть тот или иной целевой вариант;

задать минимальное время эксперимента. Обычно это недели две;

настроить порог достоверности. Чем он выше, тем точнее будет определен выигрышный вариант, однако, это увеличит время эксперимента.

К недостаткам использования данного инструмента можно отнести невозможность проверки сразу нескольких задач, отсутствие поливариантности тестирования и сегментации трафика.

Visual Website Optimizer. Он позволяет эффективно повысить конверсию, обладает простым онлайн-редактором для настройки множества вариантов своей посадочной страницы, создает уникальные связки таргетинга. К примеру, вы можете указать ему: если посетитель пришел к нам с Вконтакте и пользуется OS Windows, то, будь добр, покажи ему эту веб-страницу, а если он заходит с MacBook, то вот эту…Также Visual Website Optimizer может похвастаться удобной системой отчетности и еще кучей разных фишек.

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

Яндекс.Метрика. Позволяет проанализировать этапы заполнения формы и выяснить, какие из них вызвали наибольшие затруднения у посетителей, какие пользователи не стали заполнять тот или иной пункт и т. д.

Тепловые карты. К ним можно отнести «Карту кликов» Яндекс.Метрики, статистику веб-страниц Google Analytics, usabilitytools.com, feng-gui.com и т. д. Эти инструменты позволяет оценить суммарное поведение пользователей на сайте. С помощью тепловых карт вы сможете увидеть, куда кликает большинство людей, а куда — нет. В зависимости от результата вносятся соответствующие корректировки.

Чек-лист для проверки

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

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

Есть ли логотип на каждой странице? На нем должна присутствовать ссылка на главный ресурс.

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

Есть ли ссылки? В тексте должна быть внутренняя перелинковка, выделенная подчеркиванием.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!