Англійська лексика UX/UI-дизайну з поясненнями українською

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

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

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

Будь-хто в команді або поза нею, на кого впливає проєкт чи хто має голос у ньому: наприклад, менеджери продукту, керівники, інженери, юристи або клієнт.

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

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

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

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

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

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

Ідеальний маршрут взаємодії, де все відбувається очікувано: користувач вводить коректні дані, помилок немає, і завдання завершується успішно.

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

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

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

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

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

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

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

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

Знаходити й відбирати людей для участі в дослідженні, наприклад інтерв'ю чи тесті зручності, за критеріями віку, звичок або досвіду.

Спосіб упорядкувати результати дослідження: записати спостереження на стікерах і об'єднувати схожі, доки не з'являться теми та закономірності.

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

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

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

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

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

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

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

Діаграма або послідовність екранів, кроків і рішень, через які проходить користувач для виконання завдання, наприклад скидання пароля.

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

Схема основних сторінок чи екранів сайту або застосунку та їхніх груп і зв'язків, зазвичай у вигляді дерева.

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

Ряд посилань, зазвичай угорі сторінки, що показує її місце в структурі сайту, наприклад Home > Shoes > Running.

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

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

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

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

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

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

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

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

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

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

Перевірка інтерфейсу фахівцями зі зручності використання за набором усталених принципів дизайну — евристик, щоб виявити проблеми без тестування з користувачами.

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

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

Відсоток учасників, які правильно виконали певне завдання під час тестування зручності користування; одна з найпростіших і найпоширеніших метрик зручності.

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

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

Частина дизайну, що визначає поведінку продукту під час користування: що відбувається після дотику, введення тексту, проведення пальцем чи очікування та як відповідає система.

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

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

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

Уявлення людини про те, як щось працює, сформоване попереднім досвідом і визначає її очікування від продукту.

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

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

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

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

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

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

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

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

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

Кнопка, посилання або коротке повідомлення, що пропонує користувачеві наступний крок, наприклад Sign up, Add to cart або Start free trial.

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

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

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

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

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

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

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

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

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

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

Прямокутний блок, що об’єднує пов’язаний вміст одного елемента, наприклад фото товару, назву й ціну, і часто веде до докладнішої інформації.

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

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

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

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

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

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

Визначений набір кольорів продукту чи бренду, зазвичай із основними, додатковими й нейтральними відтінками, а також кольорами станів, як-от червоним для помилки й зеленим для успіху.

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

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

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

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

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

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

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

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

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

Перевірене повторно використовуване рішення поширеної проблеми інтерфейсу, наприклад рядок пошуку з підказками, нескінченне прокручування чи багатокрокове оформлення замовлення.

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

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

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

Скорочення від Web Content Accessibility Guidelines: міжнародний стандарт W3C із рекомендаціями щодо доступності сайтів і застосунків.

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

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

Перехід між елементами інтерфейсу й робота з ними лише клавіатурою, переважно клавішами Tab, Shift+Tab, Enter, пробіл і стрілками, без миші.

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