Головна  /  Гальмує  /  Ux ui дизайнер що. UI, UX: Хто це робить? Гід для дизайнерів SPECIAL

Ux ui дизайнер що. UI, UX: Хто це робить? Гід для дизайнерів SPECIAL

Гальмує
14.12.2023

Яка різниця між UI (user interface, інтерфейс користувача) і UX (user eXperience, користувальницький досвід)?

Якби у нас було 30 секунд на пояснення, ми дали б такий бліц-опис.

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

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

Поганий UX: «Я ненавиджу всіх! Включаючи тебе!». Чудовий UX: «Люблю життя! І тебе! І цуценят!».

Однак це пояснення не є всеосяжним. Копнемо трохи глибше в область UI і UX для кращого розуміння відмінностей між ними.

У 1970-і роки, якщо вам була потрібна допомога комп'ютера, ви повинні були використовувати інтерфейс командного рядка, який виглядав таким чином:

Ви не могли купити комп'ютер із графікою, іконками, кнопками чи мишкою – їх ще просто не було у продажу. Щоб змусити комп'ютер робити те, що потрібно, ви мали розмовляти з ним мовою програмування.

Потім у 1981 році група фахівців у галузі обчислювальної техніки компанії Xerox PARC розробила і запустила Xerox Star — персональний комп'ютер з найпершим графічним інтерфейсом користувача (Graphical User Interface, GUI). Він використовував вікна, іконки, меню, (Radio Buttons) і чекбокси (Checkboxes, прапорці для вибору функцій). Користувачі тепер могли відкривати, переміщати та видаляти файли:

Можливо, той прототип не міг зрівнятися з доступними сьогодні комп'ютерами. Але на ранніх стадіях розвитку персональних обчислювальних машин використання GUI було революцією.

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

Команда компанії Apple Computer продовжила свій розвиток та розширення саме на базі ідеї GUI. І 1984 року вони випустили Macintosh, який став першим комерційно успішним десктопним комп'ютером. Він мав інтерфейс з кількома вікнами та мишку, що працювала за принципом «наведи та клікни» (point-and-click).

Поява GUI викликала потребу в новому типі дизайнерів - тих, хто працював із графічним інтерфейсом персональних комп'ютерів. І саме тоді UI-дизайнери вийшли на широку сцену.

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

Проектувальники UI сьогодні працюють над веб-сайтами, додатками, так званими «гаджетами, що носяться» (wearables) і програмами. На них також лежить відповідальність за виникнення таких речей, як візуальні елементи сторінок або екранів системи, а також дизайн інтерфейсу цифрових продуктів.

Що таке досвід користувача?

Термін «користувацький досвід» був придуманий вченим-когнітивістом Доном Норманом (Don Norman) на початку 1990-х, коли він був віце-президентом групи розробки новітніх технологій у компанії Apple.

Ось як звучить визначення Нормана: "Користувацький досвід охоплює всі аспекти взаємодії кінцевого користувача з компанією, її послугами та її продукцією".

Пояснюючи походження терміна, Норман писав:

«Я вигадав термін, бо такі поняття, як «інтерфейс людина-комп'ютер» та «юзабіліті», здавались мені надто вузькими. Я хотів охопити всі аспекти досвіду користувача, що виникають при взаємодії із системою, включаючи промисловий дизайн, графіку, інтерфейс, фізичну взаємодію та посібники до дії. З того часу термін отримав стільки конотацій, що він втратив своє первісне значення».

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

У пізніших роботах Норман уточнив, що входить до комбінації інгредієнтів, необхідних для досягнення високоякісного досвіду користувача:

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

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

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

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

UX повинен бути: корисним (useful), зручним (usable), затребуваним (desirable), таким, що має цінність (valuable), знайденим (findable), доступним (accessible), що викликає довіру (credible)

Обов'язок UX-дизайнерів полягає в тому, щоб гарантувати: товари або послуги, що поставляються компанією, відповідають потребам клієнта і дозволяють їм безперешкодно досягти бажаного результату. Щоб досягти цього, дизайнери можуть звернутися до досліджень для отримання якомога більшої кількості інформації про контекст взаємодії користувача з продуктом, щоб потім за допомогою цих відомостей змоделювати структурні схеми (Wireframes) та прототипи (Prototypes), що дозволяють користувачеві дістатися з точки А до точки Б .

Яка різниця між UI та UX?

Дон Норман і Якоб Нільсен (Jakob Nielsen) коротко і зрозуміло резюмували різницю між двома поняттями:

