UI/UX и продуктовый дизайн
в США

Да, включаем UX-исследование в процесс: интервью, usability-тестирование, анализ конкурентов. Это снижает количество итераций и улучшает итоговый продукт.

Да. Макеты в Figma с организованными компонентами, автолейаутами и handoff-спецификациями для разработчиков.

Да, работаем по инвойсу в USD (wire/Payoneer). График — 50/50 или по этапам.

Да, создаём component library и дизайн-систему, которую ваши разработчики смогут масштабировать.

На русском. При необходимости документацию и комментарии в макетах дублируем на английском.

Отдельного техрегламента для сайтов у ADA нет. Иски по Title III идут давно, и суды берут WCAG 2.1 уровня AA за разумный ориентир. В макетах это контраст текста, видимый фокус, работа с клавиатуры, подписи к полям и понятные тексты ошибок. Проверяем на этапе макета — переделывать свёрстанное дороже, а переснимать библиотеку компонентов дороже всего.

VPAT — таблица, где поставщик отвечает по каждому критерию доступности: поддерживается, поддерживается частично, нет. Просят её госзаказчики и крупные корпорации США при закупке. Данные для таблицы даёт тот, кто делал интерфейс. Если доступность не закладывали, заполнять таблицу нечем, и сделка встаёт на середине.

Штат отдельным списком из пятидесяти с лишним значений, ZIP на пять цифр с опциональными четырьмя, телефон в виде (212) 555-0123, дата MM/DD/YYYY. Отчества нет. Адрес пишется двумя строками, вторая — под apt или suite, и без неё половина городских адресов не влезает. Единицы имперские. Мелочи, но именно на них американец спотыкается и уходит.

Логика у калифорнийского закона своя. Вместо европейского «примите cookie» нужна ссылка «Do Not Sell or Share My Personal Information» и уважение к сигналу Global Privacy Control из браузера. Наглухо блокирующий модальник тут обычно лишний. Проектируем ссылку в футере, экран настроек и видимое состояние «отказ принят» — последнее забывают чаще всего.

Это приёмы, толкающие пользователя к решению против его интереса: подписка мелким шрифтом, кнопка отказа серым по серому, отмена в три экрана. FTC ведёт по таким практикам дела. Калифорнийский CPRA прямо говорит, что согласие, полученное через dark pattern, согласием не считается. В макетах отказ должен быть виден так же ясно, как согласие.

Респондентов набираем через панели вроде UserTesting или Respondent, вознаграждение — в долларах. Созвоны ставим в окна ET и PT. Модератора-носителя языка привлекаем, когда важны нюансы формулировок и их слышно только на живом интервью. Часть задач закрывается неуправляемым тестом: человек проходит сценарий сам, мы разбираем запись.

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

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

WCAG уровня AA требует контраст не ниже 4,5:1 для основного текста и 3:1 для крупного. Элементы управления, границы полей и иконки-кнопки тоже обязаны контрастировать с фоном. Основной текст мельче шестнадцати пикселей на мобильном читается плохо даже там, где формальных требований нет. Допустимые пары цветов задаём в дизайн-системе. Без этого проверка превращается в ручной перебор экранов перед каждым релизом, и кто-нибудь однажды его пропустит.

Проходим интерфейс без мыши, от первого экрана до отправки формы. Фокус обязан быть виден на каждом шаге. Порядок перехода совпадает с визуальным порядком. Модальное окно удерживает фокус внутри и отдаёт его назад при закрытии. Выпадающие меню, слайдеры и карусели ломаются чаще остального: их собирают на div-ах без ролей и состояний. Этот проход идёт до передачи макетов в разработку, чтобы исправление не стоило переделки вёрстки.

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

Дата в порядке month/day/year. Телефон в виде (555) 123-4567. Адрес со строкой street, городом, штатом из списка и ZIP из пяти цифр. Единицы измерения — дюймы, фунты, градусы Фаренгейта. Штат выбирается списком. Свободный ввод даёт в одной базе «CA», «Cal» и «California», и дальше по этим данным нельзя посчитать ни доставку, ни налог. Формат подписываем в поле примером, чтобы человек не угадывал разделители.

Два поля «имя» и «фамилия» заставляют человека решать, куда положить второе имя, суффикс или составную фамилию. Часть людей заполняет их не так, как ждёт система. Данные приходят перепутанными, и письма начинаются с обращения к фамилии. Одно поле Full name проще для пользователя и чище для базы. Разделение делаем там, где оно нужно для документов или для платёжной системы, и тогда объясняем в подписи, зачем.

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

