1. Що таке мікровзаімодействіе і причому тут веб-дизайн
2. Що буває з людьми, які проходять 1 курс з маркетингу?
3. Чому мікровзаімодействія так важливі
4. Приклади мікровзаімодействій від Vintage
5. зависає анімація
6. Анімація для залучення уваги
7. навігаційна анімація
8. Анімація, яка змінює цінності
9. Гейміфікація
10. рух сторінки
11. резюмуємо

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

Програючи улюблений трек в Apple Music, перевіряючи електронну пошту, відповідаючи на дзвінки по телефону - ми здійснюємо мікроруху. Всі ці дрібниці настільки тонко вплетені в повсякденному житті, що людині, далекій від веб-дизайну, навряд чи зрозуміло, як це все працює або виглядає. Однак, коли погляд чіпляється за незграбну кнопку зворотного зв'язку на сайті, користувача щось відштовхує - так дрібні деталі впливають на сприйняття дизайну.

Що таке мікровзаімодействіе і причому тут веб-дизайн

Дві речі визначають кращий інтерфейс сайтів: ретельно опрацьовані функції і деталі. Вони привертає увагу користувача до продукту і утримують відвідувача на сайті.

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

Що буває з людьми, які проходять 1 курс з маркетингу?

Нічого особливого: у них залишаються знання з 1 курсу з маркетингу. Але що, якщо з'єднати 3 кращих курсу з маркетингу і віддати їх за супервигідною ціною тим, хто хоче знати все?

Ми зібрали всі ключові знання в області інтернет-маркетингу і перетворили їх у зрозумілі інструкції та покрокові алгоритми. Тобі залишилося тільки скористатися ними.

Реклама

Простіше кажучи, мікровзаімодействіе - крихітний функціональний елемент, що виконує одну конкретну дію.

Чому мікровзаімодействія так важливі

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

Мікровзаміодействія:

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

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

Приклади мікровзаімодействій від Vintage

завантажується анімація

Проект: Radioactive Film

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

У цьому кейсі анімація не прискорює завантаження сайту, але вона робить час очікування менш дратівливим для відвідувача. У випадку з сайтом для нашого клієнта - компанії з виробництва фільмів Radioactive Film - анімація завантаження непросто створює приємну картинку, але і ідеально вписується в загальну концепцію веб-кінематографа, наділяючи інтерфейс гармонією.

Проект: ESL

зависає анімація

Проект: Maija

Це не просто красива картинка - така анімація додає деяку динаміку сторінках сайту.

Ефект зависання спрацьовує при наведенні стрілки миші на елементи сайту, на яких змінюються: колір, розмір, форма, зображення.

Головна мета зависло анімації - НЕ естетика, а зворотний зв'язок елемента: користувач розуміє, що щось станеться, якщо натиснути на елемент.

Проект: Archimatica

Анімація для залучення уваги

Проект: Archimatica

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

навігаційна анімація

Проект: Vintage Web Production

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

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

Проект: Radioactive Film

Меню навігації, сховане за кнопкою - гамбургер-меню. Це суперечливий шаблон, тим не менш, вже відомий користувачами.

Елементі економить екранне простору, групуючи другорядну інформацію. Іноді не варто скупитися місцем або соромитися сміливого рішення зробити гамбургер-меню на всю сторінку - результат вартий того.

Для сайту Radioaktive Film меню гамбургера - очевидне і розумне рішення. Дизайн з фокусуванням на відеоконтенті і елегантних елементах інтерфейсу привів до обмеження «важких» елементів, які лише захаращують сторінки і відволікають увагу користувача від візуального контенту.

Анімація, яка змінює цінності

Проект: Octagonal

Елементи інтерфейсу, засновані на числових і буквених символах, можуть змінити значимість самих елементів.

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

Гейміфікація

Проект 100% Capri

100% Capri - європейський бренд одягу з магазинами по всьому світу. Це не настільки відомий бренд, як Burberry, Chanel або Celine це абсолютно нішевий бренд.

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

Проект 100% Capri

Така анімація красива не на шкоду користь. Вона не повідомляє про статус сторінки і не дає поради користувачеві. Основна мета такого підходу - підтримання загального сприйняття високоякісного сервісу та дещиця задоволення від відвідування.

Один з наших клієнтів, український дизайнер інтер'єру та архітектор Сергій Махна, одного разу відкрив двері нашого агентства і заявив, що йому потрібен сайт, який підніме його бізнес на міжнародний рівень і стане адекватною «обличчям» його як вправного професіонала. Було очевидно - ми повинні дбати про всі найдрібніших деталях і кожному пікселі. Взаємодія з мишею у вигляді тонкої і ледь помітною «павутини» стало прекрасним доповненням до вишуканого дизайну веб-сайту.

проект ESL

рух сторінки

Проект: Multimed

Multimed - центр естетичної медицини, який пропонує повний спектр медичних та естетичних послуг.

Це приклад застосування motion-сторінки для відображення візуальної емоції від краси. Так, іноді дизайнери можуть дозволити собі і таке інше.

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

резюмуємо

Пам'ятайте, у випадку з мікровзаімодействіямі менше - означає більше. Якщо стоїть вибір що-небудь видалити і після цього дизайн сайту стане «чистіше», майже напевно це правильний вибір. Тому при роботі з елементами мікровзаімодействія ми фокусуємося тільки на користувачів, їх зручність і wow-ефекту.

Євген Кудрявченко

CEO Vintage

Читайте також:

Думка редакції може не збігатися з думкою автора. Ваші статті надсилайте нам на [email protected] . А наші вимоги до них - ось тут .