Відгук та емоційність сайту

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

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

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

Сайт повинен реагувати на дії користувача

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

Відгук сайту — це його реакція на дії користувача або на настання певної події.

Найбільш типовими діями користувача на сайті є:

  • Прокручування.
  • Наведення курсора.
  • Натискання.
  • Заповнення форм.

Кожна з цих дій може призводити до реакції сайту.

Дії при прокручуванні

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

Але на одній лише реакції на прокручування можна побудувати дуже насичений досвід перегляду. Наприклад, на сайті https://kubrick.life від української вебстудії Tubik Studio, присвяченому 90-річчю режисера Стенлі Кубрика, всі взаємодії побудовані саме на дії прокручування. І цієї одної дії виявилось цілком достатньо, щоб перетворити проєкт на лауреата премій Webby Awards та Red Dot Award.

Наведення курсора

Наведення на елемент — це водночас і спосіб показати інтерактивну природу елементу, і самостійна дія.

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

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

На мобільній версії взаємодія за наведенням замінюється взаємодією натисканням.

Дії при натисканні

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

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

Дії при заповненні форм

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

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

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

Найбільш важливими в цьому контексті є:

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

Додайте на сайт анімації

Сучасні версії HTML, CSS, JS дають змогу використовувати багато цікавих візуальних рішень. Прості анімації є базовою складовою CSS3, і тому не потребують значних зусиль в реалізації. Завдяки їм в інтерфейсі з’являється відчуття плавності.

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

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

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

Але анімації здатні не лише пришвидшити раціональне сприйняття інформації. Вони також допомагають надати дії емоційну складову. Наприклад, одним з символів сервісу поштових розсилок Mailchimp є мавпеня-поштар. Мало хто це знає, але в нього є ім’я — Фредерік фон Шимпенгаймер IV (або скорочено «Фредді»).

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

Така анімація, погодьтесь, набагато швидше передає відчуття важливості дії, ніж фраза, на кшталт: «Увага! Відправка розсилки є незворотною дією».

Але, коли вже справу зроблено, нагнітати тут ні до чого. Тож коли розсилку відправлено, та сама рука Фредді дає вам «п’ятірочку».


Звук

Раніше використання в сайтах звуку вважалося зайвим окремими фахівцями. Але епоха тихих сайтів минає, як колись минула епоха німого кіно.

Правильно підібрані звуки можуть поліпшити досвід взаємодії з вашим сайтом.

Звуки виправдані, коли:

  • На сайті є сповіщення (наприклад про те, що хтось відповів у чаті).
  • При вдалому відправлені форми.
  • Якщо сталась помилка.

Персонажі

Ми вже наводили в цьому матеріалі приклад мавпеня Фредді, маскота сервісу Mailchimp. Наявність персонажів здатна зробити сприйняття інтерфейсу набагато приємнішим.

Ви могли самі в цьому переконатись. У нас є ціла купа персонажів у Креативній Практиці.

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

От, наприклад, в кожному модулі ми показуємо невеличке сповіщення. І в ньому є наш персонаж — дизайнер Марічка.

Просто подивіться на це саме сповіщення без неї.

На завершення

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

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

Пам’ятайте про це та не забувайте наповнювати ваші проєкти емоціями. Користувачі це обов’язково оцінять.

·
3293
·
3
·
goodsuper 81
Головна