Куда движется веб-дизайн: будущее в эпоху чат-ботов и голосовых ассистентов

Я застал эру «сайтов-визиток» на Flash, прошел через бум адаптивной верстки и с восторгом наблюдал, как Material Design от Google изменил наши представления о красоте и функциональности. Но сегодня я чувствую нечто похожее на землетрясение. Тот фундамент, на котором мы с вами строили карьеры (кнопки, меню, иконки, сетки), все это начинает ощутимо колебаться. Виной тому стремительный взлет чат-ботов и голосовых ассистентов.

Мы привыкли думать о интерфейсе как о чем-то визуальном, о «лице» продукта. Но что, если у продукта больше не будет «лица» в традиционном понимании? Что, если взаимодействие будет происходить через бестелесный голос или текстовый диалог? Это не утопия из фантастического романа, а наша ближайшая реальность. В этой статье я хочу вместе с вами поразмышлять о том, куда движется веб-дизайн в этом новом, стремительно наступающем мире и что нам, специалистам, делать, чтобы оставаться на гребне волны.

Графические интерфейсы уступают место диалоговым?

Посмотрите на любого современного ребенка. Он не изучает инструкцию к планшету; он просто говорит с ним. «Сири, включи мультик». «Алиса, какая сегодня погода?». Для нового поколения голос, это такой же естественный канал связи с технологиями, как для нас когда-то была компьютерная мышь. Это фундаментальный сдвиг парадигмы.

Традиционный графический интерфейс (GUI — Graphical User Interface) по своей сути иерархичен и ограничен. Мы, дизайнеры, вынуждены заранее предполагать, куда пользователь захочет «кликнуть» и упаковывать все возможные функции в меню, вкладки и кнопки. Пользователь вынужден играть по нашим правилам, изучая эту структуру. Диалоговый интерфейс (CUI — Conversational User Interface), будь то текстовый чат или голосовое общение, напротив, нелинеен и интуитивен. Пользователь сам задает направление, а система следует за ним.

Представьте, что вам нужно купить авиабилеты.

• По старой модели. Вы заходите на сайт-агрегатор, вводите города, даты, количество пассажиров, нажимаете «Найти», затем фильтруете результаты по цене, авиакомпании, времени вылета… Десятки кликов и взгляд, бегающий по экрану.

• По новой модели. Вы говорите: «Алиса, найди мне самые дешевые билеты из Москвы в Сочи на следующие выходные с вылетом после 18:00». И получаете голосовой или текстовый ответ с 2-3 оптимальными вариантами.

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

Профессия веб-дизайнера в 2030 году:

Когда я только начинал, от дизайнеров ждали, что он «сделает красиво». Потом стало важно «сделать удобно». Теперь наступает эра, когда нужно «сделать понятно» и «предусмотреть сценарий». Наша профессия не умрет, но трансформируется до неузнаваемости. Дизайнер будущего это не тот, кто рисует пиксели в Figma, а тот, кто проектирует человеко-машинное общение.

Давайте представим, как может измениться наша работа, когда CUI станут доминирующей формой взаимодействия.

1. Дизайнер сценариев и потоков диалога

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

Я недавно участвовал в создании чат-бота для службы поддержки интернет-магазина. Самым сложным был не подбор цветов или шрифтов для виджета чата, а проработка сценариев. Что, если пользователь в самом начале напишет не «Где мой заказ?», а «Я жду посылку уже 5 дней, что происходит?»? Бот должен понять интенцию (отслеживание заказа) и, что важно, отреагировать на эмоцию («понимаю, что вы ждете долго, давайте проверим»). Это абсолютно новая область проектирования? проектирование эмпатии.

Вот пример простого диалогового дерева для бота-заказа пиццы:

2. Дизайнер личности и голоса бота

Каждый бот или ассистент должен иметь свой характер. Будет ли он сухим и официальным, как банковский клерк или дружелюбным и ироничным, как приятель? Это и есть дизайн. Мы будем создавать «тоновые гайдлайны» вместо брендбуков. В них будет прописано:

• Лексикон. Какие слова можно использовать, а какие нет.

• Тон общения. Дружеский, профессиональный, мотивирующий.

• Реакции на ошибки. Как извиняться, если бот не понял пользователя.

• Степень эмоциональности. Использовать ли смайлики, восклицательные знаки, шутки.

Голосовой ассистент для детского образовательного приложения будет говорить одним голосом («Ура, ты справился!»), а ассистент в CRM-системе для бухгалтера совершенно другим («Запрос выполнен. Документы сохранены в архив»).

3. Специалист по гибридным интерфейсам

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

Умный дом. Вы можете сказать: «Алиса, стало жарко» и ассистент голосом подтвердит: «Окей, включаю кондиционер на 22 градуса». При этом на экране вашего смартфона или умного зеркала в прихожей появится визуальное подтверждение: иконка кондиционера, текущая температура и ползунок для ее тонкой настройки. Голос для быстрых команд, графический интерфейс для точного контроля и отображения сложных данных. Дизайнер будущего должен будет виртуозно совмещать оба канала.

Какие навыки придется прокачать сегодня, чтобы оставаться востребованным завтра

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

1. Глубокая UX-проработка и психология. Это краеугольный камень. Если раньше мы думали о «user flow» как о пути по экранам, то теперь это «поток диалога». Нужно понимать мотивацию пользователя, его ментальные модели, язык, большие точки. Навыки проведения пользовательских интервью и юзабилити-тестирования станут только ценнее, ведь тестировать придется не клики, а разговоры.

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

3. Основы логики и системного анализа. Чтобы проектировать сложные диалоговые деревна, нужно мыслить структурно и логически. Умение составлять блок-схемы, прописывать условия и варианты развития событий будет цениться на вес золота.

4. Базовое понимание AI и NLP (обработки естественного языка). Нам нужно понимать, как работает машинное обучение, что такое интенты и сущности. Это поможет нам говорить на одном языке с разработчиками и создавать более «умные» и предсказуемые интерфейсы.

5. Проектирование микро-взаимодействий для голоса. Мы привыкли к микро-анимациям в GUI. В голосовом интерфейсе их аналогом становятся паузы, интонация, тембр, звуковые сигналы. Какой короткий звук должен предварять ответ ассистента? Какой должна быть пауза, чтобы пользователь понял, что система его услышала и думает? Это новое поле для творчества.

Это эволюция, а не вымирание

Когда-то появление автомобиля заставило каретных мастеров переквалифицироваться в автомехаников и инженеров. Нечто подобное происходит и с нами. Веб-дизайн как дисциплина не исчезнет, но расширит свои границы до понятия «дизайн цифровых взаимодействий».

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

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

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