Close
Telegram
WhatsApp
VK
Messenger
Mail
Phone

30 ОШИБОК ПРИ СОЗДАНИИ CJM

И КАК ИХ ИЗБЕЖАТЬ
Привет,
Это первая статья из цикла материалов о клиентском пути в E-commerce, в рамках которого мы пройдемся по всем стадиям взаимодействия клиента и интернет-магазина.

Если вы знакомились с предыдущими материалами на hardclient.com, вы, вероятно, заметили, что они часто получаются объемными и почти без H2O. Эта статья – не исключение: материал основан на анализе около 200 российских и зарубежных интернет-магазинов. Все элементы в рамках клиентского пути были разбиты на атомы вплоть до мельчайших деталей. Чек-лист покрывает как позитивные моменты в CX, так и грабли, на которые не стоит наступать.

Надеюсь, материал будет полезен как представителям индустрии, так и более широкой публике, в целом интересующейся клиентским опытом. И, как всегда, если вам есть что добавить, пожалуйста, пишите – сделаем этот материал лучше.
Партнер Experience.Partners
Автор сайта HardClient.com

ШАГИ НА ПУТИ КЛИЕНТА

Но для начала определим рамки и пропишем ту часть Customer Journey нашего пользователя, о которой пойдет речь в этой конкретной статье:
Ищу строку поиска
Навожу курсор на строку поиска
Нажимаю на строку поиска
Ввожу поисковый запрос
Переключаюсь между подсказками
Активирую поиск
Несмотря на то, что использование поисковой строки может занять у клиента всего несколько секунд, есть множество моментов, которые могут повлиять на удовлетворенность клиента и на которые важно обратить внимание владельцу.

ИЩУ СТРОКУ ПОИСКА

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

РАСПОЛОЖЕНИЕ

Вверху страницы

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

В рамках F-паттерна

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

В одном и том же месте на страницах

Consistency is king. Убедитесь, что на всех релевантных страницах поисковая строка находится в одном и том же месте и выглядит единообразно.

Рядом с каталогом

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

Отсутствие шума

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

В таббаре в мобильной версии

Убедитесь, что в мобильной версии сайта клиент может активировать поиск в 1 нажатие и ему при этом не придётся тянуться пальцем в верхнюю часть экрана. Хорошей практикой будет разместить кнопку поиска в нижней панели (tabbar).

Фиксация при прокрутке

Если клиент уже прокрутил страницу вниз и хочет перейти к поиску, не стоит утруждать его прокруткой в начало: закрепите шапку со строкой/кнопкой поиска при прокрутке так, чтобы она всегда была доступна в 1 клик.

Единый вид строки при прокрутке

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

Упрощение шапки при прокрутке

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

ОБЩИЙ ВНЕШНИЙ ВИД

Контрастность

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

Соответствие стилистике сайта

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

Строка поиска – единый элемент

Кто-то покупает свой новый Macbook в Re:store, а кто-то – где подешевле – и нарывается на замечательный пример того, как из одной строки поиска можно сделать аж три, из-за чего интерфейс чересчур перегружается.

Достаточно широкая

Если строка – основной элемент поиска, хорошей практикой будет, если она займет по ширине 1/2 или 2/3 от шапки. Это сделает ее более заметной.

Представлена в виде иконки

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

Не обрезает контент по ширине

Если строка поиска спроектирована так, что по ширине обрезает даже placeholder, это может сформировать у клиента впечатление о том, что делалось все в формате “тяп-ляп”, и снизить уровень его доверия.

Не прилипает к контенту по высоте

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

ИКОНКА

Присутствует в строке поиска

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

Интуитивна для восприятия

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

Минималистична

Несмотря на то, что иконка в строке поиска выполняет функцию привлечения внимания, она не должна “кричать”, содержать какие-либо мелкие элементы или доп.эффекты. Зачастую оказывается, что чем проще, тем лучше.

Загружена в хорошем качестве

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

