Вопросы по дизайн-системам, UX исследованиям, сеткам, эвристикам Нильсена, a11y (доступности) и CJM.
* **UX (User Experience)**: Дизайн пользовательского опыта. Отвечает за то, как продукт работает, насколько он удобен, понятен и решает ли задачи пользователя. Фокусируется на структуре, информационной архитектуре, сценариях использования и результатах исследований. * **UI (User Interface)**: Дизайн пользовательского интерфейса. Отвечает за то, как продукт выглядит: цвета, шрифты, иконки, отступы, анимация и эстетическое соответствие бренду.
Дизайн-система — это единый источник правды для дизайнеров и разработчиков, содержащий стандарты проектирования, правила визуального стиля и библиотеку готовых компонентов в коде и графическом редакторе. **Состав**: * **Основа (Foundation)**: Цветовая палитра, типографика, сетки, тени, иконки. * **Дизайн-токены**: Переменные для хранения стилей. * **Компоненты**: Кнопки, инпуты, чекбоксы, модальные окна. * **Гайдлайны**: Правила использования компонентов и Tone of Voice (голос бренда).
Дизайн-токены — это атомарные переменные (в формате JSON или YAML), которые хранят визуальные параметры дизайн-системы: значения цветов, шрифтов, отступов, радиусов скруглений. **Польза**: Они заменяют жестко закодированные значения (например, `#FF5733` заменяется на `color-brand-primary`). При изменении бренда достаточно обновить токен в одном месте, и изменения автоматически применятся как в Figma, так и во всех платформах разработки (iOS, Android, Web).
Визуальная иерархия направляет взгляд пользователя по странице в нужном порядке. Принципы: * **Размер**: Крупные элементы (заголовки h1) привлекают внимание первыми. * **Контраст**: Яркая кнопка на темном фоне считывается мгновенно. * **Свободное пространство (White space)**: Отступы отделяют логические блоки и дают контенту «дышать». * **Положение**: Элементы в верхней левой части экрана считываются первыми в культурах с чтением слева направо.
8-пиксельная сетка — это система, в которой все размеры элементов, отступы и шаг сетки кратны 8 (8, 16, 24, 32, 40 и т.д.). **Плюсы**: * Упрощает масштабирование для разных плотностей пикселей (экраны 1x, 2x, 3x масштабируют 8 без дробных пикселей). * Ускоряет принятие решений дизайнером и верстку разработчиком. * Обеспечивает визуальный ритм и сбалансированность макетов.
Юзабилити-тестирование — метод оценки интерфейса путем наблюдения за поведением пользователей, выполняющих реальные задачи на прототипе или готовом продукте. **Шаги проведения**: 1. Сформировать гипотезы и составить сценарий задач (например: «Найдите товар X и оформите заказ»). 2. Найти респондентов, соответствующих целевой аудитории. 3. Провести сессию: попросить пользователя думать вслух во время выполнения задач. 4. Зафиксировать ошибки, задержки и непонимания, составить список UX-рекомендаций.
* **CJM (Карта пути клиента)**: Верхнеуровневая карта, описывающая полный опыт клиента во взаимодействии с компанией (включая шаги вне интерфейса: реклама, доставка, поддержка). Отображает боли, мысли и эмоции. * **User Flow (Пользовательский сценарий)**: Техническая блок-схема, показывающая точные переходы пользователя по экранам внутри приложения для достижения конкретной цели. Фокусируется на логике переходов интерфейса.
Всего эвристик 10, ключевые из них: * **Видимость состояния системы**: Система должна всегда информировать пользователя о том, что происходит (например, показывать прогресс-бар загрузки). * **Соответствие системы реальному миру**: Использование понятных пользователю терминов и метафор (иконка корзины для удаления). * **Свобода действий и контроль**: Наличие кнопки отмены действий («Назад», «Undo»). * **Предотвращение ошибок**: Интерфейс спроектирован так, чтобы пользователь не мог совершить ошибку (неактивная кнопка отправки до заполнения формы).
Доступность интерфейсов (A11y) гарантирует, что продуктом могут пользоваться люди с ограниченными возможностями (зрение, слух, моторика). **Стандарты WCAG (Web Content Accessibility Guidelines)**: * Минимальный коэффициент контрастности текста относительно фона должен быть не менее `4.5:1` (для обычного текста) и `3:1` (для крупного текста). * Интерфейс должен полностью поддерживать навигацию с клавиатуры и корректно озвучиваться скринридерами.
* **Wireframe (Каркас)**: Низкодетализированный черно-белый набросок структуры страницы (схемы блоков, кнопка-квадрат). Фокус на компоновке элементов. * **Mockup (Макет)**: Статичное высокодетализированное изображение интерфейса с реальными цветами, шрифтами и графикой. Фокус на эстетике. * **Prototype (Прототип)**: Интерактивный макет (кликабельный клик-энд-транзишн макет из Figma), имитирующий работу реального интерфейса. Фокус на тестировании логики переходов.
Микро-анимация — это небольшие визуальные эффекты интерфейса, реагирующие на действия пользователя (изменение состояния кнопки при наведении, анимация лайка, плавный лоадер). **UX-эффект**: Предоставляет немедленную визуальную обратную связь (подтверждает действие), направляет внимание пользователя, сглаживает моменты ожидания и делает интерфейс более «живым».
* **Не использовать чистый черный (`#000000`)** для фона: он слишком контрастирует с белым текстом и вызывает утомление глаз. Рекомендуется темно-серый или глубокий синий фон. * **Не использовать неоновые цвета высокой насыщенности** для кнопок, так как они вызывают визуальные вибрации. Нужна приглушенная палитра. * Проверять контрастность элементов по стандартам WCAG. * Разделять слои глубиной: более высокие элементы интерфейса (карточки, модалки) должны быть светлее базового фона.
Закон Фиттса гласит: «Время достижения цели зависит от расстояния до нее и ее размера». **UX-применение**: Ключевые интерактивные элементы (кнопки целевого действия, кнопки меню) должны быть достаточно крупными и располагаться в легкодоступных для клика/тапа зонах экрана. Например, мобильные кнопки CTA располагают внизу экрана — в зоне действия большого пальца руки.
Карточная сортировка — метод исследований информационной архитектуры. Пользователям выдают карточки с названиями разделов/товаров и просят разложить их по логическим группам. Помогает дизайнеру спроектировать интуитивно понятное меню навигации веб-сайта на основе ментальных моделей реальных пользователей.
* **Responsive (Респонсивный)**: Макет плавно масштабируется и перестраивается под любой размер экрана с помощью относительных величин (% или фракции). Один макет для всех разрешений. * **Adaptive (Адаптивный)**: Макет подменяется на дискретных контрольных точках (Breakpoints — например, 320px, 768px, 1200px). Система определяет устройство и отдает конкретный статичный шаблон, оптимизированный под этот экран.
1. Содержать макеты в идеальном порядке: привязка компонентов к библиотекам, использование автолейаутов (Auto Layouts). 2. Описать интерактивные состояния всех элементов (Default, Hover, Active, Focus, Disabled, Error). 3. Подготовить адаптивные варианты экранов для мобильных устройств. 4. Провести совместную встречу-передачу, ответив на технические вопросы разработчиков.
Законы гештальт-психологии описывают, как мозг группирует визуальные объекты: * **Закон близости (Proximity)**: Объекты, расположенные близко друг к другу, воспринимаются как связанные (отступы между карточками должны быть больше отступов внутри карточки). * **Закон схожести (Similarity)**: Похожие по цвету или форме элементы воспринимаются как имеющие одинаковую функцию (все ссылки одного цвета). * **Закон замкнутости (Closure)**: Мозг достраивает незавершенные фигуры.
Закон Хика гласит: «Время принятия решения увеличивается с ростом количества и сложности вариантов выбора». **UX-применение**: Минимизировать выбор пользователя на одном шаге. Например, вместо огромной формы ввода разбивать ее на пошаговый опрос (визард), прятать редкие функции под спойлеры или выпадающие меню.
Темные паттерны — это приемы проектирования интерфейсов, которые намеренно вводят пользователя в заблуждение или манипулируют им для совершения невыгодных для него действий. **Примеры**: Автоматическое добавление платной страховки в корзину при покупке билета, скрытая подписка с усложненной процедурой отмены, манипулятивные тексты кнопок («Нет, я не хочу экономить»).
* Размещать подписи полей (Labels) над полями ввода (а не внутри в качестве плейсхолдера, который пропадает при вводе). * Использовать валидацию полей «на лету» (Inline validation) при потере фокуса, а не после отправки всей формы. * Четко подсвечивать обязательные поля и ошибки понятным текстом (красный цвет + текст подсказки). * Использовать автозаполнение (autofill) для типовых полей.
Проектирование интерфейса начинают с самого маленького экрана мобильного телефона, а затем расширяют его до планшета и десктопа. **Плюс**: Заставляет дизайнера отсечь все лишнее и сфокусироваться на самом главном контенте, так как мобильный экран не прощает избыточности.
Она означает, что у пользователя всегда должен быть простой выход из ошибочно начатого процесса: кнопка «Отмена», возможность сделать шаг назад в опросе, легкое закрытие модального окна кликом по оверлею или кнопка очистки корзины.
Нарисовать экраны на листах бумаги. Экспериментатор выступает в роли «компьютера»: когда пользователь нажимает пальцем на бумажную «кнопку», экспериментатор подкладывает другой лист бумаги с соответствующим экраном. Помогает очень быстро проверить логику переходов.
Tone of Voice определяет характер общения продукта с пользователем через интерфейсные тексты (копии кнопок, ошибки, онбординг). Он может быть дружелюбным, строгим профессиональным, игривым или лаконичным, но должен оставаться единообразным во всем приложении.
Закон Якоба гласит: «Пользователи проводят большую часть времени на других сайтах. Это означает, что они ожидают, что ваш сайт будет работать так же, как и все остальные сайты, которые они уже знают». **UX-применение**: Не изобретайте велосипед в базовых паттернах (иконка корзины в правом верхнем углу, логотип слева ведет на главную).
Empty State отображается, когда на экране нет данных (пустая корзина, нет результатов поиска). Удобный empty state должен не просто констатировать факт («Здесь пусто»), а предлагать следующее действие (кнопку «Начать покупки» или советы по поиску).
Когнитивная нагрузка — объем умственных усилий, необходимых пользователю для работы с вашим интерфейсом. Задача дизайнера — минимизировать ее: убрать лишний визуальный шум, писать простые понятные тексты, группировать информацию и использовать знакомые паттерны.
* Четко объяснить, *что* произошло, простым языком без кодов системных ошибок. * Объяснить, *как* решить проблему (например, «Проверьте подключение к интернету»). * Дать быстрое действие (кнопка «Повторить»).
Качественный метод исследований, проходящий в формате личной беседы 1-на-1. Позволяет глубоко изучить мотивы поведения пользователя, его прошлый опыт решения аналогичных задач, боли и скрытые потребности.
1. Представить результаты тестирования в виде цифр и фактов (например: «5 из 6 пользователей не смогли найти кнопку оплаты в предложенном вами варианте»). 2. Показать видеозаписи сессий тестирования, где реальные пользователи спотыкаются об интерфейс (это самый убедительный аргумент). 3. Предложить компромисс: запустить A/B тест обоих вариантов в продакшене, если это возможно, и позволить метрикам принять решение.
Дизайн-система — это единый источник правды для дизайнеров и разработчиков, включающий: * **Дизайн-токены (Design Tokens)**: Базовые неделимые сущности (значения цветов, шрифтов, отступов, радиусов скруглений), представленные в виде переменных. * **Библиотека UI-компонентов**: Готовые переиспользуемые элементы интерфейса в коде (React/HTML) и в Figma (кнопки, инпуты, модальные окна). * **Документация и гайдлайны**: Правила использования компонентов, тон коммуникации (Tone of Voice), паттерны проектирования сценариев.
* **UX (User Experience) дизайн**: Отвечает за логику работы интерфейса, проектирование пути пользователя (User Journey), информационную архитектуру и удобство выполнения задач. Фокусируется на том, как продукт *работает* и решает ли он боли пользователя. * **UI (User Interface) дизайн**: Отвечает за визуальный вид продукта. Фокусируется на эстетике (цвета, шрифты, иконки, сетки, тени, скругления) — то есть на том, как продукт *выглядит*.
Это 10 базовых эмпирических правил проектирования интерфейсов. Примеры: 1. **Видимость состояния системы**: Пользователь всегда должен понимать, что происходит (например, отображение прогресс-бара при загрузке файла). 2. **Соответствие системы реальному миру**: Использование понятных терминов и метафор (например, иконка корзины для удаления файлов). 3. **Пользовательский контроль и свобода**: Возможность легко отменить ошибочное действие (кнопка «Назад» или «Отмена»).
Закон Фиттса утверждает: время достижения цели зависит от расстояния до нее и ее размера. **Применение**: * Ключевые кнопки (например, призывы к действию — CTA) должны быть крупными и находиться в легкодоступных зонах экрана (например, внизу экрана на мобильных устройствах, куда легко дотянуться большим пальцем). * Опасные кнопки (например, удаление аккаунта) делают меньше и уводят дальше от основных путей кликов, чтобы избежать случайных нажатий.
* **Responsive (отзывчивая)**: Интерфейс плавно тянется и подстраивается под любой размер экрана. Разметка использует процентные соотношения (`%`, `vw/vh`) и гибкие сетки (Flexbox/Grid). * **Adaptive (адаптивная)**: Создается несколько фиксированных макетов под конкретные точки перелома (Breakpoints, например: 320px, 768px, 1200px). Браузер определяет ширину экрана и подгружает соответствующий статический макет.
Цвет не должен быть единственным источником информации (например, подсвечивать ошибку в форме только красной рамкой нельзя — нужно добавить текст ошибки или иконку, чтобы ее увидели люди с дальтонизмом). Согласно стандартам WCAG 2.1 AA, коэффициент контрастности текста относительно фона должен быть не менее **4.5:1** для обычного текста и не менее **3:1** для крупного текста.
* **CJM (Карта пути клиента)**: Верхнеуровневый стратегический документ. Описывает полный опыт взаимодействия пользователя с компанией на разных каналах, его мысли, боли и эмоции на каждом шаге. * **User Flow (Пользовательский сценарий)**: Техническая схема. Показывает последовательность экранов приложения и действий пользователя внутри интерфейса для решения конкретной задачи (например, сценарий сброса пароля).
Карточная сортировка используется для проектирования меню и структуры сайта: 1. Респондентам раздают карточки с названиями разделов/товаров. 2. **Открытая сортировка**: Пользователи группируют карточки и сами придумывают названия группам. Помогает понять ментальную модель пользователей. 3. **Закрытая сортировка**: Пользователи раскладывают карточки по заранее созданным категориям. Проверяет жизнеспособность текущей структуры.
Микроанимации (micro-interactions) — мелкие анимационные эффекты в ответ на действия пользователя (например, легкое изменение цвета кнопки при наведении, пульсация иконки колокольчика при новом уведомлении, анимация галочки при успешной отправке формы). Они дают мгновенную обратную связь системы (feedback), делают интерфейс «живым» и повышают вовлеченность.
* Не использовать чистый черный цвет (`#000000`) для фона (он вызывает сильный контраст и утомляет глаза при чтении). Рекомендуется темно-серый цвет. * Использовать более приглушенные, пастельные тона для цветных акцентов (яркие цвета на темном фоне вызывают визуальный шум и эффект свечения — halo effect). * Обеспечивать достаточный контраст текста (минимум 4.5:1 по WCAG).
Визуальная иерархия направляет взгляд пользователя в правильном порядке. Инструменты: * **Размер**: Крупные заголовки читаются в первую очередь. * **Цвет и контраст**: Яркая кнопка призывает к действию, серый текст уходит на второй план. * **Отступы (White space)**: Свободное пространство вокруг элемента привлекает к нему внимание. * **Расположение**: Важная информация размещается вверху страницы (по паттернам F- и Z-чтения).
Закон Якоба (Jakob's Law) гласит: пользователи проводят большую часть времени на других сайтах. Это значит, что они ожидают, что ваш сайт будет работать точно так же, как и все остальные знакомые им ресурсы. * **Вывод**: Не нужно изобретать колесо в базовых паттернах (например, корзина должна быть в правом верхнем углу, поиск — в шапке, меню — слева). Использование привычных паттернов снижает когнитивную нагрузку.
* **Low-fidelity (низкая точность)**: Наброски от руки на бумаге или простые серые блоки (wireframes) в Figma. Используются на ранних этапах для быстрого согласования концепции, структуры и логики переходов без отвлечения на цвета и шрифты. * **High-fidelity (высокая точность)**: Интерактивный интерактивный прототип, максимально приближенный к реальному приложению по дизайну, контенту и анимации. Используется для тестирования на пользователях перед разработкой.
* **Conversion Rate (коэффициент конверсии)**: Доля пользователей, совершивших целевое действие (клик по кнопке, покупка). * **Task Success Rate**: Процент пользователей, успешно завершивших сценарий. * **Time on Task**: Время, затраченное на выполнение задачи. * **Error Rate**: Количество ошибок, совершенных пользователем в интерфейсе при выполнении сценария.
* Логично выстраивать структуру заголовков (h1, h2, h3) — скринридеры используют их для навигации. * Добавлять понятные описания `alt` ко всем информативным изображениям (декоративным картинкам ставить пустой `alt=""`). * Использовать семантические теги HTML (button вместо div с кликом). * Добавлять ссылки «Skip to content» для быстрого перехода к основному контенту в обход шапки.
Закон близости утверждает, что объекты, расположенные рядом друг с другом, воспринимаются как группа, имеющая общие свойства. В дизайне интерфейсов это означает, что отступы между связанными элементами (например, заголовком и текстом карточки) должны быть меньше, чем отступы между несвязанными блоками на странице.
Закон Хика гласит: время принятия решения увеличивается с ростом количества вариантов выбора. * **Применение**: Длинные формы регистрации/оформления заказа нужно делить на несколько последовательных шагов (Multi-step wizard) вместо отображения всех полей на одном экране. Также следует минимизировать число обязательных полей и использовать автозаполнение везде, где это возможно.
Коридорное тестирование — быстрый метод проверки юзабилити. Дизайнер выходит «в коридор», показывает прототип случайным людям (например, коллегам из другого отдела), не знакомым с задачей, и просит выполнить простое действие. Позволяет за 15 минут бесплатно обнаружить грубые логические ошибки и непонятные элементы в интерфейсе.
Дизайн-мышление — человекоориентированный подход к решению задач, состоящий из 5 этапов: 1. **Эмпатия**: Изучение потребностей и болей пользователей через интервью и наблюдения. 2. **Фокусировка (Define)**: Определение главной проблемы пользователя. 3. **Генерация идей (Ideate)**: Поиск нестандартных путей решения проблемы. 4. **Прототип**: Создание простых макетов для тестирования решений. 5. **Тест**: Проверка прототипов на пользователях, сбор обратной связи.
Для бесшовного процесса handoff дизайнер должен: * Использовать общие компоненты из дизайн-системы, не плодить уникальные стили. * Подготовить адаптивные макеты под разные размеры экранов (Desktop, Tablet, Mobile) с демонстрацией автолейаутов (Auto Layout). * Показать все интерактивные состояния элементов (default, hover, active, focus, disabled). * Описать логику сложных анимаций и переходов. * Провести встречу с разработчиками для обсуждения технических ограничений перед стартом спринта.