Зеттаплан

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

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

Почему новый продукт

Задачи

Задачи — главный инструмент Мегаплана. Их используют все. Встреча, дело или поручение — это тоже задача. В Мегаплане я научился направлять максимум усилий на вещи, которые используют 90% времени. Поэтому здесь вложено много сил — 3 раза карточка сильно переделывалась. По нашей статистике, каждая строчка кода переписана 7 раз.

Мы рассмотрели сценарии работы по частоте использования: комментарии, добавление участников и делегирование, работа с подзадачами, изменение задачи.

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

Мы пробовали поместить участников под комментариями. В один вечер я нарисовал 20 вариантов шапки — добивался чистоты и легкости восприятия. И получилось! Безумных вариантов хватало.

В итоге карточка получилась чистой. 99% времени в задаче пишут и читают комментарии, прикладывают файлы. Этому мы и отвели главное место.

Подзадачи

В жизни задачу часто делает не один человек. В классическом Мегаплане для этого сделали роль — исполнители. Но эта лишняя сущность не дает понимания кто чем занят. А подзадачи показывают кто какую часть работы делает. Так мы поощряем фиксировать людей работу в виде задач.

Иногда часть работы делегируют подчиненным. Решение с подзадачами масштабируемое. Задача любого уровня разбивается на подзадачи для удобства или делегирования коллегам. Поэтому вложенность задач в Мегаплане бесконечная.

Блок подзадач первый в картчоке. В жизненном цикле задачи они нужны чаще, чем описание. Описание не меняется, а список подзадач живет своей жизнью. Заходя в задачу важно видеть сколько сделали и что еще осталось. Быстрый переход к подзадачам по клику на плавающем заголовке:

Участники

Участники сначала выводились второй колонкой. Мы убрали вторую колонку. Потому что Айпад, да и карточка с ней тяжелая. Линейная структура воспринимается проще. Участники нужны когда добавляешь сотрудника в задачу. К тому же они видны в комментариях. Поэтому спрятали участников за кнопкой. Это позволило не экономить пространство и вывести участников красиво, с должностями и фотками.

Упоминания

Написать человеку в задаче не приглашая его в нее

Прикладывание файлов

Исходя из закона Фитса, мишенью для бросания файла сделали окно целиком. Мишень это текущий контекст: открытая папка, задача, форма постановки задачи. Если пользователь зашел в папку на третьем уровне глубины — она текущий контекст. Чтобы бросить файл в папку второго уровня, сначала надо ее выбрать. Это полезное ограничение. Правило, которое одинаково работает во всей системе и делает интерфейс предсказуемым.

Оргструктура

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

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

Отделы можно добавлять в задачи и адресаты сообщения:

Положение сотрудника в структуре определяет его права доступа, чем я расскажу далее.

Участники и права

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

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

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

Участник не может менять задачу, только если он не руководитель или директор. Добавлять подзадачи и приглашать других сотрудников могут все. Запрет приглашать других сотрудников усложнит использование, а безопасности не добавит — содержание задачи всегда можно скопировать.

Наследование прав

Сценарии:

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

Когда нужна секретность — наследование отключается и задачу видят только непосредственные участники, и руководители.

Алгоритм сотрудника

Регулярный алгоритм сотрудника — это просмотр уведомлений, решение своих задач и контроль поставленных. Для этого мы сделали три модуля: Входящие, Дела и Контроль.

В делах есть календарь и список задач «Я делаю». Сотрудник набирает этот список из задач, по которым он ответственный. Еще здесь выводятся задачи на сегодня и просроченные. В одном месте — вся предстоящая работа.

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

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

Библиотека шаблонов (Patterns library)

Большой продукт состоит из кирпичиков. Элементы стандартизированы и универсальны для повторного использования.

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

Решение задач за счет того, что уже реализовано дает экономический эффект. Это упрощает освоение продукта. Меньше элементов и вариаций — меньше когнитивной нагрузки.

На примере карточки объекта — она едина для сущностей Мегаплана. Неизменный заголовок, действия над объектом и участники для указания доступа сотрудников.

Принципы интерфейса

Фокус

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

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

Простой лэйаут

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

Иконки с подписями

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

Визуальная чистота

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

Метафора листа для карточки привлекает не нужное внимание, а контрформа создает дробность:

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

Контрформы привлекают ненужное внимание. Поэтому блоки и разделители мы растягиваем всю доступную ширину карточки:

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

Проблемы колоночного интерфейса

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

Вложенность в задачах

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

Мы придумали компромисс. Первая колонка — фильтры и проекты. Вторая колонка — задачи проекта. При переходе в задачу проекты прячутся и остаются список задач и сама задача.

Вложенность подзадач показываем хлебными крошками. Обычная вложенность 2–3 уровня, но интерфейс покажет любую. Карточка задачи при этом не пострадает.

Обзор

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

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

Чему я научился

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

Больше чем программа в облаке

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

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

Мыслить системно и экономить

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

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

Текст решает

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

Нет никакой каскадной модели разработки

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

Макеты — это гипотеза, которую нужно еще проверить и скорректировать. Чем раньше получим рабочий прототип, тем лучше. У нормальных ребят процесс такой:

Или так:

Команда важнее процесса

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

Профессионалы с общей целью дадут высокий результат. Процесс — это просто инструмент.

Программирование и верстка

Дизайнеру полезны навыки и знания фронденд-разработчика. Поэтому я подтянул знания по верстке и изучил JavaScript. В качестве практики разобрался с Node.js и написал небольшое клиент-серверное приложение.

Для нового Мегаплана регулярно правил верстку и стили. Решал мелкие задачки: сделать красивое обрезание текста, анимацию, причесать кнопки, показать полное название документа при наведении. Самостоятельно написал просмотрщик картинок в комментариях:

В Мегаплане используют препроцессоры Stylus и CoffeeScript.