172 lines
18 KiB
Markdown
172 lines
18 KiB
Markdown
# Таск-трекер для внутренней бек-офис системы
|
||
|
||
- **Источник:** `public/cases/task-tracker.html`
|
||
- **eyebrow:** Тестовое задание · back-office
|
||
- **meta description:** Интерфейс задач для операционного отдела: вкладки, фильтры, виды отображения, прототипы Figma и сценарии исследований.
|
||
|
||
---
|
||
|
||
**Заметка по путям к медиа:** ниже пути от корня сгенерированного сайта (как в `public/`), папка `assets/task-tracker/` (картинки и видео вперемешку).
|
||
|
||
## Задание
|
||
|
||
Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий.
|
||
|
||
Нужно реализовать:
|
||
|
||
- **Общий экран:**
|
||
- где пользователь может посмотреть все открытые общие задачи и взять какие-то себе.
|
||
- персональный ToDo лист, где отображаются как взятые вручную задачи, так и автоматически назначенные.
|
||
- у взятой задачи есть возможность передать ее другому сотруднику или вернуть в общий список.
|
||
- **Экран**, где можно посмотреть, что у кого в работе.
|
||
|
||
## Введение
|
||
|
||
Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания.
|
||
|
||
## Референсы
|
||
|
||
Референсы
|
||
|
||
- Таск-трекеры (Trello, Monday, YouTrack и др.)
|
||
- Сервисы для визуальной работы с базами данных (Notion, Airtable и др.)
|
||
|
||
## Решение
|
||
|
||
### Скринкаст
|
||
|
||
(Видео: `assets/task-tracker/full_preview.webm`)
|
||
|
||
- **Прототип Figma (интерактив):** [STENN (Factoring) — proto](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Factoring)?page-id=0%3A1&node-id=20%3A1291&viewport=-5744%2C876%2C1.35&scaling=contain&starting-point-node-id=20%3A1291)
|
||
Превью: `assets/task-tracker/tab_all-tasks.webp`
|
||
Подпись: Интерактивный сценарий по задачам и представлениям
|
||
|
||
> **Примечание:** Предполагается, что сотрудник не может создавать задачи, но может их просматривать и частично редактировать, поэтому администратор или менеджер настраивает, какие задачи будут доступны сотруднику.
|
||
|
||
### Вкладки (Tabs)
|
||
|
||
На вкладке **All tasks** сотрудник может ознакомиться со всеми доступными задачами.
|
||
|
||
All tasks
|
||
|
||
На вкладке **My tasks** отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт).
|
||
|
||
My tasks
|
||
|
||
На вкладке **Task by assign** отображены все задачи c разбивкой по исполнителю.
|
||
|
||
Tasks by assign
|
||
|
||
В правой части имеются опции для текущей вкладки.
|
||
|
||
Опции страницы
|
||
|
||
Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы **Tasks**. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно.
|
||
|
||
- **Group** — позволяет создать дополнительную группировку по свойству таски (категория, приоритет, исполнитель, статус, дата создания, дата изменения).
|
||
- **View** — позволяет изменить отображение текущих задач на другой вид: доска, список, таблица.
|
||
- **Filter** — позволяет скрывать задачи по свойствам.
|
||
- **Sort** — позволяет определять порядок отображения задач по свойствам. Если включена сортировка по статусу High, Medium, Low то можно выбрать либо по алфавиту, либо в обратном порядке, а также можно создать свой порядок. С датами и цифрами работает принцип по возрастанию/убыванию.
|
||
- **Search on page** — позволяет отобразить только те задачи, в названии или описании которых есть поисковое слово или фраза. (Можно улучшить функционал поиска, добавив поисковые операторы, если исследования докажут эту необходимость)
|
||
|
||
На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам.
|
||
|
||
### Варианты отображения (Views)
|
||
|
||
Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы **Tasks** и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы.
|
||
|
||
Меню видов
|
||
|
||
> **Идея:** После смены вида также меняется иконка у опции **View**.
|
||
|
||
Вид **Board** позволяет удобнее работать с функцией Drag&Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б.
|
||
|
||
Board
|
||
|
||
Вид **List** позволяет увидеть больше информации на меньшей площади экрана. При этом этот вид визуально и функционально легче табличного вида, а значит меньше когнитивной нагрузки на пользователя. Также здесь все заголовки задач начинаются в крайнем левом положении, поэтому становится легко *пробежаться глазами* по списку.
|
||
|
||
List
|
||
|
||
Вид **Table** позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования.
|
||
|
||
Table
|
||
|
||
> **Идея:** Секции можно сворачивать, чтобы уместить на экране только нужный объём контента. (Может даже имеет смысл сохранять положение свёрнуто/развёрнуто после переключения вида, вкладки и перезагрузки страницы.)
|
||
|
||
(Видео: `assets/task-tracker/expand-collapse_group.webm`)
|
||
|
||
- **Прототип Figma (виды):** [STENN (Task-Tracker) — Board, List, Table](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?page-id=0%3A1&node-id=39%3A700&viewport=-1875%2C-125%2C0.55&scaling=min-zoom&starting-point-node-id=20%3A1291&hide-ui=1)
|
||
|
||
### Drag&Drop
|
||
|
||
Во всех видах можно перетаскивать элементы (карточки/элементы списка/строки и столбцы таблицы). Это способствует более продуктивной работе и выглядит естественным для пользователя. Например, если требуется раскидать задачи между сотрудниками (для админа или менеджера), поменять статус для нескольких задач разом или в короткий отрезок времени.
|
||
|
||
**Board view** — видео: `assets/task-tracker/drag-drop-item_board-view.webm`
|
||
[Figma: Drag&Drop, Board](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A1968&show-proto-sidebar=1)
|
||
|
||
**List view** — видео: `assets/task-tracker/drag-drop-item_list-view.webm`
|
||
[Figma: Drag&Drop, List](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN-Task-Tracker?node-id=108%3A970&viewport=2248%2C341%2C0.33&scaling=contain&starting-point-node-id=108%3A2607&show-proto-sidebar=1)
|
||
|
||
**Продвинутый интерактивный прототип в ProtoPie**
|
||
|
||
Схематичное представление того как работает Drag&Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки.
|
||
|
||
(Видео: `assets/task-tracker/drag-drop-action_example.webm`)
|
||
|
||
- [Прототип ProtoPie Cloud](https://cloud.protopie.io/p/e7a45bd3f2?touchHint=false&ui=false&scaleToFit=false&cursorType=arrow&mockup=false&bgColor=%23F5F5F5&playSpeed=1&playerAppPopup=true)
|
||
|
||
В прототипе можно перемещать только голубую карточку и не все положения работают корректно. Можно посмотреть запись, которая доступна на той же странице прототипа.
|
||
|
||
## Стиль
|
||
|
||
Визуальный стиль может быть любым, не меняя самого *каркаса.* Например, чуть более красочным и с более выразительными шрифтами.
|
||
|
||
**Светлая цветная тема**
|
||
|
||
Светлая цветная тема
|
||
|
||
- [Фрейм в Figma — светлая цветная тема](https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker)?node-id=174%3A5703)
|
||
|
||
**Нейтральная тёмная тема**
|
||
|
||
Нейтральная тёмная тема
|
||
|
||
- [Фрейм в Figma — нейтральная тёмная тема](https://www.figma.com/proto/aFvwvTZuksD0JTo6yFXyUz/STENN--Task-Tracker-?node-id=135-5400&t=BzGQOTE0ty7u2E50-1)
|
||
|
||
## Исследования
|
||
|
||
На этапе прототипов Figma можно провести интервью с несколькими сотрудниками, например 5 человек. Предварительно в прототип нужно добавить реальные задачи из текущей системы, порядка 20 должно хватить. Далее можно созвониться по видеосвязи с шэрингом экрана респондента или встретиться лично и задать несколько заданий и вопросов. Во время сессии респондент может тыкать в прототип, но если что-то не сработает интервьюер может зафиксировать попытку и объяснить, что этот функционал пока не работает, а также поинтересоваться что респондент ожидает увидеть дальше.
|
||
|
||
### Задания
|
||
|
||
1. Найти свои актуальные задачи со страницы **Tasks** вкладки **All tasks**
|
||
2. Назначить себе задачи, чтобы взять в работу
|
||
3. Найти задачу про что-то конкретное (интервьюер приводит пример), которую он уже выполнил ранее
|
||
4. Показать задачи, которые относятся только к определённой категории и должны быть сделаны до конца недели
|
||
5. Попросить поменять приоритет у нескольких задач одновременно
|
||
6. Оценить визуальную привлекательность интерфейса по шкале от 1 до 10
|
||
7. Оценить общее впечатление от предложенного концепта по шкале от 1 до 10
|
||
8. Предложить ещё функции, которые были бы полезны
|
||
|
||
### Аналитика
|
||
|
||
Для оценки актуальности реализованного функционала необходимо собирать следующие показатели.
|
||
|
||
- Кол-во просмотров страницы **Tasks** `page_views_tasks` с разбиением:
|
||
- по вкладкам: All tasks `all_tasks_tab`, My tasks `my_tasks_tab`, Tasks by assign `tasks_by_assign`
|
||
- по ролям: Admin `admin`, Manager `manager`, User `user`
|
||
- по попыткам поиска: Search Used `search used`
|
||
- Кол-во включённых пользовательских настроек **Custom Settings** `custom_settings` (по вкладкам, ролям, типам: Group `group`, Filter `filter`, Sort `sort`)
|
||
- Кол-во включенных видов **View Used** `view_used` (по вкладкам и ролям)
|
||
|
||
Далее в течение полугода (может и раньше, в зависимости от активности пользователей) можно будет увидеть результат и провести исследование (в виде интервью) по функциям, которые используются реже всего и тем на которые есть жалобы, чтобы получить качественные данные и составить полную картину происходящего.
|
||
|
||
## Дополнительные детали
|
||
|
||
При создании мокапов в Figma были использованы: возможности автолэаутов; интерактивные компоненты, плагины ([Iconify](https://www.figma.com/community/plugin/735098390272716381/Iconify), [Fitter](https://www.figma.com/community/plugin/917796239623005893/Fitter), [Protofly](https://www.figma.com/community/plugin/1021879782774011952), [Shadow Maker](https://www.figma.com/community/plugin/889676455045507628/Shadow-Maker), [Dark Side](https://www.figma.com/community/plugin/986289377230504703) и др.), файл Community ([+40 Types of Cursor](https://www.figma.com/community/file/831142089959745518)). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет).
|
||
|
||
- [Исходный файл в Figma — STENN (Task-Tracker)](https://www.figma.com/file/aFvwvTZuksD0JTo6yFXyUz/STENN-(Task-Tracker))
|
||
|
||
---
|
||
|
||
*Блоки «Контакты» и футер на странице кейса совпадают с главной — см. `texts/main.md`.* |