Англійська мова для UX-дизайнерів: словник і фрази для дизайн-оглядів
Майстер UX дизайну англійською — wireframe, прототип, affordance, когнітивне навантаження, евристичне оцінювання, дизайн токени, і фрази для запуску ефективної критики дизайну.
Дизайн-огляди, критика і зустрічі відбуваються щотижня в командах продукту - і вони мають свій власний словник. Якщо ви дизайнер, який працює англійською мовою, або розробник, який тісно співпрацює з дизайнерами, розуміння правильних слів зробить розмову більш чіткою, зворотній зв’ язок — більш дійсним, а передачу — набагато плавнішою. Цей підручник містить основні словники UX, які ви будете використовувати під час справжніх зустрічей.
UX vs UI: роз’яснення різниці
User Experience (UX) (англійською)
UX відноситься до загального досвіду, який має людина при взаємодії з продуктом - наскільки простим є використання, як це робить їх відчувати, чи задовольняє це їх потреби. UX включає дослідження, інформаційну архітектуру, дизайн взаємодії і тестування на користувацьку здатність.
«Потік оплати має проблему UX — користувачі продовжують залишати його на кроці три. Нам потрібно дослідити, чому»
Інтерфейс користувача (User Interface)
** Інтерфейс користувача ** відноситься до візуальних і інтерактивних елементів — кнопок, типографії, кольору, інтервалів, піктограм. Продукт може мати красивий інтерфейс користувача, але поганий UX, якщо поточний поток є заплутаним.
«Інтерфейс виглядає полірованим, але UX пошкоджений — користувачі не можуть знайти налаштування, тому що навігація неясна»
Дизайнерські рішення: що це таке?
Wireframe
** Дротяна схема ** — це низькоякісне, схематичне зображення екрана. У ньому показано компонування і структуру — місце розташування елементів — без кольорів, типографії або детальних візуальних елементів.
«Перед тим, як ми створимо що-небудь, давайте створимо дротяні моделі для всіх п’яти екранів, щоб ми змогли домовитися про структуру спочатку»
Ло-Фі проти Hi-Fi Моккуп
** lo- fi ** (низькоякісний) макет є грубим — це ескізи або основні форми, які сконцентровані на макеті. ** hi- fi ** (високої точності) макет відшліфовано — остаточні кольори, шрифти і реалістичний вміст. Він дуже схожий на готовий продукт.
«Це все ще ло-фі — ми ще не завершили систему дизайну. Hi-fi макети надходять після того, як макет затверджений»
Prototype
** Прототип ** це інтерактивне моделювання продукту. На відміну від статичного макета, ви можете переглядати його за допомогою клавіш. Прототипи варіюються від простих клік-манекенів до складних анімованих потоків.
«Я побудував прототип у Figma — ви можете пройти через весь процес впровадження і перевірити його з користувачами, перш ніж ми напишуть жодну рядок коду»
Архітектура і будівництво
Інформаційна архітектура (англ.)
** Інформаційна архітектура ** — це організація і мітки вмісту, за допомогою яких користувачі можуть знайти те, що їм потрібно. У ній описано структуру навігації, таксономію і ієрархію сторінок або екранів.
«Інформаційна архітектура потребує переосмислення — користувачі очікують налаштування облікового запису під їх аватаром, а не в бічній панелі»
Потік користувача
** Потік користувача ** — це діаграма, на якій показано шлях, який користувач пройде, щоб виконати певне завдання — від точки входу через кожен екран до мети.
«Давайте відобразимо поток користувача для скасування пароля, перш ніж ми розробимо екрани — я хочу побачити кожну точку рішення»
Подорож користувача
** Подорож користувача ** ширша, ніж потік користувача. Він відображає повний досвід через контактні точки - включаючи емоції, болючі точки і моменти поза самою програмою (наприклад, отримання електронної пошти, розмова з підтримкою).
«Подорож користувача показує, що люди щасливі всередині додатку, але розчаровані послідовністю електронної пошти — саме там ми їх втрачаємо»
Дизайн системи
Система проектування
** Система дизайну ** це набір компонентів, рекомендацій і стандартів, які можна використовувати повторно, що забезпечують візуальну і функціональну послідовність у продукті. Він включає в себе бібліотеку компонентів, токени дизайну і документацію.
«Ми прийняли систему дизайну, щоб кожна команда використовувала ті ж самі стилі кнопок, правила інтервалів і палітру кольорів — більше немає невідповідностей між функціями»
Бібліотека компонентів
Бібліотека компонентів є кодованою реалізацією компонентів системи проектування — фактичних компонентів React, Vue або веб-компонентів, які використовують розробники.
«Новий компонент карти вже в бібліотеці компонентів — використовуйте його замість створення власного»
Дизайн-токен
** знак розробки ** — це названа змінна для рішення щодо розробки — значення кольору, інтервалу, розміру шрифту або тіні — виражена у форматі, який можна використовувати як у інструментах розробки, так і у коді.
«Ми визначили
color-primary-500як дизайн-токен, тому зміна кольору бренду оновлює кожен компонент за раз»
Концепції та методи взаємодії
Affordance
affordance — це властивість елемента, яка дає змогу визначити, яким чином його слід використовувати. Підняті кнопки надають змогу клацати лівою кнопкою миші; текстове поле надається для введення тексту. Погані можливості збентежують користувачів.
«Цей плоский прямокутник виглядає як позначка, а не кнопка — він не має афоризмів. Додати тінь або контур, щоб виглядало, що можна клікнути»
Когнітивне навантаження
** Когнітивне навантаження ** — це умові зусилля, необхідні для використання інтерфейсу. Висока когнітивна навантаження призводить до помилок і розчарування. Хороший дизайн UX зменшує когнітивне навантаження, спрощуючи вибір і надаючи чіткі рекомендації.
«Форма має 14 полів на одному екрані — це занадто багато когнітивного навантаження. Чи можемо ми розділити це на три кроки?»
Принципи організації
Гештальтові принципи - це психологічні правила того, як люди сприймають візуальні образи. Найбільш важливі для UX: * близькість * (близькі елементи здаються пов’ язаними), * схожість * (елементи, які виглядають схоже, здаються групованими) і * неперервність * (око слідує за лініями і кривини).
«Групувати пов’язані поля за допомогою близькості — користувачі сприймають їх як належать разом без будь-яких явних міток»
Тестування та оцінка
Випробування на стійкість
** Тестування на користувацьку здатність ** означає спостереження за справжніми користувачами, які намагаються виконати завдання за допомогою вашого продукту. Ви дивитеся, де вони борються, де вони досягають успіху, і слухаєте їхні коментарі.
«Ми провели тестування на користувацьку здатність з шістьма учасниками. Чотири з них не змогли знайти кнопку експорту — її потрібно пересунути»
Евристична оцінка
** Евристична оцінка ** є експертним переглядом інтерфейсу за встановленими принципами корисності (евристика). Якоб Нільсен 10 евристика є найбільш широко використовуваним механізмом.
«Я зробив евристичну оцінку і позначив три порушення запобігання помилок — програма дозволяє користувачам вилучати дані без кроку підтвердження»
Дизайн критичних фраз
Використовуйте ці фрази у перегляді проекту, щоб надати і отримати професійну оцінку.
| Situation | Phrase |
|---|---|
| Asking about intent | ”What problem are you solving with this pattern?” |
| Giving critical feedback | ”My concern here is that users might not see the CTA above the fold.” |
| Suggesting an alternative | ”Have we considered using a bottom sheet here instead of a modal?” |
| Acknowledging trade-offs | ”I see why you went this way — the trade-off is more scrolling for mobile users.” |
| Prioritising feedback | ”This is a must-fix before launch. The others are nice-to-haves.” |
| Asking for rationale | ”Can you walk me through the thinking behind this layout?” |
| Proposing a test | ”Let’s put both versions into a usability test and see which one users prefer.” |
Рецензія на книгу «Відкриття: огляд твору»
| Term | Plain English |
|---|---|
| Above the fold | Visible without scrolling |
| CTA | Call to action — the primary button or link |
| Empty state | What users see when there is no content yet |
| Error state | What an input or screen shows when something goes wrong |
| Happy path | The ideal flow with no errors or edge cases |
| Edge case | An unusual scenario the design must also handle |
| Handoff | Passing the design to developers to build |
| Spec / Redline | Design file with measurements and behaviour notes for developers |