37 принципов реализации сервисных страниц для интернет-магазина

Всем привет! На связи Максим Жуков из Kislorod, и мы продолжаем цикл статей о интерфейсе для проектов в сфере электронной коммерции.

Специализация на разработке и развитии e-commerce проектов позволяет нам наращивать экспертизу в узкой области и создавать полезный контент.

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

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

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

Сервисные страницы — страницы, посвященные компании, оплате, доставке, гарантиям и возврату товара, контактным данным. Часто владельцы интернет-магазинов не придают значение оформлению сервисных страниц, хотя они выполняют важные задачи:

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

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

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

Учтите, что сервисную информацию часто ищут еще до того, как начнут выбирать конкретный товар.

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

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

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

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

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

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

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

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

На lamoda.ru наглядно объяснили суть бесконтактной доставки с помощью фото:

На этом же сайте можно увидеть пример использования инфографики:

Страница «О компании» — одна из важнейших страниц сайта, ведь она знакомит новых посетителей с вами. И при условии правильной реализации работает на доверие. Если информации о компании много, ее можно структурировать, реализовав целый блок страниц о компании.

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

Расскажите об особенностях работы, с кем и как сотрудничаете. Покажите, что процесс отлажен, а товар сертифицирован.

Если у вас особый подход к каким-то процессам (например, упаковке) или есть бонусная программа, не стесняйтесь похвастаться.

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

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

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

Такие магазины «спасёт» особая эмоциональная связь, контакт с покупателем. Воздействовать на эмоции поможет сторителлинг. Расскажите историю, к которой пользователи захотят быть сопричастными, поделитесь созвучной философией и миссией, покажите, что ваш магазин — не однодневка с целью наживы, и люди захотят покупать именно у вас.

Вместе с основателями бренда Loom нам удалось сформулировать основную философию в двух текстовых блоках — об истории и миссии бренда.

В российском e-commerce сторителлинг используется редко, а если используется, то порой топорно. Несколько правил хорошего сторителлинга:

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

Для оперативной связи с поддержкой можно разместить контакты прямо на странице «О компании» или хотя бы дать ссылку на страницу «Контакты».

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

Одни пользователи предпочитают предоплату, другие — оплату при получении. Кому-то удобнее платить картой, а кому-то — наличкой. Некоторые выбирают электронные кошельки, а некоторые Apple Pay или Google Pay. Важно, чтобы каждый нашел удобный вариант, иначе при прочих равных ему проще будет заказать товар в другом месте.

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

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

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

По возможности заменяйте текст символикой способов оплаты — как на скриншоте выше.

Со страницы «Оплата» нужно также направить пользователя по выгодному нам сценарию. Лучше сразу к покупке товаров, как на скриншоте выше.

Исследования Baymard Institute свидетельствует о том, что 64% пользователей начинают думать о стоимости доставки еще до добавления товара в корзину. Это означает, что информация о доставке очень важна для них и напрямую влияет на решение о покупке. У каждого магазина свои условия — важно грамотно представить их на странице доставки. Это упрощает пользователю жизнь, повышает уровень доверия, снижает показатель отказов.

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

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

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

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

Сэкономьте время пользователя и предоставьте контакты служб доставки — именно те телефоны и адреса почты, по которым можно обращаться с вопросами о доставке. Можно подсказать пользователю порядок обращения — какие данные сообщать в письме или при звонке оператору (номер заказа или посылки, предполагаемую доставку, фамилию получателя).

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

Если доставка бесплатная, обязательно сообщайте об этом на странице доставки. Исследования Baymard Institute показали, что 32% интернет-магазинов сообщают о бесплатной доставке только в заголовке страницы и на баннерах. И 27% испытуемых пропустили информацию о бесплатной доставке несмотря на то, что детально изучали сайт. Также важно следить, чтобы при оформлении заказа доставка вдруг не оказывалась платной.

Если для бесплатной доставки пользователю нужно выполнить определенные условия, сообщите о них рядом с сообщением о бесплатной доставке, а не используйте маленькие звездочки и сноски. В исследованиях Baymard Institute большинство пользователей пропускали пояснительный текст. А когда узнавали, что для бесплатной доставки нужно выполнить какие-то условия, бросали корзину (55% пользователей).

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

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

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

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

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

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

Еще лучше дополнительно показать доступные пункты или магазины на карте.

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

При доставке могут оказываться дополнительные услуги:

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

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

Согласно исследованиям Baymard Institute:

Таким образом, политика возврата товара — важный аспект, и пользователи могут обращать внимание на него до покупки.

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

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

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

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

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

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

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

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

На сайте ozon.ru есть страница «Отмена и возврат заказа». Кажется, что на ней можно отменить заказ или инициировать возврат, а на самом деле это всего лишь инструкция (политика возврата), а заявку на возврат нужно делать в личном кабинете.

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

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

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

По данным Baymard Institute, 20% пользователей предпочитают возвращать товары в магазине, а не отправлять по почте. Возможность вернуть товар в магазине или точке выдачи дает вашему проекту огромное преимущество, потому что это удобно для покупателей:

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

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

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

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

Придумывать вопросы из головы — не очень хорошая идея. Узнайте, на какие вопросы ищут ответы покупатели — например, изучив обращения в службу поддержки или данные аналитики. Можно собрать фокус-группу и провести исследование опыта покупки на вашем сайте — в ходе исследования вы точно выявите вопросы, которые стоит отразить в разделе «Вопрос-ответ».

Постарайтесь сформулировать вопросы именно так, как их формулируют клиенты. Отвечая на вопросы, ориентируйтесь на tone of voice вашего бренда и целевую аудиторию. Язык, на котором разговаривают с молодыми мамами и серьезными бизнесменами должен быть разным. Но помните, что вас в любом случае читают люди — пишите просто, по-человечески.

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

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

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

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

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

На ozon.ru раздел «Вопрос-ответ» называется «Помощь» и выглядит так:

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

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

Чем больше контактных данных вы укажете, тем больше доверия вызовете у покупателя. По возможности укажите:

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

Вы можете призывать посетителей к желаемым действиям, например:

Главное, не использовать все призывы сразу, это сбивает с толку.

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

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

Задача страницы 404 — сообщить пользователю, что он ошибся, и что адреса, по которому он перешел, не существует. Но если посетитель увидит скупое и плохо оформленное сообщение об ошибке, он с высокой вероятностью уйдет из интернет-магазина.

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

Если хотите выделиться и запомниться, сделайте страницу 404 креативной, как например, на сайте koftyonyshi.ru:

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

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

В следующий раз обсудим реализацию личного кабинета в интернет-магазине. Чтобы не пропустить статью, подписывайтесь на этот блог или наш телеграм-канал. И не забудьте поставить лайк (+1), если понравился материал.