web-dev•Лекция•Design

Лекция №2: Исследование: от задачи до сценария (UX Research)

👀 Загрузка...

Курс: Веб-дизайн и проектирование интерфейсов
Аудитория: 2 курс, технические специальности
Связь с практикой: Подготовка к Лабораторной работе №2 (User Flow & Sitemap)
Ключевая метафора: Проектирование архитектуры БД и алгоритмов перед написанием кода.

1. Введение: Почему нельзя сразу рисовать макеты?

В разработке ПО вы не начинаете писать код без понимания архитектуры. В дизайне работает тот же принцип.

Эффект Франкенштейна

Попытка сразу нарисовать красивый интерфейс (UI) без проработанной структуры (UX) приводит к «эффекту Франкенштейна»:

Пользователь заходит в тупик.
Навигация противоречива.
Разработчик (вы же) потом не может это сверстать, так как логика переходов сломана.

Информационная архитектура (IA) — это скелет вашего проекта.

2. Сценарии пользователя (User Flow)

User Flow — это визуализация пути пользователя внутри продукта для достижения конкретной цели.

Аналогия с программированием: Блок-схема алгоритма (Flowchart).

Составные части User Flow:

Точка входа (Entry Point): Откуда пришел пользователь? (Реклама, поиск, прямая ссылка).
Шаги (Steps/Screens): Экраны или состояния интерфейса.
Действия (Actions): Что делает пользователь? (Клик, скролл, ввод данных).
Развилки (Decisions): Условия if / else. (Пример: Авторизован? Да → Личный кабинет. Нет → Форма входа).
Точка успеха (Success Criteria): Цель достигнута (Заказ оформлен).

Happy Path и Edge Cases

Счастливый путь

Идеальный сценарий, где пользователь не ошибается, интернет не падает, карта валидна.

Важно запомнить

Хороший UX-дизайн — это дизайн, который «держит удар» и помогает пользователю исправить ошибку, а не просто показывает красивые картинки идеального мира.

3. Информационная архитектура (Sitemap)

Если User Flow — это динамика (путь), то Sitemap — это статика (структура).

Аналогия с программированием: Дерево каталогов файловой системы или Структура Базы Данных.

Типы иерархии:

Меню → Подменю → Категория → Подкатегория → Товар.
Минус: Много кликов до цели.

Золотое правило «3-х кликов»

Это миф, но полезный. Старайтесь проектировать так, чтобы до любой важной информации можно было добраться за минимальное количество переходов. Для вашего учебного проекта оптимальная глубина вложенности: 2-3 уровня.

4. Методология «Content First»

Это критически важный принцип нашего курса. Content First означает, что дизайн строится вокруг реального контента, а не наоборот.

Почему Lorem Ipsum — это зло?

Использование текста-рыбы (Lorem ipsum dolor sit amet...) запрещено в ключевых блоках.

Проблема длины: В макете слово «Menu» (4 буквы) смотрится красиво. В реальности там будет «Информационная безопасность» (24 буквы). Ваш дизайн «поедет».
Проблема смысла: Дизайн должен подчеркивать смысл. Если смысла нет (рыба), дизайн становится декорацией.

Практический совет

На этапе проектирования (Лаб 2) вы должны написать реальные заголовки разделов и названия кнопок. Кнопка не может называться «Button». Она должна называться «Купить», «Зарегистрироваться» или «Узнать больше».

5. Инструментарий Figma для схем

Для построения User Flow и Sitemap в Figma есть два пути:

Это отдельный тип файлов в Figma (фиолетовая иконка). Работает как Miro.
Идеально для мозгового штурма.
Есть готовые стикеры, стрелки и штампы.
Рекомендуется для Лабораторной №2.

6. Глоссарий лекции

User Flow (Пользовательский путь): Визуальный сценарий действий пользователя для решения задачи.
Sitemap (Карта сайта): Иерархическая структура всех страниц проекта.
Information Architecture (IA): Наука об организации данных в интерфейсе для удобного поиска.
Happy Path: Сценарий использования без ошибок и отклонений.
Edge Case: Нестандартная ситуация или состояние ошибки.
Content First: Подход, при котором сначала готовится контент, а потом под него делается дизайн.
CTA (Call to Action): Призыв к действию (Кнопка «Купить», Ссылка «Подробнее»).

7. Домашнее задание (Подготовка к Лаб №2)

Взять своего персонажа из Лаб №1.
Придумать для него основной сценарий (например: «Покупка кроссовок с фильтрацией по размеру»).
На листе бумаги (или в FigJam) набросать черновик этого пути: какие экраны он пройдет? Где он может ошибиться?
Составить список всех страниц будущего сайта (Главная, Каталог, Карточка товара, Корзина, О нас, Контакты, 404).