Состав юзабилити аудита сайта, часть 3 (разделы, карточки товара, корзина)

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

Категории товара

39. Количество товаров на одной странице каталога

Самый оптимальный вариант – 25-30 позиций, в зависимости от размера сниппета карточки. Необязательно строго придерживаться именно этого количества, тут важно другое – раздел не должен выглядеть слишком бедно, не должен выглядеть слишком громоздко, но в то же время должен показать покупателю, мол, «смотри, тут есть из чего выбрать!»

А вот теперь коротко расскажем про исключения, которые не просто допускаются, а даже приветствуются.

Исключение 1 – если на сайте используется «бесконечная» прокрутка раздела. Т.е. изначально на страницу подгружается, скажем, 18 позиций, посетитель листает вниз и по мере дальнейшего пролистывания подгружаются следующие товары – 19, 20, 30, … 150 и т.д. до тех пор, пока не кончится каталог.

Исключение 2 – последняя страница раздела.

Исключение 3 – право выбора количества отображаемых позиций на одной странице.

40. Последняя страница раздела

Здесь крайне важно, чтобы на последней странице не оставалось слишком мало товаров. Например, если в разделе располагается порядка 10 страниц с ограничением в 18 товаров, а на последней странице всего 2 товара, то правильнее показать их не на 10й странице, а на 9й, а последнюю страницу вообще убрать.

Такая мелочь позволит не испортить впечатление о том, что на сайте богатый ассортимент. 2 товара на 100500й странице – это всегда хуже, чем 20 товаров на 2й или 3й странице.

Однако, крайне мало интернет-магазинов, которые так делают.

41. Выбор количества товаров, отображаемых на одной странице каталога

Тут всё достаточно просто: одному пользователю и 10 товаров будет много, а другому и 50 будет мало. Поэтому крайне желательно добавить в каждый раздел выпадающий список, с помощью которого пользователь будет самостоятельно выбирать, сколько товарных позиций будет отображаться на странице раздела. Как правило, количество отображаемых позиций кратно 5 или 10, но тут ограничений нет, т.е. действуйте чисто на свое усмотрение.

Приветствуется вариант «просмотреть всё».

42. Плитка или список

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

43. Дублирование карточек

Нередко пользователи вводят в поиск по сайту одно, но по факту оказывается, что они имели в виду совсем другое. Например, пользователь может ввести «Wi-Fi роутер», а по факту иметь в виду 4G-модем с возможностью раздачи Wi-Fi. Соответственно, последнему место как в разделе 4G-модемов, так и в разделе Wi-Fi роутеров.

Но как это технически реализовать? Вариантов несколько.

Вариант 1 - физически страница одна, но доступна она по двум разным адресам. Это самый оптимальный вариант, т.к. он самый простой. Однако, стоит понимать, что его реализация возможна не на любом движке (вот это поворот!). Также не забывайте про то, что таким образом на сайте образуются дубли, которые необходимо склеить с помощью атрибута rel=”canonical”.

Вариант 2 – две разные страницы с одинаковым контентом. Такой вариант попадается крайне редко, но попадается. Основной плюс – в отличие от предыдущего, гораздо проще его реализовать. Однако, он имеет ряд минусов. Например, количество товара, которое числится за каждой из карточек должно автоматически корректироваться – если продано с одной, значит должно минусоваться и из другой. Во-вторых, их тоже нужно склеивать с помощью rel=”canonical”. В-третьих, отзывы на каждой из карточек тоже придется «подтягивать» друг от друга. В общем, данный вариант имеет гораздо больше минусов, чем плюсов, но тоже имеет право на существование.

44. Фильтры «в один клик»

В самом верху раздела, еще над карточками, рекомендуется делать кнопки с динамическими ссылками. Индексироваться данные страницы не будут (если иное не прописано в robots.txt), но зато помогут пользователю в 1 клик отсеять огромную долю товара, который его точно не интересует. Например, если человек хочет купить игровой ноутбук, то он в один клик может получить список ноутбуков с мощной игровой видеокартой, а остальные модели (а их, как правило, сотни) просто «исчезнут с глаз долой». По аналогии допускается делать такие фильтры по брендам, стране-изготовителю, либо даже по названию линейки продукции.

45.Пустые разделы

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

46. Указание количества позиций в разделе

Нельзя сказать, что это вот прям суперполезная для пользователя информация, однако, если товаров в разделах много, то «эх ничего себе!» (в хорошем смысле) обеспечен. Кстати, эта информация еще и предупреждает посетителя о том, что вот в этом разделе позиций мало, а потому пустота (если в разделе всего 3-5 карточек) уже так отталкивать не будет, поскольку к этому уже будет морально готов.

