UX-дизайн побудований навколо знання людської психології, і за роки вивчення користувачів з'явилося безліч законів психіки, які потрібно знати при проектуванні інтерфейсу.
UX-дизайн: Закон Фіттса
Час досягнення мети – це функція відстані до мети та її розміру. У 1954 році психолог Пол Фіттс, який вивчав моторну систему людини, показав, що час, необхідний для потрапляння в ціль, залежить від відстані до мети, а також знаходиться у зворотній залежності від розміру мети. Відповідно до цього закону, швидкі рухи та маленькі цілі призводять до більшої кількості помилок. Закон Фіттса широко застосовується у UI та UX. Наприклад, згідно з цим законом, інтерактивні кнопки варто робити більшими, тому що на маленькі кнопки складніше клацнути і це займає більше часу.
Закон Хіка
Час прийняття рішення зростає зі збільшенням кількості та складності варіантів вибору. Чим більша кількість подразників, тим довше користувач вибиратиме, з яким із них взаємодіяти. Якщо користувачів бомбардують варіантами вибору, їм доведеться приділити час для інтерпретації та ухвалення рішення, чого вони не хочуть робити.
Закон Якоба
Користувачі проводять більше часу на інших сайтах. Це означає, що користувачі воліють, щоб ваш сайт працював так само, як сайти, які вони вже знають. Закон Якоба придуманий Якобом Нільсеном, співзасновником Nielsen Norman Group, який зробив величезний внесок у UX, наприклад, винайшов метод евристичної оцінки.
Закон прегнантності
Люди будуть сприймати та інтерпретувати неоднозначні чи складні зображення у найпростішій формі, тому що ця інтерпретація вимагає від нас найменше когнітивних зусиль. Цей закон відкритий в 1910 психологом Максом Вертхаймером, коли він побачив вогні біля залізничного переїзду. Це було схоже на включення та вимкнення вогнів навколо сцени. Спостерігачеві здається, що це один і той же вогник, який переходить від лампочки до лампочки, хоча насправді це просто серія лампочок, які включаються та вимикаються по черзі.
UX-дизайн: Закон близькості
Близькі один до одного об'єкти сприймаються у групі. Цей закон також є одним з основних гештальт-психології і був відкритий Вертхаймером. Він зазначив, що швидка серія подій створює ілюзію руху. Наприклад, фільми – це швидкий рух кадрів, який сприймається як суцільний візуальний досвід.
Закон Міллера
У середньому людина може утримати в пам'яті 7 ± 2 елементи у своїй робочій пам'яті. У 1956 Джордж Міллер , що діапазон безпосередньої пам'яті і абсолютного судження був обмежений приблизно 7 частинами інформації. Основною одиницею інформації є біт, обсяг даних, необхідний вибору між двома однаково ймовірними альтернативами. Тобто, 4 біти інформації - це рішення між 16 парними альтернативами (4 послідовні двійкові рішення). Крапка, в якій плутанина викликає неправильне судження, - це пропускна здатність каналу.
Закон Паркінсона
Будь-яке завдання займає все відведений час. Відповідно до цього закону, обмеження у часі, просторі чи бюджеті призводять до збільшення продуктивності та ефективності.
Ефект серійного розташування
Користувачі найкраще запам'ятовують перші та останній об'єкти в серії. Маніпуляції з серійним розміщенням для створення кращого досвіду користувача використовується в багатьох популярних дизайнах успішних компаній на кшталт Apple, Electronic Arts і Nike.
UX-дизайн: Закон Теслера
Закон Теслера, або закон збереження складності, стверджує, що для будь-якої системи існує певне, яке не можна скоротити. У середині 1980-х Ларрі Теслер зрозумів, що взаємодія користувачів з програмами так само важлива, як і самі програми. Він каже, що в багатьох випадках інженер повинен витратити зайвий тиждень на спрощення програму, а не змушувати мільйони користувачів витрачати зайву хвилину на використання складної програми. Проте, Брюс Тогнацціні стверджує, що люди чинили опір спрощенню свого життя. Тому, якщо програма проста, користувачі починають прагнути до складніших завдань.
UX-дизайн: Ефект Фон Ресторфф
UX-дизайн – що це? В даний час індустрія інтерфейсу користувача зростає швидкими темпами, але UX-дизайн як і раніше є абсолютно новий світ для більшості керівників і менеджерів. Ця сфера ставить собі завдання підвищити задоволеність користувачів продуктом, поліпшити зручність використання, доступність і взаємодія. Поєднує в собі традиційний дизайн взаємодії людини і комп'ютера і розглядає всі аспекти взаємодії користувача з продуктом або сервісом.
Дизайнери UX відіграють провідну роль у покращенні основних потреб кінцевого користувача та намагаються створити продукт, який робить аудиторію щасливою. Це, у свою чергу, призводить до здорової інвестиційної віддачі та допомагає підтримувати зростаючий бізнес чи організацію.
Що робить UX Designer?
Дизайнери UX вивчають та оцінюють, як користувачі ставляться до системи, дивлячись на такі речі, як простота використання, сприйняття цінності системи, корисність, ефективність у виконанні завдань.
Дизайнери UX також розглядають підсистеми та процеси всередині системи. Наприклад, вони можуть вивчити процес оформлення замовлення на веб-сайті електронної комерції, щоб дізнатися, наскільки легко та доступно здійснювати процес купівлі продуктів із сайту. Вони можуть заглибитись у вивчення компонентів підсистеми, наприклад, побачити, наскільки ефективним та приємним є досвід користувачів, які заповнюють поля введення у веб-формі.
UX-дизайн – що це? Концепція технології
Важливою концепцією дизайну UX є процес, за допомогою якого користувачі формують досвід. Коли споживач стикається з продуктом, формується миттєве враження, яке змінюється з часом. У цьому процесі сприйняття, дія, мотивація і пізнання поєднуються, щоб сформувати користувальницький досвід. Цей процес викликає емоційні реакції, які значною мірою визначають, чи буде досвід позитивним чи негативним.
Дизайнери UX прагнуть створити фактори, що впливають на процес навмисно. Для цього розробник UX розглядає три категорії питань: що, чому та як.
Чому— має на увазі мотивацію користувачів до прийняття продукту та бажання ним володіти.
Що— стосується того, що люди можуть робити з продуктом та його функціональністю.
Як- відноситься до дизайну функціональності доступним та естетично приємним способом.
Дизайн UX починається з категорії «чому», потім визначає, «що» і, нарешті, як, щоб створювати продукти, з якими користувачі можуть отримувати значні враження.
Історична ретроспектива
У порівнянні з багатьма іншими дисциплінами, особливо з веб-системами, UX-дизайн є відносно новим. Термін «користувацький досвід» був запроваджений доктором Дональдом Норманом, дослідником когнітивної науки, який також першим описав важливість орієнтованого на користувача дизайну — поняття, згідно з яким проектні рішення мають ґрунтуватися на потребах споживачів. З публікації цього поняття розпочалася історія UX-дизайну.
Незалежно від роботи у стартапі або великій корпорації UX-дизайнер безпосередньо залучений до процесу, щоб зробити продукт корисним та приємним у використанні для цільового ринку компанії. Процес створення продукту містить кілька важливих кроків:
дослідження споживача;
дизайн продукту;
тестування;
реалізація.
Розглянемо кожен із них докладніше.
Дослідження споживача: з чого почати дизайнеру-початківцю?
Аналіз споживчої аудиторії та виявлення потреб передбачає спілкування з реальними користувачами на цільовому ринку. Якщо предмет дослідження існує лише гіпотетично і поки що не створено, предметом обговорення стають аналогічні продукти конкуруючих фірм, їх переваги та недоліки. Якщо продукт вже існує, споживачам пропонуються питання про те, як люди почуваються при навігації по сайту з поточним дизайном, чи легко знайти необхідну інформацію, як структуровані сторінки. Окремо оцінюється якість письмового та графічного контенту та загальне візуальне враження від сайту. Для цієї частини процесу можуть використовуватись такі методи:
прототипування.
управління проектами;
ефективна взаємодія із командою.
запитальники;
обговорення у фокус-групах;
онлайн-опитування;
аналіз завдань.
Важливо відзначити, що якщо продукт є плодом дизайнерської думки і ніяк не пов'язаний у своїй розробці та реалізації з досвідом користувача і зворотним зв'язком, він не є результатом UX-дизайну.
Дизайн
Розробка дизайнерської гіпотези включає уявлення у тому, як нові продукт чи послуга можуть адаптуватися до того, як клієнт вже поводиться (це виявляється дослідженнями користувачів). Дизайн продукту орієнтований на функціональність та зручність використання, а не на те, як він виглядає. На цьому етапі використовуються такі:
інформаційна архітектура;
Тестування
Тестування передбачає перевірку те, що зміни, виконані на етапі проектування, працюють штатно і відповідають своїм завданням. Це відмінний спосіб позбутися проблем чи труднощів користувачів, які були видно на етапі проектування, перш ніж починати роботу на етапі реалізації. Існують різні:
тестування a/b;
юзабіліті;
дистанційне тестування користувачів.
Реалізація
Реалізація передбачає тісну взаємодію з веб-розробниками для досягнення кінцевої мети. Фахівці веб-розробки працюють над тим, щоб перетворити дизайнерські ідеї на реальний сайт. Важливо, щоб розробники працювали в команді протягом усього процесу, щоб зробити цей заключний етап ефективнішим та оптимальнішим.
Що таке досвід користувача?
Веб-сайти та програми стають все більш складними в міру просування технологій. Те, що раніше було одностороннім статичним середовищем, сьогодні перетворилося на широкий інтерактивний досвід.
Але незалежно від того, наскільки змінився виробничий процес, успіх веб-сайту, як і раніше, залежить тільки від одного: як користувачі його сприймають. «Цей сайт дає мені цінність? Чи легко його використати? Чи приємно тут бути?» - це питання, які задають собі користувачі, коли взаємодіють із продуктами компанії, і саме на підставі цього досвіду, як правило, вони ухвалюють рішення про покупку.
Користувальницький інтерфейс (скорочено UX) у дизайні — те, як людина почувається при взаємодії із системою. Система може бути веб-сайтом, веб-програмою або настільним програмним забезпеченням. У сучасному контексті це часто позначається як взаємодія людини та комп'ютера.
Поняття User experience охоплює всі аспекти взаємодії кінцевого споживача з компанією, її послугами та продуктами. Важливо відрізняти загальний дизайн проекту від інтерфейсу користувача, хоча User experience є надзвичайно важливою частиною дизайну.
Також необхідно розрізняти UX і зручність використання: відповідно до визначення атрибут якості інтерфейсу користувача, який охоплює легкість навчання, ефективність використання, приємність, візуальну прийнятність, естетику оформлення.
Професійні компетенції
Дизайнер UX відповідає за всі описані вище етапи процесу та їх виконання. Існує ряд професійних компетенцій, яким приділяється велика увага під час навчання дизайнера:
лідерство;
Ці професійні характеристики дуже важливі для успішної роботи.
У чому різниця між дизайном UX та UI?
Дизайнери інтерфейсу користувача (UI) фокусуються на макеті і фактичному дизайні кожного елемента, з яким взаємодіє користувач, тоді як дизайнери User Experience (UX) зосереджують свою увагу на взаємодіях користувача з цим елементом, а також на комплексному враженні від продукту. Дизайнери UI та UX часто працюють разом, а також у команді з веб-розробниками, для створення продукту, який є візуально привабливим та приємним у використанні.
Що робить дизайнер UX?
Дизайнери UX виконують різний функціонал залежно від проекту та етапу розробки. На ранніх етапах проекту фахівці проводять попередні дослідження досвіду, а потім планують взаємодію за допомогою каркасу та прототипування своїх проектів, які далі перевіряються за допомогою різних евристичних методик.
Під час розробки продовжується тестування та розробка інтерфейсу користувача з метою поліпшення продукту та досвіду взаємодії зі споживачем.
Після запуску проекту дизайнер UX може аналізувати показники користувача, щоб відслідковувати результати своєї роботи, повертатися назад і продовжувати ітерацію для поліпшення слабких місць дизайнерського рішення.
Завдання та методи
Дизайнери UX виконують різні завдання у різних точках процесу. Нижче наведено основний перелік:
Оцінка поточної системи.Якщо система вже існує, професіонал UX буде цілісно оцінювати її поточний стан. Виявляються проблеми та пропонуються виправлення на основі аналізу даних досліджень.
A/B TESTING.Фахівець може розробити дослідження для порівняння ефективності та якості досвіду різних інтерфейсів користувача. Це виконується шляхом висування гіпотези (наприклад, «зелена кнопка привабливіша, ніж червона»). Потім пропонується кілька версій дизайну і в порядку тестування визначається "кращий досвід" (наприклад, "зелена кнопка краща, тому що користувачі клацали по ній частіше".).
Опитування.Розробник UX проводить опитування існуючих та потенційних користувачів системи, щоб отримати уявлення про те, що було найефективнішим дизайнерським рішенням. Оскільки досвід одиничного користувача є суб'єктивним, найкращий спосіб отримати безпосередню інформацію – це вивчення та взаємодія з груповою думкою.
Каркаси та прототипи.На основі своїх висновків, фахівці UX можуть розробляти каркаси різних макетів та прототипи вищої точності.
Користувальницькі потоки.Проектування того, як користувачі повинні переміщатися системою, є ще одним популярним інструментом.
Шаблони проектування
Шаблони забезпечують узгодженість та спосіб знаходження найефективнішого «інструменту» для роботи. Наприклад, при розробці шаблонів інтерфейсу користувача вибір правильних елементів (наприклад, вкладки модуля, слайд-шоу) для певних завдань, заснованих на їх ефективності, призводить до кращого вирішення. Розробники UX не тільки пропонують шаблони проектування, які використовуються на інших веб-сайтах, але й розробляють шаблони для поточного проекту.
Програми
Існує кілька популярних та легко доступних програм для UX-дизайну для роботи та навчання. Інструменти не призначені лише для UX-дизайнерів. Програмісти та веб-майстри також використовують їх.
Курси UX-дизайну використовують інструменти прототипування – на початковому етапі їх можна виконати за допомогою ручки та паперу. Цей недорогий та доступний інструмент навчання дизайнера на практиці дозволяє швидко сформувати прототип та перейти до проектування.
Деякі програмні засоби для створення каркасу та прототипів:
Під час навчання основ UX-дизайну використовується тестування A/B, також відоме як роздільне або багатоваріантне тестування. Цей інструмент порівнює різні версії сторінки. Тестування може бути виконане за допомогою будь-якої з кількох програм.
В основному програмне забезпечення для тестування A/B розбиває трафік веб-сайту на два рівні сегменти. Одна група бачить версію A, а інша – версію B. Статистика, така як коефіцієнт конверсії та показник відмов, відстежується кожної версії. Спліт-тестування визначає, яка версія краща, і це рішення засноване на статистичних даних. Одним з найпопулярніших програм для тестування A/B є Website Optimizer Google.
Управління контентом
Під час навчання UX-дизайну з нуля використовується багато методів інвентаризації контенту. Використання серверної програми на місці (для якого вам потрібен доступ до веб-сервера) найкраще підходить для виробничих сайтів. Будучи ближче до джерела, ніж програмне забезпечення сторонніх розробників, ці програми є більш точними та ефективними. З цією метою може використовуватися простий інструмент Excel для створення та керування інвентаризацією контенту, наприклад шаблон GetUXIndex ()).
Веб-сайти, створені з такими системами керування контентом, як WordPress та Drupal, зазвичай мають вбудовані інструменти, які показують карту існуючого веб-сайту.
Опитування та фідбек
Опитування користувачів – ще одне популярне завдання дизайну UX. Найефективніший та економічний спосіб зробити це – за допомогою програми для опитування та зворотного зв'язку або тестування віддаленого користувача.
Загальні інструменти для проведення опитувань, наприклад, PollDaddy, є гнучкими рішеннями, які також можуть використовуватися для інших завдань. Існують інструменти зворотного зв'язку для зручності використання, такі як Usability та віддалені служби тестування користувачів, такі як юзабіліті-хаб, які адмініструють систему тестування.
Приклади
Приклад UX-дизайну – що це? Дизайн інтерфейсу користувача - це процес створення продуктів, які надають осмислений і експериментальний досвід. Це передбачає ретельний дизайн та зручність використання продукту, естетичне задоволення від застосування та велику функціональність.
Таким чином, продукти, що забезпечують відмінний інтерфейс користувача (наприклад, iPhone є найкращим прикладом UX-дизайну), призначені не тільки для споживання або використання продукту, але і для всього процесу придбання, володіння і навіть усунення несправностей.
Дизайн – досить широкий та розпливчастий термін. Коли хтось каже: «Я дизайнер», не одразу зрозуміло, чим він займається день у день. Є цілий ряд різних галузей, що входять до цього поняття.
Посадові обов'язки, пов'язані з дизайном, існують у різних галузях, починаючи від промислового дизайну (авто, меблі), друку (журнали та інші видання), і закінчуючи веб-дизайном (веб-сайти, мобільні програми). З недавнім припливом високотехнологічних компаній, орієнтованих створення інтерфейсів для екранів, у дизайні з'явилося багато нової роботи. Посада UX або UI дизайнера може бути незрозумілою не лише непосвяченим, але навіть самим дизайнерам, які приходять з інших галузей.
"У цього питання немає єдиної правильної відповіді."
Давайте спробуємо розібратися, що насправді це означає в ІТ-індустрії.
UX дизайнер
UX дизайнери в першу чергу стурбовані тим, як продукт взаємодіє з користувачем. Це питання не має єдиної правильної відповіді. UX дизайнери досліджують різні підходи до вирішення конкретної проблеми користувача. Основне завдання дизайнера UX полягає в тому, щоб переконатися, що продукт логічно перетікає від одного кроку до іншого. Один із способів, яким UX дизайнер може це з'ясувати — провести власні тести особисто і зробити висновки зі своїх відчуттів. Виявляючи вербальні та невербальні спотикання, він коригує та ітерує, створюючи тим самим «краще» сприйняття для користувача. Як приклад - створення чудового онбордингу для нового користувача.
«Визначати моделі взаємодії, потік завдань користувача та специфіку інтерфейсу. Розробляти сценарії, end-to-end взаємодії, моделі взаємодії, розробку графічного інтерфейсу користувача. Робота з нашим креативним директором та графічним дизайнером, щоб об'єднати візуальну сторону Twitter із його функціональними особливостями. Розробляти та підтримувати, вайрфрейми, мокапи та специфікації при необхідності».
Приклад екрана програми, розробленого дизайнером UX
Джерело: Kitchenware Pro Kit Wireframe від Neway Lau на Dribbble.
Завдання:Вайрфрейми екранів, розкадрування, план сайту
Інструменти: Photoshop, Sketch, Illustrator, Fireworks, InVision
Ви, швидше за все, чули від нього: «Сторінку „Спасибі“ користувач має побачити після закінчення реєстрації».
UI дизайнер
На відміну від UX дизайнерів, які стурбовані загальним сприйняттям продукту, дизайнерам інтерфейсу важливо те, як продукт виглядає. Вони відповідають за проектування кожного екрана або сторінки, з якою взаємодіє користувач і забезпечують візуальну частину інтерфейсу, яку розробив UX дизайнер. Наприклад, UI дизайнер, створюючи аналітичну панель, може вивести вгору важливішу інформацію, або вирішує, слайдер або панель управління є найбільш інтуїтивно зрозумілою для додавання до графіка. UI дизайнер ще зазвичай відповідає за створення повного посібника з оформлення, що забезпечує цілісну мову дизайну, що охоплює весь продукт. Підтримка узгодженості візуальних елементів та визначення того, в якому напрямку слід працювати. Наприклад, як відображати помилки чи попередження, входять до сфери компетенцій UI дизайнера.
«Концепція та реалізація візуальної мови Airbnb.com. Створення розширеного стайлгайду.
Кордони між UI та UX дизайнером досить розмиті, і дуже часто компанії вважають за краще об'єднувати ці ролі.
UI дизайнер визначає загальне сприйняття та зовнішній вигляд програми.
Джерело: Metro Style Interface 4 робота Ionut Zamfir на Dribbble.
Інструменти: Photoshop, Sketch, Illustrator, Fireworks
«Поля „увійти“ та „зареєструватися“ потрібно перемістити у правий верхній кут».
Графічний дизайнер
«Графічні дизайнери чіпляються над дрібними деталями, на які інші не звертають уваги».
Графічний дизайнер це той, хто займається графікою - швидше за все відповість вам не-дизайнер, якщо ви запитаєте його, чим займається дизайнер. Графічних дизайнерів не хвилює те, як екрани посилаються один на одного, ні як хто взаємодіє з продуктом. Натомість їх увага зосереджена на розробці красивих іконок, засобів управління та візуальних елементів та створення відповідного оформлення. Графічні дизайнери проробляють дрібні деталі, які інші не бачать, і часто працюють у Photoshop з 4-кратним і 8-кратним збільшенням.
«Виробляти високоякісні візуальні проекти: від концепції до виконання, у тому числі для робочого столу, Інтернету та мобільних пристроїв з різною роздільною здатністю (іконки, графіка та маркетингові матеріали). Створення та ітерація ресурсів, що відображають бренд, робити продукт красивим та вдихати у нього життя».
UI дизайнерам теж часто доводиться займатися не лише своєю роботою, а й робити піксель-перфект верстку. Деякі компанії вважають за краще не мати окрему людину на роль графічного дизайнера.
Графічний дизайнер проектує, спрямовує та регулює кожен піксель, щоб забезпечити ідеальний кінцевий результат.
Джерело: IOS 7 Guide Freebie PSD від Seevi kargwal на Dribbble.
Інструменти: Photoshop, Sketch
Ви, швидше за все, чули від нього:"Зменшити кернінг і перенести кнопку на 1 піксель вліво!"
Моушн дизайнер
Пам'ятаєте ледь помітне рух, коли ви тягнете екран, щоб оновити пошту на вашому iPhone? Це робота моушн дизайнера. На відміну від графічних дизайнерів, які, як правило, мають справу зі статичними об'єктами, моушн дизайнери створюють анімацію всередині програми. Вони мають справу з тим, що інтерфейс робить після того, як користувач торкається нього. Наприклад, вони вирішують, як меню має ковзати, які ефекти використовуватиме переходів, і як кнопка натискатиметься. Коли все зроблено добре, рух стає невід'ємною частиною інтерфейсу, надаючи візуальні підказки про те, як користуватись продуктом.
«Потрібне знання графічного дизайну, моушн дизайну, діджитал арт, почуття кольору та друкарні, загальна поінформованість матеріалів/текстур та практичне розуміння анімації. Знання прошивок iOS, OS X, Photoshop та Illustrator, а також знайомство з Director (або еквівалент), Quartz Composer (або еквівалент), 3D комп'ютерне моделювання, моушн графіка».
Інструменти: AfterEffects, Core Composer, Flash, Origami
Ви, швидше за все, чули від нього:"Меню має спливати зліва через 800 мс."
UX дослідник
UX дослідник знає все про потреби користувачів.
UX дослідник знає все про потреби користувачів. Мета дослідника - відповісти на два головні питання: "Хто наші користувачі?" та «Чого наші користувачі хочуть?». Як правило, це має на увазі опитування користувачів, дослідження ринку, і аналіз даних. Дизайн – це процес постійного ітерування. Дослідники можуть допомогти в цьому процесі за допомогою проведення тестів типу A/B, щоб з'ясувати, який варіант дизайну задовольняє потреби користувачів. UX дослідники, як правило, є головною опорою великих компаній, де доступ до великої кількості даних відкриває їм широкі можливості для статистично значущих висновків.
«Робота в тісному контакті з групами розробників визначення тем досліджень. Дизайн дослідження, що стосуються як дій користувачів, так і їх сприйняття. Проведення досліджень з використанням та застосуванням різноманітних методів, таких, як опитування.»
Будь-який дизайн, не важливо, наскільки він хороший, буде абсолютно марним, якщо це не UX дизайн. Є сотні тисяч ресурсів, які створюють дивовижний дизайн інтерфейсів і графічний дизайн і користуються послугами кращих професіоналів з нереальним талантом, але не можуть зайняти гідне місце в мережі. А все, тому що взаємодія між сайтом і користувачами зростає експоненційно, це означає, щоб знайти відгук у користувача, веб-дизайнерам необхідно дбати про досвід користувача (UX - User Experience - «досвід взаємодії»). Саме на цьому етапі на допомогу прийдуть UX дизайн інструменти - відмінні онлайн сервіси, які дають підказки щодо проектування інтерфейсів користувача дизайнерам. Саме про них ми поговоримо детальніше у цій статті.
Оскільки дизайнери повинні враховувати не лише красу та правильність організації елементів, але й складніші фактори, пов'язані з поведінкою відвідувачів на сайті, вони нерідко вдаються до допомоги UX дизайну інструментів, які можуть допомогти їм автоматизувати деякі завдання або значно спростити процес їх виконання. На щастя, проектування інтерфейсів вже давно не нова тема, і в Інтернеті є сотні інструментів проектування UX. Звичайно ж, ми не перераховуватимемо їх усі. Щоб допомогти вам, ми відібрали тільки деякі, найбільш цікаві та корисні UX дизайн інструменти з невеликими описами, щоб показати їх основні характеристики, і дати вам можливість вибрати саме той, який підійде якнайкраще.
UX дизайн інструменти для моделювання та проектування мокапів та прототипів
Створення прототипів стало необхідністю для всіх дизайнерів, які хочуть досягти успіху на фронті UX дизайну та покращення користувальницького досвіду. Створення мокапів, моделей та прототипів дозволяє їм перевіряти будь-які ідеї у дії до того, як вкладати в проект час, зусилля та гроші. Завдяки цим UX дизайн інструментам ви зможете протестувати продукт протягом усього виробничого процесу і внести покращення у створення надійного інтерфейсу для вашої цільової аудиторії.
Інструмент для проектування інтерфейсів Moqups
Програма Moqups isana HTML5 призначена для створення макетів, мокапів та прототипів. Moqups надає величезну кількість заготовок та шаблонів, які можна використовувати для створення основи вашого проекту. Ви можете налаштувати кожен компонент та задавати свої кольори, розмір тексту, іконки тощо.
Wireframe
Це ще один інструмент для створення структурних схем сторінок (wireframing) із зручним мінімалістичним інтерфейсом. Інструмент простий у використанні і включає лише необхідний мінімум функцій, максимально спрощуючи процес використання. Створення схем за допомогою цього інструменту вигідно відрізняється тим, що користувачі можуть ділитися ними з іншими. Кожна схема або мокап, яку ви створюєте, отримує свою унікальну URL-адресу, яку ви можете надіслати замовнику або іншим членам команди.
Pencil
Це інструмент створення графічних прототипів. Оскільки це інструмент із відкритим вихідним кодом, ви можете встановити його на свій персональний комп'ютер та розпочати створення графічних прототипів навіть без доступу до Інтернету. Чекати розширених можливостей та складного функціоналу від нього, звичайно ж, не варто, але зі своїми основними завданнями він цілком справляється.
Balsamiq
Чи не хочете витрачати години на створення прототипів? У цьому випадку ви просто повинні спробувати Balsamiq. Він простий, але дуже ефективний, коли доходить до створення прототипів. З Balsamiq користувачі можуть створювати кілька макетів, які можна протестувати та вибрати той, який забезпечує найкращий результат.
PowerMockup
Ви майстер PowerPoint? Тоді вам сподобається цей інструмент, тому що він перетворить програму PowerPoint на потужний UX дизайн інструмент для створення макетів. Це означає, що вам взагалі не доведеться вивчати нове програмне забезпечення. PowerMockup дозволяє людям без спеціальних технічних навичок брати участь у процесі проектування та розробки, що, безумовно, є однією з його основних переваг.
Mockplus
Mockplus має все, що потрібно для вашого наступного проекту: від чудової візуалізованої взаємодії, вбудованих 200 компонентів та 3000 значків до можливості спільного редагування та тестування у режимі реального часу на реальних пристроях. Цей UI дизайн інструмент допомагає ефективно і легко перетворювати ваші ідеї на повнофункціональні прототипи. До того ж, інструмент проектування Mockplus – це баланс між простотою використання та наявністю складних функцій для створення будь-яких елементів прототипу.
UXPin
Шукаєте інструмент, який дозволяє створювати інтерактивні прототипи та макети? UXPin це інтуїтивно зрозумілий та простий у використанні інструмент. Використовуючи його, ви навіть зможете отримати уявлення про те, як продукт виглядатиме на мобільних пристроях, лише переключивши розмір екрана браузера.
Solidify
Gliffy
Gliffy – це не просто ще один UX-дизайн інструмент для створення прототипів; це набагато більше. Gliffy дозволяє користувачам створювати мережеві діаграми, складні технічні креслення, блок-схеми, діаграми UML та багато іншого. Його інтуїтивно зрозумілий інтерфейс дозволяє створювати діаграми протягом кількох хвилин.
POP
Інструменти для тестування A/B
Ідея цих інструментів полягає в тому, щоб створити дві версії сторінки, а потім протестувати їх, щоб з'ясувати, яка версія працює краще. Показники конверсії, середній час, проведений на сторінці та інші показники – це деякі з факторів, які можна використовувати для оцінки продуктивності сторінки сайту.
Desinion
Чи не впевнені, що створюєте проект, який користувачі дійсно хочуть побачити? За допомогою цього інструменту A/B тестування ви можете задати будь-яке питання, що вас цікавить, і отримати реальну відповідь користувачів. Інструмент має дуже корисну функцію – обговорення. Ви можете запустити обговорення на своєму сайті, щоб залучити користувачів до процесу проектування. Крім того, ви можете створювати приватні обговорення та ділитися ними лише з друзями чи колегами.
Visual Website Optimizer
Це простий, але надзвичайно потужний інструмент, який дозволяє проводити A/B тестування на найвищому рівні. З його допомогою, також можна проводити багатоваріантне тестування та спліт-тестування. Сегментовані звіти та аналіз доходів також будуть доступні у Visual Website Optimizer.
Optimizely
Це надійний інструмент A/B тестування, який дозволяє користувачам запускати тест, не вникаючи в технічні деталі без необхідності спеціальних навичок. Відсутність коду та повне візуальне редагування робить його дуже популярним серед маркетологів.
Інструменти для юзабіліті тестування
Коли справа доходить до створення гарного UX дизайну, вам можуть знадобитися інструменти тестування юзабіліті, щоб допомогти вам розібратися в питанні досвіду користувача і визначити потреби цільових користувачів та їх психологію. Якщо ви можете визначити, чого дійсно хочуть відвідувачі та потенційні клієнти, та побудувати інтерфейс на основі цих знань, то дизайн, безумовно, вразить та активізує аудиторію. Інструменти юзабіліті тестування UXможна умовно розділити на інструменти віддаленого тестування юзабіліті та інструменти зворотного зв'язку. У цій секції ми зібрали й ті й інші рішення, щоб ви могли вибрати, які вам більше підходять.
Loop11
Loop11 – це простий інструмент для тестування юзабіліті, що не вимагає знання HTML-коду, або мов програмування. В рамках інструменту можна використовувати готові шаблони або створювати тему. Крім того, є кілька способів запросити учасників протестувати ваші проекти. Ви можете створити власний список користувачів на основі соціальних мереж, створити спливаюче вікно на сайті, щоб знайти зацікавлених людей. Все, що вам потрібно зробити, це створити список питань, або ж включити різні варіанти дизайну на вибір, а потім надіслати запрошення людям з проханням на них відповісти. Виходячи з результатів, ви зможете внести необхідні зміни у дизайн.
Crazy Egg
Цей інструмент допоможе вам зробити сторінку більш зручною і збільшити її конверсію за допомогою формування правильного користувальницького досвіду. Працює це в такий спосіб. Ви пропонуєте свій дизайн, після чого професіонали з області юзабіліті та досвіду користувача будуть аналізувати його і ділитися своїми коментарями, які ви зможете використовувати для покращення свого сайту.
Usability Tools
Це один з найбільш широко використовуваних інструментів UX дизайну, який набув великої популярності серед дизайнерів і маркетологів завдяки своїм корисним функціям. Цей інструмент допомагає аналізувати сторінки сайту з погляду користувача. Ця величезна перевага для дизайнера полягає в тому, що він дає конкретні підказки щодо того, де і які зміни необхідно внести дизайнеру для збільшення конверсії або які елементи потрібно перемістити, щоб підштовхнути користувача до здійснення певних дій. Цей юзабіліті інструмент також дозволяє налагодити зворотний зв'язок та отримувати відгуки від людей, які дійсно використовують продукт.
Appsee
Це аналітичне програмне забезпечення, яке використовується для відстеження активності користувачів програм. Цей інструмент допоможе вам отримати цінні дані про те, як користувачі взаємодіють із програмою. Функція «User Recording» цього інструменту є вражаючою. Вона реєструє дії користувачів і цим дає вам чудове уявлення про поведінку користувачів. Це корисний інструмент для покращення загальної продуктивності вашої програми та збільшення конверсії.
Attensee
Це інструмент для відстеження поведінки користувачів, який допомагає зрозуміти, як цільова аудиторія переглядає сторінки сайту. Attensee дає візуальне уявлення про те, чи помічають люди важливі елементи вашого сайту. Це безпосередньо пов'язано з дизайном, оскільки якщо ви виявите, що значна кількість користувачів практично не фокусується на важливих елементах, таких як банери, кнопки із закликами до дії, спеціалізовані пропозиції, Attensee допоможе вам виправити це.
UserVoice
Це ще один потужний інструмент, який дозволяє вам переглядати та аналізувати різні дії користувачів, поки вони переглядають ваш сайт. Цей інструмент дозволяє отримувати прямий зворотний зв'язок від реальних користувачів та усувати проблеми, з якими вони стикаються.
MouseStats
Як видно з назви інструменту, MouseStats допомагає відстежувати дії користувачів за допомогою миші. Як ви, мабуть, знаєте, рухи миші імітують рухи очей користувачів. Відстеження рухів курсору та скрол дадуть вам важливі підказки щодо того, як користувачі взаємодіють із дизайном. Найкраще в цьому інструменті полягає в тому, що він надає візуальне уявлення про активність користувачів і допомагає вносити необхідні зміни.
UX дизайн інструменти для створення прототипів та спільного проектування
Командна робота є обов'язковою умовою, коли справа доходить до розробки гарного дизайну UX для вашої цільової аудиторії. Якщо ви звикли працювати в команді, вам необхідно мати доступ до відповідних інструментів, які можуть допомогти членам вашої команди ефективно та без зусиль співпрацювати та вносити власні пропозиції. Нижче представлені інструменти UX для створення прототипів і спільного проектування, які можуть бути вам корисні.
FileSquare
Це не просто інструмент для спільної роботи. Він дозволяє створювати інтерактивний прототип та водночас співпрацювати з іншими членами команди. Приймайте креативні рішення та отримуйте відгуки від людей у режимі реального часу.
Notism
Ви працюєте над візуальним контентом та шукаєте інструмент для спільної роботи? Тоді вам потрібен Notism. Для того, щоб спілкування з командою було максимально зручним, у ньому використовуються ескізи та нотатки. Повідомлення надходять в режимі реального часу, так що ви зможете отримувати відгуки колег та клієнтів, як тільки хтось внесе їх у нотатки.
Red Pen
Завдяки RedPen колективне створення дизайнів та прототипів буде швидким та легким. Цей інструмент UX призначений для спільного моделювання дизайнів та створення прототипів. Він спеціально розроблений для полегшення спільної роботи з графічним контентом. Обмін відгуками дуже простий: для того щоб виділити якийсь із елементів і залишити замітку, користувачеві просто потрібно навести на нього курсор. Після цього з'являється невелике текстове поле, де можна залишити свої відгуки.
Memosort
Завдяки Memosort, відстань більше не буде перешкодою. Цей дивовижний інструмент є одним із найкращих інструментів для спільного дизайну. Він допоможе вам зв'язатися з командою та співпрацювати у режимі реального часу. Всі нотатки в Memosort зберігаються автоматично, так що вам не доведеться переживати, що якась хороша ідея або пропозиція можуть бути втрачені.
Trello
Забудьте про довгі та нудні електронні листи, Trello тут, щоб спростити процес співпраці та налагодити комунікацію у команді. Перевага цього інструменту полягає в тому, що він є безкоштовним. Усередині інструменту Trello є спеціальні карти, що позначають різні проекти. Все, що потрібно зробити, щоб додати людей до проекту, це перетягнути його на відповідну карту. Інструмент також оновлюється в режимі реального часу.
Invision
Це цікаве поєднання інструменту для спільної роботи та створення прототипів. З його допомогою ви зможете створювати інтерактивні прототипи та моделі. З Invision можлива взаємодія в режимі реального часу. Все, що вам потрібно зробити, це надіслати посилання на дизайн іншим членам команди, і вони також зможуть працювати над ним і вносити свої пропозиції.
Підбиваємо підсумки
Отже, це деякі UX дизайн інструменти, які допомагають веб-дизайнерам створювати успішні онлайн проекти самостійно і в команді, а також збирати інформацію про досвід користувача з метою самовдосконалення. Якщо ви знаєте ще якісь корисні інструменти, які ми забули згадати – обов'язково напишіть про це в коментарях!
Термін UX виник у 1993 році у надрах корпорації Apple, розшифровка звучить як User eXperience. Зі зростанням популярності мобільних пристроїв це поняття увійшло в моду і почало використовуватися повсюдно. Але навіть зараз не всі можуть відповісти з упевненістю, що таке UX-дизайн, чим він відрізняється від UI-дизайну і чому ці речі часто згадуються у зв'язці. Ми допоможемо розібратися.
Що таке UX-дизайн
UX-дизайн - це дизайн досвіду користувача. Він є одним з перших ступенів у створенні продукту і служить для того, щоб програма була логічною, зручною і корисною. і сайтів визначає, які враження отримає людина від їх використання, як саме вона користуватиметься цими продуктами.
Де краще розмістити вхід до особистого кабінету? Скільки кроків має пройти користувач, щоб передплатити розсилку або зробити замовлення? Як він зрозуміє, що операція пройшла успішно? Саме такі питання вирішує UX-дизайнер.
UX-дизайн включає різні компоненти:
- інформаційну архітектуру;
- інтерактивний дизайн;
- юзабіліті (показник простоти, зручності та ефективності продукту в очах користувачів).
UX-дизайнер розбирається в психології та емоціях користувачів, аналізує їх очікування від продукту та ставить за мету, яку потрібно досягти. Далі він вибирає відповідні інструменти та вигадує структуру програми або сайту, яка відповідає всім необхідним параметрам.
Сира ідея сайту або програми схожа на розібраний пазл у нашому офісі. Волею UX-дизайнера із цих шматочків складається зрозуміла структура
UX-дизайнер не має одноманітних завдань, тому для різних проектів нерідко потрібні люди з навичками з різних областей. Існують цілі лабораторії з потужним технічним оснащенням, у яких над дослідженнями працює команда з кількох людей. У таких лабораторіях є прилади, що фіксують психофізичні реакції користувачів (наприклад, рухи погляду та серцебиття), там проводять опитування, спостерігають за користувачами за допомогою включеного та невключеного методу та .
UX-дизайнерам важливо вміти:
- проводити дослідження користувачів;
- створювати вайрфрейми та прототипи сайтів та додатків. Це допоможе оцінити, в якому напрямку розвивати програму або сайт. Причому вміння малювати зовсім не обов'язкову навичку для сучасного UX-дизайнера. Існує безліч інструментів для прототипування, де за допомогою готових елементів можна створити грамотну візуалізацію інтерфейсу (наприклад, Axure, Balsamiq або UXPin);
- проектувати взаємодію, тобто уявляти, як саме людина користуватиметься продуктом. Для цього створюються карти маршрутів користувачів по екранах програми, інтерактивні каркаси сайтів та програм з різними варіантами дизайну;
- тестувати продукт;
- займатися аналітикою. Використання різних метрик (наприклад Webvisor, Hotjar, Mixpanel, UXcam, або Appsee) допоможе зрозуміти, наскільки ефективно працює дизайн, та доопрацьовувати продукт, ґрунтуючись на реальних даних.
Докладніше про принципи та основи UX-дизайну інтерфейсів можна почитати у .
Що таке UI-дизайн
Дизайн інтерфейсів або UI-дизайн - це візуальне втілення UX-дизайну. Його завдання — зробити програму, сайт або інший продукт інтуїтивно зрозумілим, привабливим та максимально простим у використанні за допомогою певних графічних рішень.
UI-дизайнер відповідає за те, як виглядатиме кожен окремий екран або сторінка. Сфера його відповідальності - графічні елементи управління, такі як кнопки та чекбокси, шрифти, колірні схеми та різні візуальні образи.
Як має виглядати кнопка, щоб на неї було зручно натискати? Який розмір шрифту вибрати, щоб добре читався текст? Як оформити повідомлення про помилку, щоб воно привертало увагу, але не дратувало? Відповіді на ці запитання допомагають знайти UI-дизайн інтерфейсів.
UI-дизайнер використовує різні графічні редактори: Photoshop, Illustrator, Sketch, Fireworks, Adobe XD, Gravit Designer, Affinity Designer, Figma
Працюючи над тим, як програма буде виглядати на екрані гаджета, UI-дизайнер орієнтується на гайдлайни мобільних платформ - набори рекомендацій від Apple і Google, завдяки яким програми сторонніх розробників виглядають однаково і органічно вбудовуються в загальну концепцію.
Якщо провести дуже звичайну аналогію з життя, то UX-дизайн - це планування квартири і комунікацій, а UI - вибір шпалер і покриття для підлоги. Однак на практиці UX- і UI-дизайн тісно взаємопов'язані, другий логічно слід за першим, і нерідко тим і іншим займається одна і та сама людина. Тому грань між двома поняттями розмивається, і їх указують разом.