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

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

Я вважаю, що ці методи досить важливі, що їм потрібна назва: Реактивний веб-дизайн.

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

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

Техніка 1: Миттєві навантаження на скелетні екрани

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

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

Можливість таким чином лежить!

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

Facebook за допомогою скелетного екрана покращить сприйняті показники під час першого відкриття

Екрани скелетів є ключовою технікою виконання, оскільки вони роблять програми набагато швидшими, різко скорочуючи кількість моментів, коли користувачеві залишається цікаво:

Що відбувається? Це навіть завантаження? Я правильно натиснув?

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

Запуск екрана flipkart.com, запущений з головного екрану в автономному режимі на Android

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

app.jalantikus.com використовує схему екранів скелетів і використовує заголовки та ескізи через переходи

Тестування сайтів із скелетними екранами

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

Найменша швидкість підтримується в емуляції мережевої мережі Chrome

Техніка 2: "Стабільні навантаження" за допомогою заданих розмірів на елементи

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

Вміст slate.com дуже агресивно стрибає, коли сторінка завантажується. Чим повільніше мережа, на якій ви знаходитесь, тим довше вона стрибає.

Нестабільні навантаження ускладнюють взаємодію з веб-сайтами і змушують їх відчувати… ну… Нестабільно!

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

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

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

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


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

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

Збираючи все це разом

Я створив невеликий демонстраційний сайт на reactive.surge.sh, щоб продемонструвати різницю між звичайним та реактивним веб-дизайном.

Звичайне завантаження виробу

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

Завантаження статті з реактивним веб-дизайном

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

Підведенню

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

Завдяки реактивному веб-дизайну ми можемо змусити наш досвід бути спритним та чуйним (“Чуйний дизайн”, як ім’я вже було прийнято, да!) Навіть у повільних та болючих мережах.

Я хотів би дізнатися про дані громади про вплив сприйнятої ефективності на KPI, такі як залучення та дохід!

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

Якщо у вас є думки з цього приводу, будь ласка, твітніть мені @owencm, і якщо вам сподобалось, будь ласка, дайте це ♥!

P.S. не забудьте перевірити демо-сайт reactive.surge.sh на мобільному пристрої, щоб отримати повну славу!