Тестовое задание · back-office

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

Задание

Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий.

Нужно реализовать:

• Общий экран:
  • где пользователь может посмотреть все открытые общие задачи и взять какие-то себе.
  • персональный ToDo лист, где отображаются как взятые вручную задачи, так и автоматически назначенные.
  • у взятой задачи есть возможность передать ее другому сотруднику или вернуть в общий список.
• Экран, где можно посмотреть, что у кого в работе.

Введение

Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания.

Референсы

• Таск-трекеры (Trello, Monday, YouTrack и др.)
• Сервисы для визуальной работы с базами данных (Notion, Airtable и др.)

Решение

Скринкаст

Вкладки (Tabs)

На вкладке All tasks сотрудник может ознакомиться со всеми доступными задачами.

На вкладке My tasks отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт).

На вкладке Task by assign отображены все задачи c разбивкой по исполнителю.

В правой части имеются опции для текущей вкладки.

Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы Tasks. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно.

• Group - позволяет создать дополнительную группировку по свойству таски (категория, приоритет, исполнитель, статус, дата создания, дата изменения).
• View - позволяет изменить отображение текущих задач на другой вид: доска, список, таблица.
• Filter - позволяет скрывать задачи по свойствам.
• Sort - позволяет определять порядок отображения задач по свойствам. Если включена сортировка по статусу High, Medium, Low то можно выбрать либо по алфавиту, либо в обратном порядке, а также можно создать свой порядок. С датами и цифрами работает принцип по возрастанию/убыванию.
• Search on page - позволяет отобразить только те задачи, в названии или описании которых есть поисковое слово или фраза. (Можно улучшить функционал поиска, добавив поисковые операторы, если исследования докажут эту необходимость)

На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам.

Варианты отображения (Views)

Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы Tasks и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы.

Вид Board позволяет удобнее работать с функцией Drag&Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б.

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

Вид Table позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования.

Drag&Drop

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

Board view

List view

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

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

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

Стиль

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

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

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

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

На этапе прототипов 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 с возможностью разбиения
  • по вкладкам
    • All tasks all_tasks_tab
    • My tasks my_tasks_tab
    • Tasks by assign tasks_by_assign
  • по ролям
    • Admin admin
    • Manager manager
    • User user
  • по типам
    • Group group
    • Filter filter
    • Sort sort
• Кол-во включенных видов View Used view_used с возможностью разбиения
  • по вкладкам
    • All tasks all_tasks_tab
    • My tasks my_tasks_tab
    • Tasks by assign tasks_by_assign
  • по ролям
    • Admin admin
    • Manager manager
    • User user

Далее в течение полугода (может и раньше, в зависимости от активности пользователей) можно будет увидеть результат и провести исследование (в виде интервью) по функциям, которые используются реже всего и тем на которые есть жалобы, чтобы получить качественные данные и составить полную картину происходящего.

Дополнительные детали

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