47. Актуальное количество товара на сайте

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

ВАЖНО!!!

Под «актуальной информацией» подразумевается не «много», «товар заканчивается», а конкретное его количество. «Много» допускается употреблять только:

тогда, когда реально проще написать «много», чем пересчитывать точное количество (например, когда в месяц уходит по 100-150 единиц, а на складе их около 500);
тогда, когда происходит регулярное пополнение, причем задолго до того, как запас будет «истощён»;
соблюдение двух предыдущих условий строго обязательно.

В остальных случаях необходимо указывать точное количество – 5, 10, 22, 48, 115 и т.д. Если пользователь увидит, что в наличии всего одна единица товара, то он:

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

48. Информация о товаре в пределах раздела

Понятно, конечно, что в пределах раздела никто и никогда не выводит ВСЮ информацию о товаре, иначе сниппеты будут настолько огромными, что их чтение будет, мягко говоря, затруднено. Тем не менее, в разделе обязательно должна отображаться информация:

фотография товара;
полное наименование;
краткое описание;
краткий список основных характеристик;
кнопка «Купить», «В корзину» и т.д.;
в особых случаях должен быть ярлык «Акция», «Распродажа», «Скидка», «Надо брать!» и т.д.

Некоторые идут еще дальше:

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

49. Применение фильтров

Ранее мы упоминали так называемые «быстрые» фильтры, но не стоит забывать и про «нормальные» фильтры, которые позволят убрать из списка еще больше товаров, которые пользователя точно не интересуют. При этом обязательно должна быть кнопка сброса фильтров, кнопка применения фильтров, а сами результаты должны подгружаться БЕЗ ПЕРЕЗАГРУЗКИ СТРАНИЦЫ, но сам УРЛ при этом должен меняться. Это необходимо для того, чтобы пользователь мог кинуть ссылку в чат другу, а последний перейдет по ней и увидит уже «очищенный от мусора» список товаров. Крайне полезно, если используется фильтр с большим количеством условий.

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

50. Сравнение товаров

Ну… Про то, что в интернет-магазине должна быть возможность сравнивать товары «лицом к лицу» - это и так очевидно. Важно другое:

должна быть кнопка «Добавить в сравнение», «Сравнить» и т.п., которая потом должна меняться на ссылку «Перейти в сравнение», причем вне зависимости от того, сколько товаров туда было добавлено;
кнопка «Добавить в сравнение» должна быть на видном месте;
должно быть назначено максимально возможное число товаров, которое можно одновременно добавить в сравнение (например, 6), поскольку превышение этого числа может негативно повлиять на удобство использования страницы сравнения.

51. Сортировка товаров (не путать с фильтрацией)

Крайне обязательно добавить в разделы возможность сортировки товаров по каким-либо признакам (даже если они уже отфильтрованы):

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

Карточки товара

52. Цена товара

И так понятно, что она должна быть, НАЛИЧИЕ цены сейчас недостаточно. И вот почему:

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

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

53. Вместо кнопки «Купить» – причина ее отсутствия

Нет, «Нет в наличии» - это далеко не всё. Если ожидается поступление товара, но нужно добавить ориентировочную дату поступления. Если товар снят с производства – так и пишите (либо ставьте редирект на страницу с аналогичным товаром). Если товар «под заказ» - так и пишите, и т.д.

И обязательно указывайте:

последнюю цену;
дату продажи последней единицы.

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

54. Фотографии

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

Если есть возможность продемонстрировать товар в деле (а она в 98% случаев есть) – ее нужно использовать. Да-да, здесь шикарное место для бородатой шутки про то, что

Если есть возможность добавить в карточку видео с распаковкой и обзором от магазина (а еще лучше – от покупателей магазина) – эту возможность крайне рекомендуется использовать.

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

55. Характеристики товара

Тут всё предельно просто: чем больше характеристик – тем лучше.

ВАЖНО!!!

Необходимо указывать РЕАЛЬНЫЕ характеристики, а не те, что заявил производитель, ибо производитель может ошибаться и заявлять то, чего на самом деле нет.

Характеристики товара могут быть опубликованы как в виде таблицы, так и в виде списка, главное – чтобы они БЫЛИ.

