admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fa4a3d91aab5de9cd5cc931ad1676f63ecd85259
site-portfolio/texts/cases/task-tracker.md
T

18 KiB
Raw Blame History

Таск-трекер для внутренней бек-офис системы

  • Источник: 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
    Превью: 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)

Drag&Drop

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

Board view — видео: assets/task-tracker/drag-drop-item_board-view.webm
Figma: Drag&Drop, Board

List view — видео: assets/task-tracker/drag-drop-item_list-view.webm
Figma: Drag&Drop, List

Продвинутый интерактивный прототип в ProtoPie

Схематичное представление того как работает Drag&Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки.

(Видео: assets/task-tracker/drag-drop-action_example.webm)

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

Стиль

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

Светлая цветная тема

Светлая цветная тема

Нейтральная тёмная тема

Нейтральная тёмная тема

Исследования

На этапе прототипов 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, Fitter, Protofly, Shadow Maker, Dark Side и др.), файл Community (+40 Types of Cursor). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет).

Блоки «Контакты» и футер на странице кейса совпадают с главной — см. texts/main.md.

Reference in new issue View Git Blame Copy Permalink