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

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

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

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

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

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

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

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

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


В качестве примера использования приведу часть юзабилити-аудита интернет-магазина 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

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

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

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

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

Заключение

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

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

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

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

(Нет голосов)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Сколько ссылок помогут продвинуть молодой сайт
    Павел Андрейчук
    38
    комментариев
    0
    читателей
    Полный профиль
    Павел Андрейчук - Дело в том, что вряд ли в ваших платных "качественных" кейсах найдётся хоть пару % действительно новой и полезной информации которой бы не было на общедоступных источниках.
    Сайт на WordPress: за и против
    Мира Смурков
    1
    комментарий
    0
    читателей
    Полный профиль
    Мира Смурков - Людмила, я согласен с большинством комментаторов. Вы хоть один полноценный магазин сделали на этих движках? Woocommerce это система с супер возможностями. И к ней есть дополнительные модули, с функционалом, который вряд ли появиться на Битрикс. А самому это программировать - сотни тысяч рублей на разработку. А приведя в пример сложности с robots.txt и Sitemap вы ставите под вопрос вашу компетенцию в понимании Интернет-бизнеса и веб-разработки в целом. Во-первых это такие мелочи, а во-вторых это все делается на вордпресса за 2 минуты, и опять же с возможностями многократно превышающими Битрикс.
    Обзор популярных CMS: плюсы и минусы
    Андрей Литвиненко
    2
    комментария
    0
    читателей
    Полный профиль
    Андрей Литвиненко - + там где нужно прописать каноникал, там где нужно поставить мета тег ноиндекс (т.к. Гугл не всегда следует правилам robots.txt) ну и то что выше, к техническим сео возможнлстям можно еще отнести легкое и хотя бы полуавтоматическое добавление микроразметки по сайту, увы "из коробки" такого функционала нет ни в одной cms, все на допиливаниях
    Google обошел Яндекс по популярности в России в 2018 году: исследование SEO Auditor
    Рамблер
    1
    комментарий
    0
    читателей
    Полный профиль
    Рамблер - Вот вроде отечественный - это сказано верно.. «Я́ндекс» — российская транснациональная компания, зарегистрированная в Нидерландах. Так говорится в Википедии. И с хрена ли ОТЕЧЕСТВЕННЫЙ поисковик зарегистрирован в Европе? И где платится основная часть налогов? Ну-ууу, точно не в России. И если запахнет жаренным, то был Яндекс и нет Яндекса!
    8 методик в SEO, от которых давно пора отказаться
    Евгений Сметанин
    12
    комментариев
    0
    читателей
    Полный профиль
    Евгений Сметанин - Факторов вообще очень много, согласитесь, вы будете использовать максимальное их количество, особенно, если в ТОПе засели агрегаторы с сумасшедшими ПФ. В таких случаях, вхождение ключа в домен для маленького профильного сайта, сыграет свою положительную роль. Конечно же, если контент на страницах хорошего качества. У меня есть несколько успешных кейсов на эту тему. На сайте продают несколько видов товаров, а выстреливает в ТОП тот, название которого присутствует в доменном имени. Как корабль назовешь, так он и поплывет, верно?))
    Google Data Studio: делаем красивые отчеты по контекстной рекламе для клиентов
    Nik Nik
    1
    комментарий
    0
    читателей
    Полный профиль
    Nik Nik - Было интересно узнать в тонкостях такую немаловажную часть наших трудов, как отчёты в GDS! Я пока не так опытен, но статья была крайне полезной! Не нашёл шаблон - ещё не делились?
    Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager
    Roman Gorkunenko
    1
    комментарий
    0
    читателей
    Полный профиль
    Roman Gorkunenko - Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
    Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
    Дмитрий
    11
    комментариев
    0
    читателей
    Полный профиль
    Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - 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
    Как построить качественный ссылочный профиль на основе конкурентов
    Ирина
    2
    комментария
    0
    читателей
    Полный профиль
    Ирина - Давно сотрудничаю с megaindex.com и считаю данный сервис одним из лучших в сео сегменте рунета да и не только рунета. Пользуюсь их инструментами для аналитики своих работ и выявлению своих и чужих ошибок. Да и ссылочный профиль, как и говорится в данной статье сделать гораздо проще и правильней при помощи как раз мегаиндекса. Добавлю еще что инструмент для поиска конкурентов у мегаиндекса очень удобный и простой в применении.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    345
    Комментариев
    262
    Комментариев
    247
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    101
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55

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