ru ua en
c l o c k
Розширення можливостей бізнесу за допомогою PWA
24 April 2020
блог

Розширення можливостей бізнесу за допомогою PWA

У цій статті ми детально розглянемо функціонал Progressive Web Apps (PWA) і то, як вони об'єднують доступ в Інтернет з інтеграцією пристроїв з встановленим програмним забезпеченням.

Прогресивні веб-додатки - сучасний інструмент взаємодії

Мережа буквально всюди: на годиннику, смартфонах, планшетах, комп'ютерах, в автомобілях і телевізорах. Завдяки сучасним браузерам, програмне забезпечення для відображення веб-контенту на всіх цих пристроях може бути абсолютно однаковим.

Хоча браузери залишаються головним способом взаємодії для користувачів, кожен пристрій тепер має свій власний магазин додатків. На Android, Chrome OS, Mac або Windows в магазині можна встановити програмне забезпечення, призначене для кожного пристрою.

Суть встановленого програмного забезпечення полягає в тому, що програмне забезпечення буде інтегруватися з пристроєм так, як цього очікує користувач. Інтеграція встановленого програмного забезпечення дозволяє знову запускати програмне забезпечення, наприклад, за допомогою значка на головному екрані телефону або в меню «Пуск». Це також означає, що користувач може перемикатися між програмним забезпеченням за допомогою вбудованого в пристрій перемикача активності, такого як «alt-tab» в Windows, або перемикача додатків на телефоні.

Прогресивні веб-додатки Clock Creative Lab

Прогресивні веб-додатки (PWA) об'єднують доступ в Інтернет з інтеграцією пристроїв з встановленим програмним забезпеченням. PWA можна встановити на будь-якому девайсе з сучасним веб-браузером, як на мобільному пристрої, так і на комп'ютері, а також в таких магазинах, як Google Play.

Прикладами прогресивних веб-додатків є Google Music на YouTube і Google Earth, а також Twitter, Spotify, OYO і Etam.

У цій статті ми детально розповімо про можливості Progressive Web Apps, стратегіях продуктів для розширення PWA, рекламних шаблонах для управління PWA, кращих прикладах UX для розробки встановлених додатків, які надійно працюють в автономному режимі, а також покажемо тематичні дослідження компаній, які створили чудові PWA .

Установлювані прогресивні веб-додатки

Прогресивні можливості мережі Інтернет:

  • Найширше охоплення будь-якої платформи, що включає всі види пристроїв і розміри екранів
  • Посилання, які забезпечують індексацію пошуку для органічного трафіку, обміну контентом і послугами між користувачами

Ці переваги зробили Інтернет ультрасучасною платформою навіть на робочому столі. Наприклад, такі додатки як Google G Suite, Microsoft Office 365, Trello, Slack, Discord, InVision і Lucidchart, давно використовуються в якості десктопних веб-додатків.

Однак на мобільних пристроях, магазини додатків часто розглядаються як платформа додатків для користувачів і розробників. Чому? З точки зору розробника, багато можливостей, які вимагають глибокої інтеграції в базову ОС, раніше були недоступні в мережі.

В даний час веб відпочатку підтримує практично будь-які можливості, які можуть знадобитися, включаючи:

  • Медіа і потоковий доступ до мультимедійних файлів, фото і відео з будь-якої камери на пристрої
  • Виявлення форми, включаючи штрих-код і розпізнавання особи
  • Спливаюче повідомлення
  • Біометрична аутентифікація, включаючи обличчя і відбитки пальців
  • Bluetooth и NFC
  • Власний доступ до контактів
  • Власний доступ до файлової системи
  • Доступ до необробленого буферу обміну
  • Переміщення і орієнтація пристрою, вібрація, орієнтація екрану (включаючи блокування)

А також, багато іншого.

Переваги використання прогресивних веб-додатків Clock Creative Lab

Переваги використання прогресивних веб-додатків

Прогресивні веб-додатки поєднують в собі доступність Інтернету з інтеграцією пристроїв. Багато підприємств уже почали використовувати переваги PWA, щоб забезпечити зручність роботи користувачів. наприклад:

  • Таксі-додатки, такі як Ola Cabs, Lyft і Uber, використовують веб-push-повідомлення, щоб попередити пасажирів про статус поїздки
  • Рітейлери і банки використовують досвід перегляду в автономному режимі для тих моментів, коли немає доступу до Wi-Fi
  • Служби доставки їжі, такі як Delivery Club, використовують PWA через простоту обслуговування і платформ
  • PWA можуть бути використані негайно. Вміст з PWA може бути передано по URL-адресою, і особа, яка отримує URL-адресу, може отримати доступ до вмісту, незалежно від того, встановлено у нього PWA чи ні

Користувач може встановити PWA і отримати інтеграцію пристрою подібну звичайному такі програми, як:

  • Доступно в звичних режимах запуску, таких як домашній екран і панель додатків
  • Автономний досвід, окремо від браузера
  • Власні сервіси пристроїв, такі як перемикач додатків і налаштування
  • На додаток до установки з браузера, PWA також можна встановити з магазинів додатків, включаючи Google Play, Samsung Galaxy Store і магазин Microsoft в Windows 10

Далі буде надана більш детальна інформація про технічні вимоги та шаблони для установки. А тут, короткий огляд установки з браузера на мобільних, ПК і з магазинів додатків.

Установка із браузера

Станом на початок 2020 року установка прогресивних веб-додатків підтримується всіма основними браузерами, хоча процес установки різниться.

Установка на смартфон

  • Chrome & Edge на Android пропонує повний контроль над процесом установки (можливість «Додати на головний екран» або A2HS)
  • Користувачі Firefox, Samsung Internet і Opera можуть запустити установку, натиснувши значок в адресному рядку
  • Safari на iOS вимагає, щоб користувачі вручну встановлювали PWA з меню дій

