Проектирование с учетом задержки: когда скорость ИИ становится частью пользовательского опыта.

Задержка ИИ — самая важная проблема UX в продуктах на основе ИИ, и почти никто не рассматривает её как часть работы над дизайном. Команды, создающие лучшие решения на основе ИИ, перестали ждать более быстрых моделей и начали проектировать с учётом задержки.

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

Задержка ИИ — это проблема дизайна, а не инженерии

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

Пользователь не измеряет миллисекунды. Пользователь измеряет, происходит ли что-то. Четыре секунды потокового текста читаются как быстро. 1,5 секунды задержки модального окна читаются как ошибка.

Математика воспринимаемой скорости

Четырехсекундный ответ, передаваемый потоком, читается как быстро. Ответ за 1,5 секунды, блокирующий чтение, воспринимается как медленный. Воспринимаемая скорость зависит от плотности обратной связи, а не от прошедшего времени. Этот единственный факт переопределяет каждое решение по задержке в продукте на основе ИИ.

Важны такие показатели, как время до первого токена и количество токенов в секунду, а не общее время ответа. Время до первого токена менее 500 миллисекунд ощущается мгновенно. 30-80 токенов в секунду читаются со скоростью человека. Пятисекционный бюджет терпим, когда потоковое чтение начинается с первого токена, и невыгоден, когда происходит блокировка. При проектировании с учетом этих показателей более медленная модель может ощущаться быстрее, чем у конкурентов.

Пять работающих шаблонов

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

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

Потоковая передача текста превращает ожидание в ответ

Первый шаблон — это пошаговая отрисовка токенов. Пользователь читает по мере того, как модель записывает текст, и ожидание исчезает в выводе. Время до первого токена становится единственным важным показателем. Как только первый токен получен, пользователь читает, а не ждет.

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

Оптимистичный пользовательский интерфейс фиксирует действие до того, как модель вернет результат

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

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

Постепенная фиксация результатов включает в себя скелет, черновик и окончательный вариант

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

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

Поверхности рассуждений преобразуют время ожидания в доверие

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

В режиме агента Cursor это реализовано с помощью поверхности плана. Пользователь видит предполагаемые шаги до выполнения первой команды. ChatGPT отображает траектории рассуждений для моделей мышления с помощью сворачиваемых сводок мыслей, которые читаются как структурированный текст. Пятнадцать секунд видимых рассуждений лучше, чем три секунды «черного ящика».

Фоновые агенты позволяют пользователям продолжать работу, пока работает модель

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

Фоновые агенты Cursor — это самая чистая версия из всех, что поставляются. Пользователь запускает длительную задачу и продолжает редактировать на переднем плане, пока агент работает в боковой панели. GitHub Агент Copilot делает то же самое с задачами в форме запросов на слияние. Этот шаблон работает только в том случае, если у пользователя есть другие дела, а в любом реальном рабочем процессе они всегда есть.

Четыре шаблона, которые не работают

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

Чистые индикаторы загрузки скрывают все, что нужно пользователю

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

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

Циклы текста, заставляющие думать, — это шум без информации

Вращающийся цикл текста, заставляющий думать, хуже, чем индикатор загрузки. Он подразумевает прогресс, которого нет. Пользователи за две сессии учатся игнорировать его, что сводит на нет возможность получения реального статуса от поверхности.

Замените цикл реальным статусом. Поиск в трёх источниках. Чтение файла. Подготовка ответа. Строка состояния — это информация. Цикл — это шум, притворяющийся информацией.

Модальные диалоги, блокирующие ожидание, превращают его в стену

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

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

Отсутствие сигнала прогресса учит пользователя покидать страницу

Поверхность ИИ без сигнала прогресса учит пользователя предполагать, что запрос не выполнен. Он нажимает кнопку «Назад» до получения ответа. В худшем случае он обновляет страницу и теряет запрос.

Каждая поверхность ИИ, работающая более 500 миллисекунд, нуждается в сигнале прогресса. Потоковая передача текста — лучший вариант. Следующий по важности — скелет. Трассировка логики работает для более длительных ожиданий. Строка состояния работает для всего остального. Сигнал должен существовать.

Пять реальных примеров анализа продукта

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

Claude.ai, потоковая обработка как весь процесс взаимодействия

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

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

Курсор, цикл планирования и выполнения

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

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

Linear ИИ, встроенное прогрессивное раскрытие информации

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

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

Хотите продукт на основе ИИ, который кажется быстрым, даже когда модель работает медленно? Нанимайте Brainy. UXBrainy выпускает аудит задержек и редизайн пользовательского интерфейса потоковой передачи, AppBrainy — полноценную разработку продуктов на основе ИИ, а ClaudeBrainy — слой подсказок и навыков, который делает потоковую передачу дешевой. В сочетании с Шаблоны проектирования пользовательского интерфейса для агентов ИИ слой агентов будет выпущен на том же уровне качества.

Granola, каскад от записи до резюме

Granola скрывает минуты работы над моделью за четырехэтапным каскадом. Запись сначала отображается в виде необработанного волнового сигнала. Стенограмма — в виде прокручиваемого текста. Черновые заметки — в виде маркированного списка. Окончательное резюме — в виде отполированного текста. Каждый этап полезен до того, как будет готов следующий.

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

Perplexity, потоковая передача источников в реальном времени

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

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

Контрольный список задержки перед выпуском

Проверьте это на любой платформе ИИ перед ее выпуском. Двенадцать проверок, все измеримые.

1. Время до получения первого токена менее 500 миллисекунд в активной сессии.

2. Потоковая передача поддерживает скорость от 30 до 80 токенов в секунду на целевой модели.

3. Каждое ожидание, превышающее 500 миллисекунд, сопровождается сигналом прогресса.

4. В интерфейсе ИИ нигде нет чистого индикатора загрузки.

5. В интерфейсе ИИ нигде нет вращающегося текстового цикла с функцией «Размышление».

6. Во время работы модели не блокируются модальные диалоги.

7. Оптимистичный пользовательский интерфейс фиксирует видимое действие в течение 100 миллисекунд после получения намерения.

8. Скелеты отображаются до контента для любого ответа, длительностью более двух секунд.

9. Трассировки рассуждений отображаются для любой задачи, длительностью более десяти секунд.

10. Длительно работающие агенты работают в боковой панели, а не на переднем плане.

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

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

Список находится в шаблоне проверки дизайна и ускоряется с каждым запуском.

Часто задаваемые вопросы

Какой показатель задержки наиболее важен в продукте ИИ?

Время до получения первого токена. Общее время ответа менее важно, чем то, сколько времени пользователь ждет, прежде чем получит что-то для чтения. Время менее 500 миллисекунд воспринимается как мгновенное.

Всегда ли потоковая обработка лучше, чем блокировка?

Для текста — да. Менее 500 миллисекунд блокировка подходит, потому что ожидание незаметно. Для чего-либо более длительного потоковая обработка превосходит блокировку по всем показателям воспринимаемой скорости.

Когда следует использовать оптимистичный интерфейс, а когда потоковую обработку?

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

Как показать прогресс агента, работающего несколько минут?

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

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

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

Переход к проектированию с учетом задержки ИИ открывает новые возможности

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

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

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

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