Россия+7 (495) 960-65-87

Опыт: юзабилити-аудит для коммерческого сайта

Россия+7 (495) 960-65-87
Шрифт:
0 9805

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

Обычно это достигается за счет:

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

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

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

Общую информацию я изобразил в виде схемы:

site_com.png

В качестве примера использования приведу часть юзабилити-аудита интернет-магазина https://tea-coffee.org.

Часть 1. Оцениваем начальные данные. Формируем цепочки

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

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

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

По данным сервиса similarweb.com видим, что доля органического трафика держится в районе 30%. Для примера возьму этот источник.

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

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

Итак, далее в анализе мы будем исходить из таких данных:

\\переход с органического поиска на главную страницу.

Это будет наиболее полной цепочкой до стандартной конверсии – покупки чая.

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

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

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

В списке я немного обобщил, поскольку полную версию можно видеть на схеме.

Итак, заполняем у себя в отчете первую строчку:

\\Источник: поисковые системы

\\Предполагаемая мотивация: купить какой-нибудь чай

\\Точка входа: главная страница

1) Цель – найти товар на сайте:

Результат аудита:

Часть 2. Пошаговый анализ

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

Сразу отметаем поле «поиск» на сайте, исходя из первоначальных данных.

Дальше смотрим на главную страницу:

audit-1.png

Проверяем первый пункт: «поиск товара через меню сайта».

Видим пункт меню «Чай». С поиском меню проблем не возникло. Далее пользователь с большой вероятностью выберет либо одну из основных категорий «черный\ ароматизированный \ травяной», либо просто кликнет на первый попавшийся. Цель – открыть наконец товары для просмотра.

Следом открывается страница:

audit-2.png

Первое, что сразу подмечаешь – незаполненная верхняя строчка. Спустя секунду приходится вчитываться в название этого блока – «Популярные товары», чтобы понять все ли это товары, представленные одним экземпляром, или что-то другое.

Проблема налицо. Неверное расположение блока «Популярные товары», совсем не к месту в данной цепочке.

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

Достигли ли цели? Частично, перешли в каталог, но вместо товаров увидели совсем не то, что хотели. Сами товары при этом скрыты от взора ниже. Лишнее действие – потраченное время пользователя.

Удобно ли взаимодействовать: нет – приходится тратить время на восприятие необычного состава страницы и листать вниз до списка товаров.

Других проблем не возникло, поэтому часть вопросов опускаем (но все равно проговариваем).

Следующее действие по схеме (желтая ветка) – действие, связанное с желанием изучить товар.

Листаем страницу вниз и начинаем изучать ассортимент:

audit-3.png

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

audit-4.png

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

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

В карточке представлена информация о цене, наличии и доставке.

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

Пытаемся кликать на элементы, и ни один из них не перекидывает нас в карточку товара.

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

Начинаем искать активные элементы. Первое, что обычно ищут – название товара под картинкой. По опыту, оно ведет в карточку товара. Кликаем. Открывается:

audit-5.png

Отлично, есть информация о чае, как заваривать, вкусовые качества и прочее. То, что мы искали.

Отвечаем на вопросы из фиолетовой ветки: сколько шагов понадобилось – 2 шага, один был мимо. Как использовать эту информацию?

Например, предложить клиенту поработать над дизайном превью товара в категории, чтобы однозначно объяснить покупателям, куда надо кликнуть для просмотра полной информации, и куда – для ее части. Пример на сайте wildberries.ru:

audit-6.png

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

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

Мне сразу бросается в глаза отсутствие привычных «хлебных крошек» в заголовке товара либо над ним. Приходится искать глазами строчку (они оказались в левой стороне и абсолютно не выразительны). Вывод – «хлебные крошки» не используются для навигации. Необходима доработка.

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

