Розуміння мікрозв'язків у проекті мобільних додатків
Юзабіліті - один з ключових компонентів дизайн мобільного інтерфейсу користувача. Велика зручність використання часто пов'язана мікро взаємодії які є невеликі відповіді та поведінка з інтерфейсу диктувати, як слід використовувати інтерфейс користувача. Ці мікро взаємодії визначають поведінку, заохочують взаємодію і допомагають користувачам уявити, як інтерфейс повинен працювати.
Цифрові інтерфейси є посередниками між користувачами та їх бажаними цілями. Дизайнери інтерфейсу створюють досвід, який допомагає користувачам виконувати певні завдання. Наприклад, програма списку завдань має інтерфейс, який допомагає користувачам організувати свої завдання. Так само, як додаток Facebook дає користувачам інтерфейс для взаємодії з обліковим записом Facebook.
У цьому посібнику я підемо далі мікро взаємодії для мобільних додатків. Малі взаємодії можуть здаватися тривіальними, але вони можуть мати величезний вплив на якість роботи користувача. Якщо це зроблено належним чином, мікро взаємодії відчувають себе справжньою частиною всеохоплюючого мобільного користувача.
Сила мікрозв'язків
У більшості випадків мета мікро взаємодії полягає в тому, щоб забезпечити зворотній звязок на основі дії користувача. Це може допомогти користувачам візуалізувати, як переміщується або поводиться інтерфейс, незважаючи на те, що це чисто цифрове зображення на плоскому екрані.
Мікро взаємодії володіють силою, оскільки вони створити ілюзорний досвід. Повзунки вмикання / вимикання не рухаються так само, як фізичні перемикачі, але вони можуть виглядати, щоб рухатися таким чином через анімацію.
У цій публікації я знайшов неймовірну цитату, в якій обговорюється величезна цінність мікро взаємодій для мобільних додатків:
“Кращі продукти роблять дві речі: особливості та деталі. Особливістю є те, що приваблюють людей до вашого продукту. Деталі - що їх там. Та деталі що фактично роблять наше app виділяються з нашого змагання.”
The дрібні деталі може здаватися незначним з точки зору розвитку, але з точки зору користувацького досвіду вони справді зробіть різницю між користувальницьким інтерфейсом програми "ОК" та надзвичайним інтерфейсом програми.
Великі мікро взаємодії роблять користувача відчувайте винагороду для здійснення дії. Ці дії можуть бути повторюється і вбудовані в поведінку користувача. Вони можуть навчитися використовувати додаток, заснований на цих менших мікро взаємодіях. Коли користувач виконує поведінку, ці невеликі взаємодії сигналізують "так, ви можете взаємодіяти зі мною!"
Погляньте на приклади, знайдені в специфікаціях дизайну матеріалу Google. Документація насправді має цілий розділ, присвячений матеріальному руху. Просторові відносини є великою частиною цього рівняння, але рух може диктувати більше, ніж просто просторові відносини.
Тут найпоширеніші способи використання анімації та руху у дизайні мобільного інтерфейсу / UX:
- Керування користувачами між різними сторінками
- Керування користувачами через інтерфейс для навчання певним поведінкам
- Пропозиції дій / поведінки, які можна прийняти на будь-якій сторінці
Мобільні програми мають набагато менше місця на екрані ніж веб-сайти. Це може призвести до виникнення певних труднощів при вивченні користувачів щодо використання програми. Але це може бути дивно простим, якщо ви знаєте, як правильно реалізувати мікро взаємодії.
Як працюють мікро взаємодії
Одиночна мікро взаємодія спрацьовує, коли користувач залучається до однієї частини інтерфейсу. Більшість мікро взаємодій є анімовані відповіді на жест користувача. Таким чином, рух за відхилення буде реагувати по-різному, ніж кран або фільм.
Blink UX зробив великий пост, обговорюючи дрібні деталі мікро взаємодій. Ці невеликі анімації повинні слідувати a передбачуваний процес що користувач може дізнатися для кожної взаємодії в додатку.
Мікроз'єднання спрямовують користувачів через інтерфейс надання відповідей на поведінку. Після того, як користувач знає, що повзунок вмикання / вимикання може рухатися, вони знають, що він інтерактивний. Виходячи з відповіді, вони також знатимуть, чи було налаштування ввімкнено або вимкнено. Коли кнопка виглядає, як вона може бути натиснута користувач інстинктивно знає вони можуть взаємодіяти з ним.
Згідно з UXPin, кожна основна мікро взаємодія може розпастися на чотири кроки, але я підсумував процес три кроки.
- Дія - користувач щось робить подібне переміщення, натискання та утримування, або інша взаємодія.
- Реакція - інтерфейс відповідає на основі того, що має відбутися. Прокручування екрана може повернути назад в історії браузера, або натиснути повзунок ON / OFF може вимкнути налаштування.
- Зворотній зв'язок - це те, що користувач дійсно бачить як результат взаємодії. Коли користувач переміщається назад у мобільному браузері, він може переміститися на попередню сторінку, щоб він з'явився "зверху" екрана. Повзунок вмикання / вимикання може плавно ковзати або збільшуватися, коли тиск застосовується до екрана.
Ці дуже маленькі дії можуть бути виконані без анімації, але великі мікро-взаємодії пропонують a реалістичне почуття до плоского цифрового інтерфейсу, який в основному поставляється у вигляді реалістичні ефекти анімації. Вони вдихають життя в інтерфейс і заохочують більше взаємодії з користувачем.
Шукайте деталі
Переглядаючи менші фрагменти дизайну, ви зрозумієте, як програма повинна реагувати на певну поведінку.
Потягніть, щоб оновити є хорошим прикладом нинішнього популярного мікро взаємодії. Він не був невід'ємною частиною iOS, коли він перший запустив, але багато додатків взяли цю ідею і почали рухатися з нею. Тепер оновлення - це добре відоме поведінка, яку більшість користувачів просто знають для використання під час перегляду інтерфейсу каналу. Те ж саме можна сказати і про мобільні меню гамбургерів, які стали дико популярними.
Зробіть кожне мікро взаємодія реалістичний і простий. Не перестарайтеся анімації, оскільки вони можуть стають нудними якщо вони занадто деталізовані і часто використовуються. Користувач не хоче, щоб іскри з'являлися кожного разу, коли вони торкалися піктограми меню. Враховуйте баланс з справжньою цінністю, яка спілкується як повинен працювати інтерфейс не виходячи за борт.
Дивлячись на деякі приклади
Я вважаю, що найкращим способом дізнатися щось, роблячи це, і другим найкращим способом є вивчення роботи інших. Я зібрав невелику жменю Мультимедійні анімації UI / UX від талановитих користувачів Dribbble, щоб показати вам, як це виглядає в реальному макеті.
Кожна програма буде відрізнятися і мати різні потреби на основі того, що робить додаток. Нарешті більшість користувачів хочуть того ж: додаток інтуїтивно і забезпечує якісний досвід користувачів з мікро взаємодіями щодо поведінки користувачів.
1. Анімований користувальницький інтерфейс App Event
Перший приклад - витончена функція анімації карт, створена Іваном Мартиненко. Ви помітите кілька мікро взаємодій в цій конструкції, зокрема, картка зчитування і переміщення через деталі.
При натисканні на карту він збільшується в розмірах. При натисканні на кнопку «Підписатися» фотографію профілю користувача слайди до списку абонентів. Все відчувається дуже інтуїтивно і цілком природно для інтерфейсу.
2. Інтерактивний екран вправи
Ця творча мобільна анімація вправи походить від дизайнера Віталія Рубцова. Він демонструє користувача, який зберігає свої тренування для одного набору присідань.
Зверніть увагу на те, що кожна анімація має однакову еластичний ефект відмов коли меню відкриваються і закриваються. Це також стосується, коли активність перевіряється як "Готово". Послідовність є ключовим фактором для мікро взаємодій, тому що всі вони повинні відчувати себе підключений до одного інтерфейсу.
3. Пошук мікро-взаємодій
Короткий, солодкий, і по суті. Я вважаю, що це найкраще описує ці мікроінформації пошукових програм, розроблені Лукасом Гораком. Кожна анімація є швидкий, але все ще помітний.
Саме так слід розробляти мікро взаємодії уникнути надмірної складності. Якщо інтерфейс буде завантажуватися швидше без анімації, то навіщо його додавати? Швидка анімація утримуйте користувача, переміщаючись, не заважаючи досвіду.
4. Мікроз'єднання фітнесу
Я думаю, що Якуб Антала ?? дійсно вдарив цього з парку з його мікроінтерфейсом фітнес-мети. Всі екрани мають таке відчуття джигл-джелл-о, тому що форми рухаються так плавно.
Проте інтерфейс також відчувається міцний і корисний. Це свідчить про те, що мікро взаємодії, створені з метою, все ще можуть бути цікавими та цікавими, але також функціональними та прагматичними.
5. Потягніть, щоб оновити анімацію
Ось один з моїх абсолютних улюблених анімацій, які можна підібрати, щоб створити команду в Ramotion. Це не тільки імітує рідину з дією тяги, але анімацією відповіді плавно з'єднується від сплеску рідини в навантажувальну коло.
Це багато уваги до деталей це те, що виводить справжню красу в мікро взаємодії мобільних додатків.
6. Вкладка Мікроз'єднання
Віджети з вкладками досить поширені для мобільних додатків через менші екрани. Мені дуже подобається ця мікровзаємодія, створена Джоном Нусісом, хоча я думаю, що вона буде більш ефективною на швидшій швидкості, але сама анімація славна і добре продумана.
Стрілка прив'язки табулятора нахиляється праворуч, так як новий вміст повертається праворуч. Це дає ілюзію весь екран фізично рухається направо. Анімація є вишуканою, але, оскільки це так повільно, я думаю, що більшість користувачів роздратуються через кілька днів.
7. Попередня завантаження анімації
Я не багато говорив про це завантаження барів у цій публікації, але вони настільки ж цінні для загального досвіду. Більшість користувачів не хочуть чекати завантаження даних, але вони точно не хочуть дивитися на порожній екран під час завантаження.
Bret Kurtz зробив це дивовижне попереднє завантаження екрану, що і весело, і інформативно. Користувач дійсно може бути розважали дивитися цю маленьку анімацію повторити. Вони також можуть бути заспокоєний що додаток все ще завантажують їх дані і не розбився.
Підведенню
Всі ці приклади блискуче демонструють цінність мікро взаємодій. Мобільні програми отримують набагато більшу цінність від мікро взаємодій, оскільки користувачі фізично торкайтеся екранів пальцями. Користувачі не торкаються своїх настільних моніторів або екранів ноутбуків, але кожен з них натискає свої смартфони, тому що це стан інтерактивності за замовчуванням.
Це набагато більше особистого досвіду, саме тому дизайн мобільних додатків може бути таким тонкий процес. Коли це зроблено належним чином, додавання великих мобільних мікро взаємодій може побудувати a потужний ілюзорний досвід користувачів нічого, крім пікселів і руху.