Контрастна по отношению к строке

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

Единообразна относительно других иконок

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

PLACEHOLDER

Присутствует в строке поиска

Наличие этого ключевого элемента в строке позволяет облегчить ее восприятие в глазах пользователя.

Содержит призыв к действию

Placeholder может использоваться, как дополнительный CTA (call-to-action), побуждая клиента ввести целевой запрос. Например, “найди свою любимую футболку”.

Содержит вопрос

Вопрос в placeholder’е (например, “Что вы ищите?”) также может побудить клиента ответить на него, введя ключевой запрос.

Содержит пример запроса

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

Подсвечивает широту ассортимента

Особенно если широта ассортимента – это ваша отличительная особенность, расскажите об этом в placeholder’е поисковой строки – сформируйте позитивное восприятие клиента еще до того момента, как он начнет искать товар.

Содержит название магазина

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

Кастомизирован под клиента

Если клиент уже совершал покупки на сайте и вы знаете о его предпочтениях, почему бы в рамках placeholder’а поисковой строки не показать ему что-то более релевантное, на что он среагирует с большей вероятностью?

Легко читаемый шрифт

Убедитесь, что для placeholder’а выбран легко читаемый общепринятый шрифт комфортного размера (особенно на мобильных устройствах), а цвет текста достаточно контрастен по отношению к фону.

По цвету не совпадает с текстом запроса

Так как это placeholder, его текст должен визуально отличаться от текста поискового запроса. В противном случае placeholder будет восприниматься, как уже введенный текст, что нежелательно.

НАВОЖУ КУРСОР НА СТРОКУ ПОИСКА

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

Изменение вида строки

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

Визуальные эффекты – в рамках приличного

Однако при этом изменение внешнего вида строки должно быть лишь слегка заметным и не должно “кричать”. В противном случае это может вызвать лишь отторжение на стороне клиента.

Изменение вида курсора

При наведении на строку курсор из стандартного должен меняться на клик или редактирование текста. Вместе с изменением внешнего вида строки это побудит пользователя к ее активации.

АКТИВИРУЮ СТРОКУ ПОИСКА

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

СТРОКА ПОИСКА

Изменяет внешний вид

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

Расширяется

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

PLACEHOLDER

Не пропадает из строки

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

КУРСОР

Активируется

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

Располагается в начале строки

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

Контрастен

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

Выровнен относительно placeholder'а

Курсор не должен съезжать ниже или выше ни placeholder’а, ни вводимого текста.

КНОПКА ОЧИСТКИ ЗАПРОСА

Не видна при активации строки

Логично, что нет смысла отображать кнопку очистки запроса, если очищать еще нечего. В противном случае это просто засорит интерфейс.

СПИСОК ПОДСКАЗОК

Отображается при активации

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

Содержит релевантную информацию

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

Не содержит вторичный контент

И наоборот, если вы используете подсказку, чтобы “разогнать” продажи товаров, не пользующихся спросом, и называете это “Выбор покупателей” или “Это может быть интересно”, есть риск, что вы не “попадете в цель” и вызовете отторжение с самого начала.

Отображается моментально

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

Полностью вписывается в экран

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

Выделяется на фоне страницы

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

ВВОЖУ ПОИСКОВЫЙ ЗАПРОС

На этом шаге важны как оперативность обработки запроса и качество представленных результатов, так и само визуальное представление различных элементов строки поиска:

СТРОКА ПОИСКА

Моментально обновляется

Любая задержка в показе результатов может вызвать дискомфорт на стороне пользователя. Особенно если он планировал найти с помощью строки поиска несколько товаров, легкий дискомфорт может перерости в полноценное раздражение.

Содержит текст релевантной подсказки

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

Текст подсказки отличается от введенного

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

Текст подсказки не обрезается

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

PLACEHOLDER

Исчезает при вводе текста запроса