«Важливо відокремлювати користувальницький інтерфейс (UI) від загального досвіду користувача, маючи при цьому на увазі, що інтерфейс, безумовно, є надзвичайно важливою частиною дизайну.

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

Ще одним вдалим прикладом є Google. Його інтерфейс дуже простий. Він майже нічого не містить — лише логотип, рядок пошуку та кілька кнопок:

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

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

Думки

Як це часто трапляється, професіонали по-різному сприймають ті самі речі. Тому наведемо думки кількох розумних та талановитих людей, які працюють у сфері хай-тек. Ось що вони говорять про різницю між UI та UX.

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

Кен Нортон (Ken Norton), один із партнерів у Google Ventures, колишній керівник відділу з розробки нової продукції в Google:

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

2. UX-дизайнер займається концептуальними аспектами процесу дизайну, а UI-дизайнер зосереджений більш матеріальних елементах.

Енді Бадд (Andy Budd), співзасновник компанії Clearleft та засновник UX Лондон:

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

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

У професійному контексті поняття «дизайнер досвіду користувача» має конкретне значення і має на увазі набір певних навичок, основу яким поклали понад 20 років практики фахівців даної галузі. Робота UX-дизайнера пов'язана з концептуальними аспектами процесу дизайну, причому UI-дизайнери зосереджені на більш матеріальних елементах.

Джейсон Місут (Jason Mesut) чудово описав різницю між UX і UI (а також і частковий збіг їх смислів) у його «двічі діамантовій» моделі (Double Diamond Model). Відповідно до цієї моделі, розробник UX має глибокі знання у стратегії, практиці досліджень, інформаційній архітектурі та дизайні взаємодії (Interaction Design).

UI-дизайнер (або, як тепер його прийнято називати в Кремнієвій долині, дизайнер цифрових продуктів) також має навички у сфері дизайну взаємодії. Однак фокус його роботи тяжіє більше до таких областей, як інформаційний дизайн (Information Design), «рухливий дизайн» (Motion Design) і брендинг.

Хоча деякі люди стверджують, що вони є експертами у всіх цих сферах, таке зустрічається досить рідко. Зрештою, якщо ви є експертом у всьому, ви, найімовірніше, експерт ні в чому конкретно».

3. Немає жодної різниці між UX-і UI-дизайном, тому це два непорівнянні поняття.

Крейг Моррісон (Craig Morrison), керівник відділу з розробки продукції компанії RecordSetter та засновник Usability Hour:

«Я чую це питання весь час і я багато разів відповідав на нього. У результаті я дійшов такого висновку.

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

Нема ніякої різниці.

Червону фарбу дає сполуки різних хімічних речовин.

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

Ось ще кілька питань із цієї серії, щоб проілюструвати мій погляд.

Яка різниця між MacBook та формою клавіш?

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

Яка різниця між автомобілем та кольором, у який він пофарбований?

Якщо провести порівняння зі смачним тортом (а чому б і ні?), UI буде глазур'ю, коржами, смаком, способом подачі та оформлення. UX же буде першопричиною того, чому ми взагалі вирішили зробити торт і чому люди віддадуть перевагу йому, скажімо, гамбургерам».

4. Інтерфейс користувача, як правило, пов'язаний з візуальним та інформаційним дизайном. UX охоплює весь досвід користувача, навіть поза екраном комп'ютера.

Патрік Німан (Patrick Neeman), начальник відділу дизайну продуктів компанії Apptio, засновник Usability Counts:

«Дизайн досвіду користувача охоплює весь досвід користувача, навіть поза екраном його комп'ютера. Дизайн інтерфейсу користувача, як правило, пов'язаний з візуальним та інформаційним дизайном, тобто з тим, що відбувається на екрані. Сучасне визначення UX походить від того, що дала Nielsen Norman Group: UX — це будь-яка точка контакту користувача або клієнта з системою, як у її цифровому вигляді, так і в інших проявах».

5. UI орієнтований на продукт і є серією візуальних характеристик за відрізок часу. UX фокусується на користувачеві та його шляху «через продукт».

Скотт Дженсон (Scott Jenson), керівник відділу стратегічного розвитку продуктів у Google:

«Я не надто заглиблююсь у ці відмінності, оскільки ці поняття часто використовуються як взаємозамінні. Однак, якщо мене запитують, моє бачення полягає в наступному. Інтерфейс користувача орієнтований на продукт і є серією візуальних характеристик за відрізок часу.

UX фокусується на користувачеві та його шляху «через продукт».

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

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