Установка на робочий стіл

Десктопні PWA можуть бути встановлені з Chrome і Edge в усіх операційних системах, включаючи Chrome OS, Linux, Mac і Windows.

Користувачеві лише необхідно натиснути значок установки в адресному рядку. Після установки десктопні PWA можна запускати з панелі додатків в автономному режимі.

Установка з магазинів додатків

Google Play магазин. Дії Trusted Web Activity (TWA) дозволяють публікувати прогресивні веб-додатки в Google Play Store. Це дозволяє користувачам знаходити Progressive Web Apps разом з будь-яким іншим додатком у списку.

Магазин Samsung Galaxy. З початку 2020 року Samsung використовує наступний процес: Введіть URL-адресу за адресою pwasupport@samsung.com, і Samsung відповість, щоб почати процес додавання PWA в Galaxy Store, включаючи всі необхідні ліцензійні угоди.

Стратегії розробки прогресивних веб-додатків

Успішний інтернет-магазин модних товарів ABOUT YOU створив прогресивний веб-додаток і запропонував встановити його з браузера, на додаток до їх власним додатком, яке є в магазині. Вони виявили, що користувачі, які встановили PWA, «генерують продажі в п'ять разів вище, ніж середній мобільний користувач».
Прогресивні веб-додатки можуть надати відмінний досвід користувачам, які ніколи не встановлять нативний додаток. Встановлені PWA зазвичай важать менше 1 МБ, що набагато менше, ніж середній розмір звичайного додатку.
Ці функції особливо важливі для компаній, що прагнуть до зростання на ринках, що розвиваються, де важлива швидка передача даних, обсяг пам'яті обмежений, а пристрої можуть споживати багато енергії.

Clock Creative Lab pwa

Місце для зберігання все ще має значення: чим більше у нас є, тим більше ми використовуємо. На цих ринках PWA може бути доповненням до нативному додатком, особливо для користувачів, які перейшли з нативного додатки для звільнення сховища.

Пам'ятайте, що навіть на розвинених ринках велика кількість людей користується пристроями середнього рівня. PWA може допомогти вам зв'язатися з кожним економічно ефективним способом.

Наступні 4 стратегії показують, як компанії з різними потребами можуть використовувати PWA, щоб запропонувати найкращий можливий досвід найбільшій кількості користувачів.

Стратегія 1: All-in в мережі

Ідіть ва-банк і покладайтеся виключно на прогресивний веб-додаток, щоб забезпечити відмінну взаємодію для всіх користувачів з мінімальними витратами. Завдяки єдиній кодової базі і дизайну ресурси можуть бути спрямовані на створення нових функцій і можливостей.

Для підприємств, які:

  • Не мають власного додатка
  • Мали поганий досвід роботи з додатками
  • Або мають власний додаток, яке в значній мірі спирається на веб-контент

Розробка:

Опублікуйте PWA в Play, використовуючи дії Trusted Web. Це може бути найбільш економічно ефективним рішенням для великих інтернет-компаній, що бажають вийти в Play Store.

Просування:

Браузер: просувати установку PWA всім користувачам.
Магазин: публікація PWA в Google Play з використанням TWA.

Плюси:

Може замінити застарілий додаток Android, який ледь отримує будь-які оновлення або має поганий користувальницький інтерфейс. Порада. Особливо легко замінити застарілий гібриднтй додаток на PWA.

Консолідація всієї мобільної розробки в єдиній кодової базі.

Мінуси:

Не підходить, якщо потрібні функції, недоступні в Інтернеті.

Стратегія 2: Доповнити додаток сумісним PWA - 'Lite App'

PWA Lite App

Терміни «Lite» і «Go» були придумані для того, щоб відрізняти більш легке, швидке, але іноді менш спеціалізований веб-додаток від нативного додатку, для тих компаній, які хочуть запропонувати і те, і інше.

Для компаній, у яких вже є відмінний нативний додаток, прогресивний веб-додаток з фірмовим найменуванням «Lite» може допомогти користувачам, які ніколи не встановлять нативний додаток, наприклад, на пристрої середнього рівня.

Розробка:

Створіть прогресивний веб-додаток. Опублікуйте PWA в магазині, використовуючи дії Trusted Web. Використовуйте назву «Lite», щоб відрізняти його від нативного додатку.

Просування:

Браузер: просувайте установку власного додатка для користувачів. Якщо вони відмовляються, просувайте PWA, використовуючи пропозицію «Lite».
Магазин: опублікуйте PWA в Google Play за допомогою TWA і використовуйте спеціальне найменування, щоб користувачі могли відрізнити його від основного додатку і вибирати бажаний ними інтерфейс.

Плюси:

Ідеально підходить для компаній, у яких є відмінний, але «важкий» нативний додаток для Android, і які прагнуть запропонувати кращий досвід для користувачів пристроїв середнього і низького рівня і / або користувачів в зонах з поганим інтернет-з'єднанням.

Мінуси:

Потрібно управляти двома списками в магазині і використовувати аналітику, щоб вдумливо сегментувати користувачів для просування PWA або Native App з браузера.

Стратегія 3: Окремі програми для окремих завдань

Для багатьох підприємств прогресивний веб-додаток може надати основне охоплення і рівень конверсії, в той час як нативний додаток може пропонувати додаткові послуги, призначені тільки для конкретних випадків використання, і пропонувати спеціалізовані функціональні можливості.

Наприклад:

Рітейлер може запропонувати основний магазин в якості PWA і окремий додаток для журналу / блогу.
Страхова компанія може запропонувати основну інформацію і генерацію потенційних клієнтів в PWA, а також окремий додаток для чату / допоміжного досвіду / обслуговування клієнтів.

