У повсякденному житті ми постійно зустрічаємося з інтерфейсами. Це і соцмережі, і елементи керування в салоні автомобіля, і пульт для телевізора, і голосове керування розумним будинком, і панель кнопок у ліфті. Кордони використання UX/UI сьогодні набагато ширші за програми та додатки.

У цій статті ми відповімо на найпопулярніші питання на тему UX/UI дизайну, розповімо, з чого розпочати навчання на професію дизайнера, і з нами поділиться досвідом практикуючий дизайнер Денис Лінник із колективу New Line Technologies. Влаштовуйся зручніше, і додай сторінку в “збереження”, щоб не втратити важливі інсайти 😉

Чим відрізняється UX від UI?

Для початку давай розберемо, що таке UX, а що таке UI,  і в чому їхня відмінність. 

UX (“user experience”) – досвід, який отримує користувач при взаємодії з продуктом або послугою.

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

Ситуація у приклад: напис на вхідних дверях у магазин “від себе” та “на себе”. Функції біля дверей: вхід і вихід. UX-дизайнер вирішує, як правильно розташувати та позначити, надати правильне керівництво, зробить її зручною висоти та ширини, щоб легко та швидко відкрити двері, не переплутати, та не викликати нападу роздратування.

* Фото Twitter @crazy_kutas

UI («user interface») — інтерфейс користувача: кнопки, поля введення та інші способи взаємодії користувача з IT-сервісом.

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

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

Давай розглянемо докладніше, з якими завданнями має справлятися UI-дизайнер:

• Створювати інтерфейс з урахуванням потреб;
• Розробити графічну частину інтерфейсу (шрифти, колірні схеми, кнопки, ілюстрації, анімацію тощо);
• Поліпшувати взаємодію клієнта з продуктом, робити його інтуїтивніше зрозумілим для користувача;
• При використанні викликати позитивні емоції.

Все той же приклад із дверима. Саме UI-дизайнер допоможе надати двері потрібну форму, підбере найвдаліший колір, який відповідатиме вашому задуму,  і не заплутає відвідувача.

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

Завдання дизайнера створити інтерфейс, зрозумілий на інтуїтивному рівні, щоб у користувача не виникало питань «А як це зробити?» або “А де це знаходиться?” і в той же час, щоб міг привести його до бажаного результату, будь то замовлення піци додому або встановлення будильника на смартфоні.

І ніколи не забувай просте правило – «Хороший дизайн – це дизайн, який ти не помічаєш»!

Денис, що ти вважаєш важливим у дизайні інтерфейсу?

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

Чи варто виділяти бюджет і сили на дизайн інтерфейсу, чи такий вже він важливий?

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

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

UX/UI дизайн: з чого почати, якщо немає досвіду?

Тобі цікава тема розробки дизайну, але ти не знаєш, з чого почати вивчення теми?

Якщо ти, свого часу, не вибрав потрібний факультет в університеті, це не привід впадати у відчай 😉 Професію дизайнера можна освоїти в будь-якому віці, а досвід залежить від бажання! У сучасному світі існує 2 способи освоїти нову професію: курси та самонавчання.

Курси з UX-UI дизайну бувають офлайн та онлайн.

Офлайн-курси.

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

Онлайн-курси.

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

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

Варто зрозуміти, що курси не панацея! Самонавчання у будь-якому варіанті це важлива складова. Потрібно поповнювати “скарбничку” знань за допомогою відповідної літератури, статей, відвідувати тематичні зустрічі та лекції.

Як і в будь-якій професії, цінний той фахівець, для якого його сфера діяльності не просто робота “по годиннику”, а спосіб життя.

Денис, можеш дати пару корисних порад початківцю UX/UI Дизайнеру?

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

З чого почати вивчати UX/UI дизайн? Рекомендації.

Як і в будь-якій справі, спочатку варто освоїти теорію та практику.

Теорія. Для початку вивчіть базові поняття: що таке UX-дизайн, юзабіліті та його принципи, UX-патерни, гайдлайни та best practices. Пройдись за основами юзабіліті-тестування: що це, які методи бувають, чим відрізняються якісні від кількісних і навіщо вони потрібні. Подумай, що і для кого було б цікаво створювати: додатки, сайти, конкретні продукти, сервіси для бізнесу (B2B) або кінцевих користувачів (B2С) і таке інше.

Практика. Дізнайся, у чому відмінність мокапа (mockup), структурної схеми (wireframe) та прототипу (prototype). Вивчи, які є інструменти.

Рекомендації щодо програм та додатків для UX/UI дизайнера.

Існує море напрямків у дизайні та стільки ж інструментів. Хочеться порадити, незалежно від того, в якому додатку ви працюєте, постаратися вивчити якомога більше функцій вашого інструменту. Набагато простіше працювати, коли ти знаєш весь функціонал, тоді навіть не з’являється думка «А як це зробити?». Я частіше за все працюю у Figma і використовую мобільний додаток Figma mirror як помічник, якщо проектую мобільний інтерфейс. Але іноді функціоналу Figma недостатньо і доводиться працювати в Illustrator або Photoshop, тому раджу ознайомитися з даними інструментами на базовому рівні. З подивитися/послухати, канал на YouTube – «Disarto», там є багато корисних роликів з поясненням базових функцій інструменту Figma. Що стосується теорії, то я раджу оформити підписку на PRJCTR і дивитися/слухати все, що є у вкладці – «Interface design».

Під час навчання періодично переглядайте вакансії з UX/UI дизайну – вони допоможуть зорієнтуватися, що вимагають різні компанії від дизайнера, та оцінити, які знання в тебе є, а що потрібно підтягнути. Враховуйте, що вакансії на дизайнера називаються по-різному: UX/UI designer, UX expert, Product designer, UX analyst, Lead designer, Strong UX designer, UX developer, UX architect, UX researcher, UX consultant. Переглядай їх для розширення розуміння сфер відповідальності.

Ну і нарешті, не бійся проходити пробні співбесіди! Законспектуй питання, які ставили, не соромся ставити свої питання під час співбесіди, щоб зрозуміти реальні вимоги.

Дякуємо нашому колезі Денису, за участь!