7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

19

Від автора: в процесі проектування користувальницьких інтерфейсів (UI) з’явилося досить-таки нове слівце – «Інтерактивний дизайн». У 2015 році для елементів дизайну вже не вистачає простого перемикання між двома станами. Сьогодні такі слова, як «слайд», «стрибок» і «відскік» стали невід’ємною частиною гарного інтерфейсу.

Тим не менш, у світі взаємодій – як і у випадку з дорогими годинниками – «модний» не завжди значить «елегантний». Розглядаючи годинник нижче, мало хто з вас вирішить носити досить незвичайні годинник зліва на картинці. Природна елегантність завжди притягує, то ж відноситься і до прикрас в дизайні.

7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

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

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

Чому ж це так важливо?

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

Впровадження в ваш дизайн елементів «микровзаимодействия» не тільки зробить його зручніше, але і може викликати позитивні емоції у ваших користувачів (як у випадку з відкриттям коробки Apple). Такі почуття допомагають виробляти додатковий гормон дофамін, що буквально притягує користувача до вашого сайту/додатком.

Що означає термін «микровзаимодействие»?

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

Взаємодія з навігацією: Той випадок, коли користувач переходить по сторінкам/станів сторінок.

Модальні взаємодії: Стан, коли основне вікно сайту заморожено, а зверху нього відображається тимчасове модальний (наприклад, lightbox галерея або вікно підтвердження даних).

Микровзаимодействия: Випадок, коли користувачеві необхідно змінити стан всього одного елемента на сторінці – наприклад, розкриття випадаючого списку меню або показ додаткових характеристик товарів.

Як зробити ці микровзаимодействия елегантними?

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

Ключове правило №1 – ніяких телепортацій

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

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

7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

Правило №2: Перемикачі краще кнопок

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

Більше того, за законом Фиттса перемикання контролера стану вкл/викл повинно бути швидким і не займати багато зусиль.

7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

Правило №3: Місце взаємодії має бути безпосередньо поруч з тригером

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

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

7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

Правило №4: Використовуйте природне час анімації

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

З іншого боку, якщо анімація буде дуже швидкою, то це буде виглядати неприродно – або користувач взагалі пропустить щось важливе. На жаль, все, що ви можете зробити, це оцінити на око анімацію. Кращий рада, яку я отримав, це не задавати однаковий час анімації для всіх елементів. Досить трохи повозитися з кожним з них і налаштувати час індивідуально. Більш того, відзначте, що різниця навіть в 0,05 секунди вже помітна.

7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

Правило №5: Повернення анімації на колишнє місце не повинно руйнувати почуття контролю у користувача

Іноді трапляється так, що користувач передумав прямо в момент анімації тригера. У таких випадках те, наскільки чуйним буде перемикач, грає ключову роль. Якщо користувач відміняє останню дію (наприклад, подвійним клацанням) анімація повинна миттєво піти у зворотному напрямку. Якщо цього не відбувається, користувач миттєво втрачає почуття контролю ситуації. Більш того, ви змушуєте користувача думати, що він зробив помилку.

7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

Правило №6: Завжди використовуйте автофокус в серіях анімацій

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

7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

Правило №7: Завжди повідомляйте користувачеві про завершення взаємодії

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

7 простих правил по створенню шикарних елементів інтерфейсу взаємодії з інтерфейсом

Як використовувати ці поради

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

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