В новом аудиоподкасте №198 Николай Шмичков рассказал про азы аудита юзабилити веб-сайтов на 2021 год.
Текстовая версия выступления:
«Всем привет.
Вы снова на канале Сеоквик.
Меня зовут Николай Шмичков.
Я сегодня начинаю цикл видео, посвящённых аудиту юзабилити.
Очень необычному аудиту, я этот ролик и делаю по просьбе большинства своих потенциальных и реальных клиентов.
Многие спрашивают, что входит в аудит юзабилити, существует ли для него некий чек-лист, как он делается, есть ли какие-то правила.
В общем, на что нужно обращать внимание, очень много таких вопросов.
Я даже эти вопросы все расписал на своей страничке, можете посмотреть какие-то вопросы зайти.
Я на них уже все ответил.
Но я всё же делаю видео, которое расскажет про аудит юзабилити от А до Я.
На что обращать внимание, какие вещи важны — это видео скорее является для начинающего web-мастера, здесь вы не увидите какие-то реальные решения, потому что реальных решений, универсальных не существует — для каждого проекта они свои.
И сейчас мы немножко коснемся азов юзабилити за 2020 год, поехали.
В первую очередь, что такое аудит юзабилити — это собственно анализ контента, что направлен на проверку качества и дизайна страниц, структуры сайта и проводится сравнительный анализ с конкурентами.
Это и написано у меня на сайте, вы можете это заметить.
Это тот самый комплекс мер, который выявляет будущее задачи по разработке вашего ресурса.
Очень важно, каждый аудит юзабилити уникален.
И я затрону первую ветку своей юзабилити карты, и мы будем сейчас по ней идти.
В первую очередь конечно же, я бы хотел, чтобы обратили внимание, на какие страницы вы планируете продвигать.
Самый простой способ выбрать страницу для продвижения — заходим в Ахрефс и смотрим топ самые популярные страницы или же например, если у вас есть свой счетчик метрики, можно зайти в отчёты и посмотреть на примере анализа сайта посещаемость вашего ресурса.
Например, посещаемость по конкретным страницам, можно посмотреть посещаемость в целом ресурса, но нас интересует конкретных страниц.
Выбирайте те самые популярные страницы, которые привлекли на себя больше всего просмотров, больше всего посетителей, где было наибольшее количество взаимодействия с вашим ресурсом.
Конечно же, их проще двигать, это правда.
Страницы, которые имеют наибольшую посещалку представляют наибольший интерес, но они какие-то те страницы, не представляющие потенциального интереса.
Может оказаться, что ваша страница не находится в верхнем списке, она находится в нижнем, тогда над ним нужно работать и работать по семантике, не только по юзабилити.
Выбирайте те страницы, которые в топе и пытайтесь усилить в них удержание, потому что раз они уже и так дают вам трафик, сделайте так, чтобы удержание было на этих страницах максимально активным, к ним наибольший приоритете.
В аудите юзабилити мы дорабатываем те страницы, где пользователь находится больше всего, а не там, где возможно их будет три-четыре человека всего за месяц.
Выбирайте те 20% страниц, на которые приходится 80% трафика.
Как только вы выбрали страницу, Вы можете изучать их через Гугл аналитику, непосредственно по посещаемости.
Вот, соответственно, на карте поведения можно посмотреть обзор и посмотреть самые популярные страницы вашего ресурса.
То есть это очень удобный простой анализ, который позволит выяснить самые популярные страницы на вашем сайте.
Затем, что нужно конечно же смотреть, это на показатель отказов.
Анализ посещаемости страниц, отчет Google analytics даст информацию о показателях отказа.
Также нужно обращать внимание на среднюю длительность просмотра страницы.
Если вы видите, что допустим, у другой страницы средняя длительность просмотра маленькая, обязательно ее нужно дорабатывать.
Если у вас высокий показатель отказов, значит на странице нет call-to-action элементов.
Вот яркий пример, вот по этому отчету мы видим на странице 92% отказов, тогда как у других гораздо меньше.
Скорее всего, у этой странички попросту нет никакой call-to-action формы и скорее всего, так оно и есть.
Мы сейчас зайдём на эту страничку, перейдём на страничку увидим её посещалку, и обратим внимание, что никакого call-to-action элемента нету.
Она просто статья, она не представляет ценности для маркетолога, потому что пользователь, просто прочитав статью, никуда не перейдёт.
Второй момент — это перелинковка.
Давайте мы изучим эту страницу при помощи наших утилит.
У нас есть утилита, которая говорит, какие у нас ссылочки на ресурсы находятся, и мы сейчас посмотрим, мы увидим какие ссылочки есть и более, чем уверен, что никаких сыночек в контенте внутренних практически нет.
Значит в странице нужно сделать перелинковку.
Это значит пользователю, который читает статью, фактически никуда не приходит, здесь внутренних ссылок нет, поэтому однозначно ещё нужно во всех новых статьях их делать и на это тоже нужно уделять внимание.
Едем дальше.
На что обращать внимание во втором случае по ходу аудита юзабилити — это конечно же время чтения.
Это тот показатель, который вот прочитай average time on page.
Я рекомендую изучать его, смотрите ваш средний показатель, сравнивайте с теми страницами, где показатель слишком маленький.
Возможно это те страницы, которые не нужно продвигать, это реально может оказаться, например, какая-то утилита, есть какие-то страницы, у которых изначально небольшое время.
Например, страница услуг — она является промежуточной, с которой пользователь переходит дальше.
Собственно, это и есть показатель оптимальный, а вот процент выходов это тот самый процент выходов сколько пользователей закрывает вашу страницу, вот на него я бы обращал внимание.
Надеюсь вы поняли, что странички нужно изучать, смотреть эти два ключевых показателя, даже три показателя: среднее время, показатель отказов и процент выходов.
Помните, показатель отказов и показатель выходов – это разные показатели.
Показатель отказов — это доля сеансов просмотра одной страницы, когда открывали страницу, но не взаимодействовали с ней.
Это значит, что у нас проблемы с тем самым отсутствием полезных ссылок.
Процент выхода сайта с этой страницы, то есть показатель отказов может быть хороший, а процент выхода высокий, значит пользователь просто её закрывает, значит на этой странице никакого другого контента нет.
Я бы рекомендовал анализировать уникальные просмотры страниц, уники для вас важнее, чем обычные просмотры.
Если же у вас на сайте есть call-to-action элементы, конечно же, неплохо было бы их оценивать.
Единственный момент — для этого нужно настраивать событие взаимодействия с этими call-to-action элементами, отследить анализ этих событий по страницам.
Я бы посмотрел анализ этих событий на отдельных страницах и изучал бы call-to-action элементы для этих страниц, поэтому обязательно досматривайте настройку событий по отдельным страницам — это очень важно.
Потому что сами события, например, у нас есть кнопки, которые настроены, где пользователи взаимодействуют, можно посмотреть сколько их всего событий, которые уникальные, сколько всего на странице и сопоставлять с показателями посещаемости — это тоже очень важно.
Это те самые лиды, например, у нас это события лиды.
Вы можете присвоить ценность всем этим событиям, которое оформляется на сайте и конечно же видеть полную картину.
Переходим к анализу так называемый тепловой карты кликов.
Я здесь уже открыл один из сайтов — это тепловая карта кликов одного из наших клиентов, для того, чтобы перейти можно просто зажать карточку кликов в вебмастере Яндекс метрики.
Это делается через раздел карты.
Существует также карта кликов в Google аналитике, эту карту кликов можно установить при помощи расширения Google analytics можно поставить page analytics Гугл Хрома расширение.
Просто нужно иметь доступ к gmail аккаунту этого пользователя, просто сможете нажав всего лишь на эту кнопочку видеть всю карту кликов на каждой странице.
Вы можете увидеть, как пользователи взаимодействовали с какими элементами.
То есть это довольно-таки полезно, сколько пользователей переходило в какие разделы.
Здесь же вы можете менять сегменты, можете отследить только платный трафик, сравнить вот убрать и остаётся только контекстный трафик и сравнить как контекстный трафик взаимодействует непосредственно с вашим сайтом, очень полезно.
Позволяет сразу работать с нужными сегментами, которые как они взаимодействуют с вашим контентом, поэтому однозначно тепловая карта кликов в первую очередь должна быть.
На что бы я обратил внимание в тепловой карте кликов.
Обращайте внимание на первый экран — по итогам исследований, 80% времени просмотра web-страниц приходится на первый экран.
Потом всё, что мотивирует пользователя к целевому действию должно находиться на первом экране.
Аналогично, если бы мы смотрели мобильную версию, она выглядела точно так же.
Вот, например, наша мобильная версия — мы можем посмотреть реальную карту кликов у мобильной версии, как пользователи взаимодействовали непосредственно с контентом на мобильной странице.
Это тоже очень важно, куда пользователи кликают, какие элементы их интересуют.
Обратите внимание, на какие элементы пользователи обращают внимание, где он прокручивает пальцем все свои элементы.
Карта скроллинга — анализ как пользователь скролит ваш сайт.
Это такая красная зелёная полоса, которая говорит ну собственно двигается ваш сайт или нет.
Очень простой инструмент, он просто говорит с какого момента скролят.
Как вы видите, пользователей интересует первую очередь первый экран, 80% пользователь находится здесь.
Теперь переходим к клёвой части.
Особенность человеческого мозга воспринимать визуальную информацию слева направо, ну мы знаем, в других странах справа налево.
Мы живём в нашем сегменте, у нас воспринимает так и соответственно пользователи после загрузки начинают просмотр с левой части экрана.
Эксперты рекомендуется разместить в ней список выгод на левостороннюю часть, на эту часть приходится 69% времени.
Поэтому если мы захотим себя проверить, можно посмотреть карту кликов и посмотреть, как кликнут, какие элементы и мы увидим, что здесь практически взаимодействий нет, они сосредоточены в левой части.
Это сделано не просто так – F анализ люди сканируют.
Как вы видите контент в виде определенной буквы F.
Есть на эту тему у меня соответствующие изображения.
Вы можете сейчас его посмотреть.
Вот пример как выглядит буква F по карте скроллинга глазами.
Есть такие исследования айтрекинг, которые следят за глазами пользователей, куда они в данный момент смотрят, и они сопоставляют положение глаз пользователя на те зоны и куда зрение падает.
Это очень важно, потому что мы сейчас перейдем к следующим элементам — баннерной слепоте.
Кто смотрел, у меня уже есть такой ролик на эту тему по баннерной слепоте, и я на эту тему уже рассказывал.
Баннерная слепота — это особенность человеческого мозга игнорировать то, что он по умолчанию распознаёт как бессмысленный контент.
Баннерную слепоту можно обмануть, постоянно перемещая контент себя на ресурсе.
Пользователи привыкают к определенным видам рекламного и не целевого контента, который размещен в рекламных целях, либо в целях собирать заявки, игнорируют его.
Поэтому, для того чтобы избежать этого рекламодатели постоянно модифицируют свои сайты, чтобы рекламная слепота не мешала продвижению вашего бизнеса.
Если Вы посмотрите на паттерны поведения глаз, убедитесь, что глаза словно избегают всей рекламы и сосредотачиваются на контенте и даже когда идёт сторонний рекламный блок, глаза его попросту обходят.
Это можно увидеть и на этих изображениях, на этих сайтах.
То есть рекламная, баннерная слепота — это трюк защитный для человека, который игнорирует тот контент, который считает опционально бесполезным.
Мы условно называем это чтение по диагонали и чтение между строк, пользователи концентрируют внимание именно в вот такой системе и на него может не обратить внимание.
Есть известный трюк, называется трюк со взглядом — это визуальная подводка.
Трюк, который я рекомендую дизайнерам обязательно себе использовать.
Она позволяет использовать простейший трюк, когда внимание пользователя на ваш офер.
Офер – товар, услуга.
Этот трюк в принципе, известен тем, что мы всегда подглядываем.
Ну если кто-то зачем-то сосредоточенно смотрит в сторону, мы тоже пытаемся посмотреть на тот объект, который он изучает.
И даже трюк работает в рекламе.
Его действительно используют опытные рекламисты, поэтому я с вами конечно же решил поделиться, и вы можете увидеть в этом же исследовании айтреккинга, он очень сильно заметен – девушка, которая смотрит притягивает взгляд, девушка, которая смотрит на объект, притягивает взгляд и на объект, на который она в данный момент смотрит.
Простейший трюк, который позволяет привлечь внимание к товару, который вы планируете продвигать.
Следующий момент касается цветового контраста.
Цветовой контраст позволяет вам сделать тот же трюк — акценты на изображение, на определенные объекты.
Цветовые контрасты, которые вы делаете, позволяют пользователям сконцентрироваться на том, что нужно обратить внимание.
Я покажу на примере своего сайта, вы обратите внимание, что дизайн нашего сайта зелёно-белый.
Но у нас есть цвет, который бросается в глаза — это оранжевый.
До этого все кнопки были зелёные.
Ну просто другой оттенок зеленого.
И заявок было гораздо меньше.
Я долго выбирал тот цвет, который будет гармонировать с зелёным, красный, синий.
То есть я проводил разные вариации, то есть и выбрали оранжевый, именно этот оттенок оранжевого оказался максимально эффективен.
Он у нас остался, и он действительно привлекает внимание.
Мы обратили внимание, как только его поставили, что он действительно обращает на себя внимание и пользователи действительно видят, что это call-to-action элемент и начали использовать его для продвижения.
Следует также заметить, что мы нигде не используем в блоге стоковые фото.
Это не просто так, не потому что у нас нет денег на покупку стока, он стоит дёшево.
Но юмор том, что фотки со стоков уже всем приелись и срабатывает тоже Trigger — баннерная слепота.
У нас раньше был сайт весь на стоках.
Можем даже найти эти мертвые страницы, кто-то в каше может выкопать наша старый сайт и посмотреть какие у вас были страшные стоковые страницы и он до этого не работал, он просто даже отпугивал.
Теперь они стали более естественными, мы заполнили сайт только нашими фотографиями, сделали свой самобытный дизайн на все элементы.
Конечно же это сработало, то есть никаких других элементов мы не используем, только исключительно акцентируем внимание на реальном изображении, на реальную графику на нашем сайте.
Следующий момент — это мелкий шрифт.
Вы, наверное, обратили внимание, что шрифт на сайте может немножко отличаться.
И парадоксальность, что мелкий шрифт удостоился наибольшего внимания.
Короче, всё просто — крупный текст люди сканируют, а мелкий текст пользователя останавливают.
Мы зайдём вернёмся обратно на страничку услуг.
Обратите внимание, здесь есть много мелкого текста.
Мелкий текст действительно останавливает внимание, что же тут выделено мелким текстом и мы проверяли, люди это читают.
Вот эти все элементы — они всё это читают, поэтому, когда они кликают, они видят мелкий текст и обращают на него серьезное внимание.
Будете знать, когда будете продумывать контент на сайте, здесь нельзя делать слишком всё мелко, если текст слишком мелкий, пользователь просто на нём не сконцентрирует внимание.
На сегодняшний момент, я бы ещё хотел, остановиться в нашей главе — это анализ путей пользователя.
Есть в Google аналитике шикарный анализ, называется карта поведения.
Карта поведения позволяет проследить путь пользователя от одной странице к другой.
Вы можете выбрать те страницы, по которым проходят пользователи, изучить их показатель отказов и посмотреть непосредственно по проходящему трафику, какой процент пользователей закрывает сайт и какой процент пользователей переходит на остальные страницы.
Как вы видите, страничка уже прилично требует доработки.
Собственно, чем сейчас занимаемся и сейчас не будем серьезно рассматривать.
Мы видим, пример проходящий трафик по главной.
Прерывание главной 84%, то есть пользователь закрывает главную после просмотра, но вот этот оставшийся проходящий трафик нас интересует.
Потому что мы именно с ним будем взаимодействовать, по каким страницам путешествует пользователь и здесь очень важно оценивать те самые страницы, куда пользователи действительно проходят.
То есть можно делать сегментацию, смотреть реально там входящий трафик, исходящий трафик, смотреть сколько трафика прошло и какое время пребывания на этой группе происходит.
По поводу карт поведения, я думаю что здесь более-менее у меня понятно.
Здесь можно добавлять и другие шаги, смотреть как пользователи взаимодействуют дальше с вашим ресурсом, здесь для удобства можно отследить не только страницу входа, аи сам источник или канал и посмотреть, как пользователь с органики на какие страницы приходят в первую очередь.
То есть можно посмотреть проходящий трафик по органике.
Анализ очень плотный, серьезный и здесь точно также должны постранично вылавливать те самые страницы, по каким трафик страницам разбредается дальше.
Можете добавлять любые анализы, то есть любые фильтры, которые позволят найти нужные элементы.
Это довольно очень простой анализ, задавайте правильно вопросы, получайте правильные ответы.
Задавайте вопросы для следующего видео.
Я постараюсь остановиться на собственно наших элементах юзабилити, тех самых элементах, которые я рассказываю на своём сайте, я буду рассказывать, как делать классный первый экран, как вставить правильно функциональные элементы, как делать текстовую составляющую на странице, как делать дизайн отображения на разных устройствах, рекомендации по контакт форме, как правильно писать подвал сайта, лучшие примеры.
Я постараюсь рассказать это в следующих видео по юзабилити и поэтому я хотел бы от вас узнать побольше фидбэка, по этому видео.
Оставляйте обязательно вопросы.
Это видео выйдет, потом я буду делать новый выпуск.
Мне нужны ваши комменты, именно благодаря комментам, я сделаю следующее видео ответом и на ваши вопросы.
Обязательно жду ваши вопросы.
До новых встреч.»
