Тренды в дизайне онлайн-консультантов, или чат, который мы заслужили

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

Привет, эпоха мессенджеров и разнообразных чатов 👋 Пока мы активно переписываемся с друзьями о предстоящей поездке на дачу, следим в Telegram за любимыми каналами про кино или отправляем фотки кота маме, кто-то пишет в чат онлайн-магазина с просьбой поменять матрас. И всё потому, что чат — быстрый и удобный способ обратиться за помощью в поддержку.

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

А что насчёт внешнего вида чата? Вы наверняка не раз встречали такой, которым неудобно пользоваться: он открывается на половину экрана или в него нельзя загрузить документ. И вообще, как много некрасивых чатов вы видели? Лично я очень много 😫

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

Алексей Морозов, продакт-дизайнер: «Если ваш сайт выглядит как Win98, то и чат должен выглядеть так же. Если люди видят сильное расхождение в стилистике сайта и чата, то к чату будет меньше доверия».

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

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

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

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

Алексей Семагин, дизайнер в Carrot quest: «Чат — это сейчас самый популярный инструмент общения. Он есть везде, и паттерны взаимодействия пользователей устоялись. Сложно сделать необычный чат и, скорее всего, не нужно».

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

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

Алексей Семагин, дизайнер в Carrot quest: «Я бы ещё сказал о функциональности в чате и акценте на информации. Элементы должны быть максимально понятны и просты. У каждой детали есть своё практическое предназначение. Каждый элемент объясняет что-то, а не украшает».

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

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

Посмотрите на пример ниже: ничего лишнего, всё очень просто, красиво и не отвлекает от главной цели чата — общения.

А вот тут дышать совсем нечем, и по палитре вышло очень тускло:

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

Фронтенд-разработчик в Carrot quest: «Анимации призваны добавить больше динамики происходящему. Они не скрашивают ожидание, скорее придают плавность переходам и в некоторых случаях убирают микролаг операций».

А теперь о том, почему создавать анимацию сложно:

Алексей Морозов, продакт-дизайнер: «В прямые задачи дизайнеров входит улучшение опыта взаимодействия. На UX-исследованиях люди часто отмечают “приятное” поведение элементов, так что это можно считать своего рода качественной метрикой».

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

Посмотрите, как выглядит анимированная иконка чата Carrot quest. Она привлекает внимание и мило подмигивает.

А в этом чате анимированные баблы и набор сообщения пользователем:

Лев Губин, UI-дизайнер в Carrot quest: «Не самый хороший пример, тут с анимацией прям перебор. Анимации должны помогать и объяснять, что сейчас произошло, показывать взаимосвязь каких-то элементов. Они должны быть ненавязчивыми. Разумеется, анимация должна быть красивой, естественной, согласованной, приятной, но самая главная задача — помогать».

Персонализация — один из главных трендов в маркетинге. Это также касается дизайна и тем более чата.

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

Так выглядит чат Carrot quest. Сейчас там появилась возможность выбора темной темы.

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

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

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

Не забывайте о важных деталях:

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

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

Вдруг справа появляется чат и предлагает помочь, вы несказанно рады! Дальше вы радуетесь ещё сильнее, потому что чат предлагает вам готовые варианты ответов с подходящими тарифами. «Вот это магия!» — думаете вы. Нет, это просто функция заготовленных ответов, и она сильно упрощает жизнь вам и оператору.

Так Intercom предугадывает мои желания:

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

У водителей Uber есть возможность отправки готовых ответов клиентам, что позволяет им не отвлекаться за рулём, но при этом оставаться на связи:

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

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

Попробуйте оптимизировать интерфейс чата и откажитесь от лишнего. Помните о правиле «больше — не значит лучше».

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

Юля Шарапова, арт-директор, дизайнер в Level Design Communications: «Думаю, будущее дизайна чатов — это отсутствие дизайна чатов. Всё должно прийти к какому-то одному универсальному удобному форм-фактору и перестать визуально шуметь. Есть ложка или USB. Чат — это тоже ложка или USB. И чем удобнее будет происходить передача еды или данных, тем лучше выполнена задача дизайнера».

Надеюсь, вы смогли вдохновиться примерами прекрасных чатов, а теперь пора заняться своим. Удачи!

Автор: Александра Каменских.

#ux #чаты #пользовательскийопыт