Как мы победили дизайн‑хаос и создали единый стандарт проектирования мнемосхем

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

Введение

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

• Нет регламентации. Базовые правила проектирования не были описаны.

• Разнобой в элементах. В каждом проекте компоненты имели свое название, структуру и стиль.

• Нестабильность визуала. Цветовые решения и типографика подбирались ситуативно.

• Коммуникационные барьеры. Ошибки при передаче и презентации макетов,
  отсюда частые правки и несоответствие с финальной реализацией.

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

С чем столкнулись

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

• Отсутствие единого стиля — отличие мнемосхем в структуре и стилистике
  между проектами, разнобой элементов, неограниченное количество дизайнерских решений.

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

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

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

Решения

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

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

• Выбрали модель представления структуры и установили четкую иерархию экранов — теперь стараемся придерживаться модели 4-х уровней:
  - предприятие;
  - цех;
  - подробная рабочая информация;
  - дополнительная информация.

• Проработали цветовую палитру — выделили три основные темы и для каждой разработали собственную цветовую палитру:
  - темная тема;
  - светлая тема;
  - приближенная к стандартам HMI тема.

  

• Улучшили навигацию. Систематизировали все варианты панелей, отобрали лучшие решения и оптимизировали их.

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

  

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

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

Частый кейс — дизайнер передает макет инженеру внедрения, а он не может реализовать экраны из-за технических ограничений редактора. У таких ситуаций два итога —
либо дизайнеру нужно вносить правки по обратной связи от инженера, либо макет в Figma будет сильно отличаться от прода. И то, и другое — неблагоприятный исход
и дополнительная трата ресурсов.

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

• Создали практический опыт через самостоятельное проектирование экранов
  на движке.

• Адаптировали руководство по полученной информации и провели доработку
  по обратной связи.

Улучшили понимание целевой аудитории.

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

• Сообщили сотрудникам о гайдлайне.

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

Почему гайдлайн – это важно?

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

• Качество результата. Любой исполнитель способен выдать отличный результат,
  если следует документу. Это минимизирует дополнительный контроль с обеих сторон.

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

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

• Упрощение процессов. Любой сотрудник, ознакомившийся с руководством, видит доступные возможности и ограничения, благодаря чему способен представить конечный результат. Это значительно упрощает постановку задач и сокращает затраты ресурсов на обсуждение и оценку задач.

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

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

Вывод: соблюдение установленных стандартов — это инвестиция в эффективность работы команды и качество конечного продукта.