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

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

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

Вступление

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

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

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

Обратная связь в первую очередь!

Отделите цикл обратной связи от цикла выполнения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

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

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

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