UI-дизайн і UX-дизайн - два найбільш часто заплутаних і суперечливих поняття, що використовуються як в веб-дизайні, так і в дизайні додатків. Зазвичай їх поєднують разом в один термін - UI / UX-дизайн і з першого погляду здається, що вони описують один і той же процес. Часто буває важко знайти чіткий опис для кожного з них окремо, не опускаючись при цьому до професійного жаргону. Однак ми постараємося зробити це!
Нижче, ми підготували простий в освоєнні матеріал по цих термінах.
До кінця цієї статті ви будете досить добре розуміти, що в них схожого і що відмінного.
Що таке UI Design?
UI Design (User Interface) перекладається як «призначений для користувача інтерфейс». Інтерфейс являє собою графічну структуру програми. Він складається з кнопок, натиснених користувачами, текстів, які вони читають, зображень, полів введення тексту і всіх інших елементів, з якими взаємодіє користувач. Крім того, він включає в себе макет екрану, переходи, анімацію інтерфейсу і кожну мікро-взаємодію. Будь-який візуальний елемент, взаємодія або анімація повинні бути розроблені в процесі UI-дизайну.
Ця робота лягає на дизайнерів користувальницького інтерфейсу (UI-дизайнер). Вони вирішують, як візуально буде виглядати додаток. Саме вони повинні вибирати колірні схеми і форми кнопок - ширину ліній і шрифти, які використовуються для тексту. Якщо узагальнити, то дизайнери користувальницького інтерфейсу створюють зовнішній вигляд інтерфейсу програми.
UI-дизайнери - це в першу чергу графічні дизайнери. Вони пов'язані з естетикою і повинні переконатися, що інтерфейс програми привабливий, візуально стимулює користувача і відповідає тематиці, яка в свою чергу повинна відповідати цілям і завданням програми. Тому потрібно переконатися, що кожен візуальний елемент є єдиним, як в естетичному, так і в цільовому сенсі.
Що таке UX Design?
UX (User Experience) перекладається як «користувацький досвід». Призначений для користувача досвід визначається тим, як користувачі взаємодіють з додатком/сервісом. Чи є досвід користувача інтуїтивно-зрозумілим або, навпаки, заплутує його? Навігація в додатку здається логічною чи не піддається логіці? Чи дає людям взаємодія з додатком відчуття, що вони ефективно виконують завдання, які вони поставили перед собою, або це схоже на блукання по замкненому колу і відчуття безвиході?
Досвід користувача визначається тим, наскільки легко чи складно взаємодіяти з елементами призначеного для користувача інтерфейсу, створеними дизайнерами.
При цьом UX-дизайнери такоже дбають про користувальницькмй інтерфейс програми, і саме тому люди часто плутаються, або ж взагалі не знаходять різниці між ними.
Але в той час, як UI- повинні вирішувати, як буде виглядати користувальницький інтерфейс, UX-дизайнери відповідають за визначення того, як працює інтерфейс.
Вони визначають структуру інтерфейсу і функціональність і те, як всі частини програми організовані і пов'язані одна з одною. Загалом кажучи, вони проектують роботу інтерфейсу. Якщо він працює добре, то у користувача буде хороший досвід після взаємодії з таким інтерфейсом. Але якщо навігація складна або інтуїтивно незрозуміла, то швидше за все, користувач отримає негативний досвід при взаємодії з інтерфейсом. Основне завдання UX дизайнера і полягає в тому, щоб уникнути другого сценарію.
Як ці дизайнери працюють спільно?
Отже, як ми писали вище, UX-дизайнер вирішує, як буде працювати інтерфейс, а UI-дизайнер вирішує, як буде виглядати користувальницький інтерфейс. Це паралельний процес, і дві команди дизайнерів, як правило, працюють в тісній співпраці. У той час, як команда UX-дизайнерів розробляє, так званий потік додатку (application flow) і визначає яким чином всі елементи будуть вести користувача по його запитам і як інтерфейс ефективно задовольнить потреби користувача в інформації, команда UI-дизайнерів працює над тим, як виглядатимуть всі ці елементи інтерфейсу безпосередньо на екрані.
Припустимо, що на якомусь етапі процесу розробки було вирішено, що на екран необхідно додати додаткові кнопки. Зрозуміло, що це змінить порядок організації кнопок, а також може вимагати зміни їх форми або розміру. UX-команда визначить кращий спосіб розміщення кнопок, в той час як UI-команда адаптує свій дизайн, щоб все відповідало новому макету. Постійне спілкування і співробітництво між UI- і UX-командою дизайнерів дозволяє гарантувати, що кінцевий, призначений для користувача, інтерфейс виглядає настільки добре, наскільки це можливо, і при цьому працює ефективно та інтуїтивно зрозуміло.
Дослідження - ключ до успіху
Дослідження є життєво необхідним процесом як для UI-, так і для UX-дизайнерів. Для обох напрямків важливо зібрати якомога більше корисної інформації, яка допоможе їм у процесі розробки відповідних проектів. При цьому обидва напрямки дотримуються подібного підходу.
Природно і UI- і UX-дизайнери будуть досліджувати те, чого хочуть користувачі. А саме, чого ж вони очікують від додатків/сервісів, що розробляються? Це дослідження повторюється з певною частотою і включає в себе сеанси так званих юзабіліті-тестів, де реальні користувачі будуть взаємодіяти з масштабованими версіями деяких функцій програми, щоб визначити, чи в правильному напрямку рухаються дизайнери. Зворотній зв'язок інтегрується з кожним повторенням.
Цей процес включає в себе створення прототипів, таких як каркасна візуалізація елементів інтерфейсу, який необхідний для більш точного вимірювання реакції користувача на тестовану функціональність. Це може також включати швидкі візуальні прототипи і A/B-тести різних можливих версій зовнішнього вигляду інтерфейсу, щоб визначити, якій із версій надають перевагу користувачі.
У всіх описаних випадках дослідження допомагають дизайнерам при фінальному прийнятті рішень. Однак інформація, яку шукають UI- і UX-дизайнери, сильно відрізняється.
Дослідження в UI-дизайні
Перш за все, UI-дизайнери повинні переконатися, що обрана ними візуальна мова відповідає класу додатку. Якщо ваша команда розробляє додаток для подорожей, важливо вивчити, які інші додатки для подорожей розроблялися в минулому. Які з них вирішили своє завдання? З рішень, які інші команди робили раніше, можна витягти хороший урок для того, щоб приступити до дизайну свого застосування.
Наприклад, дослідження можуть визначити, що люди вважають кращими іконки з лініями замість іконок із заливкою. Це візуальна стенографія, яка зручна і приємна людям.
Точна естетика, яку вони вибирають, залежить від них, але основні «правила» або необхідність відповідати очікуванням користувачів - це те, що дизайнери ігнорують на свій страх і ризик.
Дизайнери користувальницького інтерфейсу хочуть, щоб їх дизайн інтерфейсу виділявся і був таким, що запам'ятовується. Але це повинно бути збалансовано з тим, щоб люди розуміли призначення елементів, які ви розміщуєте на екрані.
Дослідження в UX-дизайні
Ті хто працюють в UX-дизайні найбільш зацікавлені в очікуваннях користувачів. Всі події і взаємодії, які користувачі мали з кожним додатком раніше у своєму житті, допомагають встановити їх очікування щодо того, як інтерфейси повинні працювати. Якщо UX-дизайнер не знайомий з цими очікуваннями, він може ненавмисно спроектувати інтерфейсну взаємодію, яке здається їм логічним, але порушує загальноприйняті уявлення. Користувачам не подобається, коли інтерфейс поводиться зовсім інакше, ніж вони очікували, і це може негативно вплинути на їх роботу.
Якщо UX-дизайнер вирішить зробити щось інше, у нього повинна бути дуже вагома причина, тому що порушення очікуваної поведінки, ймовірно, змусить людей часто робити неправильні дії.
Наприклад, більшості людей подобається ідея того, що для відкривання файлу необхідно двічі клацнути на нього, а для того, щоб обрати файл - один раз.
UI і UX: дві абсолютно різні дисципліни, які працюють в гармонії
UI-дизайн і UX-дизайн включають в себе різні набори навичок, але вони є невід'ємною частиною успіху один одного. Гарний дизайн не може врятувати інтерфейс, який незручний і заплутаний в навігації, а блискучий інтерфейс, який ідеальний підходить для користувача, може бути зіпсований поганим візуальним інтерфейсом, який робить використання програми естетично неприємним.
Як UI-дизайн, так і UX-дизайн повинні бути бездоганно виконані та ідеально узгоджені з раніше існуючими очікуваннями користувачів для створення кращого користувальницького досвіду. І лише коли ці дві «зірки співпадуть», результати можуть бути вражаючими.
Бонус: що можна почитати по UI/UX дизайну?
- "Не змушуйте мене думати" Стіва Круга. Цікаво, коротко і по справі. Все, що вам потрібно, щоб почати думати про людей, які можуть використовувати ваш продукт;
- "Як навести порядок в будь-якому бардаку", Еббі Коверт. Відмінний огляд принципів інформаційної архітектури, а також важлива політика будь-якої дизайнерської роботи. Все викладено зрозумілою мовою фахівця в цій галузі;
- "Спринт", Джейк Напп. Купа корисних методик UX, викладених простим, структурованим способом;
- "Дизайн - це робота" Майка Монтейро. Весело і лаконічно - все, що ви можете захотіти знати про фріланс та клієнтів;
- "Економний UX" Джеффа Готелфа. Трохи більш технічна, але повчальна книга на тему стратегії продукту і аналізу бізнесу з боку UX, з особливим наголосом на стартапи.
