Суть UX і UI дизайнів: їх поняття та відмінності

Час читання 8 хв.
Читaти статтю

Що перше приходить на думку при згадці слова “дизайн”? Краса, естетичність, стиль? Точно щось про зовнішній вигляд. Але сайти створюють не для виставки та милування, а для прибутку. Тому завдання вебдизайнера підштовхнути відвідувача до цільової дії. Для цього потрібно, щоб вебресурс був зрозумілим, зручним, чуйним ну і привабливим теж.
Виходячи з цього, вимоги до вебдизайнера досить широкі: потрібно розуміти як мислить відвідувач, що йому подобається, що він очікує, а також, які бувають шрифти, як краще комбінувати кольори, як утримати увагу і багато іншого.

Так на ринку з’явився поділ на UX й UI дизайн.

І так, що таке UX/UI і чим вони відрізняються, читайте далі.

Що таке UX?

UX (англ. User experience) користувацький досвід

UX — це проєктування сайту або додатку на базі даних про користувацький досвід.

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

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

Що конкретно робить UX-фахівець:

  • вивчає цільову аудиторію (бере інтерв’ю, тестує, спостерігає за реакціями, складає портрет)
  • аналізує статистику майданчика (шукає проблемні зони, де і чому гості йдуть)
  • продумує варіанти користувацьких сценаріїв (зв’язки між сторінками й елементами інтерфейсу, їх розташування, логіку і послідовність)
  • розробляє вайрфрейми, мокапи та прототипи
  • проводить А/В тестування прототипів
Вайрфрейми — чорно-білий, без деталізації план вебпроєкту. Показує в загальних рисах Що? Де? Як? Мокап — план, який передає стиль, «характер» завдання. Тут є колір, картинки, інформаційна структура. Прототипи — інтерактивний зразок, за допомогою якого, можна проводити юзабіліті-тестування. Натискаються кнопки, працюють вікно, що спливають.

Наприклад, як розробляли UX-дизайн навігації в компанії Uber для водійського додатка.

Їх мета була створити точну, зручну навігацію, що не відволікатиме від дороги, аби максимально зменшити потребу в дотику до додатка, під час руху.

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

Отже, поняття UX-дизайну це про маркетинг, психологію, інженерію і певною мірою програмування.

Що таке UI?

UI (англ. User interface) — користувацький інтерфейс.

UI — робота над зовнішнім виглядом.

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

Мета — створити вебпродукт, де клієнт швидко, без проблем вирішить своє завдання. Формування впізнаваності бренду за допомогою єдиного стилю.

Що робить UI-фахівець:

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

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

7 слів на «П», що описують вимоги до UX/UI дизайну

  1. Привабливо. Дизайн, який інтригує і подобається, без дратівливих кольорів, спливаючих вікон. Все зроблено зі смаком.
  2. Популярно. “Ось кошик, а це кнопка купити, якщо натисну сюди, потраплю в каталог, а якщо сюди, повернуся на головну». Клієнт повинен розуміти всі деталі інтуїтивно. Не треба плутати користувача і вигадувати велосипед, краще використовувати всім знайомі іконки, впізнавані кольори.
  3. Просто. Немає зайвих елементів, що відволікають від кінцевої мети. На екрані присутні об’єкти, які важливі в цей момент.
  4. Продумано. Вся інформація, сторінки, об’єкти структуровані, логічно розміщені. Щоб було легко знаходити відповіді й досягати потрібної мети.
  5. Передбачливо. Подбайте про помилки клієнта. Щоб він легко міг скасувати дію, повернутися назад або дізнатися, що пішло не так. Він буде вам вдячний, а тому лояльний.
  6. Продуктивно. Інтерфейс повинен економити час і зусилля. Тому, до кінцевої мети, відвідувач повинен дійти швидко і легко.
  7. Позитивно. Маніпуляції з продуктом повинні викликати приємний досвід, залишати хороше враження.

Розставляємо чіткі межі: відмінності UX і UI

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

Який шрифт використати для меню? Який колір? Як повинні підсвічуватися посилання на сторінки? Як виглядають іконки панелі навігації? Область завдань UI-дизайнера.

UX-дизайн — про сенс, логіку, причинно-наслідкові зв’язки, що виходять з потреб, звичок, побажань відвідувачів.

UI-дизайн — про видиму частину проєкту. Як це має виглядати та поєднуватися.

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

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

Створення сайту — це дуже відповідальний процес, від його роботи залежить успіх бізнесу. Сприйняття продукту формується не тільки якістю товару або послуги, а тим, як його позиціонують, подають і пропонують. Його сприймають цілісно. Величезну роль в цьому відведена вебдизайну. Не дарма в Apple (продукти якої прославилися своїм чудовим інтерфейсом), всі працівники частково дизайнери.

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