Сделать удобный чат с клиентами: 21 рекомендация по дизайну

Предупреждайте о ботах, сделайте заметнее кнопку, вызывающую диалог, — и другие советы в конспекте материала директора по исследованиям Nielsen Norman Group Ралуки Будиу.

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

1. Переписка менее эмоциональна. Проще напечатать сообщение, чем говорить в реальном времени с другим человеком.
2. Фиксация разговора в письменной форме. Все участники чата смогут в дальнейшем ссылаться на полученную информацию.
3. Пользователи могут выполнять несколько задач одновременно, например работать в другой вкладке, пока не пришёл ответ.

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

участник исследования

Ниже — 20 рекомендаций для UX-дизайнеров, которые хотят спроектировать удобный чат для сайта.

Разместите ссылку под названием «Чат» на странице «Контакты»

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

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

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

Не делайте плавающие кнопки единственным способом доступа к чату

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

На сайте HSBC пользователь открыл меню и не заметил кнопку «Live Chat» сбоку страницы. Однако после того как он перешёл по ссылке «Contact HSBC», он увидел кнопку «Live Chat Now» в верхней части страницы.

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

участник исследования

Плавающие кнопки действия для чата должны располагаться справа и выделяться

Есть две причины, по которым пользователи могут не заметить плавающие кнопки:

1. Они располагаются в нестандартном месте (не в нижнем правом углу страницы).
2. Они недостаточно выделяются на странице.

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

На сайте Forever 21 также есть плавающая кнопка чата, но она настолько маленькая и сливается с остальной частью страницы, что пользователи не заметили её. Также вместо «Чат с сотрудником» эту кнопку назвали «Задавай вопрос стилисту» — о таких ошибках уже писали в первом пункте.

Не прячьте чат за пространным названием вроде «Задайте вопрос»

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

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

Когда я вижу фразу «Спросите нас», мне непонятно, кому я буду задавать вопрос и с кем разговаривать — с чат-ботом или реальным человеком. Это сбивает с толку.

участник исследования, пытавшийся найти чат на банковском сайте Lloyds

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

Укажите ссылку на чат на страницах товара

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

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

Минимизируйте время ожидания, особенно на мобильных устройствах

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

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

участник исследования

Из-за долгого времени ожидания пользователи чувствовали себя недооценёнными и думали, что сотрудник занимается вопросами других клиентов, а их игнорирует. Также людям не нравится, когда сотрудник долго не отвечает, хотя надпись «печатает» говорит об обратном.

Дайте пользователю знать, как быстро он получит ответ

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

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

Должно быть, у них нехватка персонала.

участник исследования

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

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

участник исследования

Людям нравится видеть надпись, когда сотрудник набирает текст

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

Best Buy использовала загадочные фразы для передачи состояния работы агента. Например, фраза «Работа агента приостановлена» заставила людей задаться вопросом, значит ли это, что агент куда-то ушёл, или нет.

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

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

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

Используйте отдельное окно для чата

Так пользователю будет легче отделить общение в чате от остального взаимодействия с сайтом.

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

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

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

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

Предусмотрите проблемы с интернет-соединением

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

Кроме того, убедитесь: если пользователь попытается возобновить прерванную сессию, контекст (и ход выполнения) сохранится и повторно вводить вопросы не придётся.

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

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

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

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

Не используйте автоматизированные системные сообщения

Во время общения с представителем по работе с клиентами на сайте Met Opera одному пользователю предложили подождать, пока агент сможет решить его вопрос. Через некоторое время он получил сообщение: «Время вашего сеанса истекло». Пользователь удивился и уже был готов закрыть окно чата, но тут представитель прислал ответ.

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

Я предположил, что Джуди (агент) отправила это сообщение, поскольку рассчитанное на сеанс время заканчивалось, а затем она вернулась к поиску моего ответа.

участник исследования

Дайте возможность загружать документы в окно чата

Часто людям нужно отправить фотографии или документы касательно своей проблемы. Сервис Google Express дал пользователям возможность загружать вложение в сообщение.

У Dell тоже была такая функция, но, к сожалению, она не работала на мобильных устройствах.

Дайте пользователям возможность сохранять скрипт сеансов

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

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

Автор рекомендует предложить пользователям оба варианта (электронное письмо почта и PDF-файл).

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

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

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

Менеджер не должен начинать разговор с фразы «Как дела?»

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

Пользователю пришлось удалить то, что он уже напечатал, ввести «хорошо» и перепечатать свой вопрос.

Лучше начинать с фразы: «Привет! Чем я могу вам помочь?»

Предупредите пользователей о том, что они будут общаться с ботом

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

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

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

участник исследования

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

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

Не злоупотребляйте использованием шаблонных ответов

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

Такие ответы наводят на мысль: я веду переписку с ботом. Они слишком общие.

участник исследования

Это сказал пользователь, взаимодействующий с агентом Dell. После того как человек задал вопрос, бот ответил ему: «Рад, что вы обратились за помощью. Я буду рад помочь вам с вашей проблемой».

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

Шаблонные ответы должны отправляться мгновенно

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

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

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

участник исследования

Предоставьте пользователям подробные ответы

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

Участник, заказавший на сайте Purple матрас, отметил: ответ о политике возврата не полностью его удовлетворил.

Мне не нравится, когда мне дают расплывчатые ответы вроде: «Вся необходимая информация будет представлена в этой форме». С виду может показаться, что такой ответ вполне нормальный. Но я заказывал дорогой товар, он стоит почти $2800, и я не думаю, что должен разбираться со всём сам.

участник исследования

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

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

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

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