Розробка:

Створіть прогресивний веб-додаток. Публікація PWA в магазині з використанням довірених веб-операцій. Також створення і підтримка додаткових додатків.

Просування:

Браузер: просувайте PWA всім користувачам. Пропонуйте спеціалізований власний додаток тільки тим користувачам, які вже виконали певні завдання по конверсії тригера і отримають вигоду від додаткових функцій.
Магазин: мати окремі записи магазину для PWA, опубліковані з використанням TWA і спеціалізованого нативного додатку, ясно вказавши в списках, що є в кожному додатку.

Плюси:

Найбільш підходить для підприємств, які мають прагнуть до прямої конверсії і вимагають власного додатка тільки для нішевих послуг.

Мінуси:

Не підходить для підприємств, які не мають додаткових послуг.

Стратегія 4: PWA як інструмент збільшення бази користувачів

PWA як інструмент збільшення користувальницької бази

Для компаній, які можуть запропонувати зіставні можливості для нативних додатків і прогресивних веб-додатків, один із способів збільшення загальної бази користувачів полягає в тому, щоб усунути як можна більше проблем при установці.

Найкращий варіант для браузера це установка PWA, так як для цього потрібно всього 2 натискання, і користувачам взагалі не потрібно виходити з браузера. З магазину, що має тільки один список, користувачеві не потрібно вибирати між різними версіями.

Розробка:

Створення прогресивного веб-додатку
Збірка нативних додатків

Просування:

Браузер: просувайте PWA всім користувачам, крім тих, у кого вже встановлено нативний додаток. Порада. Використовуйте API getInstalledRelatedApps, щоб просувати установку вашого PWA тільки тим користувачам, у яких не встановлено власний додаток.

Плюси:

Ідеально для спрощення процесу установки, оскільки установка PWA коротка і не вимагає натиснення кнопки миші з браузера, а в магазині тільки з одним списком користувачам не потрібно вибирати між пропозиціями.

Мінуси:

Переміщення користувачів PWA в власний додаток може бути важко, якщо між продуктами мало відмінностей.

Користувачі на пристроях середнього і нижнього рівня, можуть не встановити додаток через проблеми з пам'яттю чи взаємодії між різними пристроями.

Потрібно підтримувати як PWA, так і власні програми, тоді як різниця в досвіді невелика.

Вимоги до установки PWA

Вимоги до установки прогресивного веб-додатки

Основні вимоги для установки Progressive Web App: обслуговування по HTTPS, Service Worker і маніфест веб-додатки.

HTTPS:

Всі сучасні сайти повинні використовувати HTTP, незалежно від того, чи є вони PWA чи ні.

Service Worker:

Service Worker - це технологія, що лежить в основі всіх функціональних можливостей PWA, і вони можуть виконувати безліч важливих завдань, включаючи кешування і надання автономних можливостей. Хоча вимоги до браузеру розрізняються, настійно рекомендується мати Service Worker.

Маніфест веб-додатку:

Файл Manifest - це файл JSON, який інформує про те, як працює PWA при його установці. Він повинен бути пов'язаний з кожною сторінкою, щоб користувач міг натиснути для установки в будь-який час. Майже всі сучасні браузери мають певний рівень підтримки цієї можливості.

Манифест должен включать:

Коротке ім'я і ім'я: коротке ім'я використовується на домашньому екрані користувача, в панелі запуску або в інших місцях, де простір може бути обмежена. Ім'я використовується в інва установки програми.
Значки: використовуються в таких місцях, як домашній екран, панель запуску додатків, перемикач додатків, заставка і т. Д. Для Chrome потрібні значки розміром 192x192px і 512x512px і рекомендуються додаткові розміри, в тому числі 270x270 і 180x180. Інші розміри не обов'язкові для тих, хто хоче іконки з ідеальним пикселем.
Start_url: це те місце, де PWA повинен запускатися під час запуску з домашнього екрану, і запобігає запуск програми на тій сторінці, на якій був користувач при установці.
Дисплей: рекомендується використовувати «автономний» як режим відображення. Це дозволить PWA відкриватися окремо в браузері і створювати зовнішній вигляд нативного додатку.

Apple Touch Link

Коли користувачі iOS Safari встановлюють додаток, значок що відображається називається Apple Touch. Увімкніть тег в сторінки, щоб вказати, який значок повинен використовувати PWA. Якщо це не включено, iOS генерує значок, роблячи знімок екрана з вмістом сторінки.
Значки iOS повинні бути: 180x180 пікселів або 192x192 пікселів, а фон значка не повинен бути прозорим.

Перевірки

Використовуйте Lighthouse для запуску аудиту та перевірки того, чого не вистачає, щоб включити можливість установки.

Публікація з використанням довірених веб-ресурсів

Використовуючи Trusted Web Activity (TWA), Progressive Web Apps можна інтегрувати з додатком Android і публікувати в Play Store. TWA повинні відповідати критеріям установки Lighthouse PWA і завантажуватися швидко, з показником продуктивності Lighthouse 80 або вище. Вони також повинні дотримуватися політики Play store, включаючи правила для платежів, покупок в додатку та інших цифрових товарів.

Дізнайтеся більше про те, як опублікувати PWA в Play з використанням TWA, і ознайомтеся з такими інструментами, як Llama pack і PWA Builder, які допомагають спростити цей процес.

Шаблони для просування установки PWA з браузера

Рекомендується використовувати шаблони для настройки візуальних елементів і дизайну, щоб вони відповідали як ідентичності бренду, так і потребам клієнтів. Для огляду того, які браузери підтримують повністю настроюються можливості установки, погляньте на caniuse.com.

Установка браузера на Android Chrome

