UX/UI конспект

1. Введение в UX/UI

  • UX (User Experience) — совокупность впечатлений пользователя. Отвечает на вопросы: удобно? понятно? быстро? решает ли задачу?

  • UI (User Interface) — визуальная и интерактивная оболочка (цвета, кнопки, сетка, анимация). Отвечает на вопрос: как пользователь взаимодействует?

  • UX ≠ UI:

    • UX — логика, структура, сценарий; UI — визуальное оформление.

    • UX решает проблему, UI помогает пользоваться решением.

2. Теоретические основы UX

Дон Норман

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

  • Signifier — подсказка о том, как использовать объект (тень у кнопки → «нажми»).

  • Mental Model — представление пользователя о работе системы. Если не совпадает с реальностью → фрустрация.

  • Цикл действий: цель → намерение → действие → восприятие → интерпретация → оценка. Разрыв между этапами = UX-проблема.

Якоб Нильсен

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

  • 5 характеристик юзабилити: Learnability, Efficiency, Memorability, Errors, Satisfaction.

  • UX = Usability + Emotion + Meaning + Context

Когнитивная нагрузка

  • Человек удерживает в памяти 4–7 элементов одновременно.

  • Следствия: минимизация выбора, структурирование информации, визуальная иерархия.

3. Роль UX/UI-дизайнера

  • Действует между бизнесом, разработкой и пользователем.

  • Роли: аналитик, исследователь, архитектор, фасилитатор.

  • Переводит потребности пользователя в решения, снижает риски разработки, влияет на продуктовые метрики.

4. UX-исследования: методы и подходы

Что такое UX-исследование?

Изучение поведения пользователя. Отвечает на три вопроса:

  1. Что пользователь хочет сделать? (цель)

  2. Что он реально делает? (путь)

  3. Где интерфейс мешает? (ошибки, задержки)

Важно измерять: время выполнения, количество кликов, ошибки, успешность.

Методы исследований

Метод

Что даёт

Ограничения

Интервью

Ожидания, мотивацию, опыт

Не показывает реальное поведение

Usability testing

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

—

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

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

Не даёт глубины

A/B тестирование

Сравнение двух вариантов интерфейса

Требует чёткой гипотезы

Фокус-группы

Реакции, язык пользователей, генерация идей

Доминирование лидера, соц. давление

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

Понятие

Определение

Пример

Сценарий

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

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

Задача

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

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

Вопрос

Что спрашиваем после

«Что заняло больше всего времени?»

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

5. Инструменты UX-аналитики

User Persona 2.0

Обобщённый портрет целевого пользователя, основанный на поведении, а не демографии.

Что важно:

  • Триггеры (что заставляет начать)

  • Порог отказа (при каком событии перестаёт пользоваться)

  • Уровень доверия к цифровым сервисам

  • Любимый способ решать проблему

Customer Journey Map (CJM)

Визуализация пути пользователя от первого контакта до цели.

Обязательные уровни:

  1. Этап (Stage)

  2. Цель пользователя

  3. Действия

  4. Touchpoints

  5. Эмоции

  6. Pain Points

  7. Insights

  8. Возможности улучшения

CJM ≠ User Flow:

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

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

6. User Stories и UI Kit

User Story

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

Критерии качества (INVEST):

  • Independent (независимая)

  • Negotiable (договорная)

  • Valuable (ценная)

  • Estimable (оцениваемая)

  • Small (небольшая)

  • Testable (тестируемая)

Когда НЕ использовать:

  • Технические задачи → Technical Task

  • Баги → Bug Fix

  • Эпики → разбить на несколько User Stories

  • Инфраструктура → Infrastructure Task

UI Kit

Библиотека компонентов в едином стиле (кнопки, поля ввода, типографика, иконки, цвета).

Процесс создания:

  1. Анализ и исследование

  2. Разработка базовых компонентов (атомы)

  3. Создание сложных компонентов (молекулы → организмы)

  4. Документирование

  5. Тестирование по WCAG

WCAG (Web Content Accessibility Guidelines)

Принципы POUR:

  • Perceivable (воспринимаемость)

  • Operable (операбельность)

  • Understandable (понятность)

  • Robust (надёжность)

Минимальная контрастность: 4.5:1 для обычного текста.

7. Боевые интервью (Guerrilla Interviews)

Короткие, неформальные интервью для выявления проблем в интерфейсе.

Как проводить:

  1. Выбор респондентов (минимум 5)

  2. Определение целей

  3. Подготовка сценария с открытыми вопросами

  4. Проведение интервью (наблюдение + уточняющие вопросы)

  5. Сбор обратной связи

  6. Анализ данных

8. Логика UX-тестирования и анализа результатов

Уровни анализа

Уровень

Что изучает

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

Время, успешность, ошибки, конверсия

Качественный

Комментарии, эмоции, причины поведения

Типы гипотез

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

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

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

Точка отказа (Drop-off Point)

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

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

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