6. UX є досвідом, що переживається користувачем при роботі з продуктом в цілому, а UI - це ті конкретні речі, з якими користувач фактично буде взаємодіяти.

Клейтон Янь (Clayton Yan), UX-дизайнер компанії UserTesting:

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

Я завжди пояснюю цю тему, використовуючи аналогію із будівництвом будинку. Коли ви будуєте будинок, ви думаєте про його планування та розташування кімнат.

Скільки спалень вам потрібно, 2 чи 3? Чи матиме кожна з цих спалень власну ванну кімнату? Чи розташовуватиметься вітальня відразу біля входу? Чи буде будинок одноповерховим чи зробити два поверхи?

Для мене UX представляє загальний досвід та враження, які отримують від вашого будинку (або продукту). Чи має сенс? Як користувач відчуває себе при взаємодії з продуктом?

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

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

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

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

А яка ваша думка?

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

А що ви думаєте? Яка різниця між UI та UX? Чи можуть вони використовуватися як взаємозамінні або означають різні речі?

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

Але що із цього UX, а що UI? Процес виготовлення – це UX, а процес розкладання по тарілках та подачі до столу – UI.

А як щодо поїдання? Це UX; окрім випадків, коли це не UX. Чи отримає споживач інший досвід, якщо тістечка буде подано одразу зі сковорідки або красиво розкладено на тарілці? Я б сказав, так, останнє було б краще.

У цій статті я поділюся з вами п'ятьма відмінностями між UX та UI дизайном. Сподіватимемося, що до її закінчення, ви матимете про них краще уявлення. Відразу скажу, що, хоч ви і помітите відмінності – деякі з них будуть дуже схожі один на одного.

З цим застереженням, давайте поглянемо на деякі відмінності між ними.

UX – це не UI

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

Про UI, або дизайн інтерфейсу користувача можна думати так:

Дизайн інтерфейсу користувача = Візуальний дизайн + Дизайн взаємодії.

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

І хоча і UX, і UI дизайнери створюють взаємодії, UX дизайнерів можна вважати архітекторами макровзаємодій, а UI дизайнерів – творцями мікровзаємодій, що займаються деталями.

За словами дизайнера Ніка Бабіча:

«Найкращі продукти добре справляються з двома речами: функціями та деталями. Функції – це те, що приваблює людей до продукту. Деталі – те, що їх утримує».

UX дизайнер, швидше за все, буде розробляти потоки користувачів, кроки, які користувач зробить, щоб, наприклад, підписатися на розсилку. Які кроки вони йдуть і як вони зрозуміють, що все вдалося?

Потім проект переходить UI дизайнеру. UI дизайнер удосконалить ці взаємодії додаючи колір і підкреслюючи оригінальний дизайн, даючи їм підказки, і показуючи напрямок до розсилки новин.

UI робить інтерфейси красивими

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

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

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

UX допомагає користувачам досягати цілей

UI створює емоційні зв'язки

Люди приходять на ваш сайт, щоб щось зробити. Можливо, хтось шукає собачку для маленької квартири.

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

Після того, як ви налаштували основне юзабіліті, згідно з Аароном Уолтером, автором книги «Дизайн для емоцій», лояльність ваших користувачів залежатиме від особистості вашого інтерфейсу. Яскравий дизайн може залучити до вашого сайту людей, вони можуть затриматися, якщо там можна щось зробити. І коли утворюється особистий зв'язок – вони на гачку. Чи змушує ваш інтерфейс їх сміятися? Чи чіпляє він їх? Наскільки він зухвалий? Аарон каже: «Люди пробачать ваші недоліки, підуть за вами, і співатимуть вам дифірамби, якщо ви нагородите їх позитивними емоціями.» Ось тут вступає UI дизайнер.

Спочатку створюється UX дизайн

Потім (іноді) створюється дизайн UI

Як UX та UI дизайнери працюють разом протягом процесу проектування?

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

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

Однак цей шлях не завжди лінійний і залежить від багатьох факторів. Наприклад:

  • Хто займається UX та UI?
  • Одна і та сама людина, чи хтось інший, та інша команда?

UX використовується у всіх продуктах, інтерфейсах та послугах

UI відноситься лише до інтерфейсів

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

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

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

Висновки

Майже неможливо відокремити UX від UI або UI від UX.

Але якщо спробувати, то можна зробити висновок, що:

  • UX дизайн допомагає користувачам виконувати завдання серед різних платформ і послуг.
  • UI дизайн створює привабливі та естетичні інтерфейси, які поєднуються з людьми.

