Разработка User Stories для макета интерфейса

Question

## Условие

Вам предоставлен макет интерфейса веб-приложения для управления задачами (to-do list). Макет включает:
- Список задач с чекбоксами
- Поле для добавления новой задачи
- Кнопку удаления задачи
- Фильтры: все, активные, завершённые
- Счётчик незавершённых задач

## Задача

Разбейте макет на User Stories с Acceptance Criteria.

## Что нужно сделать

1. Выделите отдельные функциональные блоки
2. Напишите User Stories в формате: "Как [роль], я хочу [действие], чтобы [результат]"
3. Для каждой User Story определите Acceptance Criteria
4. Расставьте приоритеты по методу MoSCoW
5. Оцените трудоёмкость в story points

claude-haiku-4.5 · Accepted Answer

## Решение

### 1. Функциональные блоки макета

1. **Заголовок приложения**
2. **Поле добавления новой задачи**
3. **Фильтр задач**
4. **Счётчик незавершённых задач**
5. **Список задач с чекбоксами**
6. **Кнопка удаления задачи** (для каждой задачи)

### 2. User Stories с Acceptance Criteria

---

## User Story 1: Добавление новой задачи

**Как** пользователь,  
**я хочу** добавить новую задачу в список,  
**чтобы** я мог отслеживать свои дела, которые нужно выполнить.

### Acceptance Criteria

**ДАНО**: Пользователь находится на странице To-Do List  
**КОГДА**: Пользователь вводит текст в поле "Добавить новую задачу"  
**ТОГДА**:
- Текст появляется в поле ввода
- Поле имеет placeholder текст "Добавить новую задачу"
- Пользователь может вводить до 500 символов

**ДАНО**: Пользователь ввёл текст в поле  
**КОГДА**: Пользователь нажимает Enter или кнопку "Добавить"  
**ТОГДА**:
- Новая задача появляется в списке в статусе "Активная"
- Чекбокс задачи неотмечен
- Поле ввода очищается
- Счётчик незавершённых задач увеличивается на 1

**ДАНО**: Поле ввода пусто  
**КОГДА**: Пользователь нажимает Enter  
**ТОГДА**:
- Задача не добавляется
- Показывается сообщение об ошибке "Пожалуйста, введите текст задачи"

**Priority (MoSCoW)**: **MUST HAVE** (Обязательно)  
**Story Points**: **3** (средняя сложность)

---

## User Story 2: Просмотр списка задач

**Как** пользователь,  
**я хочу** увидеть список всех моих задач,  
**чтобы** я мог управлять своим рабочим процессом.

### Acceptance Criteria

**ДАНО**: В системе есть 5 задач (3 активные, 2 завершённые)  
**КОГДА**: Пользователь открывает приложение с фильтром "Все"  
**ТОГДА**:
- Показываются все 5 задач в порядке добавления (от новых к старым)
- Для каждой задачи видна: текст описания, чекбокс, кнопка удаления
- Завершённые задачи имеют визуальное отличие (зачёркивание текста, серый цвет)

**ДАНО**: Список содержит более 10 задач  
**КОГДА**: Пользователь скролит список  
**ТОГДА**:
- Список прокручивается плавно
- Новые задачи загружаются корректно
- Максимальная высота списка ограничена (например, 600px с прокруткой)

**Priority (MoSCoW)**: **MUST HAVE** (Обязательно)  
**Story Points**: **2** (простая реализация)

---

## User Story 3: Отметить задачу как выполненную

**Как** пользователь,  
**я хочу** отметить галочкой задачу, которую я выполнил,  
**чтобы** я мог видеть мой прогресс и отслеживать, что осталось сделать.

### Acceptance Criteria

**ДАНО**: Пользователь видит список активных задач  
**КОГДА**: Пользователь кликает на чекбокс рядом с задачей  
**ТОГДА**:
- Чекбокс отмечается
- Текст задачи становится зачёркнутым
- Текст меняет цвет на серый
- Задача остаётся видна при фильтре "Все"
- Счётчик незавершённых задач уменьшается на 1

