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

Мы провели внутреннее исследование, чтобы понять предпочтения коллег. На обсуждение вынесли два вопроса: чем чаще пользуются в Notion и что больше всего нравится в сервисе.

Мнения разделились, но топ-3 был определён единогласно.

Чаще всего коллеги пользуются канбан-доской. Интересно, что наш HR-директор в своей работе тоже обращается к этому инструменту: создаёт карточки вакансий для отделов, работает со списком кандидатов, собирает обратную связь по ним от сотрудников-заказчиков вакансии. Вся информация хранится в одном месте, и к ней удобно возвращаться при необходимости. Таблицами пользуются и дизайнеры, и проджекты, а диаграмма Ганта нравится больше проектным менеджерам. Инструмент помогает вести таймлайн и следить за сроками проекта.

Больше всего нравится в Notion:

Коллеги дали позитивную обратную связь по дизайну Notion: «Есть ощущение, что пишу в блокноте». Также отметили разнообразные возможности для фильтрации и сортировки контента. Отдельная любовь наших коллег — эмодзи. Подтверждаем, в нашем корпоративном аккаунте часто встречаются смайлики от коллег :)

В фокусе этого исследования — канбан-доска. Мы проанализировали, как этот инструмент работает у российских аналогов, какие ошибки есть в UX, а что реализовано на хорошем уровне.

Для этого исследования мы взяли 5 российских аналогов Notion: Штаб, Flowlu, Kaiten, WEEEK, Яндекс.Трекер:

Собрали в одну таблицу тарифы и возможности оплаты сервисов:

Больше всего разнообразных тарифов предлагает Flowlu и WEEEK. Воспользоваться пробным периодом можно в Штабе, Kaiten и WEEEK. Яндекс.Трекер не предлагает платные тарифы: сервис бесплатен для всех.

В таблице мы сравнили функционал канбан-доски зарубежного Notion и его российских аналогов. Смотрели, какой базовый функционал и интересные фичи предлагают сервисы. На Notion не ориентировались, так как увидели несколько классных фич у российских сервисов, которых нет в Notion.

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

Онбординг пользователей. При первом входе в сервис система знакомит пользователя с интерфейсом. Это помогает новичкам быстрее переходить в разряд опытных пользователей и разобраться с интерфейсом.

Drop & down. Можно перетаскивать карточки между статусами с помощью drop & down. Это удобно, так как большинство пользователей привыкло к такому инструменту. Плюс это сокращает время пользователя до цели.

Режимы просмотра. Наличие нескольких режимов просмотра канбана: доска, список, календарь, матрица.

Встроенный трекер. В Штабе есть встроенный трекер. Это будет полезно тем, кто отслеживает время время на выполнение задач. Кроме того, можно оценить задачу, чтобы проводить пост-аналитику и контроль план-факта по времени.

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

Интерактив. При перетаскивании карточки в статус «Выполнено» появляется анимация с конфетти. Пользователю важно видеть результат своих действий: так он понимает, что всё сделал правильно. Дональд Норман в книге «Дизайн привычных вещей» говорил, что хорошая обратная связь должна быть мгновенной, физической и непрерывной. Так человек понимает, что всё работает нормально.

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

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

Несогласованность иконки и функционала. Основная цель любой иконки — быстро донести до пользователя суть. В данном случае иконка корзины даёт пользователю информацию о том, что он может удалить задачу. Но текст рядом («В архив») этому противоречит.

В мини-карточке задачи есть иконка, смысл которой сложно понять.

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

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

Режим просмотра. У сервиса есть несколько режимов: канбан и список. Это удобно для пользователей, потому что кому-то проще воспринимать информацию в табличном формате, кому-то — в формате доски.

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

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

Drop & down. Можно перетаскивать карточки между статусами с помощью drop & down. Это удобно, так как большинство пользователей привыкло к такому инструменту. Плюс это сокращает время пользователя до цели.

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

Быстрое создание задачи. В Flowlu есть инструмент для быстрого создания задачи. Для этого необходимо нажать на кнопку «Создать задачу» в статусе «Сделать». Открывается такая панель:

У полей ввода есть подсказка, которая совсем не выполняет возложенную на неё функцию. Текст помогает пользователю понять, что ему требуется ввести. Например, в поле ниже понятно, что нужно заполнить описание задачи, но что нужно указать в верхнем поле? Этот вопрос остается без ответа. Возможно, название задачи. Но пользователю нужно приложить усилия, чтобы разобраться в этом. Вместо того чтобы выполнять свои задачи, пользователь занимается выяснением в духе «что хотел сказать автор».

Ответственный за задачу. На скрине показан ответственный за задачу.

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

Создание задачи. Кнопка «Создать задачу», которая не выглядит как кнопка, есть только в статусе «Сделать». Если пользователь уже приступил и решил зафиксировать задачу в процессе, он не сможет этого сделать. В расширенном функционале создания задачи такой возможности тоже не предусмотрено.