Дона Склехта

UX-дизайнер (user experience) насправді не є дизайнером, швидше за це проектувальник, який розробляє структуру, зручну для користувачів. Готовий продукт повинен залучати своєю зручністю, простотою та красою, викликати бажання заходити у додаток або на сайт знову та знову.

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

Обидві професії настільки тісно пов'язані одна з одною, що найчастіше всі роботи виконує одна людина.

Трохи історії

Термін UX вперше був ужитий 1993 року Дональдом Норманом. Це був його початок кар'єри в Apple. Норман вважав, що комп'ютерний інтерфейс повинен не просто нести функціональність, а й викликати приємні емоції у користувачів.

Після злету популярності айфонів цей термін став широко поширеним. Багато конкурентів зрозуміли, наскільки важливе значення UX-дизайнера при створенні інтерфейсу користувача.

Від малого до великого

На зорі інтернету дизайнерові ставилося просте завдання: «намалювати сайт». Фахівець, не особливо замислюючись, малював гарні картинки та здавав проект. Сайти були схожі на братів-близнюків. Змінювався колір фону та наповнення.

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

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

Професія UX/UI-дизайнера

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

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

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

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

Ключовими обов'язками UX/UI-дизайнера є:

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

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

Відмінність веб-дизайнера від UX/UI-фахівця

Термінологія:

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

Чим займається веб-дизайнер? Лише дизайном. Малює те, що вважається гарним у його розумінні.

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

Особисті якості

Робота має на увазі тривале сидіння за комп'ютером, тому якщо фахівець віддає перевагу більш активному способу життя, то дана професія не для нього.

Важливі особисті якості:

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

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

Затребуваність фахівців

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

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

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

Основні принципи побудови інтерфейсів

Основні принципи не є законами, ux дизайн має на увазі креативність мислення та творчий підхід.

  • Простота. Користувач шляхом мінімальної кількості дій повинен досягти необхідного результату.
  • Приховування таблички стовп на стовп. Зайві написи збивають з пантелику, змушують користувача відволікатися. Якщо кошик або смайлик можна відобразити значком, достатньо цього.
  • Автоматичні події. Складні дії відлякують користувача, він повинен автоматично натискати клавіші/кнопки, не думаючи, навіщо це робиться. Важливо, що він отримає очікуваний результат.
  • Звичка. Людині важко звикнути до нової. Користувач бачить намальований кошик і з'являється асоціація покупки. Якщо поміняти зображення на «бабусин авоську», вже буде важко здогадатися, що до чого.
  • Перегляд діагоналі. Великих текстів ніхто не читає. Краще робити короткі нотатки по сайту або заголовки та підзаголовки, що відображають суть питання.
  • Гаманець Міллера. Згідно з принципом американського вченого, короткочасна пам'ять здатна охопити 7 елементів плюс-мінус дві штуки. Тому інформацію в блоках краще розташовувати в межах цих цифр.
  • Інтуїтивність. Багато речей користувачі роблять відповідно до своєї інтуїції і не бажають щось запам'ятовувати.
  • Потрібне на увазі. UI дизайн передбачає акцент на тих речах, які користувачеві найбільш необхідні.
  • Угруповання. Усі елементи необхідно групувати за якоюсь відмітною ознакою. Наприклад, якщо в телефоні є меню "повідомлення", то раціональніше в нього вставити вхідні та вихідні повідомлення, написання нових, а також налаштування повідомлень.
  • Правило 3-х кліків. Старе, але не втрачає актуальності. Щоб дістатися потрібної інформації, необхідно зробити не більше трьох кліків. Більша кількість викликає невдоволення і тягне за собою звільнення з сайту або відмова від послуг.
  • Одинаковий стиль. Відгуки про компанію або певний продукт не повинні відрізнятися функціоналом або зовнішнім відображенням.
  • "Захист від дурня". Якщо користувач захотів видалити свої фотографії або ще щось, потрібно перепитати. Можливо, він просто випадково натиснув кнопку.
  • Копірайтінг. В інтерфейсі не повинно бути нічого зайвого. Кожен заголовок важливий, кожна буква у меню ретельно підбирається.
  • Будь в тренді. Створення проекту – справа тривала, а мода мінлива. Щоб проект не застарів його до його появи, необхідно продумувати кожну деталь.
  • Дрібниць не буває. Одна маленька рисочка своєю присутністю чи відсутністю відлякає чи привабить людей.

Резюме

