Российские аналоги Jira: сравнительный анализ и UX сервисов. Часть 2

Недавно моя коллега Маша выпустила первую часть исследования по российским аналогам Jira. Напомню, что мы провели опрос IT-специалистов и выделили наиболее популярные инструменты для работы с проектами. Сегодня я продолжу рассматривать эти инструменты и уделю внимание функции постановки задачи и диаграмме Ганта. Укажу наиболее болезненные для пользователей UX-ошибки, а кого-то выделю с интересными решениями :)

Спойлер! При проведении анализа я рассматривала также доски управления проектами. Эта тема оказалась настолько интересной, что в итоге мы решили посвятить ей отдельное исследование и привлечь специалиста по гибким методологиям. Поэтому дальше — больше и интереснее.

Задача — ключевой элемент в системах для управления проектами и организации работы команды. Поэтому важно сделать создание задачи максимально удобным процессом.

В рамках исследования я продолжила рассматривать программы-аналоги Jira: Moo.team, Flowlu, Kaiten, Advanta, Yougile, Штаб, Яндекс.Трекер, Platrum, EvaTeam.

Первое, что хочется отметить — разные названия ролей в сервисах. Мы выявили 16 разных наименований для участников:

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

Moo.team использует отдельную страницу для создания задачи, помещая все элементы на одном окне.

При выборе дедлайна Moo.team предлагает быстрое заполнение даты: сегодня, завтра, через неделю и т. д. Отметим, что предложение не ограничивается текстом: пользователю подсказывают, какое число будет через неделю, снижая когнитивную нагрузку при работе с интерфейсом.

Использовать иконки в привычных значениях. Иконка с двумя листами бумаги чаще всего используется для копирования, но интерфейс Moo.team открывает выбор шаблона для задачи:

Иконка, изображающая облако (в комиксах в такие помещают реплику героя), используется для добавления комментария, но интерфейс Moo.team добавляет в текст изображение.

При добавлении графических элементов в интерфейс важно учитывать сценарии, в которых пользователи привыкли их использовать, поэтому:

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

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

Показывать метки по группам. Moo.team позволяет создавать большое количество меток для задач. Но чем больше меток, тем сложнее найти нужную. Некоторые сервисы для решения этой задачи используют поиск, кто-то показывает метки группами. Мы советуем присмотреться к данным решениям и повысить уровень юзабилити Moo.team. К тому же функционал группировки уже реализован в системе, только на другой странице.

У системы есть еще один минус, связанный с метками. В отличие от других сервисов в Moo.team нельзя создавать метки в контексте создания задачи. В данной системе пользователь открывает новое окно настройки меток, добавляет значение и возвращается к задаче. Для того чтобы новая метка стала доступна для выбора, необходимо обновить страницу создания задачи — и потерять данные, которые пользователь успел ввести.

Таким образом, простая для пользователя задача «добавление новой метки» оборачивается целым путешествием с неожиданным концом. Данный сценарий увеличивает время на ввод данных в систему и уменьшает время на выполнение приоритетных задач. Как итог — эффективность работы падает. Как говорил Якоб Нильсен, система должна предотвращать ошибки, особенно если их совершает не пользователь, а система.

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

Интерфейс добавления новой задачи у Flowlu — один из самых функциональных среди анализируемых аналогов. И это единственная система, которая сама может сгенерировать название задачи. Пока только в числовом формате, но, возможно, научится создавать информативные заголовки, как GoogleDoc ;)

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

Kaiten позволяет быстро ставить задачи. Пользователю не нужно открывать отдельное окно или страницу, чтобы создать задачу,— достаточно в нужном поле написать ее название. Все остальные настройки добавляются после и уже в отдельном окне.

Отслеживание приемки задачи. Хочется отметить функцию, которая есть только у данного сервиса: критерий приемки задачи. По сути, данная функция похожа на функционал чек-листа: создаются небольшие задачи, которые можно закрывать и следить за процессом выполнения большой. Но есть и отличия:

• можно назначить ответственного за приемку критерия;
• поставить срок принятия критерия.

Похожий функционал есть и у Яндекс.Трекера. Разница заключается в том, что у Яндекса отмечается не тот, кто принимает задачу, а тот, кто ее исполняет. Так, в одной задаче можно ставить мини-задачи, которые будут выполнять разные люди.

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

Выбор длительности выполнения задачи. Пользователи привыкли, что выбирать промежуток можно на одном календаре, указывая начало и конец. Kaiten реализовал выбор диапазона, используя 2 календаря, где в первом нужно поставить начало срока, а во втором — его окончание. Если пользователь интуитивно подойдет к задаче установить промежуток и не будет читать текст заголовков, то не сможет выполнить свою задачу. При проектировании сервиса важно помнить, что пользователи проводят большую часть своего времени на других сайтах, а значит, думают устоявшимися паттернами, которыми не нужно пренебрегать.

Такая же механика работы календаря встретилась в сервисе Yougile, но, в отличие от Kaiten, он визуально показывает протяженность периода.

Создавать задачи в Advanta можно несколькими способами, в зависимости от того, где находится пользователь:

1. использовать закрепленную кнопку «+», которая перемещается за пользователем по всем экранам. Разработчики предлагают использовать ее для создания часто используемых объектов;
2. добавлять задачи сразу в календарь;
3. использовать блок «Список дел» на рабочем столе;
4. создавать задачи в папке проекта.

Advanta является многофункциональной информационной системой управления проектами. Как правило, в таких системах работают разные люди — каждый по своему сценарию. Поэтому сделать возможность добавлять задачи не в одном месте, а в контексте работы с системой — это хорошее решение.

Упростить логику сохранения карточки задачи. Сервис Advanta делит окно создания задачи на два блока, и для каждого блока добавил кнопку «Сохранить». Если пользователь нажмет кнопку только в одном блоке и уйдет со страницы, то информация из второго блока потеряется. Такое поведение системы может создать много проблем пользователю. Исправить ситуацию можно, объединив два блока в один или более явно поделить блоки — например, сделать пошаговое заполнение задачи.

Использовать закон близости элементов. Функция постановки приоритета задаче стоит на одном уровне с хлебными крошками и может восприниматься как один объект по работе со страницей:

• хлебные крошки — сменить страницу;
• стрелка вверх — свернуть блок на странице.

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

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

В Advanta подсказки не всегда релевантны запросу. Так, информация возле поля «Техническое задание» подразумевает расшифровку названия и инструкцию для пользователя. В данном случае текст подсказывает прикрепить документ, но не объясняет какой и для чего он нужен. Хорошим решением будет переписать подсказку и пояснить пользователям, какую информацию необходимо добавлять в данное поле, а кнопку «Создать» заменить на «Добавить документ».

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

Помогать при заполнении полей. Yougile так же, как и сервис Flowlu, не подставляет дату сам, даже сегодняшнюю, а предлагает пользователю сделать это самостоятельно. Если пользователь открыл календарь, но дату так и не выбрал, то карточка показывает метку «Дедлайн», но без даты, — это может ввести в заблуждение исполнителя задачи.

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

Упростить пользовательский сценарий создания задачи. Чтобы создать задачу, пользователю нужно выполнить 2 действия:

1. во всплывающем окне ввести название;
2. совершить действие со следующим всплывающим окном — заполнить его или закрыть.

Мы советуем объединить 2 шага в один и не усложнять сценарий постановки задачи.

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

Platrum — одна из систем, которая понимает, как говорить с пользователем. Благодаря UX-копирайту высокофункциональная система не пестрит яркими кнопками. Каждый призыв к действию может выглядеть как простой текст, но, прочитав его, хочется кликнуть мышкой и совершить действие.