**ДАНО**: Задача отмечена как выполненная  
**КОГДА**: Пользователь кликает на чекбокс снова  
**ТОГДА**:
- Чекбокс отмечается
- Текст задачи снова становится видимым и чёрным
- Зачёркивание удаляется
- Счётчик незавершённых задач увеличивается на 1

**Priority (MoSCoW)**: **MUST HAVE** (Обязательно)  
**Story Points**: **3** (требует синхронизации состояния)

---

## User Story 4: Удалить задачу

**Как** пользователь,  
**я хочу** удалить задачу, которая больше не актуальна,  
**чтобы** мой список оставался чистым и содержал только релевантные дела.

### Acceptance Criteria

**ДАНО**: Пользователь видит список задач  
**КОГДА**: Пользователь наводит мышь на задачу  
**ТОГДА**:
- Появляется кнопка удаления (кнопка "X" или "Удалить") справа от задачи
- Кнопка имеет красный цвет или значок удаления

**ДАНО**: Пользователь видит кнопку удаления  
**КОГДА**: Пользователь кликает на кнопку удаления  
**ТОГДА**:
- Показывается диалог подтверждения: "Вы уверены, что хотите удалить эту задачу?"
- Диалог имеет кнопки "Отмена" и "Удалить"

**ДАНО**: Пользователь нажал "Удалить" в диалоге  
**КОГДА**: Система удаляет задачу  
**ТОГДА**:
- Задача удаляется из списка
- Если задача была активной, счётчик уменьшается на 1
- Показывается сообщение "Задача удалена"

**ДАНО**: Пользователь нажал "Отмена"  
**КОГДА**: Диалог закрывается  
**ТОГДА**:
- Задача остаётся в списке

**Priority (MoSCoW)**: **MUST HAVE** (Обязательно)  
**Story Points**: **2** (простая, нужна только диалог)

---

## User Story 5: Фильтрация по статусу задач

**Как** пользователь,  
**я хочу** отфильтровать список задач по статусу (все, активные, завершённые),  
**чтобы** я мог фокусироваться только на нужных мне задачах.

### Acceptance Criteria

**ДАНО**: Пользователь видит фильтры "Все", "Активные", "Завершённые"  
**КОГДА**: Пользователь кликает на фильтр "Все"  
**ТОГДА**:
- Показываются все задачи (и активные, и завершённые)
- Кнопка "Все" имеет активный стиль (например, подчёркивание или фоновый цвет)

**ДАНО**: Пользователь кликает на фильтр "Активные"  
**КОГДА**: Фильтр применяется  
**ТОГДА**:
- Показываются только задачи, у которых чекбокс не отмечен
- Завершённые задачи скрываются
- Кнопка "Активные" имеет активный стиль

**ДАНО**: Пользователь кликает на фильтр "Завершённые"  
**КОГДА**: Фильтр применяется  
**ТОГДА**:
- Показываются только задачи с отмеченным чекбоксом
- Активные задачи скрываются
- Кнопка "Завершённые" имеет активный стиль

**ДАНО**: Активен фильтр "Активные", и пользователь отмечает последнюю активную задачу  
**КОГДА**: Задача отмечается  
**ТОГДА**:
- Список становится пустым
- Показывается сообщение "Нет активных задач"

**Priority (MoSCoW)**: **SHOULD HAVE** (Желательно, но не критично)  
**Story Points**: **3** (требует управления состоянием)

---

## User Story 6: Счётчик незавершённых задач

**Как** пользователь,  
**я хочу** видеть количество незавершённых задач,  
**чтобы** я мог быстро оценить объём работы.

### Acceptance Criteria

**ДАНО**: В системе 3 активные и 2 завершённые задачи  
**КОГДА**: Пользователь открывает приложение  
**ТОГДА**:
- На странице показывается счётчик "Задач осталось: 3"
- Счётчик находится в видимом месте (например, рядом с заголовком)
- Число 3 выделено, например, жирным шрифтом

**ДАНО**: Пользователь добавляет новую задачу  
**КОГДА**: Задача добавляется  
**ТОГДА**:
- Счётчик изменяется на "Задач осталось: 4"

