UX ілюстрація об’єднує вміст, візуальні елементи та функції

UX ілюстрація об’єднує вміст, візуальні елементи та функції

Автор і ілюстратор д-р Сьюз сказав: «Слова та зображення — це інь і ян. У шлюбі вони народжують потомство, цікавіше, ніж будь-хто з батьків».
Читання книжок з картинками, як-от доктора Сьюза, або гортання журнальних статей із приводячими до роздумів редакційними матеріалами, може пролити світло на сильну спорідненість між текстовим і візуальним.

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

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

Контент-перша ілюстрація

Хороша ілюстрація UX — це, перш за все, форма комунікації, покликана вести користувачів через дії, які вони хочуть виконати в Інтернеті. У супроводі правильної копії ілюстрація може полегшити больові моменти, пояснити важливість того чи іншого кроку та виховувати відчуття досягнення, як-от отримати маленьку золоту зірочку за добре виконану роботу.

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

Читайте також:  11 елементів сучасного дизайну веб-сайтів

Design your website


Візуальне передання ідей

Ілюстрація UX може передати повідомлення одним із наступних способів:

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

Текст в одному «порожньому стані» в Wix Media Manager говорить: «Зберігайте всі ваші улюблені медіа разом». У відповідь я проілюстрував кілька файлів, зібраних разом у лотку для файлів, що є буквальним відображенням «зберігання медіа разом», але я також надав додаткову цінність. Я стратегічно вирішив представити три різні типи файлів (текст, зображення та відео), щоб користувачі могли миттєво зрозуміти, що може означати «всі ваші улюблені медіа».

A UX illustration for an 'empty state' in the Wix Media Manager

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

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

Читайте також:  9 типів логотипів і як їх ефективно використовувати

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

A UX spot illustration and preliminary sketches for the Wix interface

03. Додайте до тексту додатковий шар значення: UX-ілюстрація — чудовий інструмент для передачі інформації або складних ідей, але вона також може викликати емоції. Це особливо важливо у випадках, коли користувачеві показують негативний результат (наприклад, сторінка 404), де співпереживання або почуття гумору можуть скрасити похмуру ситуацію.

Це те, що я та команда робили на цьому екрані «порожнього стану». Повідомлення, на яке розробники контенту зверталися в цьому випадку, є формальними – «нема результатів пошуку для відображення», – але ми додали дружній контакт, об’єднавши звичайну пошукову лупу з потойбічними планетами. Таким чином, сторінка, здається, повідомляє користувачеві, що ми, на жаль, не змогли відповісти на відповідний запит, але гей – ми зробили для цього інопланетне зусилля (підморгнути, підморгнути).

A UX illustration for an 'empty state' in the Wix Media Manager


Формування візуальної мови

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

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

Читайте також:  Що таке система проектування (дизайн система)?

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

Ось деякі з рекомендацій, які спонукали мене та команду до формування візуальної мови для ілюстрацій UX Wix:

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

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

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

Джерело