.webp)
.webp)
Резюме: В случаях, когда чрезвычайные ситуации оказывают влияние на розничные операции, онлайн-магазины должны информировать пользователей о происходящих изменениях в процессе обслуживания, используя все каналы коммуникации.
Пандемия COVID-19 затронула почти все аспекты нашей жизни. Как частные лица, так и компании, вынуждены приспосабливаться к ограничениям, налагаемым на всех нас в связи с коронавирусом. Пандемия затронула все отрасли промышленности, но ее влияние на электронную коммерцию особенно сильно сказывается как на магазинах, так и на покупателях.
Потребители, соблюдающие режим самоизоляции, вынуждены покупать товары первой необходимости через Интернет для сокращения количества поездок в магазины. В результате, спрос на товары, которые можно купить онлайн, особенно на продукты питания и предметы домашнего обихода, значительно вырос, ритейлеры оказались к этому не готовы и были вынуждены быстро приспосабливаться, чтобы адаптировать цепочку поставок для удовлетворения возникшего спроса. Даже те компании, которые столкнулись с падением спроса во время пандемии, старались наилучшим образом исполнять заказы, которые они получали в условиях ограничений, налагаемых на их сотрудников и объекты.
Потребители столкнулись с рядом изменений в процессе покупок онлайн:
- Более длительные сроки доставки
- Дефицит товаров повышенного спроса
- Лимиты на покупку конкретных товаров, предназначенные для предотвращения закупок впрок.
Ритейлеры должны обновлять процесс покупок онлайн, чтобы отразить все эти изменения и эффективно доводить их до сведения покупателей. Хотя не существует идеального примера того, каким должен быть дизайн сайта онлайн-магазина при таком сценарии, мы можем использовать лучшие примеры для других сценариев, которые предполагают аналогичные изменения процессов (например, повышение спроса в праздники или во время крупных распродаж). Статья содержит руководство по созданию дизайна сайтов онлайн-магазинов, который позволит более эффективно информировать пользователей об изменениях в течение всего процесса покупки – от поиска товара до его доставки.
1. Сообщайте о возможной задержке доставки как можно раньше. Не ждите, когда пользователь откроет корзину или страницу оформления заказа, чтобы сообщить ему об этом.
Как можно раньше информируйте пользователей о любых ограничениях, таких как распроданные размеры или цвета, это может повлиять на поведение пользователей и вызвать у них желание купить товар как можно раньше. Этот принцип, безусловно, касается и задержки доставки, ведь довольно часто товар нужен пользователям к определенной дате.
Сделайте оповещения о задержке доставки заметными и легко доступными на соответствующих страницах по всему сайту, чтобы пользователи могли увидеть их заранее. Не заставляйте своих клиентов тратить время на поиск товаров, которые не будут доставлены в срок. Такой опыт разочаровывает, снижает доверие к бренду, и чаще всего приводит к потере клиентов.
На сайте Adidas.com не было оповещений о задержках доставки ни на главной странице (вверху), ни на странице товара (внизу).
На сайте Adidas.com информация о задержке доставки появлялась только на странице оформления заказа.
Один из распространенных дизайн-паттернов для коммуникации с посетителями сайта — это добавление баннера с необходимой информацией в верхней части страницы. Использование этого паттерна стало стандартной практикой для информирования пользователей о действующих скидках, акциях и других важных обновлениях на сайте. Такой подход хорошо работает до тех пор, пока баннер привлекает внимание.
На сайте Crabtree and Evelyn информация о задержках доставки была указана на баннере, который отображался на всех страницах сайта. Пользователи могли узнать о задержке доставки еще до того, как приступили к выбору товаров. При этом визуальное оформление баннера не делало сообщение заметным. Черный фон действительно имел большой контраст с белым текстом (что хорошо), но он настолько органично вписывался в визуальный стиль сайта, что некоторые пользователи могли его не заметить, так как он был больше похож на декоративный элемент.
Вверху: сайт Nordstrom.com не использовал баннер, но на каждой странице товара была размещена информация о задержках доставки под кнопкой "Добавить в корзину". Несмотря на то, что эта информация отображалась до оформления заказа, текст сообщения был мелким и незаметным. Внизу: мобильное приложение Nordstrom не выводило информацию о задержках доставки, и пользователи не знали о них до тех пор, пока не заходили в корзину.
2. Важные уведомления, связанные с COVID-19, должны визуально выделяться, чтобы люди могли легко их обнаружить.
Чтобы привлечь внимание пользователей, эти уведомления должны иметь визуальный вес и выглядеть как приоритетный элемент, выделяющийся на фоне других элементов страницы. Визуальный вес элементу можно придать с помощью различных техник визуального дизайна, изменяя значения таких параметров как яркость, контрастность, размер, расстояние и текстура.
В мобильной версии сайта Crabtree and Evelyn одно и то же сообщение о задержках доставки имело больший визуальный вес, чем на десктопе. Из-за меньшего размера экрана контрастный черный баннер выделялся на белом фоне страницы и был более заметен пользователям.
Сообщение Crabtree and Evelyn о задержках доставки было очень заметным, что позволяло привлечь к нему достаточно внимания.
На сайте Ulta.com не было информации о задержках доставки на главной странице или на любых других страницах, связанных с оформлением заказа. Ссылка на раздел COVID-19 FAQs (часто задаваемые вопросы) в навигационном меню приводила к странице, содержащей информацию о возможных задержках доставки заказов. Эту информацию было трудно найти. Она была размещена внизу длинного навигационного меню — не самое лучшее место для важных сообщений. Визуальное оформление ссылки на раздел не выделяло ее на фоне остальных пунктов. Также нелегко было найти страницу через поиск — запрос COVID в поисковой системе сайта не давал никаких результатов. Для поиска необходимо индексировать все элементы сайта, а не только товары.
На сайте Ulta.com было трудно найти информацию о задержках доставки (вверху). Еще труднее было найти ее в мобильной версии (внизу), так как ссылка на нужную станицу была скрыта в меню-гамбургере.
Контрастный баннер на сайте Lush.com отлично привлекает внимание. Расположение баннера — под навигационной панелью, не в самой верхней части страницы, а немного ниже – находится в области, куда пользователи часто отводят взгляд, чтобы дать глазам немного отдохнуть.
Bluestone Perennials: баннер с информацией об обновлениях на сайте в связи с пандемией COVID-19 достаточно крупный и включает заголовок, выделенный красным жирным шрифтом и иконкой с восклицательным знаком. Все эти элементы делают баннер очень заметным.
Printful.com: Несмотря на то, что баннер не имеет контрастного цветового фона, он все же привлекает взгляд благодаря использованию иконок и стандартного синего цвета для выделения ссылок, который обычно указывает на что-то интерактивное.
Who Gives A Crap, интернет-магазин туалетной бумаги: чтобы сообщить пользователям о том, что товарный запас исчерпан, сайт выводил модальное окно сразу при входе. Для того чтобы закрыть модальное окно, пользователи должны были обратить на него внимание и подтвердить сообщение. К счастью, им была предоставлена возможность подписаться на лист ожидания, чтобы получить уведомление о поступлении товара в продажу.
Во время чрезвычайных ситуаций все сайты онлайн-магазинов должны содержать хорошо заметную информацию о доставке, независимо от того, ожидается задержка сроков доставки или нет.
В настоящее время многие онлайн-магазины сообщают об изменениях в процессах, связанных с пандемией COVID-19, по этой причине отсутствие подобной информации на сайте кажется покупателям странным. В обычных обстоятельствах нет причин говорить, что все нормально. Но пользователи, которые делали покупки на других сайтах во время пандемии, будут предполагать, что произошли изменения, и будут искать соответствующую информацию. Вспомните закон, касающийся поведения пользователей в интернете (Jakob's Law of the Internet User Experience): люди проводят большую часть своего времени на других сайтах, поэтому их ожидания относительно вашего сайта складываются из опыта взаимодействия с другими сайтами.
Если на сайте нет актуальной информации, связанной с COVID-19, или ее не удается найти с помощью поиска по сайту, покупатели могут быть не уверены в том, получат ли они свой заказ. В худшем случае они могут подумать, что вы закрылись, так как сайт не обновляется в соответствии с происходящими изменениями. Неопределенность — это не то чувство, которое вы хотите вызвать у своей аудитории. Мы рекомендуем всем сайтам онлайн-магазинов выводить хотя бы небольшое сообщение, связанное с COVID-19, даже если оно будет содержать информацию о том, что все операции выполняются как обычно и задержек доставки не будет. Такого рода оповещения не только успокоят пользователей, но также сделают ваш сайт более актуальным и улучшат восприятие бренда.
С приближением дня матери я выбирала подарок для одной молодой мамы. На сайте Motherhood Maternity я долго искала любую информацию о задержках доставки в связи с пандемией COVID-19, чтобы исключить возможность получения подарка после праздника. На сайте не было никаких упоминаний о пандемии, по этой причине я не была уверена, придет ли мой заказ вовремя, или сайт просто давно не обновлялся.
Сайт PitViper использовал баннер с сообщением о том, что доставка осуществляется несмотря на COVID-19 (текст сообщения содержит нецензурную лексику, которая была удалена со скриншота).
4. При наличии задержек доставки товара или ограничений на его покупку, разместите информацию об этом на соответствующих страницах.
При введении лимитов на покупку товаров определенной категории для предотвращения закупок впрок или при наличии задержек доставки отдельных товаров, соответствующая информация должна отображаться на страницах категории или самого товара.
Дизайнеры сайта Office Depot Office Max проделали хорошую работу, указав потенциальные сроки задержки доставки конкретных категорий товаров. Они не только разместили общий баннер в верхней части всех страниц со ссылкой на обновление информации о доставке, но и учли, что во время пандемии чистящие средства являются товаром с повышенным спросом, и добавили еще более подробное сообщение на странице категории "Чистящие средства", предупреждавшее покупателей о нехватке товаров этой категории и более длинных сроках доставки. Еще одним положительным моментом в отношении того, как Office Depot Office Max использовал такие сообщения, было то, что баннер был легко заметен и четко выделялся на странице.
В верхней части страницы категории «Чистящие средства» сайта Office Depot Office Max был размещен желтый баннер, содержащий информацию о наличии и доставке товаров этой категории.
Для пользователей, которые не посещали страницу категории, этот же баннер был размещен на страницах самих товаров. Баннер не отображался на страницах категорий товаров, которые были доступны на складе и могли быть доставлены в срок.
Сайт Office Depot Office Max выводил баннер на страницах товаров, доставка которых осуществлялась с задержками.
Интернет-магазин туалетной бумаги Who Gives A Crap ввел лимит на количество и объем заказов своей продукции, чтобы предотвратить закупку впрок. Оранжевый баннер с этой информацией отображался на всех страницах сайта. При превышении лимита сообщение об ограничении заменяло кнопку "Добавить в корзину" на страницах товара.
5. Не полагайтесь только на баннеры на главной странице и на страницах категорий или товаров. Информация об изменении сроков доставки также должна быть указана при оформлении заказа.
Как мы узнали, баннеры, которые обычно размещаются в верхней части веб-страниц, часто остаются незамеченными пользователями. Использование контрастных и графических элементов дизайна для придания большего визуального веса делает их более заметными, но часть пользователей все же их пропускает. В большинстве случаев пользователи ориентированы на решение задач, поэтому их внимание часто переключается на соответствующие элементы страницы — меню навигации или панель поиска. По этой причине они могут игнорировать информационные баннеры. В других случаях баннеры, слишком сильно напоминающие рекламный контент, могут быть пропущены из-за эффекта баннерной слепоты.
Именно поэтому так важно размещать информацию о задержках доставки при переходе в корзину или оформлении заказа. Если пользователь пропустил сообщение на предыдущих этапах, он все же будет проинформирован о возможных изменениях.
Сайт Dollar General использовал баннер жёлтого цвета для сообщения об изменениях сроков доставки в связи с COVID-19. Однако из-за визуального оформления баннера пользователи воспринимали его как рекламный элемент, а не важное сообщение. Дизайн можно было бы улучшить, изменив компоновку текста и выделив его с помощью ключевых слов, таких как "обновление условий доставки в связи с COVID-19". Именно эта информация содержится в длинном сообщении с баннера.
Сайт Dollar General использовал баннер жёлтого цвета для сообщения об изменениях сроков доставки в связи с COVID-19. Однако из-за визуального оформления баннера пользователи воспринимали его как рекламный элемент, а не важное сообщение. Дизайн можно было бы улучшить, изменив компоновку текста и выделив его с помощью ключевых слов, таких как "обновление условий доставки в связи с COVID-19". Именно эта информация содержится в длинном сообщении с баннера.
Сайт Camelbak.com разместил баннер в самой верхней части главной страницы (вверху). Несмотря на то, что наличие баннера — это хорошо, пользователи не всегда начинают делать покупки с главной страницы. Тот, кто сразу попадет на страницы категории или продукта, пропустит это сообщение. Кроме того, при оформлении заказа (снизу) нет никаких упоминаний о возможных задержках доставки.
World Market проделал хорошую работу, включив информацию о задержках доставки в баннер, который отображался на всех страницах сайта. Кроме того, эта информация была указана при оформлении заказа и размещалась рядом с вариантами доставки, что делало ее более заметной для пользователей.
World Market продублировал сообщение с баннера, разместив его рядом с вариантами доставки при оформлении заказа. Однако сам по себе текст сообщения легко пропустить, так как он напечатан мелким шрифтом и расположен в нижней части страницы.
Сайт Target разместил информацию о возможной задержке доставки товара или его отсутствии рядом с соответствующими товарами в корзине. Текст сообщения был выделен красным цветом. Хотя этот индикатор был хорошо заметен благодаря его размещению, цвету и иконкам, его дизайн не идеален: во-первых, сообщение неоднозначное и слишком общее (отсутствие товара и задержка его доставки — это очень разные вещи, плюс есть противоречие между отображением ожидаемой даты доставки и возможным отсутствием товара); во-вторых, область, где размещено сообщение, обычно используется для рекламного контента.
В мобильной версии сайта Nike информация о возможных задержках доставки была указана на странице корзины. Сообщение было хорошо заметно пользователям благодаря контрастному фону и крупному заголовку.
6. Как можно раньше сообщайте пользователям о задержках доставки товаров, на которые они оформили подписку.
Сегодня многие ритейлеры предлагают доставку товаров по подписке. Поскольку пользователи могут оформить подписку и забыть о ней, онлайн-магазинам следует активно связываться с покупателями при первых признаках того, что товаров может не оказаться на складе или их доставка будет задержана. Эта информация должна быть известна пользователю задолго до ожидаемой даты доставки, чтобы у него было время исправить ситуацию. Если это возможно, порекомендуйте пользователям, как это лучше сделать. Возможно, вам понадобится новая автоматическая рассылка, чтобы оповещать пользователей в нужный момент — до того, как стало слишком поздно.
Chewy.com отправил дополнительное сообщение по электронной почте, чтобы проинформировать клиентов, оформивших подписку на товар, о возможных задержках доставки.