Удаление фильтра. Мы разобрались и добавили фильтр. Но как теперь его удалить? На панели управления есть иконка карандаша: по нажатию открывается редактирование фильтра. Иконки удаления нет. Этот момент не проработан в интерфейсе: один из важных сценариев работы с задачами остался без внимания разработчиков.

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

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

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

Drop & down карточек. Можно перетаскивать карточки между статусами с помощью drop & down. Это удобно, так как большинство пользователей привыкло к такому инструменту. Плюс это сокращает время пользователя до цели.

Drop & down доски. Перемещать по странице можно и саму канбан-доску. Для этого необходимо нажать и удерживать иконку в левом верхнем углу. Хороший инструмент для кастомизации своего рабочего пространства: позволяет организовать хранение данных так, как необходимо пользователю.

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

Аббревиатура. Использовать аббревиатуры в интерфейсе нужно с осторожностью. Есть риск, что пользователи не поймут их значение. Что такое НЗП? И где почитать, что это означает? Эти вопросы могут появится у пользователей, поэтому вместо того, чтобы выполнять свои задачи, они могут отвлекаться на выяснение подробностей.

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

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

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

Drop & down. У WEEEK, как и у Kaiten, тоже есть инструмент для перетаскивания задач — drop & down.

Удаление карточки. Удобно реализован функционал удаления: достаточно перетащить карточку в низ экрана.

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

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

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

Акцентная кнопка. Большой акцент на кнопке «Добавить доску». В рабочем инструменте, в котором пользователь планирует проводить много времени, такая кнопка может отвлекать. С точки зрения UX, более частое действие — добавить задачу, а не доску, т. е. при расстановке акцентов нужно учитывать, каким функционалом пользуются чаще, а каким реже.

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

Внешний вид этих элементов воспринимается пользователем за поле ввода. Отсутствие иконки стрелочки (привычный пользовательский паттерн — селект) может запутать пользователя, увеличив когнитивную нагрузку.

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

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

Фильтрация. Можно отфильтровать задачи на доске по двум критериям: задачи, где пользователь — исполнитель, и задачи, где пользователь — автор. Это хороший приём, который помогает пользователю отфильтровать выдачу по приоритетности контента.

Аббревиатуры. В интерфейсе используются непонятные для пользователя цифры и буквы — 0-0.00 sp. Использование таких аббревиатур может способствовать увеличению ментальной нагрузки на пользователя, так как не все знают значение этих символов в интерфейсе.

Целевое действие. На больших мониторах кнопка добавления задачи находится в правом нижнем углу. Это неудобно для пользователя, так как пользователи чаще сканируют информацию по F-паттерну. Рекомендуем располагать кнопку в зоне видимости пользователя.

Не закрывается выпадающее меню. После открытия меню-выпадашка не закрывается по нажатию на кнопку и по нажатию на свободную область экрана. Выпадающее окно исчезает только после перезагрузки страницы.

Нет шаблона карточки. Использование готовых примеров — хороший UX-приём, который мы видели у конкурентов: Notion, Flowlu, Kaiten, WEEEK. Шаблон карточки помогает пользователям быстрее осваиваться в интерфейсе сервиса и знакомиться с его функциями. У Яндекс.Трекера нет этой фичи.

У Штаба получился качественный инструмент для ведения канбан-доски. Есть возможность просмотра данных в разных режимах: доска, список, календарь, матрица. Карточки можно фильтровать, сортировать и перетаскивать с помощью функции drop & down. В Штабе также можно создать несколько проектов, и в каждом будет своя канбан-доска.

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

Команда Flowlu сделали хороший инструмент для управления задачами. Фильтрация, drop & down, поиск по задачам: всё это помогает пользователю в работе с доской. Метка количества задач проинформирует о том, что нужно сделать, а традиционная разбивка на колонки поможет не запутаться в множестве задач.

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

У Kaiten широкий функционал для ведения канбан-доски. Пользователь может выбрать режим просмотра: доска, списки, таймлайн, таблица, календарь. Большое количество фильтров (больше 15!) поможет отфильтровать задачи.

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

В первой части мы уже разбирали один из сервисов WEEEK — «Базу знаний». Для инструмента «Канбан» команда разработала хороший функционал. Есть фильтрация и сортировка, пользователь может добавить колонку для нового статуса. Интерфейс внешне приятный, ничего не отвлекает и не раздражает благодаря монохромным спокойным цветам.

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

Яндекс сделал хороший сервис для работы с канбаном. Можно выбрать разный тип доски: простую, скрам или канбан. Можно фильтровать задачи и управлять выдачей в зависимости от типа пользователя: исполнитель или автор.

Интерфейс пока представлен в старом формате, но 15 апреля Яндекс презентовал новый визуал. Он объединяет все продукты Яндекса и похож на интерфейс Yandex Wiki. Этот сервис мы разбирали в предыдущем исследовании.