Тренды в дизайне онлайн-консультантов, или чат, который мы заслужили
Пообщались с дизайнерами из разных компаний по поводу внешнего вида чатов и собрали в этом материале несколько полезных инсайтов.
Привет, эпоха мессенджеров и разнообразных чатов 👋 Пока мы активно переписываемся с друзьями о предстоящей поездке на дачу, следим в Telegram за любимыми каналами про кино или отправляем фотки кота маме, кто-то пишет в чат онлайн-магазина с просьбой поменять матрас. И всё потому, что чат — быстрый и удобный способ обратиться за помощью в поддержку.
Многие всё ещё думают, что чат не приносит никакого дохода, и занимаются им по остаточному принципу, но на самом деле это не так, и мы уже писали об этом в нашем блоге. Онлайн-чат — это не только про траты на поддержку пользователей, а про ещё одну возможность для роста бизнеса. Посмотрите на безумно красивую и занимательную статистику от Kayako с множеством полезных сведений про онлайн-чаты.
А что насчёт внешнего вида чата? Вы наверняка не раз встречали такой, которым неудобно пользоваться: он открывается на половину экрана или в него нельзя загрузить документ. И вообще, как много некрасивых чатов вы видели? Лично я очень много 😫
Основная идея чата — коммуникация, поэтому, как правило, у него довольно простой интерфейс, который не требует нагруженного и сложного дизайна. Но это вовсе не означает, что чат должен выглядеть как Windows 98 в нулевых.
Алексей Морозов, продакт-дизайнер: «Если ваш сайт выглядит как Win98, то и чат должен выглядеть так же. Если люди видят сильное расхождение в стилистике сайта и чата, то к чату будет меньше доверия».
Хороший дизайн чата может решить сразу несколько проблем: повысить функциональность, упростить навигацию, сократить время решения проблемы, повысить лояльность клиентов и так далее. А ещё если вы запилите классный дизайн, пользователи не убегут от вас, подумав, что вы застряли в девяностых.
Удобство использования
Когда пользователь с лёгкостью находит нужную функцию в чате и быстро понимает, как прикрепить фотографию или поделиться локацией, это значит, что ваша навигация проста и понятна в использовании. Ура!
Навигация — один из главных этапов на пути к успешному дизайну всего чата. Если онлайн-консультант безумно красив и сообщения в нём летают, как бабочки, но разобрать, кто и что написал, невозможно, значит, что-то пошло не так.
Чатов много, все они создаются по одинаковым принципам: диалоговое окно, поле для ввода текста, иконки для дополнительных функций. Не пытайтесь придумывать что-то сверхъестественное.
Алексей Семагин, дизайнер в Carrot quest: «Чат — это сейчас самый популярный инструмент общения. Он есть везде, и паттерны взаимодействия пользователей устоялись. Сложно сделать необычный чат и, скорее всего, не нужно».
Пример чата с классной и простой навигацией: открываешь панель слева от ввода сообщения, и перед тобой появляется панель элементов, которые можно отправить пользователю.
Пример плохого чата: тусклая палитра, сложно понять, где чьё письмо, и непонятно, как прикреплять документы.
Алексей Семагин, дизайнер в Carrot quest: «Я бы ещё сказал о функциональности в чате и акценте на информации. Элементы должны быть максимально понятны и просты. У каждой детали есть своё практическое предназначение. Каждый элемент объясняет что-то, а не украшает».
Воздушные и лаконичные элементы
Можно сказать, что воздух и приятная палитра в дизайне касаются не только чатов, а всего — лендингов, сайтов, книг, интерфейсов и так далее.
Простые и лаконичные элементы придают свежести, а в сочетании с правильно подобранной палитрой чат может выглядеть как спелый сочный фрукт.
Посмотрите на пример ниже: ничего лишнего, всё очень просто, красиво и не отвлекает от главной цели чата — общения.
А вот тут дышать совсем нечем, и по палитре вышло очень тускло:
Анимация
Замечали ли вы анимацию в чате? Когда вы видите, как ваш собеседник набирает сообщение или баблы с текстом плавно «втекают» в диалог. Обычно мы не обращаем внимания на такие вещи, но на самом деле анимация помогает решить сразу несколько проблем: анимированные элементы скрашивают ожидание во время общения и подсказывают пользователю, что происходит в чате.
Фронтенд-разработчик в Carrot quest: «Анимации призваны добавить больше динамики происходящему. Они не скрашивают ожидание, скорее придают плавность переходам и в некоторых случаях убирают микролаг операций».
А теперь о том, почему создавать анимацию сложно:
- Занимает много времени.
- Часто не входит в прямые задачи UX-дизайнеров.
- Сложно в числах оценить эффект.
Алексей Морозов, продакт-дизайнер: «В прямые задачи дизайнеров входит улучшение опыта взаимодействия. На UX-исследованиях люди часто отмечают “приятное” поведение элементов, так что это можно считать своего рода качественной метрикой».
Но несмотря на сложности, анимация помогает улучшить эмоциональный опыт пользователя, а мы знаем, как эмоции важны в общении с клиентами. И в конце концов, на анимированный чат просто приятно смотреть.
Посмотрите, как выглядит анимированная иконка чата Carrot quest. Она привлекает внимание и мило подмигивает.
А в этом чате анимированные баблы и набор сообщения пользователем:
Лев Губин, UI-дизайнер в Carrot quest: «Не самый хороший пример, тут с анимацией прям перебор. Анимации должны помогать и объяснять, что сейчас произошло, показывать взаимосвязь каких-то элементов. Они должны быть ненавязчивыми. Разумеется, анимация должна быть красивой, естественной, согласованной, приятной, но самая главная задача — помогать».
Разные цветовые палитры
Персонализация — один из главных трендов в маркетинге. Это также касается дизайна и тем более чата.
Предоставьте пользователям возможность выбора цветовой схемы. Так ваши клиенты смогут кастомизировать чат под свой сайт, дизайн и цели. А ещё сам процесс выбора цветовой палитры и обоев может приносить удовольствие, как выбор фона на рабочий стол или основной темы в мессенджере.
Так выглядит чат Carrot quest. Сейчас там появилась возможность выбора темной темы.
Голосовые сообщения
Аудиосообщения в чате очень удобны, особенно когда вы торопитесь домой смотреть сериал и пить вино, а у вас по какой-то непонятной причине отключилась подписка и вам нужно срочно узнать у поддержки, в чём дело.
На самом деле сейчас мало кто в поддержке пользователей использует голосовые сообщения. По аудиосообщениям трудно настроить поиск, и оператору сложно восстанавливать историю сообщений.
Но если такой вариант поддержки вам подходит, многие пользователи будут рады воспользоваться функцией. Предоставляя возможность для голосовой коммуникации в чате, вы даёте пользователям выбор удобного способа для общения, и это очень круто.
Не забывайте о важных деталях:
- Удобство записи. Обычно это работает так: ты зажимаешь иконку с микрофоном и делаешь запись, отпускаешь иконку, и запись автоматически отправляется в диалог.
- Время записи. Часто время записи ограничено, и в некоторых мессенджерах есть предупреждающий сигнал о конце аудио или автоматическое продолжение записи уже в новом аудиосообщении.
- Удобство прослушивания. Иногда у пользователя нет возможности достать наушники или слушать запись на громкой связи. Многие чаты дают возможность прослушивать запись как в телефонном разговоре, что сильно упрощает голосовую переписку.
Так выглядит китайский чат WeChat, в котором огромной популярностью пользуются как раз аудиосообщения.
Заготовленные ответы
Давайте пофантазируем. Вы заходите на раздел с тарифами какого-то сервиса, видите там заоблачные цены и не понимаете, что со всем этим делать и какой тариф подойдёт лучше всего.
Вдруг справа появляется чат и предлагает помочь, вы несказанно рады! Дальше вы радуетесь ещё сильнее, потому что чат предлагает вам готовые варианты ответов с подходящими тарифами. «Вот это магия!» — думаете вы. Нет, это просто функция заготовленных ответов, и она сильно упрощает жизнь вам и оператору.
Так Intercom предугадывает мои желания:
У пользователей в основном возникают одинаковые вопросы и проблемы, поэтому заготовленные ответы значительно ускоряют время обращения и улучшают пользовательский опыт.
У водителей Uber есть возможность отправки готовых ответов клиентам, что позволяет им не отвлекаться за рулём, но при этом оставаться на связи:
Простой интерфейс
Поражающий воображение дизайн — это круто, но когда дело касается чата и пользовательского опыта, лёгкий и лаконичный интерфейс однозначно выигрывает.
При этом простой интерфейс не исключает крутых фичей. Но в этом случае все функции чата должны быть скрыты в небольшом количестве элементов, которые будут интуитивно понятны пользователю.
Попробуйте оптимизировать интерфейс чата и откажитесь от лишнего. Помните о правиле «больше — не значит лучше».
Наверняка многие из вас видели, как выглядят сайты с чатами, где можно найти доктора и записаться на приём или проконсультироваться в онлайне. Большинство из них выглядят, мягко говоря, не очень. А вот как это всё могло быть:
Юля Шарапова, арт-директор, дизайнер в Level Design Communications: «Думаю, будущее дизайна чатов — это отсутствие дизайна чатов. Всё должно прийти к какому-то одному универсальному удобному форм-фактору и перестать визуально шуметь. Есть ложка или USB. Чат — это тоже ложка или USB. И чем удобнее будет происходить передача еды или данных, тем лучше выполнена задача дизайнера».
Надеюсь, вы смогли вдохновиться примерами прекрасных чатов, а теперь пора заняться своим. Удачи!
Автор: Александра Каменских.
Чет стал уставать от мнений знахарей дизайна "лучший чат - это отсутствие чата". Дизайнер думает его в философы запишут от таких фраз или в гугл пригласят? Я тоже люблю дрибббл, но при неосторожном использовании он так-же непрактичен как и 5 лет назад - ничего прикладного, одна фантазия. Никто не думает о том, как запускают продукт и времени лепить смузи анимацию и голосовые сообщения просто нет. В Wechate есть.. нужно на законодательном уровне запретить приводить в пример гигантов, их бюджетов у вас никогда не будет, зачем людям (клиентам?) приводить в пример то, чего не будет? Практически ни у кого нет таких средств, не только у мелких контор. Уже все решения придуманы, кэррот или живосайт, вы нашли проблему где ее нет. То что кто-то лепит ужасный чат это нормально, он хотя бы там есть. Возможно, это бесплатный чат. А то что стили отличаются или ночной темы нет, это не критично для бизнеса. Просто это парадокс нашего времени, задизайнить можно все что угодно, хоть треугольные кнопки, и вроде бы это уже есть, давайте делать так! Но нет. Нет этих возможностей. Вы же не требуете от админки cms того же, что рисуют на дрибббле?
"лучший чат - это отсутствие чата" - ну, так и есть :) И это далеко не гуру дизайна придумали. Если вы проходили в универе ТРИЗ или просто изучали для интереса, то должны знать, что "технический объект идеален, если его нет, а функция выполняется". Так что это правило советского подхода к решению изобретательских задач, которые еще Альтшуллер продвигал. На мой взгляд, вполне логичные. Это чат нахрен не нужен, если у вас сайт с понятной и доступно изложенной инфой.
Слышали «шутку-рассказ» про «почему я должен во всём разбираться? Вот захотел я велосипед, открываю Гугл...»? Чаты решают эту проблему. Здесь люди конечно поделятся на два лагеря: тем кому наоборот круто во всём разобраться самим, и потом под пивко друзьям сыпать терминами которые больше никому не интересны, и тем кому нафиг не надо разбираться, у них на это времени нет, им «просто нужен велосипед», чтоб два раза за лето с детьми покататься. Решение этой проблемы - первые не думают за вторых, как им шопиться в интернете. )
Эту идею продвигали еще задолго до совка, как только появилась экономическая наука с понятиями результата и издержек.
Нет.
Вы все живете как в вакууме и похоже с реальностью не сталкиваетесь. Чат вполне может выполнять свои функции, даже если отсталый и кнопки ужасные и шрифт страшный. Просто он там есть и работает. Спросите у тех, кто реально торгует - запчасти, услуги, другие товары - те, кому звонят каждый день, а не тех, кто продает ванильную хуйню за миллион, а давайте вам чат с ml запилим? А оно им надо? Ну давайте хоть по-симпатичнее сделаем! - А зачем? Вот реально припекает от того, что люди не знают куда бы технологию вкорячить. Вам бы только посоветовать. Рассуждать о голом дизайне без нужд бизнеса - неправильно, потому что это не несет никакой ценности для клиента. Тут даже примерный клиент не обрисован, а уже придумали, какой у него должен быть чат.
Помню на pochta.ru был чат, который автоматом закрывался через 3 минуты, если не успел за это время ввести текст, вот были времена. Пишешь длинное описание проблемы и не знаешь что сейчас два абзаца текста исчезнут.
Если серьезно, то кажется в статье смещены акценты. В онлайн-консультантах на сайтах важна, например, история обращений, или возможность прикрепить изображение/файл. А вот дриббло-анимации никакой ценности не принесут, достаточно показать минимум: набор сообщения собеседником, отправку, статус отправки.
Зачем голосовые сообщения на сайте? Если мне нужно поговорить голосом, я предпочту позвонить, ну или хотя бы перейти в соответствующий мессенджер. Не говоря уже о том, что, например, с десктопа записать что-то голосом — отдельный квест.
Примеры тоже приведены самые контрастные — чат с интерфейсом аськи образца 2005 года и сферический чат с дриббла в вакууме. Пользователям и бизнесу как всегда нужно что-то посередине. Плюс несколько неуместно сравнивать интерфейс полноценного мессенджера и интерфейс онлайн-чата — у них разные задачи и разные способы реализации.
Хотелось рассказать именно о трендах в создании чатов, поэтому здесь есть место и анимации и голосовым сообщениям. Анимация показывает пользователю, что происходит в чате, помогает "скоротать" время, а в поддержке это важно. Но и перегибать с ней, конечно же, не стоит.
Согласна, что голосовые сообщения в поддержке через сайт вряд ли пригодятся в обычном контексте, но рассказать про это всё таки стоило, потому что такой вид общения становится все более популярным. И в том же wechat существует множество онлайн- и офлайн-магазинов, с которыми можно общаться через аудиосообщения. Но это китайская история уже.
Просто воспринимай статью "как рекламу" )
Она отвлекает меня от моих задач и раздражающе мигает
вы не проводите а/б тестирования с окошками, может какие то инсайды есть?
системы nlp nlu используете, есть положительный опыт?
От первого "примера" орнул :) UX мечты просто