Новый подход в UX дизайне чат ботов 

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

Все статьи, которые я находил, относительно UX дизайна ботов повторяли друг друга, а их советы сводились к написанию качественных текстов и проработке сценария. Ничего против не имею, но пользователю гораздо удобнее нажать кнопку, чем написать боту. Ведь в тоже время в параллельной вселенной боты выглядят как облачные приложения с интерфейсом в чате. Скажите что это не возможно? Я расскажу как этого добиться на конкретных примерах.

📖 Но сначала предыстория

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

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

Погода в боте

🌄 Этот бот показывает данные о погоде. У него интерфейс в сообщении, которое постоянно обновляется.

🖼️ Изображение, для уменьшения нагрузки на сервер, обновляется каждые 15–20 минут. На картинке расположена вся информация, а благодаря правильному дизайну, пользователь может узнать погоду не открывая изображение. Кстати, пользователь может открыть изображение и увидеть подробную информацию: тут все для фантазий дизайнера :)

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

💠 Кнопки под сообщением важная часть дизайна. Они используются как статус бары и в них размещается самая актуальная и необходимая информация, ведь взгляд пользователя после попадания на картинку переходит на кнопки. Еще кнопки используются для открытия настроек и ручного обновления сообщения.

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

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

Сейчас мы только начали вникать, есть ещё много нюансов, которые раскроют следующие примеры. Продолжим ;)

Самый популярный пример

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

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

🤑 Этот бот помогает посмотреть статус банковской карты, проверить выплаты, заблокировать карту или, например, узнать остаток.

🖼️ Изображение, которое сразу привлекает внимание пользователя, даёт легко увидеть остаток по карте, кредитный лимит и график транзакций. Если открыть изображение и приблизить левый верхний угол, то можно увидеть номер карты. Это очень полезно и в тоже время безопасно, так как никто кроме пользователя не увидит информацию о карте.

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

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

При нажатии на кнопку с иконкой вниз, обновляется сообщение выводя дополнительные статус бары и кнопки. Например, при нажатии на кнопку “Get a statement” бот отправляет сообщение с файлом в котором указаны все транзакции по карте. Естественно, сообщение само удалиться через некоторое время. Еще можно узнать CVC код ( а это особенно удобно, если он динамически меняется ) или заблокировать карту ( тоже удобно, если нет доступа к приложению банка ).

🕹️ Немного про взаимодействие

Думаю вы уже заметили, что кнопка которая является статус баром и кнопка на которую можно нажать “интуитивно" отличаются. Это необходимо для улучшения пользовательского опыта.

Кнопки в роли статус бара лучше выводить с информацией и иконкой ( можно небольшую подпись к иконке ).

Обычные кнопки лучше подписывать призывом к действию или просто оставлять одной иконкой без подписей ( эта кнопка должна быть очевидна, например ⚙️ ). 

Если кнопка ведёт за собой к серьезным последствиям, стоит воздержаться от эмодзи и ограничится текстом четко описывающим действие ( такие кнопки должны быть “скучными” и нести “серьезность” ).

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

⁉️ Почему не использовать кнопки находящиеся в клавиатуре? Во-первых, пользователь может их случайно скрыть и открыть их не так-то просто ( точнее понять как открыть ). Во-вторых, эти кнопки отправляют боту сообщения, которые забивают историю чата и не несут никакой пользы. По факту, это быстрые ответы.

🎨 Картинки и их верстка 

Проанализировав вёрстку сообщений Telegram, я нашел идеальные соотношения сторон картинки и зоны контента.

Для максимально большой площади рекомендую использовать соотношение 1:1 либо 3:2 ( как у меня в примерах ). Я предлагаю эти два формата использовать как стандарты, что бы облегчить пользователю использование разных ботов и ускорить привыкание к их интерфейсам.

Telegram использует скругления, при чем на разных платформах по разному, из-за чего контент может обрезаться. Что бы избежать этого следует использовать зону контента ( что-то вроде вылета ). 

У меня при соотношении сторон 3:2 и размере картинки 540px X 364px рамка сделала отступ внутрь на 15px с каждой стороны: мне кажется это идеальным отступом, ведь контент сбоку не сильно близко к краю, но в тоже время и не очень далеко. Проведя не хитрые математические подсчеты можно понять, что с каждого бока отступ 2.78% от ширины, а сверху и снизу отступы по 4.12% от высоты.

В процентах, числа звучат крайне страшно, однако на практике это одинаковые отступы внутрь по периметру. Вы, конечно, можете использовать свои значения, но рекомендую использовать не меньше тех что использовал я в примерах. Иначе контент имеет все шансы “потеряться”. 

Ещё много новых фишек

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

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

👷 Этот бот помогает работодателям найти работников, а работникам найти работу. Для удобства я назвал его Work Hunter.

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

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

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

🏁 При любом входе в бот появляется автоматическое сообщение “/start". Его можно просто не трогать или отправить пользователю сообщение с детальной инструкцией и видео как удалить это сообщение. Естественно, работа бота прекращается пока пользователь его не удалит.

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

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

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

Боты крайне популярны в мессенджерах, однако, ими мало кто пользуется из-за не качественного дизайна. Пользователи не хотят общаться с машиной и объяснять ей каждое действие. Им легче просто нажать кнопку.

Надеюсь, вы оцените мои старания и поделитесь своим мнением ниже. Спасибо за прочтенный текст :)

P.S. Боты, созданные по этой системе дизайна, мало чем отличаются от приложений, но имеют неоспоримое преимущество - вычислительная мощность находится в облаке. 

P.P.S. Все выше написанное реализуемо для Telegram. Другие платформы могут использовать другое API, но основные принципы применимы и к ним. Кстати, другие мессенджеры имеют крутые фишки, например “карусель" в сообщении.

👨‍🎓 Меня зовут Bereziuk Ivan, я дизайнер. Занимаюсь брендингом и увлекаюсь UX дизайном. Вы можете связаться со мной через мой Инстаграм ( ссылка ).

А оригинал моей статьи на английском вы можете почитать в Medium вот тут.