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

PWA неизбежно повышают планку пользовательских ожиданий. Да, люди уже могли привыкнуть к «офлайн"-страницам вроде Chrome T-Rex. Но заберите у них браузер — сразу понадобится новый уровень функциональности. Многие нативные приложения — например, новостные — работают независимо от сети: предварительно загруженный контент можно просматривать. И PWA должны работать по тому же принципу, иначе ожидания пользователей оправдать не получится.

Каким должен быть пользовательский опыт в PWA? Вот таким:

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

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

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

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

PWA — это пока свежая технология, поэтому не стоит усложнять всё иконками с многогранными смыслами. Например, иконка дискеты, которая подразумевает «сохранение» может быть непонятна миллениалам, которые дискеты отродясь не видели. Иконка «гамбургер-меню» тоже может ввести пользователей в заблуждение.

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

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


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

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

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

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

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

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


Самая частая причина отказов на мобилках — «проблемы с вводом личных данных». Автозаполнение, веб-платежи и вход одним касанием упрощают этот процесс, сохраняя при этом информацию в безопасности.

Всплывающие уведомления — «пуши» увеличивают вовлеченность пользователей, но только если показаны вовремя. Уведомлениям о новостях, наличии или ещё каких-то параметрах, которые заинтересуют пользователя в будущем — не место на главной странице. Но в карточке товара, когда хочется знать, появится ли вещь в нужном размере, уведомление о подписке на обновления будет очень кстати.

Доступность — имеется в виду, что контент доступен для всех. Руководство по доступности веб-контента (WCAG) 2.0 — это набор рекомендаций, собранных экспертами, чтобы точно определить, что означает «доступность» и как ее обеспечить.

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

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

Как только вы запустили своё 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 — это именно прогрессивные веб-приложения, и знаете, как их создавать и реализовывать для вашего бизнеса. А также теперь вы понимаете, как сделать ваших пользователей счастливыми, вовлеченными и всегда онлайн.