Що перше приходить на думку при згадці слова «дизайн»? Краса, естетичність, стиль? Точно щось про зовнішній вигляд. Але сайти створюють не для виставки та милування, а для прибутку. Тому завдання вебдизайнера — підштовхнути відвідувача до цільової дії. Для цього потрібно, щоб вебресурс був зрозумілим, зручним, адаптивним, ну і привабливим теж.
Виходячи з цього, вимоги до вебдизайнера досить широкі: потрібно розуміти, як мислить відвідувач, що йому подобається, що він очікує, а також, які бувають шрифти, як краще комбінувати кольори, як утримати увагу і багато іншого.
Так на ринку з’явився поділ на UX і UI дизайн.
Отже, що таке UI/UX дизайн і чим вони відрізняються — читайте далі.
Що таке UX-дизайн?
UX (англ. User experience) — користувацький досвід
UX — це проєктування сайту або додатку на базі даних про користувацький досвід.
Основне завдання — вивчити поведінку відвідувачів і знайти кращий спосіб відтворення елементів на вебмайданчику.
Мета — сформувати позитивне враження користувача про ресурс, а також зробити шлях від входу до кінцевої дії легким і приємним.
Що конкретно робить UX-фахівець:
- вивчає цільову аудиторію (бере інтерв’ю, тестує, спостерігає за реакціями, складає портрет)
- аналізує статистику майданчика (шукає проблемні зони, де і чому гості йдуть)
- продумує варіанти користувацьких сценаріїв (зв’язки між сторінками й елементами інтерфейсу, їхнє розташування, логіку і послідовність)
- розробляє вайрфрейми, мокапи та прототипи
- проводить A/B-тестування прототипів
| Вайрфрейми — чорно-білий, без деталізації план вебпроєкту. Показує в загальних рисах Що? Де? Як? Мокап — план, який передає стиль, «характер» завдання. Тут є колір, картинки, інформаційна структура. Прототипи — інтерактивний зразок, за допомогою якого можна проводити юзабіліті-тестування. Натискаються кнопки, працюють вікна, що спливають. |
Наприклад, як розробляли UX-дизайн навігації в компанії Uber для водійського додатка.
Їхня мета була створити точну, зручну навігацію, що не відволікатиме від дороги, аби максимально зменшити потребу в дотику до додатка під час руху.
Для цього фахівці таксували з водіями, вивчали їхні побажання, проблеми. Проводили тестування прототипів, запрошували таксистів в офіс для опитувань. Навіть використовували пристрій для стеження за пересуванням очей, щоб зрозуміти, як вони взаємодіють з дорогою і картою.
Отже, поняття UX-дизайну — це про маркетинг, психологію, інженерію і певною мірою програмування.
Що таке UI-дизайн?
UI (англ. User interface) — користувацький інтерфейс.
UI — робота над зовнішнім виглядом.
Завдання — зробити інтерфейс зручним, зрозумілим і красивим.
Мета — створити вебпродукт, де клієнт швидко, без проблем вирішить своє завдання. Формування впізнаваності бренду за допомогою єдиного стилю.
Що робить UI-фахівець:
- продумує єдиний стиль: підбирає шрифти, кольори, картинки
- малює кнопки, вікна, іконки, які інтуїтивно впізнавані та зручні
- відстежує правильність зображення елементів, удосконалює логіку подачі інформації
- робить готовий макет для програміста
Тобто відстежує, щоб був зручний розмір вікна, добре видима кнопка, читабельний шрифт, зрозуміла форма зворотного зв’язку, чи красиво це виглядає.
7 слів на «П», що описують вимоги до UX/UI дизайну
- Привабливо. Дизайн, який інтригує і подобається, без дратівливих кольорів, спливних вікон. Все зроблено зі смаком.
- Популярно. «Ось кошик, а це кнопка купити, якщо натисну сюди, потраплю в каталог, а якщо сюди, повернуся на головну». Клієнт повинен розуміти всі деталі інтуїтивно. Не треба плутати користувача і винаходити велосипед, краще використовувати всім знайомі іконки, впізнавані кольори.
- Просто. Немає зайвих елементів, що відволікають від кінцевої мети. На екрані присутні об’єкти, які важливі в цей момент.
- Продумано. Вся інформація, сторінки, об’єкти структуровані, логічно розміщені. Щоб було легко знаходити відповіді й досягати потрібної мети.
- Передбачливо. Подбайте про помилки клієнта. Щоб він легко міг скасувати дію, повернутися назад або дізнатися, що пішло не так. Він буде вам вдячний, а тому лояльний.
- Продуктивно. Інтерфейс повинен економити час і зусилля. Тому до кінцевої мети відвідувач повинен дійти швидко і легко.
- Позитивно. Маніпуляції з продуктом повинні викликати приємний досвід, залишати хороше враження.
Розставляємо чіткі межі: відмінності UX і UI
Де має бути меню інтернет-магазину? Які елементи повинні бути присутніми, а які відволікають увагу? Як мають виглядати навігаційні ланцюжки, щоб відвідувач розумів, де він знаходиться і як повернутися до вихідної точки або на крок назад. Цим займається UX-дизайнер.
Який шрифт використати для меню? Який колір? Як повинні підсвічуватися посилання на сторінки? Як виглядають іконки панелі навігації? Область завдань UI-дизайнера.
UX-дизайн — про сенс, логіку, причинно-наслідкові зв’язки, що виходять з потреб, звичок, побажань відвідувачів.
UI-дизайн — про видиму частину проєкту. Як це має виглядати та поєднуватися. Коли ця частина будується на анімації та ефектах, як у сайтах з wow-ефектом, вимоги до UX нікуди не зникають: рух має вести відвідувача до цільової дії, а не відволікати від неї.
Якщо погуглити вакансії, то нечасто зустрічаються пропозиції на відокремлену посаду UI або UX-фахівця. Найчастіше шукають універсального бійця, ім’я якому UI/UX-дизайнер. Простими словами, UX/UI-дизайнер — це фахівець, який відповідає і за логіку взаємодії, і за зовнішній вигляд інтерфейсу. І грань між ними стирається, тому часто не розуміють їхню відмінність.
В UX — акцент на розумінні людської поведінки, мислення, потреб і бажань. UI — це про графіку, кольори й красу, на основі даних, наданих UX-дизайнером.
Створення сайту — це дуже відповідальний процес, від його роботи залежить успіх бізнесу. Сприйняття продукту формується не тільки якістю товару або послуги, а тим, як його позиціонують, подають і пропонують. Його сприймають цілісно. Величезна роль у цьому відведена вебдизайну. Недарма в Apple (продукти якої прославилися своїм чудовим інтерфейсом) всі працівники частково дизайнери.
Важливо пам’ятати: істина в простоті, кращий вебдизайн теж. Позбутися всього зайвого та обрамити все в приємний каркас — це величезний процес збирання, аналізування та структурування інформації. Все це вміє хороший UI/UX-фахівець.