Чек-лист для проведения аудита юзабилити
Иногда эстетичный и современный сайт с продуманными конверсионными блоками и привлекательным коммерческим предложением ничего не продаёт. Пользователи заходят, смотрят и уходят. Попытки понять, что не так, при поверхностном взгляде не приносят результатов, ведь внешне всё хорошо. Но вот при детальном рассмотрении и начале тестирования функционалов становится ясно: пользователям неудобно и не очень понятно, как оформить заказ.
Обнаружить и исправить впоследствии такие ошибки поможет аудит юзабилити — одно из важнейших исследований эффективности ресурса.
Что такое юзабилити
Слово usability в переводе с английского — удобство использования. В целом в этом и смысл: в простоте и лёгкости применения функционалов, размещённых на сайте.
Чем проще пользователю оставить заявку, тем выше вероятность, что он это сделает. Экономия времени непременно вызовет одобрение человека. И в самом деле, зачем тратить часы на попытки разобраться в сложностях регистрации и оформления заказа, если можно уйти к конкуренту, который готов предложить оформить заявку за секунды и позвонить в течение 10 минут?
Неудобная навигация, проблемы вёрстки и даже мелкий шрифт на страницах сайта способны стать причиной того, что сотрудничать с компанией не захотят, низко оценив качество работы с целевой аудиторией.
Какие проблемы позволяет обнаружить аудит
Прежде всего проверка проблем с юзабилити показана, когда трафик уверенно растёт, но при этом конверсия остаётся на чрезвычайно низком уровне, а внятного объяснения этому не найдено. Выявить причины создавшегося положения и позволит полноценный детальный аудит.
Распространённые ошибки, которые удаётся отыскать в первую очередь:
- Проблемы с обнаружением кнопок и форм обратной связи. Сложно понять, какую выбрать, если их слишком много, если они сливаются с фоном или расположены так, что найти их — настоящий квест. При таких условиях увеличить конверсию не получится.
- Помехи действиям пользователя. При анализе поведения аудитории в сервисе метрики Вебвизор можно понять, на каком этапе посетители уходят. Пример — всплывающий баннер, который перекрывает форму, и свернуть его никак не удаётся. Пользователи отчаиваются и уходят с сайта.
- Форма в целом исправна, но её внешний вид отталкивает пользователя. «Если владельцу бизнеса не интересно, как выглядит сайт компании, вероятно, и за делами он следит аналогично», — мысль в целом справедливая, но в реальности отследить всё не представляется возможным, особенно если форма и впрямь рабочая, и статистика по ней собирается.
- Контент на странице размещён так, что просматривать его неудобно.
- Слишком сложная навигация, из-за которой невозможно найти то, зачем пришёл. Пользователь настолько устаёт искать, что покидает сайт.
Это лишь причины, с которыми пользователю сложно справиться самостоятельно. Не стоит списывать со счетов и сочетания проблем юзабилити и технического характера. Когда отправить уже подготовленные данные не представляется возможным. Проблемы с кнопкой, неверно настроенная валидация — это причины, мешающие совершению конверсионного действия.
На что ориентироваться при проведении анализа
Многие UX-специалисты, которые профессионально оценивают интерфейсы и проблемы юзабилити сайтов и приложений, рекомендуют начать анализ с элементарного осмотра и поиска проблем в ручном режиме. Но важно открыть перед этим несколько ресурсов конкурентов для сравнения.
Сравнение дизайна и функционала. Поиск отставания от лидеров из выдачи поможет выявить ошибки. Возможно, страницы выглядят менее привлекательными, а оттенок фона режет глаза, что и вынуждает пользователей уходить.
Технические аспекты. Ручное тестирование основных форм обратной связи и кнопок заказа звонка — отличный способ понять, есть ли трудности и ошибки при отправке данных. Если тесты неутешительны, нужно срочно исправлять допущенные недочёты.
Качество контента. Проверка здесь не должна завершиться на оценке текстового содержимого и его релевантности. Нужно проанализировать и юзабилити. Точно ли текст читаем? Есть ли сливающиеся с подложкой заголовки? Открываются ли изображения и можно ли их увеличить, если размер мал для полноценного просмотра? Своевременно ответить на эти вопросы точно не повредит.
Поведение пользователей. Проще и удобнее проанализировать этот фактор, используя основные сервисы аналитики, которые значительно помогут при проведении детального исследования.
Записи сеансов в Вебвизоре.
О проблемах можно говорить, оценив только продолжительность визитов, но полную картину позволит получить запись действий во время сеанса. Трудные моменты способны изменить взгляд на казавшиеся удобными блоки и кнопки.
Карты кликов и скроллинга Яндекс.Метрики.
По данным сервиса легко понять, насколько востребован конверсионный элемент.
Аналитика форм.
Полезные и наглядные сведения, позволяющие понять, какой процент посетителей использует форму и сколько людей решили не отправлять данные в итоге. Когда взаимодействующих много, а отправивших нет вовсе — нужна проверка технического состояния сайта: возможно, форма не работает.
Карта поведения в Google Analytics.
Оценить пользовательскую активность и глубину просмотра несложно. Наглядные данные позволят понять, как быстро пользователи уходят.
Отчёты по конверсиям из Google Analytics и Метрики.
С такими графиками легко проводить аудит и оценивать успешные и проблемные периоды, анализируя данные как по взаимодействию с элементом, так и по конечной конверсии.
При достаточном количестве собранных сведений картина проблем начнёт постепенно вырисовываться. Тогда можно глубже вникать в детали и выстраивать дополнительные гипотезы.
Универсальный чек-лист для проведения аудита
Чтобы при проведении аудита юзабилити не распыляться на все важные аспекты и не пытаться найти иголку в стоге сена, логичнее ориентироваться на уже сформировавшиеся принципы и последовательности, которые используют в работе UX-специалисты.
Наиболее простой и понятный чек-лист выглядит следующим образом:
Анализ статистики. Начать с выявления проблемы. Высок процент отказов, конверсия низка — нужен детальный анализ сайта и определение самых проблемных мест. На мысли должна наводить разница в проценте взаимодействий с одной формой и отказ работать с другой. Вполне вероятно, расположение настолько неудобно, что пользоваться кнопкой или формой проблематично или даже нереально . Ещё пример — резкое падение статистики, которое при рассмотрении отказывается невозможностью преодолеть капчу.
Оценка пользователей. Чтобы провести аудит, стоит заручиться помощью специальных сервисов, которые готовы проанализировать юзабилити с привлечением независимых тестировщиков и асессоров. Но кто запретит предложить пользователям взаимодействие? За скидку или бонусы можно попросить людей оценить качество, описать неудобство функционала, указать на ошибки. Это всегда эффективно, потому что со стороны и впрямь бывает виднее.
Видимость. Необходимо оценить общее состояние, доступность ресурса: на всех ли устройствах он отображается корректно. Юзабилити на мобильной версии — это крайне важный аспект для ранжирования и конверсии со смартфонов.
Демонстрация безопасности. Здесь все очень просто: SSL-сертификат необходим, это должно быть видно и понятно.
Соответствие тенденциям ниши. Нужен ожидаемый дизайн сайта. Это вовсе не значит, что ресурсы одной тематики должны выглядеть одинаково, но будет странно, если услуги проектирования или строительства представлены на страницах с розовым фоном, а коммерческие блоки украшены цветочками. Пример утрирован, но проблема всё же существует.
Возможность выбора. Пользователю должно быть легко знакомиться с контентом и самостоятельно определять, что требуется в данный момент. Если же постоянно на просматривающего вываливаются баннеры, таблицы, напоминания, которые сложно или невозможно закрыть, а действие никак не отменить, — у конкурентов возрастают шансы на успех.
Предсказуемость. Желательно, чтобы конверсионные элементы и их оформление были похожи и не требовали вдумчивого заполнения значительного количества полей. Это отпугивает большинство пользователей. Чем быстрее и проще связаться с менеджерами, тем лучше. Особенно значим этот фактор для интернет-магазинов, поэтому в них наличие кнопки «Купить в 1 клик» или «Оформить в 1 клик» максимально важно.
Соответствие запросам ЦА. Если речь идёт не об узкоспециализированном ресурсе, то не должно быть сложной терминологии и определений, которые не ясны большинству пользователей. Контент должен быть понятным и легко восприниматься.
Уровень стандартизации. Важна общая стилистика всех элементов, ничто не должно выбиваться из общего дизайна. Кнопки, формы, меню и прочее должны гармонично сочетаться и по цвету, и по вариантам оформления. Выбивающиеся из стилистики фрагменты выглядят странно и плохо воспринимаются пользователями.
Эффективность использования. Посетителю сайта должно быть просто решить проблему, найти нужный контент, заказать звонок или консультацию. Чем быстрее, проще и понятнее это происходит, тем больше шансов, что лояльность вырастет и человек вернется, а может быть, и порекомендует сайт друзьям и знакомым. Потому что разбираться в тонкостях просто не придётся.
Доступность важного. Существенная для принятия решения о заказе информация должна быть максимально доступна. Как пример, страницы о доставке и оплате, гарантии — они чрезвычайно важны, когда определиться ещё не получилось, но хочется понять, как будут выстроены процессы взаимодействия. Поэтому логично добавлять ссылки на важное в карточках и шапке сайта.
Минимум шагов. Необходимо периодически в ручном режиме проверять удобство и длину цепочки действий от перехода на сайт до оформления заказа. Если в процессе обнаружится неудобный и лишний шаг — исключить его. Пример — заполнение профиля в личном кабинете или формы на скидку. Это способно затянуть процесс и заставить остановиться на одном из этапов совершения заказа.
Оценка элементов дизайна. Необходимо понять и проверить на различных устройствах расположение элементов в хедере, футере, на страницах. Выяснить, нет ли проблем со слишком близким размещением, не мешают ли взаимодействию с кнопками и блоками баннеры и другие элементы.
Контрастность и структурированность. На страницах должно быть очевидно, где заканчивается один элемент и начинается другой, чтобы не вводить в заблуждение пользователя. Непонимание, что происходит или должно произойти после взаимодействия с элементом, приводит к отказу от действий.
Контент. Важен не только смысл, но и польза, оформление, которое привлечёт взгляд и подарит эстетическое удовольствие. Достаточное количество изображений. Рекомендуемое соотношение — 1 картинка на 1500–2000 символов текста.
Изображения. Используемые на сайте фотографии и картинки должны быть высокого качества, но сжаты, потому что рост веса страницы приведёт к снижению скорости загрузки. Увеличение фото по клику должно происходить в модальном окне без перехода на отдельную новую страницу.
Таблицы. С ними, как правило, возникает много проблем на мобильной версии. Прокрутки и сложности с просмотром ячеек, особенно если столбцов много. Бесконечный скроллинг, ползунки и прочие инструменты пролистывания — настоящая проблема для удобства просмотра. Поэтому при добавлении таблиц стоит быть максимально осторожными, чтобы не усложнить жизнь пользователям.
Навигация. Без неё на сайте посетитель заблудится и, не сумев найти ответы, уйдёт. Поэтому хлебные крошки, блоки со ссылками на похожие материалы или товары интернет-магазина стоит добавить, если при анализе таких элементов обнаружить не удалось.
Удобство и логичность меню. Из верхнего меню пользователю должны быть открыты пути к основным разделам и популярным категориям или услугам. Уже после первого взаимодействия должно появиться понимание, куда двигаться дальше. Это основы юзабилити — быстро и просто перемещаться по каталогу и иметь возможность оформить заказ. Если трудности присутствуют, нужно устранять как можно скорее. Детально стоит рассмотреть удобство выпадающих списков элементов меню. Таких не должно быть много, в противном случае стоит обратить внимание на комбинированные варианты реализации с выводом части элементов и переносом в облака тегов.
Главная. Основная задача главной страницы — дать информацию о компании и её преимуществах. На ней должны быть самые востребованные формы и самые яркие запоминающиеся элементы. Всё лишнее, что может быть перенесено в другие разделы, лучше отправить именно туда. Ничто не должно отвлекать внимания от сути. Только представление деятельности, конкурентные преимущества и функционал фидбэка : заказ консультации, обратного звонка и т. д.
Разделы и категории товаров и услуг. Все страницы должны иметь чёткую структуру с удобством перехода к теговым, а также к подкатегориям и фильтрам. Чем проще и быстрее пользователю будет решить проблему, тем выше шансы на рост конверсии. Важно, чтобы все ссылки и варианты выбора были понятны и просты в использовании.
Коммерческие страницы. Как для товаров, так и для страниц услуг особое значение имеют чёткие описания, фотографии (на которых продемонстрирован результат оказания услуги или товар с разных ракурсов, где можно хорошо рассмотреть результат/продукт ) и цены. Пользователь должен получить максимум важной информации для быстрого принятия решения о заказе. На втором месте по важности могут быть конкурентные преимущества: условия доставки, возможность получения гарантий и быстрого обмена, возврата товара, который не удовлетворил клиента.
Регистрация и авторизация. Возможности авторизации или регистрации в личном кабинете пользователя не должны быть утомительными или слишком сложными. Идеально реализовать не более 2–4 полей для заполнения, а также следует предусмотреть возможность войти с помощью почтового аккаунта или социальных сетей.
Валидация данных. Этот пункт идёт в продолжение предыдущего. При вводе данных необходима автоматическая валидация. Например, в поле с именем должен быть разрешён только ввод букв, в поле с номером — только цифр. Причём скобки и дефисы должны расставляться автоматически для удобства пользователя.
Модальные окна. Кроме того, что они не должны мешать просмотру контента и легко закрываться, важна логичность и понятность их структуры . Когда окно вызвано или всплыло автоматически, должно быть ясно, что оно поверх контента (например, за счёт затемнения основного фона или размытия), очевиден вариант закрытия (обычно это классический крестик), клик по фону, чтобы убрать. Всё должно быть максимально просто.
Кликабельность. Элементы, предполагающие взаимодействие, должны быть кликабельными и доступными для него. Проверять работоспособность следует регулярно, а не только в рамках анализа сайта.
Интерактивные элементы должны выделяться или подсвечиваться при наведении курсора. Это даёт понимание, что есть возможность проведения действия.
Такая опция важна для номеров телефонов, электронной почты, указания на мессенджеры.
Онлайн-консультант. Функционал должен быть органично расположен и не перекрывать контент. Перемещающееся или привлекающее к себе излишне много внимание окно может мешать и вызывать раздражение.
Кнопки. Они непременно должны быть не просто понятными и контрастными, но и показывать обозначение того, что должно произойти по клику: отправка формы, её вызов, заказ обратного звонка или появление модального окна.
Качество служебных страниц. Деталь не менее важная — качество подачи информации о компании, контактных данных, возможностях доставки, упаковки и гарантий. Чёткие и структурированные сведения, цены, вехи развития компании, достижения, награды, сертификаты — это то, что может укрепить пользователя в мысли о доверии и в желании совершить заказ. Чем проще и понятнее, тем лучше.
Варианты фидбэка. Не только формы обратной связи, но и контактные номера сотрудников могут быть актуальными для пользователей. Это вызывает доверие, формирует дополнительное лояльное отношение к компании. Причём размещение такого рода информации может быть как в разделе контактов, так и на странице команды, представленных сотрудников по подразделениям или отдельных менеджеров и юристов.
Поиск по сайту. Иногда быстро найти нужную информацию не получается, особенно если речь об информационных страницах. Здесь очень кстати будет функция поиска: так пользователи смогут быстро переходить к актуальным для них разделам и к страницам, нужным для решения проблемы . С поиском товаров это тоже хорошо работает.
Теги и метатеги. Базовая оптимизация — это максимально важный момент. Пользователям, переходящим из поисковой выдачи, теги могут служить ориентиром для понимания того, что можно найти на странице и решает ли это проблему.
Корзина. Функционал оформления заказа или покупки товара должен быть максимально простым и понятным. Выбранная позиция должна отображаться с количеством и стоимостью, также лишней не будет информация о сроках доставки, весе и вариантах упаковки.
Функционал расчёта стоимости и оплаты. Конечная цена товара или услуг имеет часто решающее значение для пользователей при принятии решения о заказе. Если калькулятор, функционал суммирования в корзине работают некорректно, это может существенно отразиться на конверсии. Как и непосредственный вариант оплаты или предоплаты на сайте. Он должен быть простым и понятным, чтобы не вызывать роста отказов ни на одном из этапов проведения операции.
Наличие пагинации. Возможность дробления листингов на отдельные страницы с настраиваемым количеством элементов — важное решение. Оно помогает сокращать время загрузки, что очень существенно на мобильных устройствах, а также позволяет влиять на поведенческие метрики, так как пользователи могут открывать разные страницы, совершая переходы внутри сайта.
Адаптивность. Корректность отображения контента и скорость загрузки на всех видах устройств важны при оценке сайта, и актуальность исследования юзабилити возрастает в разы, если значительная доля трафика приходится на мобильные гаджеты . Обратить внимание стоит на таблицы и прайсы (удобны ли для просмотра, не содержат ли лишних прокруток), на слайдеры и контент, выходящий за границы активного экрана.
Наличие уникального favicon. Вкладка в браузере должна быть узнаваемой, тогда её проще открыть и легче понять, что нужная информация именно здесь, если вдруг пришлось отвлечься.
Типографика
Удобство восприятия информации также важно, нужно уделить внимание нескольким параметрам.
- Шрифт. Он непременно должен быть разборчивым, хорошо читаемым, понятным. Не менее важный момент: шрифты в разных элементах дизайна стилистически должны перекликаться, в противном случае эффект будет не самым лучшим.
- Удобство. Текст должен быть расположен комфортно для читателя, с достаточными интервалами в заголовках, текстовых блоках. Важно, чтобы строки не сливались и ничто не мешало восприятию. Особенно это касается сливания текста с подложкой. Он непременно должен быть контрастным.
Чтобы сформировать подробный отчёт, на основе которого можно составить рекомендации по доработке сайта с целью улучшения, достаточно представленных пунктов чек-листа . Они охватывают основные ниши и слабые места, способные повлиять на конверсию и удобство использования базовых функционалов.
- Длина строк и ширина текстовых блоков. Ещё один пункт в вопросе удобства. Это помогает восприятию и упрощает взаимодействие с другими элементами на странице.
- Нумерованные и маркированные списки. Они должны быть стилизованы и хорошо сочетаться с дизайном, давать понимание того, что это отдельные пункты, несущие значимую информацию.
Важное для интернет-магазинов
Стоит понимать, что для интернет-магазинов есть ещё несколько деталей, на которые не будет лишним обратить внимание. Безусловно, всё перечисленное выше тоже нужно смотреть, это общий набор, актуальный для разных типов сайтов, но есть моменты, на которые стоит обратить внимание в первую очередь.
- Категоризация товаров. Нужно присмотреться к логичности и распределению товаров по категориям и к тому, как реализован переход к ним. Он должен быть интуитивно понятным, несложным и логичным.
- Фильтры. Они должны быть простыми и удовлетворять запросы пользователей. Основные характеристики товаров должны выводиться для фильтрации.
- Сортировка. Товары в категориях должны легко сортироваться по основным характеристикам:
цена;
популярность;
рейтинг;
алфавит.
Если есть вариант скидок и иные важные моменты — лучше настроить их и сделать максимально очевидными .
- Фотографии. Покупать вслепую не любит никто, нужно понимать, что заказываешь и как товар будет выглядеть в реальности. Поэтому фотографии должны быть чёткими, понятными, демонстрировать все важные элементы, иметь схожую стилистику, общий фон и размеры.
- Функционал быстрого просмотра информации о товаре. Помимо покупки в 1 клик не лишним будет функционал быстрого просмотра описания товара по клику, не переходя в карточку из листинга.
Если позаботитесь об удобстве каталога, получится успешно влиять на конверсию.
Важное для информационных сайтов
Для информационных сайтов также важны некоторые особенности юзабилити.
- Тегирование. Наличие тегов в информационных материалах значительно упрощает поиск по темам.
- Содержание. Блок с краткой сутью материала позволяет не только понимать структуру статьи, но и с помощью якорных ссылок быстро переходить к интересующему разделу.
- Функционал шаринга. Полезными материалами любят делиться, и это довольно важно для роста трафика. Чтобы не упускать возможностей, стоит воспользоваться ими и разместить в теле статьи такой функционал.
Варианты реализации блока возможны разные, но он должен быть понятным и удобным в использовании, чтобы материал быстро репостился в любую из выбранных социальных сетей.
Вся соль
Имея чёткое представление, куда стоит заглянуть, чтобы найти ошибку и решить появившиеся проблемы с конверсией, работать проще. Самостоятельно провести полноценный аудит юзабилити не слишком сложно. Возможно, понять все показатели сервисов статистики удастся не сразу, но в этом могут помочь опытные специалисты, готовые быстро разрешить проблемные вопросы.
Чтобы определить причины высокого процента отказов, малого количества переходов, ухода из конверсионных форм и другие показатели, следует воспользоваться:
данными из сервисов статистики;
мнением людей, готовых ответить на вопросы о недостатках сайта и функционалов;
ручной проверкой форм и кнопок;
поверхностным анализом конкурентов из топ-10 сайтов в поисковой выдаче.
А чтобы определить причины появления ошибок и сложностей, как раз и пригодится подготовленный нами чек-лист, вобравший в себя основные факторы проверки юзабилити.