Placeholder должен моментально исчезать при вводе первого символа, если его текст не релевантен тексту запроса (например, если в тексте placeholder'а был указан пример другого запроса).

Уменьшается и продолжает отображаться

Однако если релевантность placeholder’а сохраняется (например, если placeholder – это вопрос или CTA), вы можете уменьшить его и отображать наряду с запросом. Таким образом, он будет играть свою роль чуть дольше.

КУРСОР

Продолжает отображаться

Курсор не должен пропадать при вводе поискового запроса. В противном случае это может вызвать ощущение, что система перестала отвечать на запрос пользователя.

Отображается в конце вводимого текста

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

ПОДДЕРЖИВАЕМЫЕ ЗАПРОСЫ

Ввод на другой раскладке

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

Ввод с опечатками

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

Сленг, аббревиатуры и синонимы

Отсутствие распознавания сокращений или синонимов также может привести к не найденным товарам / услугам и не совершенной покупке.

Поиск по спецификациям

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

Поиск по категориям

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

Поиск по решаемым проблемам и симптомам

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

Поиск по соответствию другим товарам

Когда клиент не знает бренда сопутствующего товара, ему нужно помочь. Например, если клиент ищет адаптеры для iPhone, система должна распознавать, какие товары типа “адаптер” связаны с iPhone, и давать релевантную подборку.

Поиск с учетом имеющихся данных

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

Поиск с учетом истории покупок

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

Непродуктовый поиск

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

СПИСОК ПОДСКАЗОК

Содержит релевантные подсказки

Базовый момент: подсказки должны соответствовать тому, что ищет пользователь.

Подсказки не содержат атрибуты истории поиска в браузере

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

Отображает результаты не с первого символа

Если клиент, например, ввел символ “А”, насколько точными будут подсказки? Вероятно, не очень. При этом появившиеся нерелевантные подсказки могут выступать в роли шума и лишь отвлекать клиента от поиска того, что ему нужно.

Обновляется мгновенно

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

Подсказки содержат ключевое слово

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

Набранный текст выделяется в тексте подсказок

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

Нет необходимости в прокрутке

Спроектируйте размер списка так, чтобы он помещался на экране без необходимости прокрутки и просмотр всех топ-Х релевантных опций не требовал от клиента дополнительных действий (особенно на мобильных устройствах).

Текст подсказок не обрезается

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

Подсказки не скомканы в рамках списка

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

Количество подсказок лимитировано

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

Появление списка анимировано

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

Список разбит на смысловые блоки

Часто помимо товаров в список помещают релевантные категории, бренды, рекламируемые товары или сопутствующий контент (например, руководства пользователя для вводимой модели телефона).

Блоки визуально разделены

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

Пустые блоки отсутствуют

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

ТОВАРЫ В РАМКАХ СПИСКА ПОДСКАЗОК

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

Изображения есть по всем товарам

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

Заглушки соответствуют стилистике сайта

Если по каким-то товарам у вас все же нет изображений, позаботьтесь о том, чтобы placeholder был выполнен в стилистике сайта, был визуально привлекателен, но при этом минималистичен и не оттягивал внимания от товаров с изображениями.

Изображения загружены в хорошем качестве

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

Изображения легко различимы

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

Изображения единообразны по дизайну

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

Изображения соответствуют реальности

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

Товар можно добавить в корзину

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

Можно добавить несколько единиц товара

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

Добавление 1 ед. товара и кнопка купить – на одном месте

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

Добавить можно не больше, чем есть на складе

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

Добавление в корзину без авторизации

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

TO BE CONTINUED...

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

Как я уже упомянул выше, успешно выполненный проект по построению CJM может перерасти в полноценную функцию управления клиентским опытом (Customer Experience Management) и открыть для вашей компании новые горизонты. В следующих статьях мы детально поговорим о том, что это за подразделение, какова его роль в организации, какие у него должны быть полномочия и каким образом стоит проводить трансформацию клиентского опыта.

Подписывайтесь на обновления, пишите, если возникли вопросы или есть что добавить – будем на связи!