Chrome на Android дозволяє повністю адаптувати запити інтерфейсу. По-перше, переконайтеся, що не активовано установки за замовчуванням, що викликає міні-інформаційну панель.

Запобігання міні-інформаційній панелі за замовчуванням в Chrome

Міні-інформаційний бар був задуманий тільки як тимчасовий захід. Це не кращий користувальницький досвід, і оскільки він генерується браузером, немає можливості дізнатися, коли настав підходящий момент для його появи. Він просто з'являється, як тільки сайт проходить критерії установки.
Рекомендується не показувати міні-інформаційну панель, а замість цього використовувати настроюється запрошення. Ось подробиці про те, як це зробити.

Кращі приклади настроюваних запрошень користувацького інтерфейсу:

Приклад: установка підказок - виглядає вбудованим в призначеному для користувача інтерфейсі, містить ціннісні пропозиції і деякі візуальні ефекти, з'являються в потрібний час, можуть бути повторно виявлені протягом всього шляху користувача.

Основне правило тут - не просити користувачів встановлювати PWA при першому відвідуванні. Замість цього розгляньте можливість залучення зацікавлених користувачів, наприклад: коли вони переглянули певний ключовий контент або під час другого відвідування.

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

Рекомендується також зафіксувати елемент інтерфейсу «Встановити запрошення» в бічній панелі або в заголовку навігації, щоб він завжди був доступний користувачеві, не перериваючи роботу.

Використовуйте помірну аргументацію

Не секрет, що людям потрібна мотивація для виконання будь-якого завдання. Мотивуйте користувачів встановлювати PWA, пояснюючи, чому вони повинні це робити і що вони отримають в кінці.

У цьому випадку важливо говорити про переваги, які отримає користувач, а не тільки про функції PWA.

Погані приклади мотивування

Погані приклади мотивування для установки PWA

«Не турбуйтеся про пам'ять телефону. Наше додаток не займе багато місця ».

  • Уникайте негативних формулювань
  • Виділіть переваги для користувача

«Встановіть наш додаток, з швидким, надійним і легким інтерфейсом».

Не кажіть тільки про функції - користувачі не дуже ознайомлені з технічними настройками. Подумайте: що це значить для користувача?

Хороші приклади мотивування

«Встановіть наш безкоштовний веб-додаток на робочий стіл, щоб мати швидкий доступ до вибраних».

  • Виділіть переваги для користувача
  • Розмова про користувача, а не про програму

Використовуйте візуальні ефекти для ілюстрації дій

"Ласкаво просимо! Скористайтеся нашим веб-додатком, щоб завжди мати при собі замовлення, навіть коли ви не в мережі ".

Мати-природа вбудувала в мозок здатність миттєво розпізнавати образи. Візуальні елементи (значки, малюнки, ілюстрації) є дуже важливим сигналом - вони допомагають проілюструвати зміст і функціональність, щоб мозок користувача швидше розпізнавав і розумів.

Увімкніть значки, такі як значок завантаження або кнопку установки, щоб проілюструвати користувачеві дії, які вони повинні виконати.

Інтеграція з користувацьким інтерфейсом

Спливаючі вікна стали дійсно популярними для просування установок, проте кожне спливаюче вікно є нав'язливий досвід, який, швидше за все, буде ігноруватися або відхилятися користувачами.

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

Установка iOS

IOS вимагає, щоб користувачі встановили програму з меню браузера. Проведіть користувачів через цей процес з підказкою установки, яка пояснює, що робити.

Десктопна установка

На робочий стіл Progressive Web Apps можна встановити в браузерах Chrome і Edge в усіх операційних системах. Коли веб-додаток буде доступний для установки, в універсальному вікні пошуку з'явиться значок, який приверне увагу користувача.

Подумайте про надання керівництва по користувацькому інтерфейсу, щоб переконатися, що користувачі повністю інформовані про те, що вони можуть встановити PWA.

Інтуїтивний і якісний інтерфейс установки

Ефективний інтерфейс для Progressive Web App, відповідає очікуванням користувачів стосовно встановленого додатка. В якості натхнення можна використовувати найкращі з сучасних UX як з веб-додатків, так і з нативних додатків, і, як завжди, обов'язково прислухайтеся до користувачів і перевіряйте свої ідеї дизайну.

Установка UX

Створення PWA для установки починається зі створення назви і значка. Після установки PWA буде виглядати як будь-який інший значок на домашньому екрані. Якщо у вас також є нативное додаток, ви можете подумати про те, як ви ідентифікуєте себе. Ви можете зробити це за допомогою значків і назви програми.

Іконки

Для Android розгляньте можливість створення маскуючих значків, які можуть адаптуватися до будь-якої форми значка, необхідної виробнику телефону. Для iOS використовуйте звичайні рекомендації по дизайну іконок iOS, але врахуйте, що iOS не використовує іконки з файлу маніфесту, тому обов'язково додайте метатег apple-touch-icon з відповідним зображенням.

Назва

Використання фірмового найменування в якості імені PWA має сенс.

Якщо PWA використовує локальні домени в залежності від місця розташування користувача - наприклад, example.co.uk, example.fr, розгляньте можливість включення країни в ім'я PWA. Зверніть увагу, що в маніфесті веб-додатки немає вбудованої інтернаціоналізації, тому для цього потрібен окремий маніфест для кожного домена.

Додавання суфікса «Lite» до назви може бути хорошим способом провести відмінність між PWA і власним додатком, якщо обидва вони доступні.

Запуск

Коли додаток запускається з домашнього екрану, поведінку Android за замовчуванням полягає у відображенні білого екрану, поки PWA не буде готовий. Користувач може побачити порожній білий екран тривалістю до 200 мс. Проте, заставку можна налаштувати, щоб забезпечити плавний запуск. Chrome для Android автоматично налаштовує заставку, якщо маніфест містить:

  • Ім'я властивості
  • Для властивості background_color встановлено правильне значення кольору CSS
  • У масиві значків вказується значок розміром не менше 512 на 512 пікселів
  • Значок існує і є PNG