Оформлять характеристики необходимо по единому шаблону на весь сайт, причем это касается как стиля оформления, так и названия самих характеристик. Имейте в виду, что даже один и тот же производитель может одни и те же характеристики написать по-разному. У Вас в магазине такого быть не должно, чтобы не вызвать у пользователя затруднений при анализе товаров.

56. Стоимость доставки и способы оплаты

Крайне желательно указывать стоимость доставки прямо в карточке товара. Что-что? Расстояние? Вес? Габариты? А если пользователь возьмёт что-то еще? Нет, не аргумент. Во-первых, как показывает практика, пересылка по России имеет плюс-минус одну и ту же цену вне зависимости от расстояния. Например, посылка Почтой России первым классом из Волжского в Волгоград (а эти города в шаговой доступности друг от друга) на сегодня составляет 173 рубля, если общий вес посылки не превышает 100г. Эта же посылка из Калининграда во Владивосток (а это более 7000 км) обойдется в… те же 173 рубля!

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

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

Если же есть возможность указать комплектность товара, страну-изготовителя и сроки гарантии (а в 146% случаев такая возможность есть) – нужно это делать.

Также крайне желательно добавлять в карточки товаров информацию о способах оплаты. Достаточно просто добавить иконки платежных систем (например, карт Visa, MasterCard, Qiwi-кошелька, Яндекс.Денег и т.д.).

57. Реклама в карточке товара

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

58. Кнопка «Купить в 1 кик»

Как показывает практика, данная кнопка крайне востребована у пользователей мобильных версий. Ее суть простая – она вызывает всплывающее окно, в котором пользователь указывает номер телефона и свое имя (кстати, имя указывать необязательно). Далее при отправке этих данных на сервер:

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

Крайне приветствуется добавление этих кнопок еще и в раздел сайта – там ими тоже пользуются.

59. Изменение кнопки при совершении действия

Тут тоже всё просто. Допустим, пользователь добавил товар в корзину. Что далее? Правильно – кнопка «Купить» должна измениться на кнопку «Перейти в корзину». Это необходимо для того, чтобы:

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

Цвет кнопки при этом менять не требуется.

60. Обзоры и отзывы

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

61. Блоки «Сопутствующие товары» и «Аналогичные товары»

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

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

Корзина

62. Отвлекающие маневры

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

НИЧЕГО ЭТОГО НА САЙТЕ БЫТЬ НЕ ДОЛЖНО!!!

63. Блок с товарами, которые добавлены в корзину

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

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

В обязательном порядке должна быть указана общая сумма товаров + отдельной строкой должна быть прописана приблизительная стоимость доставки различными службами (даже если точная стоимость будет производиться на одном из следующих шагов).

Также должна быть кнопка «Очистить корзину» - на случай, если пользователь передумает и «пойдёт по второму кругу», такое иногда бывает (например, если пользователь пытается закупить комплектующие для самостоятельной сборки ПК.

64. Оформление заказа

Список добавленных в корзину товаров необходимо отображать на ЛЮБОМ этапе формирования заказа.

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

Если оформление заказа совершается в несколько этапов, то пользователь должен заранее знать, сколько всего этих этапов и на каком из них он сейчас находится. Каждый из этапов должен быть упрощён настолько, насколько это возможно, чтобы всё решалось в 1-2 клика.

65. Страница подтверждения заказа

Итак, заказ оформлен, а потому пользователь должен попасть на страницу, где должно быть:

благодарность за совершение заказа;
полный перечень товарных позиций и количество по каждой позиции;
отдельная строка по стоимости доставки;
общая стоимость заказа;
личная информация (ФИО, адрес доставки, телефон и т.д.);
номер заказа.

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

Также на электронную почту должно прийти письмо, в котором присутствует всё из вышеприведенного списка, а также смс с номером заказа и его полной стоимостью.

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

66. Процедура оплаты

А вот это самая «опасная» часть, если речь идёт о безналичной оплате, поскольку:

оплата должна производиться на отдельной вкладке браузера;
допускается только соединение по https-протоколу (чтобы у пользователя не «угнали», например, данные банковской карты;
способы оплаты должны меняться в зависимости от выбранных способов доставки и наоборот;
строго обязательно указывать размер комиссии за совершение платежа (если комиссии нет, то так и пишите – 0%);
по факту успешной оплаты пользователь должен получить соответствующее уведомление (при этом неважно, получил он уведомление от платежной системы, либо от магазина);
в случае ошибки должна быть указана возможная причина (например, неправильно указан номер карты, недостаточно средств и т.д.).

Итоги

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

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

аудит сайта, юзабилити, бесплатно