Статті
5 причин інтегрувати ілюстрацію в інтерфейс користувача
Поєднання UI дизайну та цифрового мистецтва з досвіду студії Tubik
2 серпня, 2019
Сергій Валюх
CEO & Art Director у Tubik Studio
Марина Яланська
Контент-стратег студії Tubik

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

Читайте також: Інтерфейси як мистецтво

Ілюстрація: Tubik

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

Ілюстрація для обкладинки книжки Фредріка Бакмана «Чоловік на ім’я Уве» 

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

Ілюстрація швидко передає інформацію та посилює текст

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

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

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

Hero ілюстрація, створена Tubik для фінансового сервісу з управління пенсійними накопиченнями, підтримує повідомлення, що закладене у текстовому слогані «Дай своїм грошам розквітнути»

Ілюстрація для головної сторінки блогу, присвяченого темі здоров’я, виконана у відповідній колірній гамі та візуально підтримує теглайн «Твоє здорове життя зростає тут»

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

Slider image
Slider image
Slider image

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

Ілюстрація – ефективний інструмент сторітелінгу

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

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

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

А ось цікавий приклад від дизайнера Tony Babel: ілюстрації-маскоти інтегровані в мобільний інтерфейс для підтримання візуального сторітелінгу та емоційної комунікації продукту з користувачем

Ілюстрація – носій емоції

Не секрет, що людина – істота не лише логічна, але й емоційна. Відкидати цей вагомий фактор у створенні цифрових продуктів ризиковано.

У своїй книзі “Designing for Emotion” Ааррон Уолтер згадував: «Історично зручність використання була основою дизайну інтерфейсів. Це дещо пригнічує, чи не так? Якщо ви можете зробити корисний інтерфейс, ви добре працюєте в нашій галузі. Уявіть, якби ми так вимірювали успіх в автоіндустрії. За цим стандартом ми б застигли на рівні Pacer 1978 AMC. Багато вебсайтів та додатків створюють кращий досвід. Вони переосмислюють ієрархію потреб і включають ще один щабель верхнього рівня, пов’язаний з задоволенням, розвагами, радістю та захопленням. Як щодо того, щоб інтерфейс виконав критично важливе завдання і при тому викликав посмішку на обличчі? Це ж справді потужно! Це буде досвід, який ви порекомендуєте друзям; це буде ідея, про яку варто розповісти» (*переклад автора статті).

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

Мила та емоційна ілюстрація для слайду, що презентує технологію розпізнавання дитячого мовлення

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

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

Ілюстрація – джерело естетичної насолоди

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

Illustration Professium | Projector

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

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

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

Сервіс Intercom широко застосовує цифрові ілюстрації: у світлому, сповненому «повітря» інтерфейсі вони не лише передають візуальні повідомлення, але й стають носієм краси та естетики

Ілюстрація – ресурс візуальної оригінальності

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

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

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

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

Slider image
Slider image
Slider image
Slider image

Ілюстратор Jack Daly створив цілу серію оригінальних ілюстрацій для проєкту Design Genome від Invision. Зображення презентують кожну компанію, що бере участь у проєкті, і забезпечують проєкту єдину впізнавану візуальну естетику

На що звернути увагу

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

  • Цільова авдиторія: вік, ґендерна приналежність, фізичні особливості, смаки, географічні чи культурні особливості.
  • Типові умови використання продукту.
  • Глобальний чи локальний рівень поширення.
  • Рівень розпізнавання певних візуальних образів та метафор.
  • Рівень відволікання чи концентрації уваги через використання графіки.

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


Раніше Telegraf.Design розповідав, на чому ілюстратору варто зосередити увагу у 2019 році.

avatar
Сергій Валюх
CEO & Art Director у Tubik Studio
Колонка
avatar
Марина Яланська
Контент-стратег студії Tubik
Колонка

У нас є ще дещо для вас