Для ІOS в даний час немає настройки заставки, тому додайте метатеги для вказівки попередньо створених заставок.

Автономний інтерфейс

Прогресивні веб-додатки, що запускаються за допомогою значка домашнього екрану, повинні відкриватися в автономному режимі відображення, щоб забезпечити взаємодію, відповідне очікуванням користувачів від нативних додатків. Це означає, що PWA запускається без панелі браузера в верхній частині і відділена від браузера при циклічному перемиканні між додатками.

Навігація

При розробці переконайтеся, що всі ключові елементи навігації легко доступні для користувача. В цілому нижня частина екрану на мобільних пристроях вважається більш ергономічною: її легше дістати, утримуючи пристрій однією рукою. Спробуйте знайти там ключові заклики до дії, протестувати нижню навігацію або закріпити модальні спливаючі вікна внизу (в центрі екрану).

Поряд зі збільшеним простором, PWA в автономному режимі мають менше можливостей навігації в браузері. Наприклад, в iOS немає кнопок «Назад» / «Вперед», тому реалізуйте в PWA додаткові елементи навігації, такі як кнопка «Назад», хлібні крихти, додаткова панель навігації і т. Д.

Схеми

В Android панель браузера можна змінити відповідно до кольору бренду додатки. Це також вплине на автономний режим, зокрема на колір панелі системних повідомлень.

Перезавантаження

Pull-to-refresh - це інтуїтивно зрозумілий жест, популярний в таких додатках, як Facebook і Twitter. Для встановлених PWA розгляньте можливість настройки режиму «підтягування до оновлення» і «прокрутка».

Обмін

Коли користувачі перебувають в автономному режимі як на Android, так і на iOS, меню браузера недоступно для вибору URL і простого обміну. Подумайте про те, щоб відобразити додаткові кнопки, які запускають API веб-ресурсу, щоб викликати власний діалог загального доступу Android і спростити обмін URL-адресами за допомогою інших додатків, таких як соціальні мережі або месенджери.

Створення унікального досвіду користувача

Надання можливості роботи в автономному режимі в Progressive Web App означає, що призначений для користувача інтерфейс відповідає тому, що вони очікують від власних додатків, які часто мають деякі автономні функції: принаймні, доступний для користувача інтерфейс і відображаються розумні повідомлення про помилки, якщо виникають проблеми з підключення до мережі.

При визначенні досвіду роботи в автономному режимі розгляньте можливість застосування методів дизайнерського мислення і мозкового штурму, які автономні функції можуть принести користь. Ось кілька прикладів того, як можна надихнутися на мозковий штурм:

Основні положення для користувачів в автономному режимі

При розробці, думайте про з'єднання як про щось, що постійно змінює свій стан. Особливо, коли користувачі можуть подорожувати в літаку, входити в ліфти або просто мати проблеми з підключенням. Надання можливості роботи в автономному режимі відкриває нові способи взаємодії з користувачами і дозволяє їм використовувати PWA у всіх станах підключення.

При визначенні роботи в автономному режимі врахуйте наступні питання:

Інформування про зміну стану

На самому базовому рівні, принаймні, інформувати користувачів про зміну стану. Три елементи, які можна використовувати для опису цієї зміни:

  • Copy - слова для інформування користувачів про зміну стану
  • Іконки - візуальні елементи, які допомагають проілюструвати поточний стан
  • Кольори - для виділення контенту, доступного в автономному режимі

Рекомендується використовувати як мінімум два з перерахованих вище, щоб уникнути плутанини. При використанні кольорів затінення певних областей веб-сайту можна інтерпретувати не тільки як автономне стан, але також як якби деякі елементи були відсутні. Таким чином, щоб прояснити ситуацію, також використовуйте копірайт, щоб проінформувати користувача.

У Copy є кілька речей, які слід враховувати:

Пам'ятайте, що користувачі часто не мають достатньої технічної обознанності.Не звинувачуйте системи в поганому з'єднанні. Замість цього просто підтвердіть стан і повідомте користувачам про наступні дії.Якщо стратегія включає неформальний мову, використовуйте його з обережністю, так як це може підірвати довіру до PWA в такий чутливий і вразливий момент.

Не варто вживати такі фрази:

«Ви не підключені до Інтернету. Будь ласка, повторно під'єднайте і спробуйте ще раз. »

«Схоже, наш сервер не працює».

«Щось пішло не так з нашого боку».

«Схоже, щось було відключено. Дякуємо за ваше терпіння, поки ми виправляємося».

Краще використовувати:

«На даний момент Ви не в мережі».

«Ми постараємося відновити підключення через 30 секунд».

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

«Натисніть тут, щоб оновити сторінку».

  • Не звинувачуйте користувача
  • Не просіть користувача виправити щось
  • Не звинувачуйте свої власні системи, так як це впливає на довіру до сервісу
  • Використовуйте неформальний мову з обережністю

Замість цього:

  • Підтвердити положення
  • Запевнити користувача, що йому не потрібно нічого «виправляти»
  • Поясніть, що станеться, коли з'єднання повернеться (чи потрібно користувачеві оновити або сторінка перезавантажиться автоматично)

Популярним компонентом користувальницького інтерфейсу для інформування користувача про зміну стану є спливає снек-бар. Він може з'являтися в будь-якому місці призначеного для користувача інтерфейсу, але на кожній сторінці перевіряйте, чи не блокує він елементи навігації.

Надання досвіду в автономному режимі

На додаток до простого повідомлення користувача про те, що він знаходиться в автономному режимі.

Резервний досвід