Заключение

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

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

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

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

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
    Askar Seitov
    1
    комментарий
    0
    читателей
    Полный профиль
    Askar Seitov - помогите! не могу понять почему по инструкции в вашей статье добавляю вычистяемые поля просто копирую ваш код, но датастудио выдает ошибку на этот код: Синтаксическая ошибка: Недопустимый входной символ. Убедитесь, что в формуле нет кавычек-лапок.. как это исправить? я все варианты кавычек уже попробовал
    Сайт на WordPress: за и против
    Мира Смурков
    1
    комментарий
    0
    читателей
    Полный профиль
    Мира Смурков - Людмила, я согласен с большинством комментаторов. Вы хоть один полноценный магазин сделали на этих движках? Woocommerce это система с супер возможностями. И к ней есть дополнительные модули, с функционалом, который вряд ли появиться на Битрикс. А самому это программировать - сотни тысяч рублей на разработку. А приведя в пример сложности с robots.txt и Sitemap вы ставите под вопрос вашу компетенцию в понимании Интернет-бизнеса и веб-разработки в целом. Во-первых это такие мелочи, а во-вторых это все делается на вордпресса за 2 минуты, и опять же с возможностями многократно превышающими Битрикс.
    #SEOnews14: мы празднуем – вы получаете подарки!
    Rizat Sundetov
    1
    комментарий
    0
    читателей
    Полный профиль
    Rizat Sundetov - 14
    Война с дубликатами. Как нужно и как не нужно канонизировать URL
    Дмитрий
    1
    комментарий
    0
    читателей
    Полный профиль
    Дмитрий - Здравствуйте, на сайте возможно несколькими путями дойти до почти одинаковой страницы, те отличаться будет только незначительная часть H1, а контент будет одинаковым, дело в применимости автозапчастей к разным автомобилям. Что из этого будет каноничной ссылкой и какие есть пути для решения подобных ситуаций? 1 - bpauto.ru/catalog/audi/audi-a6/a6-iv-c7-sedan-2011-2014/kuzov-naruzhnaya-chast/dveri-i-komplektuyushchie/dver-perednyaya-levaya/ 2 - bpauto.ru/catalog/audi/audi-a6/a6-iv-c7-rest-sedan-2014-n-v-/kuzov-naruzhnaya-chast/dveri-i-komplektuyushchie/dver-perednyaya-levaya/
    Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
    Марина Ибушева
    46
    комментариев
    0
    читателей
    Полный профиль
    Марина Ибушева - Здравствуйте! Все рекламные материалы на SEOnews помечаются. В данном случае мы решили перевести и опубликовать эту статью совершенно бесплатно, так как она показалась нам интересной и вызвала бурное обсуждение среди западных SEO-специалистов. Ссылки мы ставим в конце ко всем материалам, если у них есть первоисточник.
    Как выбрать подрядчика для продвижения сайта: 7 уровней воронки поиска
    aashutosh
    1
    комментарий
    0
    читателей
    Полный профиль
    aashutosh - data science training institute in noida- Webtrackker Technology (8802820025) providing Data Science Training in Noida. Get ✓ 40 Hours Learning training✓ 70 Hrs Projects ✓ 24 X 7 Support ✓ Job Assistance. WEBTRACKKER TECHNOLOGY (P) LTD. C - 67, sector- 63, Noida, India. E-47 Sector 3, Noida, India. +91 - 8802820025 0120-433-0760 +91 - 8810252423 012 - 04204716 EMAIL:info@webtrackker.com webtrackker.com/Best-Data-Science-Training-Institute-in-Noida.php
    Как построить качественный ссылочный профиль на основе конкурентов
    Ирина
    5
    комментариев
    0
    читателей
    Полный профиль
    Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
    Google назвал три главных SEO-фактора
    Павел Андрейчук
    44
    комментария
    0
    читателей
    Полный профиль
    Павел Андрейчук - Я бы не стал утверждать что это так. У меня есть ресурс где ссылок.. ну я не знаю, полтинник может быть, вручную проставленные года за 2 и позиции хорошие по могим запросам именно в гугле, в то время как в Яндексе позиции ниже. Хотя конечно с ссылками позиции были бы лучше, наверное, но владелец увы не выделяет бюджет на ссылки.
    Чек-лист для аудита рекламных кампаний в Яндекс.Директе и Google Ads
    Елена Бикташева
    1
    комментарий
    0
    читателей
    Полный профиль
    Елена Бикташева - Спасибо! Была бы еще возможность скачивания.
    6 причин, почему нет позиций и трафика
    Артур Латыпов
    0
    комментариев
    0
    читателей
    Полный профиль
    Артур Латыпов - Леонид, да 3 пункта повторяется, согласен. Но сильно актуальны и сейчас, смотрим на сайты, приходящие на SEO, которые ранее продвигались, практически на всех можно что из 6 пунктов найти, исправить и ситуация улучшиться оперативно.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    352
    Комментариев
    262
    Комментариев
    249
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    105
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    77
    Комментариев
    69
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55

    Отправьте отзыв!
    Отправьте отзыв!