Оптимистичные UI паттерны для улучшения восприятия пользователями

Аудио перевод статьи
0:00
0:00
Аудио перевод статьи
0:00
0:00
·

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

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

Вступление

Под производительностью веб-сайта часто подразумевается:

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

Однако пользователи не воспринимают миллисекунды, им, как правило, все равно, используете ли вы HTTP/1.1 или HTTP/2, JPEG или WebP. Оптимизация веб-производительности — это, на самом деле, оптимизация скорости пользовательского опыта, Сергей Чернышев даже считает, что нам следует провести ребрендинг веб-производительности на UXSpeed!

Если веб-производительность — это не только технология, то она должна быть связана с дизайном пользовательского опыта: организация веб-опыта для создания удовольствия пользователей. Существует ряд приемов, с помощью которых можно повысить скорость загрузки UX, а именно:

Мне нравится использовать последний прием — оптимистичные UI-паттерны пользовательского интерфейса, поскольку они часто могут иметь большую окупаемость инвестиций (сильное влияние на пользовательский опыт при относительно небольших усилиях разработчика). Эти UI-паттерны основаны на принципе “предполагать лучшее, но готовиться к худшему”, и оптимизируют цикл обратной связи пользовательского интерфейса, чтобы улучшить взаимодействие с пользователем.

1. Обратная связь — в первую очередь!
Отделите цикл обратной связи от цикла выполнения

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

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

Оптимистичные UI-паттерны пользовательского интерфейса позволяют снизить зависимость обратной связи пользователей от сети.

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

2. Оптимистичные UI-корзины

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

Компания Allbirds постаралась устранить эту задержку, оптимистично предложив поп-ап (всплывающее окно) с мини-корзиной сразу после добавления товара, даже если вызов API еще не попал на сервер. Данный способ является эффективным, поскольку он действует следующим образом: 

  • предоставляет пользователю мгновенную обратную связь о том, что его взаимодействие было зарегистрировано;
  • небольшая анимация выскальзывания мини-корзины на экран выигрывает у пользователя некоторое время активности, чтобы процесс взаимодействия ощущался еще быстрее.

https://res.cloudinary.com/simonhearne/video/upload/h_600,q_auto/v1612776931/videos/allbirds-mobile.webm

Allbirds оптимистично загружает поп-ап мини-корзины при нажатии кнопки “добавить в корзину”

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

Данный способ применим к любым ситуациям, когда действие пользователя вызывает изменение пользовательского интерфейса на сервере, например:

  • создание учетной записи;
  • ввод данных о доставке;
  • предоставление информации для страхового предложения.

3. Оптимистичные элементарные действия

Вы, наверное, заметили, что пользовательский интерфейс Twitter кажется удивительно плавным. Одна из особенностей, которая способствует этому ощущению, — кнопка "Избранное".

https://res.cloudinary.com/simonhearne/video/upload/w_500,q_auto/v1612776931/videos/twttr_favourite.webm

Кнопка "Избранное" в Twitter дает мгновенную обратную связь

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

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

4. Контекстные кнопки

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

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

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

щелкни меня 👇

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

5. Фильтры поиска

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

https://res.cloudinary.com/simonhearne/video/upload/w_auto,q_auto/v1612776931/videos/socks.webm

Allbirds имеет промежуточное состояние при ожидании отфильтрованных результатов

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

6. Переходы между страницами

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

Даже если все блокирующие CSS и JavaScript доступны в кэше, время, необходимое для загрузки и анализа HTML-документа, а затем для получения кэшированных статических ресурсов и визуализации страницы, может занять более секунды.

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

  • Нажал ли я на эту ссылку?
  • Сайт сломан?
  • Может стоит нажать еще раз?

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

https://res.cloudinary.com/simonhearne/video/upload/w_320,q_auto/v1612776931/videos/jimmychoo-spin.webm

Сайт Джимми Чу анимирует переход между страницами

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

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

7. Превентивная загрузка

Пользователи постоянно подсказывают вам, что они собираются делать дальше, когда наводят курсор на элементы и касаются их. Присоединяясь к событиям наведения указателя мыши (mouseover) и сенсорного запуска (touchstart) на ссылках, мы можем реагировать на эти подсказки и использовать их, чтобы выиграть время. На моей домашней странице я вставляю <link rel = 'prefetch'> в документ, если вы наводите курсор или касаетесь одной из карточек статей, с атрибутом href, установленным  на целевую запись блога. Проще говоря, браузер получает команду начать выборку документа, поскольку к моменту завершения щелчка или касания пользователя он должен быть уже загружен. Это означает, что страница может быть загружена из кэша практически мгновенно!

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

Проект instant.page с открытым исходным кодом является обобщенным применением этого принципа, хотя его довольно легко построить самостоятельно с помощью нескольких строк JavaScript.

Заключение

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

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

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

Источник:
simonhearne.com
·
comments powered by HyperComments