Не мешает, когда её проверяют своим проходом. Контраст в тёмной теме считается по своим парам цветов. Белый текст на чистом чёрном утомляет глаз сильнее, чем светло-серый на тёмно-сером фоне. Тени и тонкие границы в темноте пропадают, и иерархия рассыпается. Значит уровни держим на отступах и на фоне блоков. Обе темы проходят одну и ту же проверку контраста, и обе попадают в макеты. Приписка «инвертировать» макетом не считается.

Уважать системную настройку уменьшения движения. Часть людей испытывает физический дискомфорт от параллакса и резких переходов, и в операционных системах для этого есть отдельный флаг. Интерфейс обязан его читать и отключать движение, которое не несёт смысла. Анимацию, объясняющую переход между экранами, оставляем короткой. Длинная заставка на каждом действии замедляет работу для всех. Физический дискомфорт — только часть проблемы.

Смысловые картинки получают текстовое описание. Декоративные получают пустой атрибут, чтобы скринридер их пропускал. Описание говорит о содержании, а не о файле: «График роста выручки за 2025 год» вместо «chart.png». Иконка-кнопка без видимой подписи обязана иметь скрытое имя. Требования к описаниям кладём в макет рядом с картинкой. Присланные письмом, они теряются на этапе вёрстки, и страница выходит с пустыми альтернативами.

Проходим ключевые сценарии в VoiceOver на macOS и iOS и в NVDA на Windows. Слушаем, что читается на самом деле: заголовки по уровням, имена кнопок, состояния переключателей, порядок элементов в форме. Автоматические проверки ловят часть ошибок — контраст, отсутствие подписей, дубли идентификаторов. Остальное слышно только вживую. Отчёт отдаём списком, где у каждого пункта есть экран, шаг и приоритет, и по нему можно повторить проверку.

Претензия приходит письмом от юриста и описывает конкретные барьеры: меню не работает с клавиатуры, у полей нет подписей, контраст ниже нормы. Дальше идёт требование исправить и компенсировать расходы. Число таких обращений в США велико, а суды применяют к сайтам Title III ADA. Барьеры, закрытые на этапе дизайна, обходятся в часы работы. Те же барьеры после релиза обходятся в переписку с юристами и во внеплановый спринт.

Не перекрывать контент целиком. Не прятать кнопку отказа за настройками. Законы штатов требуют дать понятный выбор и не подталкивать к согласию оформлением. Работает узкая полоса снизу с двумя равнозначными кнопками и ссылкой на подробные настройки. Такой вариант проходит требования и не выглядит ловушкой. Модальное окно на весь экран с серой кнопкой «Отказаться» даёт обратный эффект: человек закрывает страницу вместе с баннером.

Экраны во всех состояниях: пустое, загрузка, ошибка, длинный текст, отсутствие прав. Сетка и токены цветов, отступов, типографики. Поведение при изменении ширины окна. Правила фокуса и текстовые описания изображений. Компоненты, собранные как компоненты. Нарисованные заново на каждом экране они ломают вёрстку. Макет без состояния ошибки выглядит готовым и превращается в переписку на этапе вёрстки. Такую переписку мы закрываем состояниями в самом файле.

Задачами, которые человек смог выполнить. Оценка «нравится» на это не отвечает. До редизайна фиксируем базу: доля доходящих до целевого действия, время на сценарий, число обращений в поддержку по одной и той же причине. После запуска сравниваем те же три цифры. Если базы нет, снимаем её на действующем интерфейсе, прежде чем рисовать новый. Редизайн без базы нельзя ни защитить, ни откатить: сравнивать будет нечем.

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

Чаще хватает трёх точек: телефон, планшет, десктоп. Планшет ломается на промежуточной ширине, где колонки уже разъехались, а вторая колонка ещё пустует. Отдельный набор экранов нужен там, где планшет — рабочий инструмент: склад, зал, выездная работа. Тогда меняется сам сценарий: крупные зоны нажатия, работа одной рукой, отсутствие наведения курсора. Сетка здесь второстепенна. Решение принимаем по данным о фактических устройствах вашей аудитории.

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

Микротекст проектируется вместе с экраном. Кнопка называет действие: «Request a quote» вместо «Submit». Пустое состояние объясняет, что делать дальше, и даёт первое действие. Сообщение об успехе говорит, что произошло и когда ждать ответа. Ошибка называет причину и путь исправления. Американский читатель чувствителен к вежливому официальному тону: «Please» в кнопке читается как слабость. Вежливости это не добавляет. Тексты пишем в макете и отдаём разработчику вместе с ним, единым файлом.