I am ready for a long road flight for work with a week- or months-long projects.
ТЕЛЕФОН СЛУЖБЫ ПОДДЕРЖКИ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
80
ГАЙДЛАЙНОВ
Сегодня мы снова убедимся в том, что даже простые элементы интерфейса – это целая вселенная, а опыт клиента зависит от множества деталей. На этот раз мы разберем небольшой, но важный элемент, который есть практически на всех сайтах – номер телефона службы поддержки. 80 гайдлайнов с примерами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. РАЗМЕЩЕНИЕ ЭЛЕМЕНТА
В шапке страницы
Разместите номер телефона службы поддержки в наиболее привычном месте – шапке страницы. Там, где его ожидает увидеть большинство клиентов.
Дублируется в футере
Хорошей практикой также будет повторно разместить номер телефона и в футере, чтобы клиенту не пришлось прокручивать в начало страницы, если он хочет связаться с вами.
Не только в футере
Если вы хотите снизить объем звонков в колл-центр, размещение номера только в футере поможет. Но жизнь клиента, которому нужна ваша помощь, может усложнить.
В меню сайта
Если меню содержит не только каталог продукции, в него можно интегрировать и блок с поддержкой, включая номер телефона.
На странице контактов
Если на вашем сайте есть страница с контактами, номер телефона поддержки должен быть его неотъемлемой частью.
Рядом с ключевыми запросами
Чтобы снизить нагрузку на колл-центр, функции ответа на частые запросы (например, проверка статуса заказа) можно разместить рядом с номером телефона.
Рядом с другими каналами связи
Способы связи лучше разместить близко друг к другу, чтобы клиенту легче было выбрать более удобный. Поэтому рядом с номером можно разместить онлайн-чат и мессенджеры.
Сопровождается СТА
Рядом с номером службы поддержки можно разместить призыв к действию: связаться, если у клиента возникли вопросы.
2. НОМЕР ТЕЛЕФОНА
Номер корректный
Своевременно обновляйте номер службы поддержки и следите за его актуальностью. Не допускайте того, что клиент наберет номер, который не обслуживается.
Бесплатный номер
Дайте клиенту связаться с вами без дополнительных затрат: предоставьте номер бесплатной горячей линии.
Динамический локальный номер
Если вы используете местные городские номера, отображайте локальный номер на основе выбранного города. Не показывайте клиенту московский номер, если он в Петербурге.
Без номеров по разным городам
В отображении номеров сразу по нескольким городам нет смысла. Это лишь перегружает интерфейс. Лучше отображайте номер в зависимости от выбранного города.
Обновление местного номера везде
Если местный номер указан в нескольких частях страницы, при выборе города он должен обновляться везде.
Highlight бесплатности звонка
Телефон горячей линии можно снабдить дополнительным пояснением о том, что исходящий звонок по этому номеру будет бесплатным для клиента.
Highlight бесплатности в РФ
Если ваш интернет-магазин также продает и в другие страны, в явной форме подсветите, что номер 8-800 бесплатен при звонке именно с территории РФ.
Номер легко набрать
По возможности приобретите в качестве контактного «красивый» номер, который будет легко как запомнить, так и набрать на телефоне.
Различие между номерами понятно
Если вы предоставляете несколько номеров для связи, в явной форме поясните, по какому именно поводу можно звонить на каждый из них. Не оставляйте клиента в неведении.
Одна функция? Один номер
Если несколько номеров выполняют одну и ту же функцию, лучше отображать один единый номер. Не стоит создавать для клиента ненужный выбор.
Без дублирования номеров
Если вы указываете федеральный и местный номера, позаботьтесь о том, чтобы они не дублировали друг друга.
Формулировки корректны
Для подписей используйте корректные формулировки. Если на номер можно позвонить с любого телефона, не пишите, что это можно сделать только со стационарного.
Копирование номера?
В одном из магазинов мне также встретилась функция копирования номера. Как считаете, насколько она может быть полезна, какие есть use cases? Напишите в комментариях.
Коллтрекинг работает корректно
Если вы используете подмену номера для аналитики, убедитесь, что она срабатывает своевременно, и номер не меняется на глазах у клиента.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. ОФОРМЛЕНИЕ
Не спрятан
По возможности не прячьте номер телефона за какие-либо элементы: сделайте его видимым по умолчанию, упрощая путь клиента при звонке.
Виден полностью
Сделайте так, чтобы номер был виден полностью, без выцветания. Понимаю, с какой целью это делается. Но выглядит убого, да и клиенту задачу звонка усложняет.
Ничем не перекрывается
Если вы используете фиксированные элементы на странице (онлайн-консультанты, кнопку скролла вверх и т.д.), убедитесь, что они не перекрывают собой номер телефона.
Форматирован
Базовый момент: используйте форматирование номера телефона, чтобы клиенту легче было его прочитать и набрать, не ошибившись.
Не мельчит
Не мучайте клиента, размещая номер телефона в слишком мелком размере шрифта. Номер должен легко читаться.
Разделен на составные части
Используйте отступы во всех частях номера: коде страны, коде города и составных частях номера.
Стандартная структура разделения
По возможности используйте общепринятую структуру разделения номера для своей страны. В случае с РФ чаще всего используется +7 (ХХХ) ХХХ ХХ ХХ.
Нестандартное разделение
Однако для «красивых» номеров допускается нестандартная структура отступов, если это позволяет легче считать и запомнить номер.
Отступы vs. дефисы
По возможности используйте именно отступы, а не дефисы. Номер будет считываться в обоих случаях, но в последнем будет визуально более перегруженным.
Выцветание кодов
Иногда код страны и города делают чуть более выцветшим, чтобы фокус смещался именно на номер. Не функционально, но достаточно интересно. Что скажете?
Визуальное различие адекватно
При этом, стараясь подсветить сам номер, не стоит перегибать палку и делать различие слишком сильным.
Форматирование обосновано
Не стоит прибегать к форматированию, которое ничем не обосновано. Как считаете, зачем в этом номере выделена цифра? Напишите в комментариях.
Без highlight'а платного номера
Подсвечивание платного номера и отображение бесплатного номера визуально вторичным – пример темного паттерна, попытки сэкономить на стоимости звонков.
С кодом страны
Формат номера должен быть максимально привычным и часто используемым. Номера без кода страны – точно не лучший вариант в плане восприятия.
Код страны для горячей линии
В случае с горячей линией лучше отображать код в том формате, в котором он уже стал привычен большинству: не +7 800, а 8 800.
Релевантная иконка
Чтобы сделать номер более заметным и понятным, рядом с ним можно разместить релевантную иконку в виде трубки телефона.
Иконка в хорошем качестве
Размещая иконку, убедитесь, что она загружена в хорошем качестве (желательно в векторном формате) и не пикселит. А вот так делать не стоит:
Иконку легко разглядеть
Если иконка слишком мелкая, ее труднее разглядеть. А если ее трудно разглядеть, она в принципе теряет весь смысл.
Без сторонних иконок
Размещая сторонние иконки вплотную с номером телефона, клиента можно ввести в заблуждение, т.к. они будут восприниматься, как единый элемент.
Без пунктирного подчеркивания
Пунктирное подчеркивание – часто используемая техника для отображения всплывающей подсказки. Не стоит использовать его в номере телефона.
Реакция на наведение
Сделайте номер телефона интерактивным, чтобы при наведении он менял свой вид, давая визуальную обратную связь.
Реакция на hover, если есть ссылка
Номер должен реагировать на наведение, только если он кликабельный. Иначе введете клиента в заблуждение («на hover реагирует, но ничего при клике не происходит»).
Индивидуальная реакция на hover
Номера, размещенные рядом, должны быть отдельными объектами. Если клиент наводит курсор на один номер, а выделяется и другой, на какой номер он позвонит при клике?
Без контекстных подсказок
С учетом того, что номер телефона службы поддержки привычен для большинства, от контекстных подсказок в данном случае можно и отказаться.
Подсказки с призывом к действию
Если и использовать подсказки при наведении курсора на номер телефона, в их текст можно добавить призыв к действию – связаться с компанией.
Текст подсказки корректный
Что точно делать не стоит – это вводить клиента в заблуждение с помощью подсказок. Они должны подсвечивать именно целевое действие при клике. А вот и анти-пример:
Без очевидных подсказок
Если вы используете подсказки, не размещайте в них банальный текст, не несущий для подавляющей части аудитории никакой ценности.
