Популярні техніки веб-анімації, UX Guru
Функціональна та красива анімація – це один з основних елементів сучасного веб дизайну, при цьому такі сайти виділяються саме деталями дизайну взаємодій. Анімація може передавати стан, звертати увагу користувача, допомагати йому побачити результат своїх дій і навіть впливати на поведінку.
Ось лише кілька прикладів, які покажуть, де на веб-сайті можна застосувати анімацію, з метою покращення досвіду.
Прогресія
Найчастіше анімація застосовується для того, щоб відволікти користувача під час завантаження. Така анімація впливає на його сприйняття часу, змушуючи час завантаження здаватися коротшим, ніж насправді. Завжди, коли ви не можете скоротити час завантаження, намагайтеся зробити очікування якомога приємнішим.
Найкраща завантажувальна анімація – це проста анімація. Немає необхідності використовувати додаткові ефекти, такі як звук. Також хороша завантажувальна анімація повинна залучати користувача. Коли користувач має на що подивитися, він не буде звертати увагу на час завантаження.
Анімація виконання
Анімація може уявити процес виконання за допомогою лінійної прогресії. Класична "смуга завантаження" - це найпоширеніший приклад такої анімації.
Але ви можете також використовувати анімацію виконання для багатоступеневих процесів.
Скелетні екрани
Власне, скелетний екран – це порожня версія сторінки, яку поступово завантажується інформація. Це створює відчуття, що все відбувається відразу, в міру поступового відображення інформації на екрані. Скелетний екран разом з невеликою кількістю анімації можна використовувати майже на будь-якому сайті під час завантаження контенту.Такий підхід зберігає залучення користувачів.
Візуальний відгук
Анімована відповідь на дії користувача
Хороший інтерактивний дизайн надає фідбек, який передає результат будь-якої дії, роблячи його видимим та зрозумілим. Коли відвідувач сайту не знає, які елементи інтерактивні, чи яких очікувати взаємодій, це може призвести до плутанини. Ви можете запобігти цьому, роблячи ваші взаємодії чіткими та зрозумілими.
Ефекти наведення миші – найпоширеніший приклад візуального відгуку.
Привернення уваги
Відомо, що людський погляд реагує на дію. Це робить анімацію незамінним інструментом для привернення уваги. Наприклад, за допомогою анімації можна значно покращити поле введення форми. Якщо дані були введені без помилок, то після завершення можна "кивнути" користувачеві, а при помилці можна використовувати горизонтальну тряску.
Недавній тренд – прихована навігація, яка з'являється після натискання на кнопку на кшталт гамбургерної іконки. Анімація – це важлива частина встановлення зв'язку між двома станами та запобігання різким переходам. Добре виконаний перехід дає користувачеві зрозуміти, на чому він має сконцентрувати свою увагу.
Зміна стану
Переходи дуже важливі відображення зміни станів. У статті Smart Transitions In User Experience Design (англ), Едріан Зумбруннен показує, як анімація може допомогти користувачеві зберегти контекст після натискання на посилання, що переміщає його в іншу секцію тієї ж сторінки.
Просто порівняйте цей статичний миттєвий перехід:
З анімованою поведінкою:
Креативні ефекти
Креативна анімація може зробити ваш UX дійсно красивим і незабутнім. Вона додає до UI розважальний елемент.
Сторітеллінг та довгий скролінг
Зовсім недавно правило «над складкою» було безперечним. Дизайнери концентрували більшу частину своєї уваги на заповненні цієї галузі цінною інформацією. На щастя, тепер ми знаємо, що це правило не обов'язково вірне. Насправді, 66% уваги на звичайній медіа-сторінці, витрачається на область під складкою (англ). Таке зрушення робить скролінг важливим елементом інтерактивного дизайну.
Анімація вдихає в скролінг життя та інтерес
Сторітелінговий потенціал анімації може додати емоційний зв'язок нудному інтерфейсу. Замість використання широко поширеної паралакс анімації, виберіть щось тонше. Наприклад, розбийте сайт на шматочки, що прокручуються. У кожному такому «шматочку» за допомогою анімації ви можете уявити контент. Анімація на прикладі нижче, змушує контент оживати, анімуючи прості ілюстрації.
Висновок
Дизайн - це щось більше, ніж просто візуальне уявлення. Дизайн – це взаємодія. Анімація дуже важлива спілкування з користувачем. Ми повинні прийняти інтерактивну природу мережі та почати думати про неї як про природну частину дизайну.