Комментарии
Перевод электронной книги, написанной Google, Microsoft & Awwwards. Часть 2
Прогрессивные веб-приложения (PWA). Будущее мобильного интернета
Сибирикс
Прогрессивные веб-приложения (PWA). Будущее мобильного интернета
Перевод электронной книги, написанной Google,
Microsoft & Awwwards. Часть 2
В первой части онлайн-книги о PWA посмотрели, что вообще это такое и почему пользователям нравится прогрессивность таких приложений. Далее посмотрим, каким должен быть дизайн PWA и изучим реальные кейсы крупных компаний, уже внедривших технологию.
Вопросы дизайна PWA
Дизайн, превосходящий ожидания пользователей
PWA неизбежно повышают планку пользовательских ожиданий. Да, люди уже могли привыкнуть к «офлайн"-страницам вроде Chrome T-Rex. Но заберите у них браузер — сразу понадобится новый уровень функциональности. Многие нативные приложения — например, новостные — работают независимо от сети: предварительно загруженный контент можно просматривать. И PWA должны работать по тому же принципу, иначе ожидания пользователей оправдать не получится.

Каким должен быть пользовательский опыт в PWA? Вот таким:
Адаптивность
PWA работает на всех устройствах: мобилках, планшетах и компьютерах.

Продуманный UI
Есть макеты для браузера и без него, чтобы учесть все возможные затруднения пользователя.
Учёт разных состояний
Онлайн, офлайн, нестабильная сеть, загрузка контента и невозможность загрузки контента.
Разные значки приложения
Под каждую ОС свой.
Запрос прав на действия
PWA вовремя предлагает установить себя на домашний экран: если предложит сразу при загрузке — это покажется наглостью, если слишком позже — пользователю будет уже всё равно.
Запрос геолокации
Местоположение запрашивается НЕ вне контекста, чтобы пользователь понимал, зачем.
Дизайн под разные состояния

На первый взгляд может показаться, что PWA существуют либо автономно, либо онлайн. Реальность же сложнее: автономный режим может длиться всего несколько секунд, и может существовать переходный период, известный как Li-Fi, когда устройство считает, что сеть есть, но это сетевые лаги.

Есть несколько причин, по которым сеть может выйти из строя, включая:

  • Плохое покрытие сети.
  • Отключения питания или плохие погодные условия.
  • «Мертвые зоны», где здания или железнодорожные туннели блокируют сетевое соединение.
  • Ограниченные пакеты интернета (например, в аэропорту или в отеле).
  • Культурные ограничения, которые накладывают рамки или требуют отсутствия доступа в интернет в определенное время или дни.
Заполняйте паузы
Согласно неофициальной версии, аэропорт Хьюстона нашел оригинальный способ справиться с длительным временем ожидания при получении багажа. Для решения проблемы они поменяли ворота для прибывающих пассажиров на проблемных рейсах. Пассажирам приходилось идти дальше, но они тратили меньше времени на ожидание, и количество жалоб уменьшилось.

Точно так же состояние «оффлайн» требует не только сообщений об ошибках или прогресс-баров. Опыт взаимодействия зависит от того, насколько грамотно такие паузы в несколько секунд будут преподнесены. Например, trivago, сайт сравнения цен, предлагает сыграть в игру, если сеть выходит из строя — 67% пользователей, чье интернет-соединение прервалось, никуда не уходят.

«Скелетные экраны загрузки» (пустые версии страниц, в которых постепенно загружается информация) — это отличный способ показать пользователю, что что-то происходит, и создать иллюзию, будто страницы загружаются быстрее. Как только контент становится доступным, его должны видеть: Youtube всегда загружает видео в первую очередь, а все остальное следом.

