UX/UI очень краткий конспект

1. БАЗА: UX vs UI

UX (User Experience)

UI (User Interface)

Логика, структура, сценарий

Визуальное оформление

Как работает

Как выглядит

Решает проблему

Помогает пользоваться решением

2. ТЕОРИЯ: Норман и Нильсен

Дон Норман:

  • Affordance — что объект позволяет сделать (кнопка → нажать)

  • Signifier — подсказка (тень кнопки → «нажми»)

  • Mental model — представление пользователя о работе системы

  • Цикл действий: цель → намерение → действие → восприятие → интерпретация → оценка

Якоб Нильсен:

  • 10 эвристик юзабилити: видимость статуса, соответствие реальному миру, контроль и свобода, последовательность, предотвращение ошибок, узнаваемость, гибкость, минимализм, помощь при ошибках, документация

  • 5 характеристик: Learnability, Efficiency, Memorability, Errors, Satisfaction

  • UX = Usability + Emotion + Meaning + Context

Когнитивная нагрузка: человек удерживает 4–7 элементов одновременно → минимизируйте выбор, структурируйте информацию.

3. ИССЛЕДОВАНИЯ

Методы

Метод

Что даёт

Интервью

Мотивацию, опыт (но не реальное поведение)

Usability testing

Куда нажимает, где ошибается, сколько времени

Количественный опрос

Проверка гипотез на большой аудитории

A/B тест

Сравнение двух вариантов (один элемент, одна гипотеза)

Сценарий, задача, вопрос

Понятие

Определение

Пример

Сценарий

Жизненная ситуация

«Вы хотите заказать ужин для семьи»

Задача

Действие внутри сценария

«Найдите блюдо и дойдите до оплаты»

Формула хорошего сценария: контекст + цель + ограничение + действие.

Что измерять

  • Время выполнения задачи

  • Количество кликов

  • Ошибки

  • Успешность (да/нет/частично)

4. ИНСТРУМЕНТЫ

User Persona 2.0 — поведенческий портрет: триггеры, порог отказа, уровень доверия, способ решения проблем.

CJM (Customer Journey Map) — путь пользователя с этапами, действиями, эмоциями, болями, инсайтами.

CJM ≠ User Flow:

  • CJM → путь во времени, эмоции, оффлайн

  • User Flow → логика экранов, переходы

5. USER STORIES и UI KIT

User Story

«Как [пользователь], я хочу [действие], чтобы [результат].»

INVEST: Independent, Negotiable, Valuable, Estimable, Small, Testable.

UI Kit

Библиотека компонентов: кнопки (normal/hover/active/disabled), поля ввода, типографика, иконки, цвета, модальные окна.

WCAG (доступность):

  • Контраст текста ≥ 4.5:1

  • Принципы POUR: Perceivable, Operable, Understandable, Robust

Типы гипотез

  • Поведенческие — изменение действий

  • О восприятии — изменение визуального восприятия

  • О вовлечённости — изменение взаимодействия

Точка отказа (drop-off)

Место, где пользователи бросают задачу. Анализируется через Hotjar, Яндекс Метрику.

Триангуляция

Подтверждение гипотезы несколькими методами (количественным + качественным).

6. ФОРМУЛЫ (запомнить)

Что

Формула

User Story

Как [тип], я хочу [действие], чтобы [результат]

Гипотеза

Если [действие], то [результат], потому что [основание]

Хороший сценарий

Контекст + Цель + Ограничение + Реалистичное действие

WCAG контраст

≥ 4.5:1 для обычного текста

7. ПРИНЦИПЫ (золотые)

  1. Мы не пользователи — у нас есть когнитивные искажения.

  2. Исследуем поведение, а не мнение.

  3. Измеряем время, клики, ошибки, успешность.

  4. Ошибка пользователя = ошибка интерфейса.

  5. Один тест = случайность, два+ = тенденция.

  6. Триангуляция — качество + количество.

  7. Минимум 10 респондентов для достоверности.

  8. BEFORE/AFTER — основа доказательства эффективности.