Ця можливість надає альтернативний досвід користувачеві, коли з'єднання переривається. Приклади:

  • Показати статичну автономну сторінку. Це може містити альтернативні способи, такі як пошук магазину, контактна інформація для зв'язку з колл-центром, контактна форма, яка відправляється, коли користувач знову підключається до мережі
  • Бути корисним і показувати відповідну інформацію з облікового запису користувача. Туристична компанія може надати квитки або посадочні талони. Продавець може показати збережені товари або товари в кошику
  • Розважайте користувачів грою, головоломкою або забавними фактами і займайте їх час, поки вони чекають, коли з'єднання повернеться

Продовжити перегляд в автономному режимі

Кешування може використовуватися, щоб дозволити користувачам продовжувати перегляд, коли вони знаходяться в автономному режимі.

  • Використовуйте попереднє кешування, щоб дозволити користувачеві продовжити перегляд важливих областей сайту, таких як топові категорії або товари в продажу
  • Використовуйте кешування під час виконання, щоб зробити будь-яку раніше переглянуту сторінку доступною

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

Виконувати завдання в автономному режимі

Більш просунуті можливості роботи в автономному режимі дозволяють користувачам виконувати свої поточні завдання, такі як додавання товарів в корзину, збереження до списку бажань, заповнення форми або навіть заповнення всіх деталей при оформленні замовлення, аж до оплати. Важливо запевнити користувача, що він може продовжити своє завдання, і його дії не будуть витрачені даремно, незважаючи на те, що він не в мережі.

Коли з'єднання повернеться, повідомте користувачеві про зміну стану і обновіть вміст, якщо будуть які-небудь зміни. Якщо користувач може залишатися в своєму поточному контексті, перезавантажте сторінку автоматично. Якщо контекст не може бути збережений, надайте користувачеві контроль, щоб оновити сторінку кнопкою.

Створення продуманих повідомлень

Progressive Web Apps підтримують push-повідомлення

Progressive Web Apps підтримують push-повідомлення на Android з установкою користувача або без нього. Повідомлення становлять велику цінність для бізнесу: вони збільшують кількість повторних відвідувань і, відповідно, продажу та конверсії.

Але поганий досвід може вплинути на відносини з клієнтами. Прохання користувачів підписатися на веб-повідомлення при їх першого прибуття часто матиме дуже низькі показники.

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

Отримання дозволу

Важливою частиною досвіду повідомлень є запит дозволу повідомлень. Кращі приклади схожі на запрошення установки.

З'являються, коли це доречно

Основне правило - не запитувати в користувачів дозволу на відправку повідомлень при першому відвідуванні сайту. Запитайте дозвіл в потрібний момент, коли повідомлення можуть принести користь. Використовуйте попередній дозвіл інтерфейсу користувача і налаштовуйте текст, візуальні ефекти і стиль.

Подумайте про те, щоб підказку можна було виявити по всьому сайту, але не переривайте користувача. Найкраще підказати, коли користувач знаходиться або в режимі перегляду, але не в глибині певного завдання, або коли він тільки що виконав певну дію (додав продукт в обране, завершив покупку, закінчив читання сторінки або закінчив гру).

Також виправте елемент призначеного для користувача інтерфейсу підказки дозволів на повідомлення в бічній панелі або в заголовку навігації, щоб він завжди був доступний користувачеві без переривання.

Використовуйте аргументовані пропозиції

Налаштуйте значення пропозиції повідомлень відповідно до контексту поточної сторінки і дій, які користувач виконує там. Наприклад: на сторінці продукту цінних пропозицією може бути «отримати повідомлення, коли цей товар з'явиться в наявності».

Відправка повідомлень

Кожне відправлене повідомлення повинно бути своєчасним, точним і актуальним. Це означає його отримання в момент, коли це важливо для користувача, і показ конкретної інформації, яка має відношення до конкретного користувача.

Кожне повідомлення складається з трьох високорівневих елементів.

Copy - про що йдеться в повідомленні і як.

  • Copy складається з імені PWA, заголовка повідомлення і вмісту повідомлення
  • Текст повинен бути чітким і лаконічним і містити не більше 40 символів
  • Не дублюйте назву програми в тексті (воно вже є в заголовку)
  • Переконайтеся, що відображається яка інформація актуальна для користувача

Візуальні елементи - значок PWA або інші візуальні об'єкти.

  • Значок PWA є обов'язковим, оскільки він візуально сповіщає, яка програма відправляє повідомлення
  • Іноді зображення може бути додано для візуалізації іншої інформації основного повідомлення: наприклад, фотографія відправника, фотографія товару, який на складі, або фотографія нової банківської карти, замовленої користувачем
  • Зображення і значок не повинні дублювати один одного