Слева — работа приложения Триваго в офлайн, справа — запускается игра, если пользователь пытается перейти к разделам, требующим доступа в интернет
Дмитрий
аккаунт-менеджер
Умное кэширование — другой плюс PWA. Пример для интернет-магазинов: выбираем часто посещаемые разделы (ключевые категории товаров), берем первые две страницы выдачи и кэшируем эти данные (иногда можно вместе с фото). Перешли в какой-то раздел на первую страницу выдачи, вторая у нас уже в кэше, а третью начинаем загружать. Всё это делается для моментальной отдачи страницы пользователю. Но и тут не всё однозначно, особенно когда у нас номенклатура, остатки и цены зависят от города, типа пользователя или склада. Придётся повозиться, определить все важные критерии и отслеживать возможное их изменение — и при изменении сбрасывать весь кэш и грузить данные заново.
Информируйте пользователя об изменениях
Уведомления могут понадобиться в разных случаях: изменения в сетевом подключении, обновления сайта или контента, изменения цен в интернет-магазине. Посмотрите на примеры ниже:
Слева — Chrome уведомляет пользователя о необходимости обновления, справа — Material Money информирует пользователя о необходимости обновить курсы валют
Используйте метафоры, которые передают смысл
PWA — это пока свежая технология, поэтому не стоит усложнять всё иконками с многогранными смыслами. Например, иконка дискеты, которая подразумевает «сохранение» может быть непонятна миллениалам, которые дискеты отродясь не видели. Иконка «гамбургер-меню» тоже может ввести пользователей в заблуждение.

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


Рекомендации к UX в PWA:

Меньше — больше — В интернете люди не вчитываются в текст от начала и до конца, а «сканируют» его. Если у элемента на сайте низкий рейтинг кликов (CTR) — значит, пользователи не понимают, зачем он там вообще нужен. Расставьте приоритеты для кнопок Call-To-Action (CTA) и уберите всё ненужное. Заодно уменьшится вес страницы. И полегче с автоматическими слайдерами.

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

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

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

Меньше препятствий — плавная работа, комфортное взаимодействие: у пользователей не так много терпения, чтобы заполнять гигантские формы и оформлять заказ за 100 шагов.


Самая частая причина отказов на мобилках — «проблемы с вводом личных данных». Автозаполнение, веб-платежи и вход одним касанием упрощают этот процесс, сохраняя при этом информацию в безопасности.
Всплывающие уведомления — «пуши» увеличивают вовлеченность пользователей, но только если показаны вовремя. Уведомлениям о новостях, наличии или ещё каких-то параметрах, которые заинтересуют пользователя в будущем не место на главной странице. Но в карточке товара, когда хочется знать, появится ли вещь в нужном размере, уведомление о подписке на обновления будет очень кстати.
Доступность — имеется в виду, что контент доступен для всех. Руководство по доступности веб-контента (WCAG) 2.0 — это набор рекомендаций, собранных экспертами, чтобы точно определить, что означает «доступность» и как ее обеспечить.

Стандарт WCAG организован по четырем принципам, часто называемым POUR:

  • Perceivable (возможность воспринимать) — пользователи воспринимают контент. Если контент можно только увидеть, то не все пользователи будут способны его воспринять (слабовидящие, например, не смогут).
  • Operable (возможность использовать) — пользователи могут легко перемещаться по контенту. Например, положение «при наведении» невозможно использовать без тачскрина или мыши.
  • Understandable (возможность понять) — пользователи понимают контент, а интерфейс последовательный и не вводит в заблуждение.
  • Robust (выносливость) — контент может использоваться в разных браузерах.
После запуска PWA
Как только вы запустили своё PWA, важно отслеживать вовлеченность пользователей и улучшать UX по мере необходимости. И вот что может в этом помочь:

Производительность
После запуска PWA часто можно увидеть улучшения в скорости сайта. Мониторить можно параметры First Contentful Paint (FCP), Time to Interactive (TTI) и Speed Index с помощью сервисов вроде Lighthouse, Chrome User Experience Report и WebPageTest.org. Тестируйте работу PWA при разной доступности сети и на разных аппаратных устройствах.

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

Вовлеченность пользователей
Убедитесь, что функции вроде «Добавить на главный экран» и пуш-уведомления улучшают взаимодействие с пользователем. Чтобы проанализировать эффективность добавления на главный экран, оцените показатели времени на сайте и повторные посещения (это поможет сравнить тех, кто заходит в приложение через браузер, и тех, кто с главного экрана). Для каждого из пуш-уведомлений отслеживайте CTR и смотрите время на сайте и повторные посещения (это даст информацию по тем, кто получил уведомления, а кто нет). Любые показатели вовлеченности должны давать позитивную динамику.

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

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