Короткий ответ
UX-дизайн решает, как продукт работает для человека: что ему нужно, какие шаги он проходит и где застревает. UI-дизайн даёт этим шагам видимую форму: экраны, кнопки, тексты, цвета и состояния. Бизнес получает проверенную структуру, прототип и набор экранов и компонентов, по которым работают разработчики, — и меньше посетителей, которые уходят, потому что что-то было непонятно.
UX — как работает форма заказа, UI — как она выглядит
Возьмём форму заказа в небольшом интернет-магазине. Кто-то должен решить, какие поля в ней нужны, что произойдёт, если телефон введён с ошибкой, и что человек увидит после нажатия кнопки. И кто-то должен решить, как выглядят поля, кнопка и сообщение об ошибке, чтобы сразу было ясно, куда нажимать. Первая группа решений — это UX, user experience, пользовательский опыт. Вторая — UI, user interface, интерфейс. UX/UI-дизайн — название работы, которая отвечает за обе.
Определение Nielsen Norman Group, под которым стоят имена Дона Нормана и Якоба Нильсена, широкое: пользовательский опыт охватывает все стороны взаимодействия человека с компанией, её услугами и продуктами. Стандарт ISO 9241-210, как его цитирует англоязычная Википедия, суше: это восприятие и реакции человека, которые возникают при использовании или ожидаемом использовании системы, продукта или услуги. Оба определения говорят о человеке, а не об экране. Норман и Нильсен добавляют пример: сайт с рецензиями на фильмы может иметь безупречный интерфейс поиска, но опыт будет плохим, если в базе нет небольшого независимого фильма, за которым человек пришёл.
Что сдаёт UX-дизайнер: исследование, сценарии, вайрфреймы и прототип
Результат работы UX-дизайнера — в основном не картинки. Interaction Design Foundation перечисляет типичные задачи: исследование пользователей, создание персон, проектирование вайрфреймов и интерактивных прототипов, тестирование. За исследованием идёт маршрут, который Nielsen Norman Group называет пользовательским сценарием (user flow): шаги, нужные для обычной задачи внутри продукта. Для магазина это путь от карточки товара до оплаченного заказа вместе с развилками: товара нет в наличии, карта не прошла.
Устройство каждого экрана фиксируют в вайрфреймах. Interaction Design Foundation называет их базовыми схемами интерфейса, которые показывают структуру и расположение элементов без цветов, шрифтов и изображений; макет добавляет внешний вид, но остаётся статичным, а прототип имитирует взаимодействие. Именно прототип стоит попросить показать и пройти самому. Причину Nielsen Norman Group объясняет одной фразой: выбрасывать код очень дорого, выбрасывать прототип — нет.
Что сдаёт UI-дизайнер: визуальный язык, компоненты и их состояния
UI-дизайнер берёт проверенную структуру и даёт ей лицо. Interaction Design Foundation описывает UI-дизайн как создание интерфейсов с упором на внешний вид и стиль: цвета, типографику, кнопки, иконки. Работа начинается с визуального языка — небольшого набора решений, которые потом повторяются на каждом экране: шрифты, значение каждого цвета, вид главной кнопки. Посетитель этих решений не назовёт, но сразу заметит, если две страницы одного сайта выглядят так, будто их делали две разные компании.
В больших проектах эти решения собирают в дизайн-систему. Nielsen Norman Group определяет её как полный набор стандартов для управления дизайном в масштабе с помощью повторно используемых компонентов и паттернов. У каждого компонента описаны состояния, поэтому поле существует пустым, в фокусе, заполненным, с ошибкой и отключённым, а не одной красивой картинкой. Там же честно сказано о цене вопроса: поддержка дизайн-системы отнимает много времени и требует отдельной команды. Сайту из пяти страниц нужен аккуратный набор компонентов, а не система.
Этапы работы над дизайном: от брифа до передачи разработчикам
Единого официального процесса нет, и Interaction Design Foundation говорит об этом прямо. Большинство команд идёт по какой-то версии пяти шагов дизайн-мышления: понять людей через исследование, сформулировать задачу, придумать решения, собрать прототип, проверить на живых пользователях. Для заказчика это цепочка результатов: исследование, затем сценарии и вайрфреймы, затем кликабельный прототип, затем визуальный дизайн. О проверке Якоб Нильсен в статье о размере тестов пишет так: лучший результат дают тесты не более чем с пятью участниками, зато проведённые столько раз, сколько вы можете себе позволить.
Передача в разработку — момент, когда дизайн становится спецификацией. По рекомендациям Nielsen Norman Group, в дизайн-файле должны быть описаны сценарии взаимодействия, визуальные стили, сетка и контрольные точки для разных экранов, компоненты, настоящие тексты вместо «рыбы» и требования доступности вроде порядка перехода по клавише Tab и альтернативных подписей к изображениям. Там же просят подключать разработчиков задолго до того, как дизайн закончен. Макет, который они впервые видят в день передачи, обычно возвращается списком того, что собрать нельзя.
Как отличить хороший интерфейс от плохого: десять эвристик Нильсена
Чтобы оценить интерфейс, владельцу бизнеса не нужен вкус. Якоб Нильсен опубликовал десять эвристик юзабилити в 1994 году, и Nielsen Norman Group по-прежнему публикует их как общие практические правила, а не конкретные инструкции. Видимость состояния системы: дизайн всегда сообщает человеку, что происходит, и после нажатия кнопки форма показывает, что заказ отправляется, а затем — что он принят. Контроль и свобода: люди часто нажимают по ошибке, и им нужен ясно обозначенный «аварийный выход» — возможность вернуться на шаг или отменить действие, не начиная всё заново.
Предотвращение ошибок: лучший дизайн не даёт проблеме случиться, и форма останавливает невозможный номер телефона ещё до отправки. Узнавание вместо припоминания: человек не должен держать в голове то, что видел в другой части интерфейса, поэтому адрес доставки, выбранный на первом шаге, остаётся перед глазами на последнем. Сообщения об ошибках, по девятой эвристике, пишут простым языком без кодов, точно называют проблему и подсказывают решение. Интерфейс, который не проходит эти вопросы, сломан, каким бы изящным он ни выглядел.
Доступность в цифрах: контраст, размер текста и область нажатия по WCAG
Часть качества записана в виде измеримых критериев. Консорциум W3C публикует Руководство по обеспечению доступности веб-контента, WCAG; версия 2.2 на его сайте имеет статус рекомендации W3C и датирована 12 декабря 2024 года. На её уровне AA контраст текста с фоном должен быть не ниже 4,5:1, а крупного текста — не ниже 3:1. Крупным считается текст от 18 пунктов или от 14 пунктов полужирным; в пояснениях W3C это примерно 24 и 18,5 пикселя CSS. Кроме того, текст должен увеличиваться до 200 процентов без потери содержания и функций.
Несколько критериев прямо касаются форм. Цвет не может быть единственным способом передать информацию: поле, помеченное как ошибочное одной только красной рамкой, критерий не проходит, ошибку нужно описать текстом. Область нажатия для пальца или мыши — не меньше 24 на 24 пикселя CSS, с оговорёнными исключениями. Стандарт время от времени пересматривают. Обязывает ли закон ваш сайт ему соответствовать, зависит от страны и вида деятельности — это вопрос к юристу.
Когда бизнесу нужна работа над UX и UI, а когда дизайн не поможет
Таких ситуаций три. Первая — новый продукт, сайт или приложение: решения о структуре дешевле всего принимать до начала разработки. Вторая — редизайн: вводная статья Nielsen Norman Group об удобстве использования советует сначала проверить старый дизайн на людях, чтобы понять, что стоит сохранить. Третья встречается чаще всего: посетители приходят и не становятся клиентами. Там же сказано жёстко: если сайтом трудно пользоваться, люди уходят, а первый закон интернет-торговли гласит, что товар, который не смогли найти, не смогут и купить.
У дизайна есть предел — тот самый, из примера с фильмами. Если предложение слабое, цена спрятана или в каталоге нет того, что ищут, хороший интерфейс лишь быстрее это покажет. Исследование может вскрыть такие проблемы, но исправлять их — решение бизнеса. Честная проверка простая: стоит ли ошибка в структуре дороже, чем работа, которая её предотвращает.
Что подготовить перед заказом дизайна интерфейса
Начните с задач, а не с примеров чужих сайтов. Запишите три-четыре действия, которые посетитель должен суметь выполнить: найти товар, сравнить, заказать, вернуть. Соберите то, что уже знаете: данные Яндекс Метрики или другой аналитики, вопросы, которые клиенты задают в поддержку и в Telegram, шаги, на которых бросают заказ. Подготовьте настоящие тексты и фотографии: дизайн, нарисованный на тексте-заглушке, ломается, когда реальные названия занимают три строки. Заранее договоритесь, что вы получите в конце: кликабельный прототип, экраны для телефона и компьютера, набор компонентов с состояниями.
Делать самому или заказывать — зависит от того, что стоит на кону. Простой сайт на конструкторе с проверенным шаблоном уже несёт в себе много разумных решений, а десять эвристик и проверка контраста помогут владельцу пройти остальное. Приложение, каталог с фильтрами, личный кабинет или заказ в несколько шагов — другое дело: структура здесь ваша собственная, и никто её за вас не проверял. Такой UX/UI-дизайн обычно заказывают — у фрилансера или в студии, например в VITON13 Studio; из чего складывается стоимость, рассказано в гайде по ссылке ниже. В любом случае просите кликабельный прототип до первой строки кода.
Практический чеклист
- Запишите три-четыре задачи, которые посетитель должен выполнить, его собственными словами.
- Соберите аналитику, вопросы в поддержку и шаги, на которых люди бросают заказ.
- Подготовьте настоящие тексты, данные о товарах и фотографии до первого макета.
- Попросите кликабельный прототип и проверьте его на пяти людях, похожих на ваших покупателей.
- Сверьте контраст текста и размер кнопок с критериями WCAG 2.2 уровня AA.
Вопросы и ответы
UX/UI-дизайнер — это одна профессия или две?
Это два набора навыков, которые в небольших проектах часто совмещает один человек. UX — исследование, структура и проверка на людях; UI — визуальный слой и компоненты. На большом продукте роли обычно разделены, и стоит спросить, кто отвечает за какую часть.
Может ли сайт выглядеть хорошо при плохом UX?
Да. Пример Nielsen Norman Group — сайт с рецензиями на фильмы, где поиск сделан безупречно, а нужного фильма в базе нет. Внешний вид — это интерфейс; опыт зависит ещё и от того, получил ли человек то, за чем пришёл.
Чем вайрфрейм отличается от макета и прототипа?
В объяснении Interaction Design Foundation вайрфрейм — это чертёж: структура и расположение без цветов и изображений. Макет показывает финальный вид, но остаётся статичным. Прототип имитирует взаимодействие, и по нему можно пройти, как по готовому продукту.
Нужно ли малому бизнесу юзабилити-тестирование?
Небольшой тест доступен любому бизнесу. Якоб Нильсен в своей статье оценивает в 85% долю проблем удобства, которые находит первое исследование с пятью участниками, и советует несколько малых раундов вместо одного большого. Чтобы посмотреть, как пять человек оформляют заказ, хватит вечера и прототипа.
Обязан ли мой сайт соответствовать WCAG?
WCAG — технический стандарт, который публикует W3C. Обязывает ли закон ваш сайт ему соответствовать, зависит от страны и вида деятельности, поэтому свой случай стоит проверить с юристом. Как ориентир для дизайна критерии уровня AA по контрасту и увеличению текста разумны для любого сайта.