Дії (не обов'язково) - яку дію може зробити користувач.

  • Тут важливо дозволити користувачам виконувати деякі дії на основі отриманої інформації, не відкриваючи додаток
  • Не дублюйте дії, вже вбудовані в систему взаємодії повідомлень Android, наприклад, стандартні дії «Натисніть, щоб відкрити» і «Відмовитися»

Вимірювання впливу і необхідності оптимізації PWA

Добре розроблений Progressive Web App має підвищити рівень залученості, прискорити переходи на сторінки і прискорити конверсію завдяки автономному режиму і можливості установки. Отже, як найкраще виміряти це?

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

Вимірювання швидкості установки

Створення встановлюваного Progressive Web App - це потужна функція, але її успіх також дуже залежить від шаблонів UX, що використовуються для просування - так само, як і з запрошеннями для установки нативних додатків.

Тому переконайтеся, що у вас є правильна аналітика для відстеження швидкості установки і коефіцієнтів взаємодії / конверсії, щоб можна було оптимізувати потік і UX.

У Chrome і Microsoft Edge всю воронку можна відстежувати в такий спосіб

Крок 1

Виміряти кількість користувачів, що мають можливість на установку.

Для цього вивчіть beforeinstallprompt, щоб виміряти кількість користувачів, які можуть встановити додаток.

Крок 2

Виміряти кількість користувачів, які натискають на запрошення установки призначеного для користувача інтерфейсу.

Це буде залежати від того, як саме викликається метод prompt, але він, ймовірно, буде пов'язаний з click елементом UI на сторінці.

Крок 3

Виміряти кількість користувачів, які приймають / відмовляються від установки.

Після того, як користувач натисне на запрошення установки призначеного для користувача інтерфейсу, з'явиться спливаюче вікно установки chrome. Виміряйте, прийняв або відхилив користувач у властивості userChoice.

Крок 4

Виміряйте кількість користувачів, які встановили.

Успішна установка може бути виміряна за допомогою appinstalled.

Для інших браузерів

Для інших браузерів, які підтримують beforeinstallprompt, подібна аналітика може бути вбудована.

Тим, хто цього не робить (наприклад, Safari), складніше відстежувати установки PWA. У цих випадках рекомендується, по крайней мере, виміряти використання встановленого PWA, як описано в наступному розділі.

Вимірювання встановлених PWA

Важливо розуміти поведінку користувачів, які встановили Progressive Web App.

Перше, що потрібно відстежити, - це скільки користувачів що відкривають PWA на домашньому екрані (або взагалі значок PWA). Це можна зробити, додавши параметр відстеження в URL-адресу запуску в маніфесті, щоб трафік домашнього екрану можна було деталізувати в вашому аналітичному пакеті.

Доступ до PWA також можливий, коли користувач натискає на будь-яке посилання, наприклад, з пошукової системи або через веб-публікації. Тому важливо також динамічно визначати за допомогою javascript, чи знаходяться користувачі в автономному режимі (що вказує на використання встановленого PWA), а потім використовувати це як змінну або вимір для відстеження аналітики.

Використання TWA

Коли Progressive Web App публікується в магазині Play Store з використанням операцій Trusted Web, багато релевантні показники, що стосуються швидкості установки, стають доступні безпосередньо з консолі магазину.

Крім цього відстеження за умовчанням, існує кілька способів передачі інформації в TWA через параметри запиту URL, URL-адресу реферера або заголовки запиту, і всі вони можуть використовуватися для включення додаткового відстеження.

Використання в Trusted Web Activity записується за допомогою звичайного коду аналітики веб-сайту, але обов'язково додайте параметр відстеження в URL-адресу TWA за замовчуванням, щоб включити фільтрацію для користувачів TWA в аналітиці.

Атрибуція кампаній додатків

Кампанії додатків можна використовувати для просування PWA, опублікованого в магазині, з використанням дій Trusted Web.

Щоб встановити атрибути, використовуйте атрибуцію кампанії в Google Play або вбудований SDK для аналітики додатків, наприклад, Google Analytics для Firebase.

Щоб приписати більше, ніж просто установку, кампанії трохи складніше, оскільки те, що відбувається в веб-частини (TWA), відділене від основної частини (що встановлена). Ось конкретний приклад того, як це можна зробити за допомогою AppsFlyer, передавши параметри відстеження через URL або заголовки в поєднанні з відстеженням між серверами. Пакети App Analytics підтримують інтеграцію сервера з сервером, яка може використовуватися для точного відстеження TWA.

Вимірювання в автономному режимі і кешування



Offline

Використання в автономному режимі може бути виміряне шляхом запису аналітичних пінгів в автономному режимі, а потім відтворення їх при відновленні з'єднання.

Для Google Analytics це легко доступно в модулі для бібліотеки Workbox і означає, що всі аналітичні події будуть як і раніше відслідковуватися, навіть коли користувач переходить в автономний режим.

Може бути корисно додати явне відстеження того, коли користувач відключається або підключається до мережі, використовуючи відповідні події браузера. Цей спосіб дозволяє виміряти, скільки користувачів перейшли в автономний режим і можуть бути відновлені, а також скільки часу проведено в автономному режимі (шляхом обчислення часу між онлайн та офлайн-подіями і відправки його в вашу аналітику). Майте на увазі, що офлайн буде багато, тільки якщо є хороший оффлайн досвід.

Кешування і конверсія

Service worker може принести більше конверсії, ніж в автономному режимі.

Тому ще один спосіб виміряти вплив поліпшеної стійкості мережі і офлайн - це порівняти показники конверсії та залучення з кешуванням сервісних працівників і без нього, оскільки можна припустити, що більш надійний і відмовостійкий веб-сайт буде краще конвертувати. Результати повинні бути відфільтровані по зв'язку оператора і мобільного зв'язку, щоб побачити вплив найточніше.

Кешування і швидкість

Кешування і швидкість PWA

Чітко визначені стратегії кешування через Service worker можуть зробити сайт швидше при повторних загрузках. Прискорення з допомогою Service worker можна легко виміряти за допомогою звичайних інструментів швидкості, таких як Lighthouse або Webpagetest.org, вимірюючи один раз з Service worker і один раз порівнюючи обидва. Пам'ятайте, що Service worker встановлюється при першому завантаженні і, як правило, має найбільший вплив на завантаження сторінок після першої, тому обов'язково вимірюйте швидкість при повторних загрузках або з попередньо підготовленим кешем.

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

Ще один варіант, який не вимагає додаткової настройки, - просто відстежувати продуктивність в звичайних умовах за допомогою Звіту про роботу користувачів Chrome до і після запуску (який містить першу і повторне завантаження і тому повинен показувати підвищення швидкості за рахунок кешування Service worker).

Вимірювання Push-повідомлень

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

Відстеження і вимірювання всієї воронки особливо важливо для повідомлень, оскільки погана реалізація може легко сприйматися користувачами як спам і дратівливі повідомлення, що може привести до повної відмови від Progressive Web App. Тому ми рекомендуємо уважно вивчити показники залученості користувачів, які отримують повідомлення, щоб побачити який рівень відмов.

Вимірювання виглядає наступним чином:

Крок 1

Виміряти кількість користувачів, які мають право на push-повідомлення.

Визначте, чи доступне push-повідомлення в браузері, за допомогою функції виявлення.

Крок 2

Виміряти кількість користувачів, які натискають на призначений для користувача інтерфейс повідомлень.

Це буде залежати від того, як саме ця функція буде пропонуватися користувачам.

Крок 3

Виміряти кількість користувачів, які приймають / відхиляють дозвіл на push-повідомлення.

Після того, як користувач прийме запрошення повідомлення призначеного для користувача інтерфейсу, дозвіл Chrome буде активовано.

Крок 4

Виміряти кількість користувачів, які отримують push-повідомлення.

Кожен раз, коли push-повідомлення відправляється з серверної частини, push-подія ініціюється сервісним працівником на стороні клієнта. Використовуйте цей обробник подій, щоб виміряти, скільки користувачів успішно отримали push-повідомлення.

Крок 5

Виміряти кількість користувачів, які працюють з повідомленням.

Кожен раз, коли користувачі натискають на повідомлення (або одне з дій в ньому), запускається подія повідомлення. Тут додайте аналітичний код для відстеження взаємодії з користувачем. Також є подія закриття повідомлення, щоб зробити те ж саме для користувачів, що відхиляють повідомлення без взаємодії.

Крок 6

Виміряти рівень конверсії.

Традиційно, коли натискається повідомлення, воно відкриває PWA. Код для цього можна знайти в Інтернеті, і його можна використовувати для додавання параметрів відстеження в URL, щоб позначити сеанс як розпочатий з повідомлення (наприклад, через utm_source в Google Analytics). Однак в залежності від призначеного для користувача коду пакету аналітики в обробнику подій clickotification можна використовувати замість параметрів URL.

Приклади якісної реалізації PWA

Weekendesk перетворює свій мобільний сайт в прогресивний веб-додаток і отримує в 2,5 рази більше переходів. Weekendesk є номером 1 для вихідних і коротких тематичних поїздок і пропонує кращий користувальницький досвід через їх веб-сайт і нативний додаток.

Завдяки більш ніж 60% веб-сесій, що проводяться з мобільних пристроїв і застарілому Android-додатку, Weekendesk має стратегічний інтерес пропонувати своїм клієнтам найкращий мобільний досвід, об'єднуючи при цьому свої веб-розробки і розробки додатків.

Weekendesk поступово додає сучасні веб-функції на свій мобільний сайт, перетворюючи його в даний прогресивний веб-додаток, що робить його таким же зручним, як і нативний додаток.

Завдяки Service Worker сайт стає швидшим і доступним в автономному режимі, а пропозиція встановити PWA приносить більше комфорту користувачам, які вже задіяні.

Після перетворення свого сайту в PWA Weekendesk скористався Trusted Web Activity, що дозволило їм публікувати PWA безпосередньо в Play Store.

Отримані результати:

Для користувачів: один і той же зручний і якісний досвід доступний всюди: в Інтернеті і в додатку.

Для групи розробників продукту: більш швидка реалізація нових функцій і зниження витрат завдяки підтримці єдиного коду.

Для бізнесу: 2,5-кратна конверсія, коли користувачі приходять з встановленого PWA, сайт на 30% швидше, більш активну участь в переглядах сторінок (+ 108%) і час, проведений на сайті (+ 85%).

Etam, піонер в галузі електронної комерції наступного покоління, використовує PWA для поліпшення мобільних додатків

Etam, бренд нижньої білизни, використовує Progressive Web App для поліпшення роботи користувачів на мобільних пристроях.

Etam розуміє важливість оптимізації онлайн-спілкування з клієнтами, особливо на мобільних пристроях. Понад 70% сеансів відбувається на смартфонах. Основний додаток Etam старіє, тому команда вирішила не переробляти його, а замість цього зосередитися на поліпшенні роботи в Інтернеті.

Розробники спочатку зосередилися на швидкості, оптимізуючи код. Потім вони реалізували архітектуру, яка запам'ятовує статичну вміст сторінки, включаючи область клієнта. Це, зокрема, дозволяє користувачеві мати свою карту лояльності і список обраних, навіть якщо він не в мережі.

Etam полегшує користувачам вхід в систему, використовуючи протокол WebAuth для входу за допомогою відбитка пальця. Etam також спрощує покупку всього за 3 кліка, використовуючи Google Pay.

Etam продовжує вводити нововведення, публікуючи свій PWA в Google Play Store, використовуючи Trusted Web Activity (TWA). Таким чином, Etam доступний в магазині Google Play для користувачів, які шукають бренд, і для управління кодом досить однієї команди, щоб забезпечити безперебійну роботу, яку можна швидко оновити.

Отримані результати:

Робота зі швидкістю дозволила отримати повторний час завантаження менше секунди.Користувачі, які відкрили встановлене PWA мали коефіцієнт конверсії на 30% вище, ніж у інших мобільних користувачів.Поліпшення мобільного сайту також дало ефект від декількох пристроїв, оскільки коефіцієнт конверсії робочого столу також збільшився.

Висновки

Тепер Ви знаєте, на що здатні PWA, як їх створювати разом зі звичайними додатками, як спроектувати інтерфейс установки, як виміряти вплив і реальні випадки використання.

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

Ви готові до лідерства в інтернеті?

Давайте обговоримо перспективи просування вашого сайту!