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

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

О том, как мы сделали Squadus не просто универсальным, но и удобным в работе инструментом коммуникаций, читайте под катом.

Привет, Хабр! Меня зовут Артем Сексяев, в МойОфис я дизайнер-аналитик пользовательского взаимодействия. Первые исследования по Squadus мы с командой начали в 2020 году, на старте разработки продукта. Тогда, с помощью серии глубинных интервью (а позже — количественного исследования на 600 человек), мы изучили контекст коммуникаций в крупных компаниях: выяснили, как именно и посредством каких инструментов общаются сотрудники в рамках рабочих задач, выявили их проблемы и потребности. Кроме того, с 2020 года мы раскатали Squadus внутри своей компании. Половина сотрудников МойОфис — на тот момент, порядка 300 человек — активно пользовались решением и делились обратной связью; коллеги помогали тестировать прототипы, оценивали те или иные нововведения.

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

Расширяем возможности: первые очевидные шаги

Разработка Squadus начиналась на базе СПО Rocket.Chat. Мы понимали, что в исходном виде решение не отвечает потребностям наших потенциальных заказчиков и много сил потратили на различные доработки.

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

Так, изначально в чатах отсутствовала пересылка сообщений. Это чрезвычайно полезная для корпоративного сектора функция, которая, тем не менее, есть сегодня далеко не во всех решениях — например, отсутствует в той же Microsoft Teams (за исключением мобильной версии, где функция представлена в урезанном виде). Мы реализовали пересылку сообщений на неограниченное количество пользователей: как в личную переписку, так и в другие чаты (каналы, команды).

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

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

Для удобства пользователей мы переименовали кнопку «Ответить» в «Ответы». Плюс сделали так, что теперь четко видно, кто именно отвечал в том или ином треде и в какой последовательности.

Возможность сохранять черновики сообщений — еще одна важная для корпоративной переписки функция, которой не было в Rocket.Chat. Мы реализовали ее следующим образом: сразу после того, как пользователь закончил печатать текст в соответствующем поле, его сообщение сохраняется в виде черновика. А спустя 10 секунд в списке бесед появляется отдельный раздел «Черновики».

Отдельный комплекс работ мы провели над компонентами в UI-kit. В изначальном решении применяется UI-kit Fuselage, качество его компонентов нас не устраивало: были проблемы с полями ввода, саджестерами и другими компонентами. Поэтому мы перешли на собственный UI-kit, сделанный на основе MUI. Подробнее об этом мы также рассказали в недавней статье про фронтенд.

Упрощаем навигацию

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

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

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

В рамках редизайна мы вынесли навигацию на вертикальную левую панель, разделили ее на основную и дополнительную. Поиск по беседам реализовали в виде полноценной поисковой строки.

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

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

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

Оптимизируем композер чатов

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

• Команды. Самые крупные рабочие группы в Squadus. Могут создаваться под конкретный проект или отображать структурную иерархию организации.

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

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

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

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

Саджестер и свитч заменили на компоненты из нашего UI-kit. Изменили расположение кнопок «Создать» и «Отмена».

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

Аналогичным образом переработали композер создания команд.

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

Доступ к записям конференций. Упрощаем и тестируем

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

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

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

С помощью шкалы UMUX-Lite мы выявили мнение пользователей о качестве работы с конференциями в прототипе приложения. Средняя оценка по утверждению «Возможности записей конференций отвечают моим потребностям» составила 4,5 из 5, а по утверждению «Записями конференций легко пользоваться» — 4,75 из 5.

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

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

Что мы хотим сделать в ближайших релизах

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

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

Вот некоторые из них:

• Улучшение работы статусов: синхронизация с календарем встреч, пользовательская настройка

• Activity: раздел, где можно посмотреть сводку всего, что произошло в каналах из списка пользователя

• Расширение возможностей для работы в команде, управление участниками и каналами команды

• Развитие сквозного поиска

• Улучшение дефолтных настроек (поскольку, как мы писали выше в статье, большинство пользователей не меняют стандартные настройки)

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

• Пользовательское управление чатами

• Переход на новый UI-kit, который используется для всех остальных приложений, чтобы консистентно встраивать другие продукты
  

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

***

Узнать больше о разработке Squadus вы можете из предыдущих статей нашего цикла — про бэкенд и фронтенд продукта. На вопросы про UX приложения будем рады ответить в комментариях.

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