Веб-анімація: де, навіщо і чому

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

image
Коли анімація здатна поліпшити враження від роботи зі сторінками? Що саме стоїть «оживити» для того, щоб взаємодія з ресурсом стало б більш зручним, зрозумілим, цікавим?

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

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

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

Примітка: тут скрізь анімовані GIF-файли, вставив у вигляді посилань і виділив.

image
Навіть коли час завантаження невелика, забавна анімація здатна додати очікування розважальний момент. (Автор: Thomas Bogner)

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

image
Смуга завантаження для Aviasales. (Автор: Mark)

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

image
Анімація може показати проходження по кроках певної послідовності дій. (Автор: Joshua Sortino)

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

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

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

Анімація елементів управління для настільних і мобільних сайтів
Один з найпоширеніших прикладів візуальної зворотнього зв'язку – анімація при наведенні курсору на інтерактивний елемент.

image
Коли користувач не впевнений у призначенні елемента керування, він намагається навести на нього курсор миші. Анімація елемента при наведенні курсору, на інтуїтивному рівні, повідомить користувача про те, що з об'єктом можна взаємодіяти. (Джерело: codepen)

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

image
Затінення вказує на те, що елемента можна торкнутися для виконання якоїсь дії. (Автор: Vadim Gromov)

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

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

image
Форма негативно «хитає головою». (Автор: Michaël Villar)

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

image
Анімацію можна використовувати для того, щоб зробити переходи між екранами додатки більш очевидними. У підсумку користувач буде точно знати, де він був на початку дії, і де опинився після його завершення. (Джерело: codyhouse)

Ось – приклад з веб-сайту Brian Hoff Design. Коли користувач клацає по круглій кнопці зі стрілкою, великий блок меню з'являється з правого боку екрану. Завдяки анімації, меню ніби виїжджає з області, що знаходиться за межами екрану. В результаті у взаємодії зі сторінкою немає логічних розривів.

image
Анімація допомагає зв'язати воєдино два стани сторінки

Плавне зміна станів
Анімація переходів безцінна для вказівки зміни станів сторінки. У статті «Розумні переходи у UX-дизайні» Адріан Зумбруннен показав відмінний приклад того, як анімація може допомогти вам залишатися в курсі того, де саме він знаходиться, при клацанні по посиланню, що веде до іншого розділу тієї ж самої сторінки.

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

image
Раптова зміна стану виглядає ненатурально. Користувачеві важко сприймати подібне. (джерело: smashingmagazine)

А от те ж саме, але з анімацією:

image
Анімувати – значить «вдихнути життя» (джерело: smashingmagazine)

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

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

Мистецтво розповідати історії і довгий скролл
«Вся увага – на верхню половину видимої частини сайту». Зовсім недавно це було залізним правилом. Дизайнери прагнули, у що б то не стало, заповнити цю область цінною інформацією. Тепер же «правило верхньої половини» втратила абсолютну істинність. Насправді, відомо, що «на звичайній сторінці 66% уваги зосереджено нижче верхньої половини видимої частини сайту». Таким чином, при скролінгу сторінок те, що з'являється знизу, привертає більше уваги. Це робить прокручування невід'ємною частиною дизайну взаємодії.

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

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

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

image
Анімація при прокручуванні. Джерело: Le Mugs

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

Шановні дизайнери! Розкажіть нам про свої улюблені прийоми веб-анімації.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.