5 помилок, яких слід уникати при створенні микровзаимодействий

Микровзаимодействия — один з ключових моментів UI/UX-дизайну. Вони містять деталі, частини продукту, які виконують одну конкретну задачу. Кожен раз, коли ми міняємо налаштування, синхронізуємо дані та пристрої, встановлюємо будильник, вводимо логін і пароль або обираємо певну функцію — ми стикаємося з микровзаимодействиями. Вони супроводжують нас всюди: в різних пристроях і додатках наших телефонів, комп'ютерів, офісної та побутової техніки, в транспорті і вдома. І якщо микровзаимодействия зроблені правильно, вони роблять наше життя комфортніше, цікавіше і простіше.

У цьому пості ми розглянемо 5 помилок, яких слід уникати при створенні микровзаимодействий.



1. Стримуйте себе

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

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



Розберемо крок за кроком:

  • Найбільш очевидна річ, яку можна помітити — Flip 3D на фотографіях. Дана технологія тут вже зайва. Правило микровзаимодействий: якщо вилучення чого-небудь робить візуалізацію більш «чистого», не сумніваючись прибираємо зайві ефекти.
  • Також можна помітити, що режим подачі фото обрізає картинку, тоді як в режимі редагування вона більше.
  • Верхні іконки навігації віднімають багато часу для переходу. Микровзаимодействия повинні бути дуже швидкими, триватиме не більше 300-400 мс.
  • Нижні іконки розташовані в різних місцях, адже вони і без того мають протилежне значення, збільшуючи тим самим когнітивну навантаження.
Висновок: існує маса важливих нюансів, які варто враховувати в створення подібної анімації. На реальному прикладі можна побачити, що працює, а що ні. Зовсім не означає, що дизайнерові не слід проявляти свій креатив, додаючи чудові деталі. Але також варто пам'ятати, що надлишок деталей може перевантажити дизайн і погіршити його.

2. Не жертвуйте наративом в ім'я катарсису

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

На прикладі Сриканта Шетті (дуже сильного аніматора і дизайнера) розглянемо варіант не дуже вдалого наративу:



Перше, що можна побачити — дивна розмітка. Ми очікуємо, що текст з'явиться над лінією. Але тут виявляється, що насправді це зовсім і не лінія, а розкривається форма. І ось саме у неї ми вводимо логін і пароль.

Ми не побачили того, чого очікували і що здавалося цілком логічним. Це спантеличило і змусило перервати виконання завдання (введення інформації). Несподівана інтерпретація повністю змінює вже побудовану ментальну модель і відводить нас від передбачуваного результату.

Для контрасту інший приклад:



3. Те, чого не можна зробити одним рухом, не варто робити взагалі

Майже кожне успішне микровзаимодействие, яке мені траплялося, складалося з одного руху.

Розглянемо детальніше роботу дизайнера Ромейна Пассиленда (до речі, володаря дійсно крутого портфоліо):



Маючи досвід роботи з анімацією і досвідчене око, я бачу, що тут присутні два окремих руху, які сміливо можна об'єднати в одне. У наведеному прикладі відбуваються два різні дії:

— лінії трансформуються;
— іконка обертається.

Замість того, щоб об'єднати ці дві дії, Ромейн їх навіщось розділив (іконка повертається, потім лінії трансформуються). Для наочності, інший приклад:



Ліва і права анімації також порушують принцип «одного руху». Зате анімація, яка знаходиться посередині — те, що треба. Дія в одному русі — чисте, завершене і ефективне. Мінімум навантаження для користувача.

4. Проблема не в анімації, проблема в дизайні

Дизайнерам, які вивчають UI-анімацію, часом важко відокремити рух від статичного проекту. Що зрозуміло і частково є функцією комплексної природи хорошого микровзаимодействия: його важко визначити в реальному часі. Але ось погане микровзаимодействие стирчить, наче зламаний палець.

В наступній діаграмі, я зводжу основні деталі своєї теорій на дизайн і анімацію:



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

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



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

Але в цьому прикладі немає анімаційного рішення, яке б зберегло дизайн від самого себе. Помилка полягає в дизайні, а не у виконанні його через якийсь час. По суті микровзаимодействие і є дизайном через якийсь час.

Тут кнопка «Додати в кошик» трансформується, змінює форму і заповнює собою зображення. Це не тільки зайво, але і враховуючи масштаби даного елемента UI — несе додаткову когнітивну навантаження на мозок користувача.



У кіновиробництві кажуть, що проблеми на знімальному майданчику починаються зі сценарію. Поганий сценарій веде до поганої зйомці. А поганий дизайн — до поганого микровзаимодействию.

5. Канадський хокеїст Уейн Гретцкі: «Якщо ти не зробив жодної спроби потрапити в ціль, то промахнувся на всі 100%»

Оскільки дизайнери в основному не використовують для оформлення анімацію на 300-400 мс, легко втратити контроль над деталями і перестати помічати можливості, які вони розкривають.

На прикладі Івана Белаяца, розглянемо 5 втрачених деталей:



  • Існує можливість створити чисту і елегантну трансформацію іконки кнопку menu/back. Значок меню висувається зверху, що створює відчуття незв'язності та нелогічності.
  • Стрілка вправо в жовтому квадраті — непотрібне обертання і ефект масштабу. Це виглядає дивно. Було б краще, щоб стрілка перемішалася разом з контентом.
  • При переході текст параграфа з'являється і зникає без необхідності. Він повинен зберігатися.
  • Заголовок рухається зліва направо. Повторне зникнення контенту варто було б зробити більш елегантним, замість знебарвлення і незрозумілого ковзання тексту.
  • Обрізається зображення солдата. Було б непогано перетворити превю картинки таким чином, щоб воно зберігало контекст. У даному ж випадку прев'юшки просто стає фоном заголовка, показуючи найменш цікаву частину зображення.
Приклади для контрасту — підвищена увага до деталей. У цих роботах продумано все до дрібниць, використані всі можливості і немає нічого зайвого. Уейн Гретцкі міг би пишатися. Якщо звичайно його хоч трохи турбують користувачі (в чому особисто я сумніваюся).




І висновок

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

— стриманість;
— наратив;
— правило одного руху;
— анімація не всемогутня;
— деталі дають можливості.

Це звичайно ж не гарантує приголомшливий дизайн, але як мінімум — крок у потрібному напрямку.
Джерело: Хабрахабр

0 коментарів

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