В рамках релизов 2.0, 2.1 и 2.2 — все они вышли в этом году — мы представили переработанные и усовершенствованные продукты МойОфис. Одним из лидеров по числу внесенных изменений стала «МойОфис Почта 2» — почтовая система для корпоративных пользователей, которая включает в себя средства для работы с почтовыми сообщениями, инструменты календарного планирования и адресную книгу.

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

Рассмотреть в одной статье весь объем выполненных работ было бы непросто. Поэтому сегодня мы остановимся на основных изменениях и этапах редизайна «МойОфис Почта 2», которые произошли в 2022 году. О предпосылках масштабного обновления продукта, его новых возможностях и стеке технологий, читайте под катом.

Зачем нам понадобился редизайн: предисловие

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

Параллельно с этим мы запланировали изменение технологической части продукта. А именно, переход с Knockout.js на ReactJS для более быстрого и качественного донесения изменений. Также React дает возможность эффективнее вести кроссплатформенную разработку, что в нашем случае безусловно важно: решения МойОфис совместимы со всеми популярными ОС и предполагают работу в едином интерфейсе на различных устройствах.

Что изменилось в дизайне нашей почты

Первым предварительным результатом редизайна стал подготовленный прототип, по которому мы провели usability-тестирование. Необходимо было узнать, как пользователи воспринимают изменение общих принципов взаимодействия с интерфейсом. Всего мы провели три серии исследований, в общей сложности с 30 респондентами.

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

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

Теперь, к примеру, пользователи нашей «Почты» могут менять ширину панели со списком папок и ширину списка писем в зависимости от контента и формата его представления (скажем, в режиме split view или на небольших экранах).

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

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

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

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

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

Было:

Стало:

Что сказали пользователи

Следующим шагом в работе над продуктом было юзабилити-тестирование интерфейса. Его мы провели на пользователях, не знакомых с нашим продуктом, перед выпуском «Почты 2» в релиз. Цель — проверить удобство работы при основных сценариях и собрать список возможных улучшений. Расскажем подробнее о главных моментах, которые мы почерпнули из исследования.

• При первом знакомстве с «Почтой 2» пользователи отмечали приятную цветовую гамму, простоту и лаконичность интерфейса. С основными почтовыми сценариями, к которым все мы привыкли, респонденты успешно справлялись.

• Однако 2/3 респондентов при первом знакомстве было не совсем очевидно, что для перемещения или удаления письма необходимо выделить его кликом на аватар пользователя. У нас есть гипотеза — ее мы еще проверим, — что это характерно только в начале работы с приложениями.

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

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

• Были отзывы и на не слишком комфортный скролл в сетке «Месяц». Мы учли этот момент и внесли ряд улучшений.

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

Как мы переделали «Почту»: технологический стек

Поговорим о том, что находится под капотом нашей почтовой системы. Сразу уточним: продукт «МойОфис Почта 2» состоит из нескольких клиентских и серверных приложений; ниже в статье мы рассказываем исключительно о серверных компонентах и веб-клиенте.

Итак, в основе фронтенда «МойОфис Почта 2» лежит ReactJS. Как уже было сказано в начале, для обеспечения технологической гибкости мы полностью переписали предыдущее решение, которое базировалось на Knockout.js.

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

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

В качестве основного PHP-фреймворка для веб-почты и DAV-сервера мы выбрали Phalcon PHP, который написан на C и показал себя наиболее производительным в наших тестах.

Микросервисная архитектура позволила оптимизировать подход к разработке и индивидуально подобрать языки программирования под каждый сервис для достижения наибольшей эффективности. Наши сервисы написаны на PHP, Golang, Python и Lua.

Новые возможности «Почты»

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

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

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

Остальные функции были переделаны с учетом современного UI/UX: мы упростили работу и улучшили понимание действий с помощью тултипов и подсказок. По многочисленным просьбам пользователей композеру была добавлена функция перемещения по экрану и компактный вид.

Также настройки профиля, выбранного по умолчанию, теперь синхронизируются с настольным почтовым клиентом «МойОфис Почта 2». В параметрах учетной записи был переработан блок «Подпись». Была добавлена возможность просмотра html-контента, редактирования содержимого подписи и получения её актуальной версии с сервера.

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

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

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

Из новых функций отметим перенос писем между папками с помощью drag-and-drop: можно выбрать одно или несколько писем и с помощью мышки перенести их в желаемую папку. Этот механизм был реализован на базе HTML5 drag-and-drop, что положительно сказывается на вычислительной сложности и позволяет избегать дополнительного скриптинга.

Ни одно входящее письмо в веб-версии «МойОфис Почта 2» не будет пропущено благодаря пуш-сообщениям. Эта новая функция позволяет увидеть входящие письма, даже если приложение свернуто или открыта другая вкладка. Каждый пуш обладает быстрыми действиями для оперативной реакции.

Оповещения работают также и для событий. Для работы с различными шлюзами пуш-сервисов был реализован внешний прокси-сервер, который позволяет отправлять уведомления через систему Firebase.

Обработка уведомлений в веб-приложении зависит от браузера и операционной системы пользователя.

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

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

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

Что изменилось в «Календаре»

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

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

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

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

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

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

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

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

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

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

Что изменилось в «Контактах»

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

Поэтому мы реализовали возможность создать встречу или забронировать ресурс прямо из «Контактов», не переходя в календарь. Это можно сделать из карточки контакта, группы рассылки или ресурса, либо выделив нужные контакты в общем списке.

Как изменился модуль «Задачи»

С появлением модуля «Задачи» мы видим все больше позитивных отзывов о его использовании заказчиками, поэтому активно развиваем этот инструмент.

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

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

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

• Мы реализовали полноценную интеграцию с каталогами AD, Samba, FreeIPA и ALD PRO

• Подтвердили совместимость нашего почтового сервера с антивирусными решениями, например, от «Лаборатории Касперского» (KLMS, KSMG)

• А также подтвердили возможность интеграции с системами мониторинга событий безопасности DLP InfoWatch

• Реализовали оркестрацию контейнеров и улучшили балансировку нагрузки по сервисам, в том числе перешли на новую БД Postgres

• Расширили возможности настраиваемой маршрутизации писем во внешние системы аналитики

• И возможности настройки индивидуальных правил по запросу заказчика со стороны почтового сервера.

***

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

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