UI/UX-дизайн: 8 терминов, которые помогут управлять проектом

Редакция «Текстерры» Редакция «Текстерры»

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

1. UX / User Experience — пользовательский опыт

Пользовательский опыт — это впечатление, которое человек получает от взаимодействия с сайтом, приложением или сервисом. Насколько ему удобно проходить весь путь: от входа на страницу до выполнения целевого действия.

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

Удобство пользователя строится на базовых принципах UX: понятность, доступность, логика сценариев и визуальная иерархия. Без этого даже самый красивый интерфейс не будет работать на результат.

Пример из UX-разговорника: как специалист видит проблему интерфейса и как это объяснить заказчику простыми словами

2. UI / User Interface — пользовательский интерфейс

UI — это дизайн интерфейсов: кнопки, цвета, шрифты, иконки, отступы. То, что пользователь видит и с чем напрямую взаимодействует. UI — визуальная часть, но она напрямую влияет на поведение пользователя.

Пример: вы ищете компанию по доставке воды, открываете несколько сайтов. На одной из страниц много ярких элементов: мигающие баннеры, анимации, разноцветные иконки. Кнопка «Оформить заказ» теряется среди визуального шума. И в итоге вы заказываете воду на другом сайте, где интерфейс более спокойный, чистый и интуитивный — нужные элементы сразу бросаются в глаза.

Карточка из UX-разговорника: перевод фразы «UI перегружен» на язык заказчика

3. Usability / Юзабилити — удобство использования

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

Пример: вы хотите перевести деньги в приложении банка. Юзабилити — это насколько быстро вы найдете иконку перевода, подтянется ли номер получателя автоматически из телефонной книги и сколько шагов нужно в целом, чтобы завершить перевод.

Карточка из UX-разговорника: что на самом деле означает «улучшить юзабилити» и с чем сталкивается пользователь на практике

Usability, UX, UI: разница в смыслах и применении в проектах
Термин	Что показывает	Как используется в проекте
UX	Впечатление пользователя от взаимодействия с продуктом	Анализируется на этапе исследований, учитывается при проектировании интерфейса
UI	Как продукт выглядит: кнопки, цвета, шрифты, отступы	Разрабатывается на этапе дизайна: визуальный стиль, макеты
Usability	Насколько легко и понятно пользоваться продуктом	Тестируется в прототипе или на готовом решении — чтобы убрать сложности и барьеры

4. Пользовательский сценарий

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

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

Одна из типичных формулировок UX-специалистов на этапе аудита или проектирования интерфейса

5. CJM / Customer Journey Map — путь клиента

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

CJM описывает все необходимые метрики каждого этапа:

• действия пользователя — например, переход по ссылке, нажатие на кнопку;

• ответ системы — например, загрузка страницы, появление формы обратной связи;

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

Эти метрики могут меняться в зависимости от задач: в одном проекте важны скорость и конверсия, в другом — доверие к бренду или удобство повторных действий.

Пример: в интернет-магазине одежды большинство покупателей бросают корзину с товарами, не дойдя до оплаты. Изучение CJM показало сразу три проблемы: реклама, с которой приходят клиенты, неправильно передает условия акции; фильтр по размеру неудобен, из-за чего сложно найти нужный товар; обязательная регистрация вызывает раздражение.

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

Фраза, с которой часто начинается работа UX-специалиста: сначала нужно посмотреть на путь пользователя целиком

6. User Flow — путь пользователя, пользовательский поток

User Flow — это путь, по которому должен пройти пользователь от точки входа, например, на главной странице, до целевого действия: заказ, заявка, регистрация. Сюда входят все страницы и переходы между ними.

Пример: пользователь хочет заказать пиццу через приложение. По идее, User Flow должен быть таким: открыл приложение → выбрал пиццу → перешел в корзину → нажал «Оформить» → оплатил. Но бывает, что пользователи теряются после выбора пиццы, потому что кнопка «Корзина» мелкая, серая и неудобно расположена. В этом случае User Flow тормозится: пользователь не понимает, что делать дальше и закрывает приложение — заказ не оформлен.

