Мобильное приложение Мегаплана

Моя роль: дизайнер
Арт-директор: Дима Плотников
Когда: 2015–2016

Мобильное приложение для сервиса, который развивается и меняется — это долгая история. Чтобы обеспечить качество и выпускать функции сразу в вебе и на мобильном, то разрабатывать надо только внутри компании. Но в Мегаплане нет мобильных разработчиков. Поэтому выбрали привычные технологии — Javascript, html, CSS. Использовали платформу Phonegap/Cordova и Framework7.

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

Главные сценарии

Четыре главных сценария для мобильного:

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

Поставить задачу — важно руководителю, в череде бесконечных встреч и совещаний.

Написать — написать коллеге или создать групповое обсуждение.

Позвонить — стандартный телефонный вызов из Мегаплана.

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

Входящие

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

Карточка

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

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

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

Контекстный переход в карточку

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

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

Постановка задачи

Минимальный сценарий постановки — нажать плюсик, ввести название задачи и нажать «Поставить». Ответственный по-умолчанию сам постановщик задачи.

Полный сценарий — указать проект, клиента, приложить файлы:

Используем эту форму для постановки подзадач и для редактирования задачи.

Ваш браузер не поддерживает встроенные видео.
Если хотите, скачайте видео и посмотрите видеплеером на ваш выбор.

Написать

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

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

Гайдлайны

Главный ориентир — Google Material Design, но адаптированный под кроссплатформенное приложение. Минимальная кликабельная площадь чуть шире чем в iOS — 48dp.

Контролы взяты из Framework7. Но выбиратор участников мы переделали:

Цветовое кодирование

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

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

Иконография

Иконки нарисовал по сетке, которую я взял из Material Design. Иконки для действий — зеленые, а декоративные иконки в списках — серые.

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

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

Перешел на Sketch

Первый опыт работы со Скетчом. После двух недель привыкания — любовь. Было 3 или 4 подхода, когда приходилось править и перерисовывать экраны. Скетч здорово помог и сэкономил время за счет стилей и символов для повторного использования. Рисовать такое количество экранов в Фотошопе — мазохизм. Да, там тоже стили и смарт-объекты, но в Скетче используешь это быстрее раза в два.

Когда-то я пересел с Фотошопа на Файерворкс, потом обратно на Фотошоп. Фотошоп хорош, когда рисуешь пару-тройку макетов. Он берет универсальностью — работает с растром и вектором. В нем есть все, что нужно дизайнеру в работе с картинкой.

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