Использовать иконки в привычных значениях. В Platrum пользователь сталкивается с необычной работой иконки при наведении на нее курсора мышки. Ментальная модель работы иконки календаря — выбор даты. Но если пользователь не будет внимателен, то по клику на область календаря дата сбросится. А все потому, что при наведении на иконку календаря она меняется на крестик.

Постановка задачи в системе «Яндекс.Трекер» происходит в отдельном окне. При создании задачи пользователю предлагаются выбрать поля для формы и настроить ее под свои нужды.

Хорошее решение мы видим в возможности восстанавливать задачу. Эта функция позволяет не переживать за нестабильный интернет или отключение электричества — Яндекс сохранит уже введенные данные и предложит их использовать даже через длительное время отсутствия на сервисе.

Упростить навигацию по странице. Страница создания задачи при всех активных полях занимает больше 1 экрана, т. е. пользователю необходимо скроллить, чтобы ввести все данные. Причина в том, что каждое поле находится друг под другом. Данный способ не считается плохим, но и его можно улучшить. Повысить уровень юзабилити страницы можно путем группировки полей ввода данных по смыслу — блок «Команда», блок «Срок исполнения» и т. д. В результате пользователю будет легче ориентироваться среди полей, что позволит быстрее выполнять свою работу.

Как пишут разработчики на VC, «Запустились в 2020 году, делали для себя». Ребята разработали интерфейс, который закрывает их задачи, но понять, подойдет ли сервис другим командам, можно, только протестировав его.

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

Диаграмма Ганта — это способ визуализации графика работ. Инструмент позволяет визуально отслеживать сроки проекта и дедлайны отдельных задач.

Что можно увидеть на диаграмме:

• даты начала и окончания проекта;
• задачи, включенные в проект;
• время, которое занимает каждая задача;
• исполнителей, работающих над задачами;
• способы объединения задач, их связь между собой и очередность.

Среди российских аналогов Jira диаграмма Ганта есть в Flowlu, Kaiten, Штабе, Advanta, Yougile, Яндекс.Трекере и EvaTeam. Мы собрали в одну таблицу все фичи этих сервисов.

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

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

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

Яндекс.Трекер тоже не дает изменять порядок задач перетаскиванием, но может сортировать задачи.

Использовать иконки в привычных значениях. Flowlu дважды использует иконки в непривычных для пользователя значениях.

Существует правило близости, согласно которому объекты, находящиеся рядом, человек воспринимает как единое целое. В заголовке таблицы, где находится список задач, находятся 3 объекта: столбец «Задача», столбец «Ответственный», кнопка с иконкой «+». Так как эти объекты стоят рядом, мы предположили, что «+» работает со столбцами, а именно: создает еще один столбец. Но по клику на кнопку система предлагает пользователю создать новый этап работ.

Система предлагает изменить масштаб диаграммы при помощи кнопок с иконками:

Если мы погуглим, что значит сочетание клавиш «Ctrl + колесо мыши», то в большинстве случаев получим ответ «изменение размера». Т. е. пользователь ждет именно изменение размера, а система, в свою очередь, меняет масштаб представления даты (от часов до нескольких месяцев).

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

На данный момент диаграммы Ганта нет в Kaiten, но разработчики предлагают использовать Timeline. С ним можно работать на сервисе или выгрузить в Excel для передачи коллеге.

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

Уменьшить визуальный шум. Kaiten для добавления задачи на диаграмму использует кнопку «Добавить карточку». Данная кнопка дублируется после каждого блока со статусом, что увеличивает когнитивную нагрузку на пользователя и делает интерфейс нагруженным.

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

Самая функциональная реализация диаграммы Ганта представлена у сервиса Advanta.

Advanta при постановке сроков выполнения задачи не берет в расчет выходные дни и таким образом количество дней на задачу является точным.

Правда, такой способ не подойдет для проектов со свободным графиком работы. Для этих случаев в полноценной версии системы можно самостоятельно выбрать дни, которые будут помечаться как «выходные».

