December 15, 2022

Что такое оптимистичный пользовательский интерфейс?

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

Первый способ

В старые добрые времена они функционировали по следующей схеме. Пользователь нажимал на кнопку «submit» («отправить»), браузер посылал запрос (обычно post) на сервер, сервер обрабатывал запрос, а затем возвращал новую HTML-страницу в качестве ответа.

Единственным индикатором того, что что-то происходит, был лоадер рядом с адресной строкой браузера.

Второй способ

Затем люди изобрели AJAX*, который позволил обновлять только часть интерфейса. Это радикально улучшило опыт взаимодействия с пользователями. Теперь стало возможным показывать лоадеры, обновлять часть списков, таблиц и прочее.

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

Это здорово, но осталась одна небольшая проблема: пользователи не любят ждать.

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

Как это работает в реальной жизни?

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

Но могут ли они не доставить заказ? Технически да. Всё может случиться.

Теперь вернемся к UI/UX.

Во-первых, давайте будем исходить из того, что любое ваше действие может быть важным или неважным.

Если вы берёте кредит и отправляете заявку, нажав кнопку «отправить», вам важно знать результат: одобрили вам кредит или нет.

Если вы отмечаете в списке дел одно из них как выполненное, это не имеет для вас настолько большого значения, как одобрение кредита.

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

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

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

Даже если это неправда. Но если в 99,99% случаев такие запросы завершаются успешно, вы можете рассмотреть возможность применения такого подхода.

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

Что делать, если запрос не прошёл?

Это хороший вопрос. В этом случае предусмотрите самый очевидный и простой способ — показ уведомления с сообщением об ошибке или что-то похожее и возврат к предыдущему состоянию приложения (например, возврат задачи в состояние «не выполнено»).

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

Вам всё равно придётся обработать запрос, даже если вы не применяете оптимистичный подход и ждёте ответа, верно?

P.S. У меня есть небольшое видео на эту тему, возможно, вы найдёте его полезным

Перевод статьи "What is Optimistic UI?" из блога user-interface.io