Зараз дослідимо використання анімації в дизайні інтерфейсу, порівняємо ранній візуальний дизайн із сучасним та запропонуємо декілька ідей для ефективного моушн-дизайну графічного користувача.
Ми також коротко розглянемо засоби, завдяки яким можна покращити інтерфейс.
Приклад поганого моушн-дизайну в інтерфейсі користувача
Натисніть тут для переходу до живої версії цього демо.
На жаль, цей інтерфейс – не вигаданий приклад поганого дизайну, це звичайний вигляд деяких існуючих додатків!
Вступ
Ставлення до (цифрового) візуального дизайну розвивається ще з першої растрової графіки, що світилася на перших ЕПТ-моніторах 70-х і 80-х років. На відміну від інших професійних областей, тенденції, що виникають у цифровому дизайні, тісно пов’язані з еволюцією інструментів, з якими ми працюємо.
Ми бачили вдосконалення продуктивності відеоадаптерів від граничної роздільної здатності 320×200 у CGA, через VGA з 640×480 та SVGA (800×600) до сучасної технології дисплею стандарту 4К і навіть більше.
Паралель з візуальним дизайном
Моушн-дизайн переживає такі ж труднощі, що переживав візуальний дизайн у 90-х і 2000-х. Щоб зрозуміти теперішній стан анімаційного дизайну, варто поспостерігати за тим, як еволюціонував візуальний.
Цілком природно, що дизайнери спочатку недолюблюють зміни, але саме завдяки ним мова дизайну стає все більш витонченою. Дизайнер, який працював на моніторі у кінці 90-х і 2000-х років певно пам’ятає перевантажені ефектами проекти, на яких були тіні, скоси, світлові ефекти і, звичайно ж, ніякого білого простору. Все це було природним наслідком боротьби дизайнерів з новим медіа-середовищем, які на повну використовували кожен піксель!
Плоский дизайн
Любите ви його чи ненавидите, але «плоский дизайн» наразі завоював неабияку долю уваги серед дизайнерів. Всі основні комп’ютерні платформи прийняли варіації цієї мінімалістичної дизайнерської мови (Android, IOS, OSX, Windows, Windows Mobile). А також він домінує у стрімкому світі веб-дизайну.
Плоский дизайн – це демонстрація зрілості у мисленні візуального дизайну. Це природний прогрес, обумовлений тенденціями та модою, який водночас є частковим відображенням галузі професіоналів, що нарешті всерйоз взялися за роботу з цифровими медіа.
Моушн дизайн
На сьогоднішній день стан анімаційного дизайну можна порівняти з ерою «Тінюшок» у візуальному дизайні.
Можливості анімації значно покращилися завдяки властивостям «CSS transitions», прискореного розвитку обладнання та новим стандартам, таким як веб-анімація JS.
До того ж, більш потужні, багатоядерні, мульти-гігабайтні мобільні пристрої з надчіткими дисплеями тепер можуть запросто показувати анімовані інтерфейси, видаючи 60 кадрів за секунду.
Враховуючи початок розвитку анімаційного дизайну, цілком природно, що дизайнери схильні додавати анімацію для візуального відчуття, на відміну від тіні або фаски.
Впевнений, що, на відміну від візуального дизайну, не доведеться чекати 15 років, щоб моушн-дизайн це переріс.
Зловживання анімацією
Недоречну анімацію можна побачити всюди, і це не обмежується тільки роботами дизайнерів-любителів. Користувачу дуже легко її виявити – це анімація, що трапляється всюди на вашому шляху. Вона змушує користувача насуплювати брови у розпачі, стоячи між ним та наміченою метою. Як дизайнер ви повинні розуміти, що інтерфейс – не розвага. Ніхто не вмикає ваш додаток (або сайт) для того, щоб побачити це неймовірне спливаюче анімаційне диво!
Приклад поганої анімації в інтерфейсі
Є безліч прикладів поганої анімації інтерфейсу на екрані як комп’ютерів так і мобільних пристроїв. Анімація в OS X при переході від режиму вікна до повноекранного – якраз один з таких. І це прикро вражає, оскільки це головна особливість флагманського продукту, який був створений компанією, відомою своїм ультрасучасним відчуттям дизайну.
Основні недоліки цієї UI-анімації такі:
- Вона повільна
- Вона непотрібна
- Вона не налаштовується (хіба що вам вдасться внести зміни через командний рядок)
Як ви можете дізнатися, коли саме ваша анімація інтерфейсу дратує? Люди пишуть повідомлення зі скаргами. Є безліч повідомлень і питань на форумах, присвячених тому, як прискорити або відключити ефекти. Це якраз хороший показник того, що анімований перехід не має ніякої користі, а лише дратує – а це смертний гріх в дизайні інтерфейсу.
Приклад готового проекту моушн-дизайну
Ми будемо використовувати простий дизайн деяких моїх недавніх робіт. Ці роботи вже містять ряд прикладів поганого дизайну.
Недоліки цього дизайну:
- Маска, яка блокує інтерфейс користувача
- Немає ознак того, що операція відбувається у фоновому режимі
- Повільна анімація
- Непотрібна анімація
Один з найбільш дратівливих аспектів цієї анімації – те, що вона з’являється після того, як мережевий запит вже завершено, тим самим змушуючи користувача чекати ще деякий час.
Чи потрібна анімація?
Перше питання має бути: чи анімація щось дає користувачеві?
Приклад вище може бути ідеальним зразком ефективного використання анімації інтерфейсу користувача. Процес дії вимагає мережевого запиту, який може зайняти час від 100 до 500 мс. Це прекрасна можливість використати анімацію, щоб замаскувати цей трудомісткий запит.
Покращення дизайну
Натисніть тут для переходу до живої версії цього демо.
Це зовсім незначна зміна — додавання індикатору завантаження, яка говорить користувачеві про те, що він чекає на додаткові дані, однак спливаюча анімація тут зайва і тільки сповільнює роботу.
Натисніть тут для переходу до живої версії цього демо.
Користувач хоче бачити необхідні дані, які йому потрібні, без будь-якої зайвої анімації в процесі роботи. Використання маски для блокування видимості екрану для користувача в такому разі є дуже нав’язливим.
Анімація – шаманство та ілюзії
Затримки, навіть при роботі з мережевими додатками, можна зменшити або навіть усунути кешуванням та агресивною попередньою вибіркою ресурсів. Тим не менш з цим є свої власні проблеми. Люди, що виходять до мережі за допомогою обмеженого мобільного зв’язку, не оцінять великі обсяги даних, які можуть і не знадобитися.
Враховуючи, що затримок не завжди можна повністю уникнути, анімація може бути використана, щоб дати ілюзію швидкого додатку. Анімаційне нашаровування може бути особливо ефективним у цьому плані.
Натисніть тут для переходу до живої версії цього демо.
Покращення:
- Використання індикатора завантаження без блокування.
- Перекриття анімацією, яка відволікає користувача від затримки вибірки даних.
Прогресивне завантаження
Прогресивне завантаження можна використовувати, щоб завантаження даних здавалося користувачу швидшим. Люди, звичайно ж, не можуть відразу використати всі дані, які представляє їм ваша програма. Завдяки завантаженню даних та поданню доступної інформації порціями, користувачі отримують ілюзію набагато швидшої роботи додатку.
Натисніть тут для переходу до живої версії цього демо.
Ряд коментаторів, у тому числі Isak Falch із спільноти «userexperiencedesign» рекомендував спробувати «розширити карточку» до цієї анімації, що я й пробував зробити як альтернативу.
Спасибі всім за конструктивні зауваження!
Натисніть тут для переходу до живої версії цього демо.
Дуже реальна користь цього підходу – це те, що користувачі зберігають відчуття контексту.
Висновок
Ми повинні бути обережними, і не повторювати помилок минулого, де форма цінується більше за функціональність. Анімація, може, і повинна використовуватися для підвищення якості обслуговування користувачів сайту або програми, проте це дуже малоймовірно, що чисто косметичний ефект анімації зробить краще для вашого продукту.
Затяжні мережеві запити дають прекрасну можливість використовувати анімацію, щоб, так би мовити, «напустити туману» і створити ілюзію для користувача більш швидшого завантаження.
1 коментар
Хорошая статья, спасибо!