Історія Under Armour розпочалася в 1996-му, коли її засновник Кевін Планк не знайшов потрібної футболки для інтенсивних тренувань і розробив власний прототип — футболку The Shorty, що здатна швидше вбирати вологу.

У 2015 році Under Armour розпочала цифрову трансформацію з покупки компаній MapMyRun, MyFitnessPal та Endomondo. Минулого року компанія вирішила оновити сайт, розпочавши з британської локалі. Новий сайт запрацював у 2019 році на основі технології PWA (Progressive Web Application), що є своєрідним гібридом нативного додатку та веб-сайту. 

Я — UX-дизайнер міжнародної IT-компанії Astound Commerce. З Under Armour ми співпрацюємо майже шість років. Я працювала на проекті Under Armour над розробкою найбільш вдалого UX-дизайну. Це крутий досвід. Особливо, коли розумієш, що компанія вперше представить готове рішення у Великобританії, де купівельна спроможність населення в рази більша від українського ринку.

Навіщо потрібен PWA

Основними перевагами Progressive Web Application є прогресивне завантаження контенту, робота в офлайн-режимі за відсутності мережі, надсилання push-сповіщень та можливість збереження веб-додатку на домашньому екрані пристрою на зразок нативного додатку.

Які переваги для користувача — порівняння

Для того, щоб переконатися в позитивних змінах на сайті, можна порівняти загальноєвропейську адаптивну та британську версії сайту Under Armour. Остання розроблена командою Astound Commerce на платформі Mobify і дозволяє застосувати всі переваги PWA з використанням гайдлайнів у сфері мобільного ecommerce дизайну.

Насамперед, відмінність — у прогресі завантаження сайту:

  • адаптивна мобільна версія спершу показує пустий екран, а потім – фінальний контент сторінки;
  • PWA версія поступово завантажує layout всього контенту: спершу розміщує загальний обрис елементів сторінки, а потім відображає кінцевий контент.

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

 

Завантаження адаптивного сайту (зліва) та PWA (справа)

 

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

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

 

Поле пошуку адаптивного сайту (зліва) та PWA (справа)

 

Показовою є також і відмінність «гамбургер» меню для двох версій сайту:

  • у випадку адаптивного сайту хедер відображається і відбирає увагу користувача, відволікаючи його від пошуку потрібної категорії чи опції. До того ж, розташування елементів для взаємодії на мобільному сайті є не послідовним: іконка «Х», що дозволяє закрити «гамбургер» меню, знаходиться зліва. У той же час іконки «>» — індикатори більшої кількості підкатегорій в одній категорії, розташовані з правого боку;
  • у випадку з PWA користувач відразу зосереджений на тому контексті, що його цікавить. На відміну від адаптивного сайту, PWA відображає всі елементи взаємодії з одного боку (справа), полегшуючи користувачу навігацію по «гамбургер» меню.

 

«Гамбургер» меню адаптивного сайту (зліва) та PWA (справа)

 

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

 

Футер адаптивного сайту (зліва) та PWA (справа)

 

Наступний елемент, вартий уваги, — PLP (Product Listing Page) або сторінка зі списком товарів. Одним із найбільш важливих її елементів є фільтрація товарів:

  • на адаптивному мобільному сайті при натисканні на кнопку «Filter By» відкривається повноекранний список всіх доступних фільтрів для визначеної категорії товарів. Іконки «+» та «-» значно менші, що може ускладнити навігацію по фільтрах для тих, у кого велика область дотику пальцем;
  • у випадку з PWA ці іконки збільшені для покращення доступності, а флайаут із фільтрами не перекриває сторінку повністю, відображаючи оновлення списку товарів при фільтрації за визначеними опціями.

 

Фільтри адаптивного сайту (зліва) та PWA (справа)

 

Перейдемо на PDP (Product Details Page) або продуктову сторінку. Чи не найважливішою областю цієї сторінки є Ready-to-buy area – зона вибору варіацій i додавання товару до кошика:

  • на адаптивному мобільному сайті ми зіштовхуємося з проблемою досить тісного розміщення елементів для обрання розмірів та з малими кнопками Add to Bag та Add to Wish List;
  • PWA дозволяє легшу навігацію і швидке обрання потрібних варіацій продукта та додавання його до кошика.

 

PDP адаптивного сайту (зліва) та PWA (справа)

 

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

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

Степер для обрання кількості товару на PWA має теж переваги над select box на адаптивному мобільному сайті, адже в останньому випадку зона дотику пальцем користувача значно менша. І насамкінець, на PWA поле Promo Code за замовчуванням приховане в акордеоні, щоб не відволікати покупців без коду, тоді як на адаптивному сайті це поле відкрите. В результаті таких незначних відмінностей, користувачів може залишати сайт в пошуку омріяного коду на знижку.

 

Кошик адаптивного сайту (зліва) та PWA (справа)

 

З огляду на перелічені відмінності, запуск прогресивного веб-додатку (PWA) має більше переваг. Progressive Web Application дозволяє кожній сторінці сайту відображати загальне розміщення компонентів ще до повного завантаження, а також покращує загальну читабельність і доступність для покупців з обмеженими можливостями.

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

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

Висновки

Як на мене, з точки зору User Experience перевага Progressive Web Application є очевидною для кейсу Under Armour. При цьому виграє не тільки компанія, але й самі покупці. Користуючись таким прогресивним веб-додатком, можна отримати задоволення не лише від перегляду, пошуку та купівлі товарів, але й від зекономленого часу та збережених нервів.

Особливо такі рішення можуть бути цікавими в розрізі українських реалій, де покриття 3G/4G не таке ідеальне, навіть у великих містах, а завантаження сайту можна чекати «вічність». Тож PWA — чудова опція обрати покупку, добираючись підземним транспортом.

Автор: Лілія Зінченко, UX-дизайнер компанії Astound Commerce