Сделать кнопку «Создание задачи» заметнее. В Advanta нет кнопки «Создать задачу». Но так кажется только на первый взгляд. Если навести курсор на текст «Добавить элемент с типом», который выглядит как подпись к выпадающему меню, то он превратится в кнопку. Выше мы говорили о силе UX-текста и том, что призыв к действию важен для кнопки. В данном случае это правило не работает, так как мы рассматриваем стандартный элемент интерфейса — селект (выпадающее меню), меняя взаимодействие с которым разработчики идут против привычных паттернов поведения.

Столь важные элементы интерфейса должны считываться пользователем сразу, как только он начинает пользоваться сервисом.

Yougile связывает задачи с помощью стрелочек. Такой способ визуально легко считывается пользователями

Дать возможность управлять зависимостями между задачами. Связать задачи можно прямо на диаграмме, а удалить зависимость — только в карточке задачи. Пользователь может не найти данный функционал и решить, что он попросту отсутствует.

Также стоит отметить, что функционал связей между задачами не доработан до конца. Связи в диаграмме Ганта используются для того, чтобы связать задачи друг с другом: при изменении срока выполнения одной задачи путем перетаскивания карточки по таймлайну должно изменяться положение и связанная карточка. Данная функция отсутствует у Yougile.

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

На диаграмме Яндекс.Трекер выделяет задачи, у которых не установлен срок выполнения. Яндекс называет их «неразобранные». Это помогает пользователю видеть, какие задачи не заполнены до конца, и не потерять ни одну из них.

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

Дать больше возможностей в использовании календаря. При работе с диаграммой пользователь может выбрать только 3 Timeline: месяц, квартал, год. При этом нельзя выбрать конкретный месяц или проскролить дальше, чем конец квартала. Это урезает возможности пользователя при работе с диаграммой.

Диаграмма Ганта в EvaTeat имеет минимальный набор функций: представление списка задач и манипулирование временем их исполнения.

Добавить даты во временную шкалу. EvaTeam позволяет планировать выполнение задач прямо на диаграмме Ганта, но есть одно неудобство — сервис не показывает конкретные даты, а только дни недели и дату, которая выпадает на понедельник. Если пользователь знает, в какие даты нужно выполнить задачу, то ему придется совершать лишние действия, подсчитывая дни, или переносить даты, используя дополнительный календарь.

Проанализированные системы зачастую представляют 2 варианта постановки задач:

• быстрый из рабочей области;
• открытие окна или новой страницы для подробного описания задачи.

Каждый способ хорош под свои задачи. Если вы часто ставите небольшие задачи своей команде, которые не требуют подробного описания — рекомендуем присмотреться к системе Kaiten. Если вам важно сразу максимально подробно описывать задачи, то тогда для вас хорошим вариантом будет Flowlu или Яндекс.Трекер.

* Рекомендация основана на комплексном анализе функции постановки задачи.

Добавление функции построения диаграммы Ганта накладывает на разработчиков свои обязательства — пользователь ждет выполнение функционала, который заявлен в сервисе.

Если для вас важно планировать работу команды, используя диаграмму по максимуму, советуем обратить внимание на Advanta, так как она наиболее точно предоставляет необходимый функционал. Также рекомендуем использовать TimeLine в Kaiten — он дает наиболее полное представление о задачах и помогает правильно распланировать ход проекта и загрузку команды. Остальные сервисы не предоставляют расширенные возможности диаграммы Ганта, и их работа больше похожа на roadmap.

Мы рассмотрели два инструмента из списка наиболее популярных инструментов Jira у IT-специалистов (как он составлялся, можно почитать в первой части исследования). В заключении хотим обратить внимание разработчиков на то, что чем больше функций добавляется в сервис, тем сложнее становится следить за правильностью их реализации. Проводите тесты, аудиты, общайтесь с пользователями, — это самый рабочий способ сделать по-настоящему нужный продукт. А если нужна помощь специалистов в области UX — обращайтесь в Everest — мы всегда поможем ;)