Карточка из UX-разговорника: дизайнер указывает на разрыв в логике сценария — пользователь не доходит до финального действия

В чем отличие пользовательского сценария, User Flow и CJM

Представьте, что вам нужно попасть на деловую встречу. User Flow — это карта метро: она показывает, какие станции и пересадки доступны. Пользовательский сценарий — ваш конкретный маршрут: с какой станции вы поехали, где пересели и где вышли. CJM — вся поездка: как вы вышли из офиса, задержались на входе в метро, попали в толпу, в результате зашли не в тот вагон — и в каком настроении добрались до встречи.

7. Адаптивный дизайн

Адаптивный дизайн UI-интерфейсов позволяет подстраиваться под экраны разных устройств от смартфона до телевизора так, чтобы интерфейс оставался красивым и удобным. Внутри макета автоматически меняется ориентация, размер, разрешение изображений, шрифты и другие параметры.

Пример: вы всегда заходили на сайт садового центра с десктопа, но однажды зашли с мобильного телефона и не узнали привычный интерфейс. Текст перекрывает изображения, кнопка «Заказать» сместилась на пятый экран. Так бывает, когда дизайн не адаптирован под разные устройства.

Карточка из UX-разговорника: что такое «плавающая верстка» и «расползающийся интерфейс»

8. Прототип

Это «черновик» интерфейса будущего сайта или приложения. Он помогает проверить, как все будет работать, до того как разработчики начнут писать код. Если прототип интерактивный — можно протестировать кликабельные UI-элементы, правда, функционал будет упрощен.

Пример: команда разрабатывает приложение для заказа такси. Во время тестирования прототипа становится понятно, что пользователи приходят в замешательство при указании адреса — не хватает поля «Подъезд». Изначально это поле не было предусмотрено, но после обратной связи его добавляют в финальную версию.

Карточка из UX-разговорника: что такое «плавающая верстка» и «расползающийся интерфейс»

Сохраните этот UX-словарь или передайте команде — пригодится в любом проекте, где есть интерфейс.

О чем спросить подрядчика

Чтобы понимать, соответствует ли предложенная концепция принципам UX и решит ли такой подход задачу вашего бизнеса, задавайте подрядчику конкретные вопросы — так вы сможете убедиться, что работа идет в нужном направлении.

Вопросы могут быть следующими:

• Какие UX-проблемы вы видите в текущей версии и что порекомендуете изменить в первую очередь?

• Какие пользовательские сценарии вы будете учитывать в проекте?

• Как будет выстроен User Flow, чтобы пользователь быстро доходил до цели?

• Какие этапы вы проанализировали в CJM и что планируете изменить в интерфейсе по результатам анализа?

• Где сейчас у нас проблемы с юзабилити? Как вы это проверяете?

• Как будет выглядеть прототип, сможем ли мы его протестировать до запуска дизайна?

• Какой стиль вы будете использовать при дизайне UI-интерфейса, почему считаете его уместным для нашей аудитории?

• Какие ошибки или неудобства вы видите в адаптивной версии и что предлагаете поменять?

• Какой стиль и принципы вы будете использовать при дизайне UI-интерфейсов для нашей целевой аудитории?

Ответы на эти вопросы покажут, насколько UI/UX-дизайнер глубоко понимает задачи вашего проекта и умеет работать не только с визуалом, но и с логикой взаимодействия. А вам помогут заранее избежать недопониманий и сэкономить время на доработках.

Если хотите обсудить UX вашего сайта — напишите нам в Телеграм или на почту. Оценим ситуацию с помощью UX-аудита: определим проблемные места и предложим, как удержать посетителей.

Читайте также:

UX/UI-исследование вместо редизайна: как мы помогли производителю косметики улучшить сайт своими силами

Что такое UX-аудит и почему он поможет не всем

Редизайн сайта с учетом UX: как не потерять клиентов