Переключение рабочих пространств: как не ошибиться контекстом

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

Представим небольшое агентство. Дизайнер ведёт экран оплаты для Northstar и сценарий бронирования для Riverton в одном браузере. Риск не только в том, что меню трудно найти: комментарий, файл или приглашение могут попасть не к тому клиенту. Мы разберём эти состояния как сценарий совместной работы над дизайном в Pixso. Названия клиентов относятся к проектируемому приложению, а не описывают собственный переключатель аккаунтов Pixso.

Разделите аккаунт, пространство и проект

Аккаунт отвечает на вопрос «кто действует», рабочее пространство — «в пределах какой организации или клиента», проект — «с каким набором файлов». Если объединить эти уровни без подписей, два проекта под названием «Редизайн сайта» будут выглядеть одинаково, хотя принадлежат разным клиентам.

В нашем примере постоянный заголовок показывает «Northstar / Экран оплаты», а рядом с профилем указано имя дизайнера. В меню проекты сгруппированы по клиентам. После перехода в Riverton одновременно меняются заголовок и назначение следующей загрузки. Имя клиента не должно быть видно только внутри открытого меню: большую часть действий выполняют после его закрытия.

Проверяйте длинные похожие названия. Если многоточие скрывает различие между Northstar Brand и Northstar Support, сокращение вводит в заблуждение. На узком экране можно оставить короткое имя, но полное должно быть доступно при фокусе и в списке. Цвет аватара сам по себе не определяет организацию: он может повториться или быть плохо различим.

Пусть список объясняет, куда ведёт пункт

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

Недавние пространства могут идти первыми, однако не переставляйте пункты, пока меню открыто. Текущее пространство отметьте явно. Если компонент действительно является кнопкой меню, его открытие и управление с клавиатуры должны соответствовать паттерну W3C для menu button. Для списка с поиском или диалога выбирайте подходящую модель взаимодействия, а не назначайте всем элементам семантику меню.

«Создать пространство» — отдельная задача, а не существующее назначение. Отделите её от списка. То же касается управления участниками и выхода из аккаунта: они не должны выглядеть как названия клиентов.

Решите судьбу незавершённой работы до перехода

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

Полагаться только на системное подтверждение ухода со страницы ненадёжно. MDN указывает, что beforeunload не всегда срабатывает на мобильных устройствах, и советует подключать его только при наличии несохранённых изменений. Внутри приложения можно дать более точное сообщение: «Комментарий для Northstar / Экран оплаты ещё не отправлен».

Идущая загрузка — ещё один пограничный случай. Файл остаётся связанным с Northstar. Разрешайте переход только если обработка безопасно продолжится в исходном пространстве; иначе объясните, почему переключение пока недоступно. Индикатор загрузки без назначения, а затем результат в другом контексте создают неопределённость.

Покажите смену прав до неожиданного отказа

В Northstar у дизайнера может быть роль редактора, а в Riverton — только просмотр. Не нужна подробная матрица прав в списке, но значимое отличие вроде «Riverton · просмотр» должно быть заметно. После перехода элементы редактирования подчиняются новой роли. Вместо непонятной неактивной кнопки объясните: «Здесь доступен просмотр; запросите право комментирования у администратора».

Не переносите привилегированное действие через границу незаметно. Если окно приглашения открыто в Northstar, при переходе его нужно закрыть либо до отправки ясно привязать к Riverton. Иначе коллега получит доступ не к тому клиенту. Для серьёзного действия повторите назначение в окончательном подтверждении, а не полагайтесь только на шапку.

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

Подтвердите результат и сохраните понятный путь после сбоя

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

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

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

Проверьте момент, когда можно ошибиться пространством

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

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

Источники по взаимодействию

• W3C WAI-ARIA: кнопка меню
• MDN: ограничения beforeunload