{"id":6543,"title":"\u041a\u0430\u043a \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u043d\u0435 \u0443\u0442\u043e\u043d\u0443\u0442\u044c \u0432 \u043e\u043c\u0443\u0442\u0435 \u043d\u0435\u043e\u0442\u043b\u043e\u0436\u043d\u044b\u0445 \u0434\u0435\u043b","url":"\/redirect?component=advertising&id=6543&url=https:\/\/vc.ru\/promo\/290554-tysyacha-i-odna-zadacha-kak-na-starte-biznesa-ne-utonut-v-omute-neotlozhnyh-del&placeBit=1&hash=06bd19bac10eff65d557e51eff7ad526506f48be933870c667bd0bcd7a476220","isPaidAndBannersEnabled":false}
Дизайн
Carrot quest

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

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

Привет, эпоха мессенджеров и разнообразных чатов 👋 Пока мы активно переписываемся с друзьями о предстоящей поездке на дачу, следим в 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": 29, "favorites": 69, "is_advertisement": false, "subsite_label": "design", "id": 80695, "is_wide": true, "is_ugc": true, "date": "Tue, 27 Aug 2019 12:14:34 +0300", "is_special": false }
0
12 комментариев
Популярные
По порядку
Написать комментарий...

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

0

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

7

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

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

0

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

0

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

Нет.

0

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

0

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

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

0

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

2

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

0

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

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

0

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

0

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

0
Читать все 12 комментариев
Volvo показала в соцсетях обновлённый логотип — он появится на автомобилях с 2023 года Статьи редакции

Теперь он плоский.

Обновлённый логотип Volvo
90 самых полезных статей на vc.ru для предпринимателей

Привет, это команда Логомашины. За несколько лет мы прочитали тысячи материалов на vc.ru, а сегодня делимся подборкой из 90 статей, которые нам кажутся самыми полезными для тех, кто создаёт или развивает свой бизнес.

Что такое сложный процент. Рассказывает персональный брокер

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

Еврокомиссия официально предложила сделать USB-C единым зарядным портом для смартфонов и других устройств Статьи редакции

Принятие проекта, вероятно, сильнее всего повлияет на Apple.

«Сбер» запустил первую в России наружную 3D-рекламу с CGI-персонажами Чебурашкой и крокодилом Геной Статьи редакции

Видео длиной семь минут создавали около четырёх тысяч часов.

3D-рекламу с CGI-персонажами «Сбер»
Старинный пруд в Москве очистят при помощи водной мяты

Систему природной очистки воды при поддержке крупного французского фитокосметического бренда презентовали в Ботаническом саду МГУ «Аптекарский огород». Рассказываем, как устроена технология и в чем выгода использования растений.

фото: пресс-служба "Аптекарского огорода"
Mozilla обвинила Google в слежке за пользователями в новой версии браузера Chrome Статьи редакции

Критику API поддержали и разработчики движка WebKit.

Готовимся к техническому собеседованию при помощи чат-бота: проект студентов SkillFactory

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

Банк России утвердил порядок тестирования неквалифицированных инвесторов

Банк России утвердил в новой редакции стандарт, который устанавливает порядок тестирования неквалифицированных инвесторов для допуска к совершению сделок со сложными финансовыми инструментами.

Как сделать карьеру из незакрытого со школы гештальта

История создания самого успешного в России университетского мобильного приложения

Вторая часть пивозавро-стикеров для IT

Первая часть пивозавро-стикеров зашла очень хорошо. Мы попали на первую строчку в популярном, и видим, что вы их юзаете) Поэтому выкатываем вторую часть!

null