За каждой заявкой стоит целый процесс.
Диспетчер, исполнитель и руководитель работают с одной заявкой, но решают разные задачи. Я спроектировала интерфейс, который сохраняет подробности процесса и помогает выделять главное на каждом уровне.
Сохранитьсложностьпроцесса.Упроститьработус ней.
У заявки есть адрес, заявитель, сроки, участники, история и связанные работы. Показывать все одновременно - перегружать обзор. Скрывать подробности - усложнять работу внутри задачи. В этом и состояло главное противоречие Twayli.
Я разделила интерфейс на два масштаба: обзор ситуации на доске и подробное рабочее пространство карточки. Детали остаются в системе, но уровень их раскрытия зависит от действия, которое человек выполняет сейчас.
Диспетчеру нужно распределять обращения, исполнителю - находить свою работу, руководителю - замечать задержки. Эти рабочие сценарии помогли мне определить, какая информация нужна в обзоре, а какая относится к подробностям.
Я связала журнал, доску и карточку через последовательное раскрытие. Человек сначала ориентируется в объеме работы, затем сужает его и переходит к конкретному действию.
Принять и распределить
Вынесла в сводку обращения описание, адрес, заявителя и участников. Это информация для первичной ориентации; более глубокая работа остается на следующем уровне.
Сузить поле внимания
Разделила этапы, теги и фильтры по ролям в интерфейсе. Они помогают выделить нужные задачи, сохраняя видимыми сами карточки.
Перейти к работе
Разнесла параметры, чек-лист, заявление и комментарии по смысловым областям. Подробности организованы вокруг разных действий, а не собраны в одну длинную форму.
«Сделано» еще не значит «закрыто».
В процессе есть два разных события: выполнить работу и завершить ее оформление. Если свести их к общей дате или одному статусу, интерфейс скроет важное бизнес-различие.
Я отразила оба события на двух уровнях. В задаче сроки оформлены отдельными полями; в журнале различаются просрочка выполнения и просрочка финализации. Так подробная карточка и общий обзор говорят об одном процессе без потери смысла.
Разделить значения
Связала название срока с конкретным действием. Универсальная дата не объяснила бы, какой этап требует внимания.
Сохранить различие в обзоре
Вынесла отдельные состояния задержки в журнал. Бизнес-правило видно до открытия карточки, а не только внутри нее.
Поддержать смысл несколькими средствами
Названия и расположение передают различия вместе с цветом. Акцент помогает считывать состояние, но не несет весь смысл в одиночку.
Плотныйэкрандержитсяна яснойиерархии.
На доске одновременно видны этапы, карточки, сроки, теги и управление. Здесь нельзя сделать каждый элемент одинаково заметным: обзор распадется на конкурирующие сигналы.
Я разделила уровни чтения. Колонки задают этап процесса, карточки собирают сведения о работе, метки выделяют отдельные признаки. Фильтры и общее управление вынесены за пределы карточек. Эта иерархия позволяет сохранять плотность рабочего экрана и при этом различать, что относится ко всей доске, а что - к конкретной задаче.
В плотном рабочем интерфейсе теги, статусы, иконки и состояния повторяются на многих экранах. Если каждый экран трактует их по-своему, даже знакомое действие требует дополнительного внимания.
Я собрала общие визуальные правила для задач, справочников и административной части. Сиреневый выделяет активное действие, нейтральные оттенки разделяют уровни, различия тегов и статусов поддерживают чтение карточек. Библиотека компонентов удерживает эту логику на масштабе продукта.
Работа с доступами и параметрами отличается от ежедневной обработки заявок. Здесь важно понимать область изменения: человек, его разрешения или общие правила компании. При этом административная часть должна оставаться узнаваемой.
Я сохранила визуальную систему и пересобрала иерархию вокруг настройки. Списки, профиль и отдельные панели последовательно раскрывают подробности, не смешивая разные уровни управления.
Сначала найти человека
Отделила фильтры от результатов и сохранила общую структуру карточек. В большом списке важен повторяемый способ поиска и сравнения.
Отделить сведения от разрешений
Разнесла общую информацию и права по панелям. Они доступны в одном контексте, но не выглядят единой неразличимой формой.
Показать границы настроек
Выделила собственные области для общих параметров, подключений и процессов. Повторяемые поля и переключатели связывают их с остальным интерфейсом.
Техническая карта объединяет этапы, материалы и стоимость. Карточка жителя связывает человека с объектами и обращениями. В этих экранах я работала с отношениями между данными: показывала связи, сохраняя границы смысловых групп.
Особого внимания требует объединение карточек. Для него предусмотрен отдельный шаг проверки информации. Перед подтверждением человек должен видеть, какие сведения участвуют в действии. Здесь структура экрана поддерживает осознанное решение.
На широком экране несколько областей можно просматривать одновременно. На телефоне попытка сохранить весь этот обзор сделала бы информацию слишком мелкой. Поэтому я пересобрала приоритеты мобильного макета.
Карточка и ключевые данные остались в центре внимания, вспомогательное управление перешло в компактную навигацию и меню. При адаптации я сохраняла смысл рабочего действия, меняя способ доступа к деталям.
Спроектировала связанные представления задач, карточек, справочников и административной части. В общей системе сохранены важные различия: обзор и подробная работа, выполнение и финализация, данные человека и его разрешения.
Twaily показывает мой подход к сложным интерфейсам: разобраться в смысле процесса, выстроить иерархию и довести ее до небольших действий, из которых складывается ежедневная работа.
"Мне не нужно долго объяснять, рисовать от руки, пересобирать свои мысли. Иногда мне даже не нужно заканчивать предложение. Я только подумал, а она уже сделала. У неё хорошее чувство трендов и очень большая насмотренность. Она быстро схватывает новое, умеет отличать мимолётное от устойчивого."
