Дизайн
Carrot quest
3540

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

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

В закладки
Аудио

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

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

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

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

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

Кто не помнит, как выглядел Windows 98

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

Удобство использования

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

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

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

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

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

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

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

Воздушные и лаконичные элементы

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

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

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

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

Анимация

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

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

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

  • Занимает много времени.
  • Часто не входит в прямые задачи UX-дизайнеров.
  • Сложно в числах оценить эффект.

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

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

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

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

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

Разные цветовые палитры

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

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

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

Голосовые сообщения

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

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

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

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

  • Удобство записи. Обычно это работает так: ты зажимаешь иконку с микрофоном и делаешь запись, отпускаешь иконку, и запись автоматически отправляется в диалог.
  • Время записи. Часто время записи ограничено, и в некоторых мессенджерах есть предупреждающий сигнал о конце аудио или автоматическое продолжение записи уже в новом аудиосообщении.
  • Удобство прослушивания. Иногда у пользователя нет возможности достать наушники или слушать запись на громкой связи. Многие чаты дают возможность прослушивать запись как в телефонном разговоре, что сильно упрощает голосовую переписку.

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

Заготовленные ответы

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

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

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

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

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

Простой интерфейс

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

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

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Carrot quest", "author_type": "self", "tags": ["\u0447\u0430\u0442\u044b","\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439\u043e\u043f\u044b\u0442","ux"], "comments": 12, "likes": 28, "favorites": 72, "is_advertisement": false, "subsite_label": "design", "id": 80695, "is_wide": false, "is_ugc": true, "date": "Tue, 27 Aug 2019 12:14:34 +0300", "is_special": false }
0
{ "id": 80695, "author_id": 315608, "diff_limit": 1000, "urls": {"diff":"\/comments\/80695\/get","add":"\/comments\/80695\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/80695"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
12 комментариев
Популярные
По порядку
Написать комментарий...
0

Чет стал уставать от мнений знахарей дизайна "лучший чат - это отсутствие чата". Дизайнер думает его в философы запишут от таких фраз или в гугл пригласят? Я тоже люблю дрибббл, но при неосторожном использовании он так-же непрактичен как и 5 лет назад - ничего прикладного, одна фантазия. Никто не думает о том, как запускают продукт и времени лепить смузи анимацию и голосовые сообщения просто нет. В Wechate есть.. нужно на законодательном уровне запретить приводить в пример гигантов, их бюджетов у вас никогда не будет, зачем людям (клиентам?) приводить в пример то, чего не будет? Практически ни у кого нет таких средств, не только у мелких контор. Уже все решения придуманы, кэррот или живосайт, вы нашли проблему где ее нет. То что кто-то лепит ужасный чат это нормально, он хотя бы там есть. Возможно, это бесплатный чат. А то что стили отличаются или ночной темы нет, это не критично для бизнеса. Просто это парадокс нашего времени, задизайнить можно все что угодно, хоть треугольные кнопки, и вроде бы это уже есть, давайте делать так! Но нет. Нет этих возможностей. Вы же не требуете от админки cms того же, что рисуют на дрибббле?

Ответить
7

"лучший чат - это отсутствие чата" - ну, так и есть :) И это далеко не гуру дизайна придумали. Если вы проходили в универе ТРИЗ или просто изучали для интереса, то должны знать, что "технический объект идеален, если его нет, а функция выполняется". Так что это правило советского подхода к решению изобретательских задач, которые еще Альтшуллер продвигал. На мой взгляд, вполне логичные. Это чат нахрен не нужен, если у вас сайт с понятной и доступно изложенной инфой.

Ответить
0

Это чат нахрен не нужен, если у вас сайт с понятной и доступно изложенной инфой.

Слышали «шутку-рассказ» про «почему я должен во всём разбираться? Вот захотел я велосипед, открываю Гугл...»? Чаты решают эту проблему. Здесь люди конечно поделятся на два лагеря: тем кому наоборот круто во всём разобраться самим, и потом под пивко друзьям сыпать терминами которые больше никому не интересны, и тем кому нафиг не надо разбираться, у них на это времени нет, им «просто нужен велосипед», чтоб два раза за лето с детьми покататься. Решение этой проблемы - первые не думают за вторых, как им шопиться в интернете. )

Ответить
0

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

Ответить
0

То что кто-то лепит ужасный чат это нормально

Нет.

Ответить
0

Вы все живете как в вакууме и похоже с реальностью не сталкиваетесь. Чат вполне может выполнять свои функции, даже если отсталый и кнопки ужасные и шрифт страшный. Просто он там есть и работает. Спросите у тех, кто реально торгует - запчасти, услуги, другие товары - те, кому звонят каждый день, а не тех, кто продает ванильную хуйню за миллион, а давайте вам чат с ml запилим? А оно им надо? Ну давайте хоть по-симпатичнее сделаем! - А зачем? Вот реально припекает от того, что люди не знают куда бы технологию вкорячить. Вам бы только посоветовать. Рассуждать о голом дизайне без нужд бизнеса - неправильно, потому что это не несет никакой ценности для клиента. Тут даже примерный клиент не обрисован, а уже придумали, какой у него должен быть чат.

Ответить
0

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

Если серьезно, то кажется в статье смещены акценты. В онлайн-консультантах на сайтах важна, например, история обращений, или возможность прикрепить изображение/файл. А вот дриббло-анимации никакой ценности не принесут, достаточно показать минимум: набор сообщения собеседником, отправку, статус отправки.
Зачем голосовые сообщения на сайте? Если мне нужно поговорить голосом, я предпочту позвонить, ну или хотя бы перейти в соответствующий мессенджер. Не говоря уже о том, что, например, с десктопа записать что-то голосом — отдельный квест.
Примеры тоже приведены самые контрастные — чат с интерфейсом аськи образца 2005 года и сферический чат с дриббла в вакууме. Пользователям и бизнесу как всегда нужно что-то посередине. Плюс несколько неуместно сравнивать интерфейс полноценного мессенджера и интерфейс онлайн-чата — у них разные задачи и разные способы реализации.

Ответить
2

Хотелось рассказать именно о трендах в создании чатов, поэтому здесь есть место и анимации и голосовым сообщениям. Анимация показывает пользователю, что происходит в чате, помогает "скоротать" время, а в поддержке это важно. Но и перегибать с ней, конечно же, не стоит.
Согласна, что голосовые сообщения в поддержке через сайт вряд ли пригодятся в обычном контексте, но рассказать про это всё таки стоило, потому что такой вид общения становится все более популярным. И в том же wechat существует множество онлайн- и офлайн-магазинов, с которыми можно общаться через аудиосообщения. Но это китайская история уже.

Ответить
0

Просто воспринимай статью "как рекламу" )

Ответить
0

Она привлекает внимание и мило подмигивает.

Она отвлекает меня от моих задач и раздражающе мигает

Ответить
0

вы не проводите а/б тестирования с окошками, может какие то инсайды есть?
системы nlp nlu используете, есть положительный опыт?

Ответить
0

От первого "примера" орнул :) UX мечты просто

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }