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

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

Большей частью это достигается за счет:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Порцион 2. Пошаговый анализ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Источник: www.seonews.ru