Дневник разработки: как и почему мы обновили интерфейс конференции

Лид продуктовых дизайнеров Толка Иван Исаев рассказывает о причинах обновления и грядущих релизах.

Иван Исаев Лид продуктовых дизайнеров Толка

Почему мы взялись за обновления

Кратко — хотелось сделать три вещи:

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

Новая шапка

В ней произошли самые главные изменения: мы добавили «динамические островки» — это небольшие интерактивные блоки-кнопки, которые появляются и исчезают при наступлении определенных событий:

• поднятые руки — появляется, когда участники поднимают руки, и исчезает, когда они их опускаются;
• таймер спикера — появляется, когда кто-то заводит таймер;
• ожидающие (когда конференция закрытая) — появляется, когда есть пользователи, которые хотят войти.

В будущем добавятся и другие островки, например:

• групповая сессия — когда начали работу в группах;
• голосования — когда есть активные голосования.

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

В любой конференции есть островок «Встреча» — он постоянно отображается и заменяет собой заголовок. В нем показываются:

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

Как обозначаются типы встреч

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

Если внешние участники разрешены, мы показываем глобус. Раньше на его месте был рупор. Мы изменили метафору, так как она более понятна, не намекает на сессионные залы и используется во множестве продуктов, к которым пользователи привыкли. Все понимают: глобус = доступно всему миру.

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

Важно: кнопка «Щит» теперь отсутствует, так как ее функционал полностью переехал в меню этого островка. Все остальные кнопки остались на своих местах.

Таким образом, меню островка встречи состоит из двух секций: таймера встречи, если он доступен, и разрешений, которые переехали из кнопки «Щит».

Также появится пункт «О встрече», который будет вести к новой функции «Повестка», которая сейчас в разработке. Она появится в разделе «Инструменты».

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

Зачем

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

Теперь для решения этих проблем у нас появился единый инструмент.

Островки — это быстрый способ уведомления участников о происходящих на встрече интерактивных событиях.

Тулбар

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

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

• Например, у нас есть «Синхронный перевод»: конференция может проходить на нескольких языках, и пользователь может выбрать, на каком языке ее слушать.
• Кнопки камеры и микрофона содержат в себе сложную ветвистую логику, ведь микрофона может не быть, он может быть недоступен, а может находиться в стадии инициализации, микрофонов может быть несколько, может быть включен шумодав и так далее. 
• Кнопки могут сильно различаться по семантике: 
  1. например, боковые левые кнопки работают как «табы», их можно переключать, одна из кнопок может быть активна;
  2. кнопка «Трубки» — терминальная, ее необходимо выделять специальным образом;
  3. кнопки микрофона и камеры — многофункциональные, могут как быть включенными или выключенными, так и показывать дополнительную информацию;
  4. кнопки «Руки» и «Поделиться экраном», хоть и имеют состояния вкл. или выкл. не должны быть перечеркнутыми, так как это нарушает логику отображения.

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

Зачем

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

Прочая косметика

Редизайн шапки и тулбара потребовал небольших изменений всей страницы. Чтобы ее структура лучше воспринималась, мы «положили» левую панель на островок-карточку. Также островком стал каждый участник в гриде, как было в Толке раньше. 

Модальность

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

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

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

В будущем планируем:

• Перенести кнопку«Позвонить» поближе к списку участников;
• Иметь возможность открывать боковые панели в отдельном окне, чтобы еще гибче управлять видимым содержимым. Например, на больших мониторах можно будет открыть список участников (слева), а заметку вынести в отдельное окно и настроить его размеры как хочется. И работать со всем этим одновременно, а не модально.
• Перенести кнопку настроек в правую часть тулбара и открывать их в панели справа, не блокируя другую функциональность конференции.