{"id":6545,"title":"\u041a\u0430\u043a \u0438 \u0437\u0430\u0447\u0435\u043c \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u0431\u0440\u0435\u043d\u0434\u044b \u0441\u043d\u0438\u043c\u0430\u044e\u0442 \u0440\u043e\u043b\u0438\u043a\u0438 \u0434\u043b\u044f TikTok","url":"\/redirect?component=advertising&id=6545&url=https:\/\/vc.ru\/tiktok\/293387-brands-in-trends&placeBit=1&hash=07ebf9a0a17c2f85811d24fb804e09e72513fa4c7cc999d1730b233d3c9348bd","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
Банк России утвердил порядок тестирования неквалифицированных инвесторов

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

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

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

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

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

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

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

Предсказал будущее интернета в 90-ых и пропал, когда его прогнозы стали сбываться: история Филипа Агре Статьи редакции

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

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

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

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

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

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

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

3D-рекламу с CGI-персонажами «Сбер»
Mozilla обвинила Google в слежке за пользователями в новой версии браузера Chrome Статьи редакции

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

null