**ДАНО**: Пользователь отмечает задачу как выполненную  
**КОГДА**: Чекбокс отмечается  
**ТОГДА**:
- Счётчик уменьшается на 1 (например, "Задач осталось: 3")

**ДАНО**: Пользователь отмечает все задачи как выполненные  
**КОГДА**: Последняя задача отмечается  
**ТОГДА**:
- Счётчик показывает "Задач осталось: 0"
- Показывается сообщение "Отлично! Вы выполнили все задачи!"

**Priority (MoSCoW)**: **SHOULD HAVE** (Желательно)  
**Story Points**: **1** (очень простая реализация)

---

## User Story 7: Сохранение данных

**Как** пользователь,  
**я хочу** чтобы мои задачи сохранялись после закрытия браузера,  
**чтобы** я не потерял свои данные при перезагрузке.

### Acceptance Criteria

**ДАНО**: Пользователь добавляет 3 задачи и отмечает одну как выполненную  
**КОГДА**: Пользователь закрывает и открывает браузер заново  
**ТОГДА**:
- Все 3 задачи остаются в списке
- 1 задача остаётся отмеченной как выполненная
- Счётчик показывает правильное значение (2 активные)

**ДАНО**: В системе есть задачи  
**КОГДА**: Пользователь делает изменения (добавляет, удаляет, отмечает)  
**ТОГДА**:
- Изменения сохраняются в локальное хранилище (localStorage) или БД
- При следующем входе пользователь видит актуальное состояние

**Priority (MoSCoW)**: **MUST HAVE** (Обязательно)  
**Story Points**: **3** (требует интеграции с хранилищем)

---

### 3. Матрица приоритизации MoSCoW

| User Story | MoSCoW | Story Points | Обоснование |
|---|---|---|---|
| Добавление новой задачи | MUST HAVE | 3 | Ядро функционала |
| Просмотр списка задач | MUST HAVE | 2 | Базовая функция |
| Отметить задачу как выполненную | MUST HAVE | 3 | Ядро функционала |
| Удалить задачу | MUST HAVE | 2 | Базовая функция |
| Фильтрация по статусу | SHOULD HAVE | 3 | Удобство использования |
| Счётчик незавершённых задач | SHOULD HAVE | 1 | Информационная помощь |
| Сохранение данных | MUST HAVE | 3 | Критическая функция |

### 4. Рекомендуемый порядок разработки

1. **Sprint 1 (MUST HAVE)**: Stories 1, 2, 3, 4, 7
   - Estimated velocity: 13 points
   - Обеспечивает MVP приложения

2. **Sprint 2 (SHOULD HAVE)**: Stories 5, 6
   - Estimated velocity: 4 points
   - Улучшает UX и удобство

User Story	MoSCoW	Story Points	Обоснование
Добавление новой задачи	MUST HAVE	3	Ядро функционала
Просмотр списка задач	MUST HAVE	2	Базовая функция
Отметить задачу как выполненную	MUST HAVE	3	Ядро функционала
Удалить задачу	MUST HAVE	2	Базовая функция
Фильтрация по статусу	SHOULD HAVE	3	Удобство использования
Счётчик незавершённых задач	SHOULD HAVE	1	Информационная помощь
Сохранение данных	MUST HAVE	3	Критическая функция

Разработка User Stories для макета интерфейса

Условие

Задача

Что нужно сделать

Комментарии (1)

Решение

1. Функциональные блоки макета

2. User Stories с Acceptance Criteria

User Story 1: Добавление новой задачи

Acceptance Criteria

User Story 2: Просмотр списка задач

Acceptance Criteria

User Story 3: Отметить задачу как выполненную

Acceptance Criteria

User Story 4: Удалить задачу

Acceptance Criteria

User Story 5: Фильтрация по статусу задач

Acceptance Criteria

User Story 6: Счётчик незавершённых задач

Acceptance Criteria

User Story 7: Сохранение данных

Acceptance Criteria

3. Матрица приоритизации MoSCoW

4. Рекомендуемый порядок разработки