Английский для UX/UI-дизайнера: основные термины и рабочая лексика

UX и UI — в чём разница

UX — user experience — пользовательский опыт: насколько понятен, удобен и эффективен продукт для человека. UI — user interface — интерфейс: визуальные и интерактивные элементы, через которые пользователь взаимодействует с продуктом.

User research

• user research — пользовательские исследования;
• research participant — участник исследования;
• user interview — интервью;
• survey — опрос;
• observation — наблюдение;
• research finding — результат исследования;
• insight — значимый вывод;
• pain point — проблема пользователя;
• user need — потребность;
• persona — модель типичного пользователя, основанная на исследовании в соответствующей методике.

Глаголы

• conduct user interviews;
• observe user behaviour;
• identify pain points;
• synthesize research findings;
• validate assumptions.

Information architecture

Information architecture / IA — организация, структура и иерархия контента, помогающая пользователю находить нужную информацию.

• navigation — навигация;
• navigation structure — структура навигации;
• hierarchy — иерархия;
• site map / sitemap — схема структуры сайта в UX-контексте;
• label — название пункта или элемента;
• category — категория;
• content structure — структура контента.

User flow, task flow и user journey

• user flow — последовательность шагов пользователя для выполнения задачи;
• task flow — более линейный сценарий выполнения конкретной задачи;
• user journey — более широкий путь пользователя и его опыт;
• entry point — точка входа;
• decision point — точка выбора;
• happy path — основной успешный сценарий;
• edge case — редкий или пограничный сценарий.

Фразы

• map the user flow;
• simplify the flow;
• reduce unnecessary steps;
• identify friction points;
• cover edge cases.

Wireframe

Wireframe — схематичная структура интерфейса, показывающая расположение и функциональность элементов до детальной визуальной проработки.

• low-fidelity wireframe — грубый ранний wireframe;
• high-fidelity wireframe — более детализированный вариант;
• layout — компоновка;
• placeholder — временный заполнитель;
• content block — контентный блок;
• screen — экран;
• page layout — структура страницы.

Prototype и mockup

• interactive prototype;
• clickable prototype;
• prototype interaction;
• test a prototype;
• iterate on the design.

UI-элементы

Visual design

• visual hierarchy — визуальная иерархия;
• spacing — интервалы;
• alignment — выравнивание;
• contrast — контраст;
• typography — типографика;
• font size — размер шрифта;
• line height — межстрочный интервал;
• color palette — палитра;
• icon — иконка.

Design system

• design system — система правил, компонентов и стандартов интерфейса;
• component — переиспользуемый компонент;
• component library — библиотека компонентов;
• design token — формализованное значение дизайна, например цвет или spacing;
• pattern — повторяемый паттерн;
• style guide — руководство по стилю;
• variant — вариант компонента;
• state — состояние элемента.

States

• default state;
• hover state;
• active state;
• disabled state;
• error state;
• loading state.

Usability testing

• usability — удобство и эффективность использования;
• usability test — usability-тестирование;
• task — задача участника;
• task success rate — доля успешного выполнения;
• completion time — время выполнения;
• user error — ошибка пользователя;
• friction — препятствие или неудобство;
• usability issue — проблема usability.

• conduct a usability test;
• observe participants;
• identify usability issues;
• measure task completion;
• iterate based on findings.

Accessibility

• accessibility / a11y — доступность;
• screen reader — экранный диктор;
• keyboard navigation — навигация с клавиатуры;
• focus state — состояние фокуса;
• color contrast — цветовой контраст;
• alt text — альтернативный текст;
• accessible label — доступная подпись;
• semantic markup — семантическая разметка.

Design handoff

• handoff — передача дизайна разработчикам;
• design specification / design spec — спецификация;
• developer handoff — передача разработчикам;
• spacing values — значения отступов;
• interaction details — детали взаимодействия;
• asset — графический ресурс;
• export an asset — экспортировать ресурс;
• implementation — реализация;
• design QA — проверка реализации на соответствие дизайну.

Рабочие фразы дизайнера

• This flow has too many steps.
• Let's test the prototype with users.
• The visual hierarchy isn't clear enough.
• This component should be reusable.
• We need to cover the empty state.
• The button needs a clearer label.
• This interaction may be confusing.
• Let's increase the contrast.
• The design needs to work on smaller screens.
• I'll prepare the files for developer handoff.

Типичные ошибки

Практика