UX/UI design важливий у будь-якій сфері діяльності. Чому в літаку штурвал, а в автомобілі – кермо? Це зручно та правильно. Так і на сайті потрібно підбирати зручні елементи. враховувати досвід користувача.

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

Кого залучати до роботи: UX чи UI?

"Два в одному флаконі" - це завжди привабливо, але не завжди ефективно. Одна людина теоретично може впоратися і зробити всю роботу самостійно. Але чи не прогавить він при цьому якоїсь важливої ​​деталі, яка відіб'є у користувачів полювання користуватися розробленим інтерфейсом? Набагато краще із завданням впораються два окремі фахівці.

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

UX/UI дизайнер- спеціаліст, який займається проектуванням інтерфейсів користувача.

Типовий робочий деньвключає в себе:

  • роботу над пріоритетними завданнями (проектування, малювання);
  • спілкування із замовником;
  • внесення поправок.

Переваги і недоліки

Професія приваблює дизайнерів можливістю робити світ краще, а також своєю перспективністю та затребуваністю на ринку:

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

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

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

«Я навчалася на програміста-сисадміна, але завжди було цікаво робити щось у Фотошопі. Раніше не було такої кількості туторіалів, відеоуроків та статей, як зараз, тому більшість функцій та можливостей я освоювала методом тику. Пізніше вирішила спробувати Ілюстратор, він був набагато складнішим за Фотошоп, але прекрасний для створення вектора. Мені подобається створювати щось нове, щось корисне та красиве, подобається покращувати та бачити досягнутий результат. Сфера дизайну дозволяє все це робити. Цікаво й те, як змінюються тренди, з'являються нові програми та фічі, потрібно завжди за всім цим стежити та постійно розвиватися».

«UX/UI дизайн мені подобається тому, що це дуже перспективний напрямок. Технології швидко розвиваються, на зміну одним інтерфейсам приходять нові, і всі їх потрібно проектувати. Тут можна не тільки думати про те, чи виглядає інтерфейс красиво, а й про те, наскільки він зручний і наскільки він може вирішити проблему людини (чи швидко знайти потрібну кафешку, чи замовити квиток на концерт, чи допомогти приготувати улюблену страву). . Інтерфейси є скрізь: від медичної техніки до автомобілів. Коли машини літатимуть, треба буде, щоб хтось продумав взаємодію їхнього інтерфейсу з людиною. І це будемо ми – UX/UI дизайнери».

Ще один плюс – можливість працювати віддалено (20% всіх дизайнерів), великий вибір проектів на фрілансі.

Серед мінусівПрофесії дизайнери називають спілкування із замовниками, які не знають, чого хочуть, а також недооціненість колегами з IT:

«У 80-90% випадків доводиться працювати без ТЗ з вимогами типу: «Зроби мегакрасиво та мегаконфігуровано».

«Недоліком професії вважаю ставлення до дизайну та дизайнерів в Україні. Чомусь усі вважають, що якщо вони колись відкривали Фотошоп, то автоматично можуть бути дизайнерами та самостійно вирішувати, скільки часу піде на дизайн. Особливо цим грішать недосвідчені менеджери та програмісти (один менеджер із новачків стверджував, що зробив би завдання за 30 хвилин у Пейнті, але в нього немає часу на мистецтва)».

«Недоліки – відсутність скільки-небудь серйозної школи та відсутність розуміння грамотних процесів та методологій на ринку. В аутсорсі – неможливість відстежувати результат, нарощувати свої власні бест-практизи. У продукті – деяка монотонність для зрілих та повний хаос для стартапів».

«Мінус - як і у всьому ІТ - сидяча робота, страждають очі і іноді замовник, якому треба зробити білий #ffffff ще білішим:)»

Як стати і куди рухатися далі

Перший і головний навичка щодо UI - освоїти графічний редактор. Найпопулярніший інструментарій - Adobe Photoshop, Sketch, Principle, Adobe Illustrator, After Effects. Для початку можна спробувати перемалювати скріншоти будь-якої мобільної програми або сайту. Але не просто скопіювати (хоча і це потрібно вміти), а помітити якусь незручність та запропонувати рішення, як зробити краще.

Також важливо розуміти теорію кольору, типографіку, композицію, ергономіку сайту (принципи юзабіліті інтерфейсів), основи маркетингу, бізнес-аналіз, психологію. Для більш ефективного спілкування з розробниками будуть корисні навички верстки (HTML/CSS) та базові знання JavaScript та фреймворків.

