Я консультував понад 150 мобільних сайтів - ось що я знаю про ефективні UX

Як керівник Mobile UX в Google, який працює з невеликими компаніями з веб-розробників, я зробив багато спостережень - і навчився уникати підводних каменів.

Це основний список розумінь від партнерства з понад 150 командами веб-розробників за останні 2 роки.

Я приєднався до команди в Google в 2016 році під назвою Команда мобільної трансформації. Наша команда мала просту, але дуже амбітну мету: зробити мобільну мережу кращою для всіх. Ми зосередилися на тому, щоб допомогти малому та середньому бізнесу покращити свій мобільний веб-досвід. Більш конкретно, ми були консультантами UX, які працювали з командами веб-розробників та надавали рекомендації щодо того, як вони краще оптимізують продуктивність, зручність роботи та доступність.

Ми виступали за кінцевих користувачів.

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

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

Зліва направо: Warby Parker, Stash Invest, Drizly

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

Швидкість підкреслює хороший дизайн. Не дивно, що швидші мобільні сайти мають кращу взаємодію з користувачами. Незліченні приклади, тести на корисність, і я впевнений, що ваші особисті анекдоти дають зрозуміти, що швидкість приводить до конверсій. Три показники продуктивності, які справді відображають користувацький досвід, - це Перша змістовна фарба (FCP), Індекс швидкості та Час до інтерактивного (TTI). Важливо встановити бюджет ефективності та притягнути до відповідальності свою команду. Прикро, коли ваш красиво оформлений сайт приводить до відмови користувача, оскільки ви забули стиснути зображення героя 2 Мб. Використовуйте такі інструменти, як Маяк (показано нижче) для контролю цих показників.

Рекомендовані орієнтири:
 <2s Перша зміст фарби (FCP)
<3 s Індекс швидкості (SI)
<5s Час інтерактивного (TTI)

Знімок екрана з маяка

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

Використовуйте дані для обгрунтування дизайну. Тенденція «конструкції, що підтримується даними», не є новим. Після визначення пріоритетності мобільного проекту важливо відстежувати мобільні показники KPI. Для роздрібних продавців слідкуйте за середньою вартістю замовлення (AOV) та швидкістю виходу на сторінці, де починається послідовність оформлення замовлення. Для компаній, що генерують свинцю, зосереджуються на CTR основної кнопки "Заклик до дії" та співвідношенні "близько" (успішні продажі / кількість потенційних клієнтів * 100). Якщо у вас є веб-сайт для подорожей, зосередьтеся на сеансах повернення (утримання клієнтів) та трафіку, орієнтованому на канал (тобто: зростають соціальні частки). Розгляньте можливість моніторингу мікроконверсій, а також реєстрацію електронних листів, коментарі до статті, огляди користувачів, перегляди відео чи публікації в соціальних мережах. Порада: Я настійно рекомендую використовувати цю блискучу інформаційну панель Datastudio, яку зробив один із моїх однолітків (Дамла Какірка) для контролю за участю користувачів на вашому сайті.

Рецидив справжній. Більшість компаній, з якими працювали, помітили значні покращення швидкості сайту та / або залучення користувачів. Однак через 30–60 днів після консультації (коли ми не бажали дивитись через плече) ми побачимо, що шкідливі звички з’являться наново. Щоб уникнути цієї неприємності, використовуйте бюджет ефективності. Я також рекомендую використовувати інструмент Chrome Dev для пошуку невикористаного CSS та JS-коду на вкладці Покриття. Коли ви завантажуєте або запускаєте сторінку, на вкладці вказується, скільки коду було використано порівняно з кількістю завантажених. Ви можете зменшити розмір своїх сторінок, лише відправивши потрібний вам код. Важливо постійно контролювати та перевіряти ваш мобільний сайт.

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

Зліва направо: американські олов'яні стелі, Rhone, SnapDeal

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

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

  • Будьте миттєві, використовуючи AMP
  • Забезпечте надійний досвід, здобувши незалежність від мережі
  • Будьте надійні з кращим кешуванням
  • Використовуйте веб-компоненти Material Design
  • Забезпечте однаковий постійний досвід для всіх користувачів, незалежно від того, яку платформу вони обрали для взаємодії з вашим брендом
  • Будьте персональні з легшою автентифікацією
  • Упорядкуйте виконання завдання шляхом оптимізації форм
  • Полегшіть повернення, увімкнувши веб-сповіщення
  • Будьте гідні бути на головному екрані
  • Використовуйте Маяк для контролю продуктивності
  • Спробуйте новітні засоби веб-розробки

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

@RyanWarrender