Вивчення UX можна розпочати зі знайомства з методологією, почитавши книги Нільсена Нормана, Алана Купера, Джефа Раскіна, Стіва Круга, Алістера Коберна. Більш прикладна література - "User Experience Team of One: A Research and Design Survival Guide" Leah Buley.

«У сучасному світі можливостей для реалізації безліч. Я купував і продовжую купувати онлайн-курси на таких платформах як Coursera, Udemy, Edx. Дивлюся онлайн-конференції від Adobe, Google, читаю технічну літературу, аналізую роботи на Dribbble, Behance, Awwwards».
«UX/UI дизайнеру треба вивчити класику інтерфейсу користувача: „Не змушуйте мене думати“ Стіва Круга, „Дизайн звичних речей“ Нормана, читати Люка Вроблевскі. Необхідно постійно практикуватися, ставити себе на місце користувача. Знайти ментора, який вказуватиме на помилки, давати поради та сприятиме зростанню».

Почати кар'єру можна з фрілансу на різних англомовних платформах, також буде корисно випробувати свої навички на чемпіонатах, наприклад Dev Challenge. Це допоможе напрацювати портфоліо.

UX та UI навички та компетенції ()

З особистих якостей важливі:

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

Можливі кар'єрні шляхи UX/UI дизайнера:

  • удосконалюватись як дизайнер, підвищувати рейт (якщо фрілансер);
  • освоювати суміжні напрямки, розвиваючись як дизайнер продукту; VR дизайнер; VFX дизайнер; Game дизайнер;
  • дорости до позиції Арт-директора (Head of Design);
  • розвиватися як , якщо хочеться переключитися з дизайну управління продуктом загалом;
  • стати, якщо цікаво координувати людей;
  • зайнятися, якщо більше цікавий технічний аспект;
  • освоїти програмування та стати UI-розробником;
  • спробувати себе у маркетингу або .
«Технології дуже швидко розвиваються і постійно з'являється щось нове, для всього потрібен свій специфічний дизайн, є свої вимоги та особливості. А ми, дизайнери, допомагатимемо всьому цьому ставати кращими, красивішими і зручнішими:)»

Дякую за допомогу у написанні статті Юлії Бондаренко, Максима Паливоду, Марини Поповиченко та 25 інших українських дизайнерів, які розповіли DOU про свою посаду. Наведені у статті цитати взяті з їхніх оповідань.

Цього року на Mobile World Congress було представлено безліч Android-пристроїв, які визначатимуть напрямок для розробників на наступні кілька років.

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

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

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

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

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

Загибель рамки

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

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

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

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

Вони мають закруглені краї, що добре з погляду ергономіки, але накладає певні обмеження на UI у можливості використовувати елементи з гострими краями.

Менше сірих тонів, більше кольору та градієнта

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

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

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

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

Хоча використання кольорів природне, їх потрібно використовувати з відповідальністю. Ось чудова історія від Мудіти Батагоди, де він розібрав це питання. Існує безліч контекстних колірних комбінацій, які відрізняються у сприйнятті у різних людей.

Нестандартна друкарня

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

Жирні заголовки – це спроба Apple підкреслити текст, залишаючись у своєму стилі. Мінімалістична друкарка в той же час має встановити тон вашого інтерфейсу.

Розмір та стиль шрифту можуть створити візуальну ієрархію без необхідності засмічувати інтерфейс візуальними елементами та схожими написами.

Накреслення шрифтів передає сенс як за допомогою самого тексту, а й з його представлення.

Варто пам'ятати, що справа не тільки в розмірі та розташування тексту. Для початку вам потрібен хороший текст, а вже потім – все інше. При виборі шрифту варто враховувати всі аспекти хорошого веб-інтерфейсу: інтервали, апертуру, різниця зображення.

Анімовані, розумні, 3D

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

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

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

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

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

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

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

Створюйте системи

З релізом Abstract та інших інструментів контролю дизайну багато команд почали застосовувати систематичний підхід у створенні UI та UX. Ми звикли, що невелика команда чи один дизайнер працює над конкретним проектом, щоб зберегти постійність.

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

Створення дизайну в рамках однієї системи може розкрити потенціал команди: в анімованих інтерфейсах, інтуїтивному UX, продуманих кольорах та навігації.

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

Висновок

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

Якщо ми можемо дізнаватися тренди, приручати їх і витягувати з них все найкраще, ми можемо розраховувати створити тренди самостійно.

Якщо ви знайшли помилку - виділіть її та натисніть Ctrl+Enter! Для зв'язку з нами можна використовувати .