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

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

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

Самый известный прораб занимается мотивацией персонала.
Самый известный прораб занимается мотивацией персонала. Кадр из фильма «Операция «Ы» и другие приключения Шурика», к/с «Мосфильм», 1965, реж. Л. Гайдай

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

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

Шахматка — это привычный и удобный инструмент для ведения записей о производимых работах, занятых исполнителях, объёмах, материалах, выплатах и пр. Чаще всего представляет из себя таблицы, настроенные в произвольной форме, которые выполняют роль примитивного BIM (англ. Building Information Model). В столбцах номера квартир или названия помещений, в строках номера этажей. На пересечении информация о работах в помещении. Таблица может быть транспонирована.

Понятие «Шахматка» на стройке знакомое, по этой причине выбирать название для приложения долго не пришлось.

Проект с историей

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

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

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

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

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

В приложение «затаскиваются» вспомогательные данные, которые повышают порог входа. Чем больше просишь от пользователя, тем длиннее дорога от первоначального входа до начала работы.
В приложение «затаскиваются» вспомогательные данные, которые повышают порог входа. Чем больше просишь от пользователя, тем длиннее дорога от первоначального входа до начала работы.

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

Санкции и лишения

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

Тогда же мне пришлось вернуться к Sketch вместо Figma. Не скажу, что меня это сильно расстроило, ведь мой ноутбук теперь мог работать на одном заряде батареи не полтора-два часа, а все шесть или семь.

Пока мы не обзавелись аккаунтом в Zeplin, пришлось вспомнить как делалась разметка макетов лет десять назад. В тот момент название продукта соответствовало названию подразделения, к которому мы относились.
Пока мы не обзавелись аккаунтом в Zeplin, пришлось вспомнить как делалась разметка макетов лет десять назад. В тот момент название продукта соответствовало названию подразделения, к которому мы относились.

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

Привычная для разработчиков канбан-доска с задачами. Однако для строителей — это непонятная и бесполезная штука. Выдают наряды на этажи, также принимают. Стендапов со скрам-мастерами по утрам у строителей нет и карточки по одной там двигать некому. Чтобы отказаться от неё, ушло полгода.
Привычная для разработчиков канбан-доска с задачами. Однако для строителей — это непонятная и бесполезная штука. Выдают наряды на этажи, также принимают. Стендапов со скрам-мастерами по утрам у строителей нет и карточки по одной там двигать некому. Чтобы отказаться от неё, ушло полгода.
Новый интерфейс

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

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

Что мы поняли:

  1. Нам нужны массовые операции, для ввода информации о выданном наряде, например, на этаж.
  2. Представление данных и их ввод должны быть привычными для пользователя.
  3. Нужен простой, удобный и настраиваемый инструмент просмотра всех полей, связанных с работами. Это позволит покрыть пользовательские запросы в зависимости от распределения функций на разных объектах.
  4. От первоначального входа до ввода данных о работе, должно быть менее пяти минут.
  5. Настройка второй и последующих шахматок должна занимать ещё меньше времени, чем при первоначальном входе.
Регистрация новых пользователей и вход уже зарегистрированных выполняется с посадочной страницы.
Регистрация новых пользователей и вход уже зарегистрированных выполняется с посадочной страницы. Для этого используется номер телефона и SMS с кодом. Дополнительных действий и заполнения форм не требуется.
После регистрации, пользователю предлагают указать работы, учёт которых будет выполняться. Также требуется настроить таблицу, указав номера этажей и названия помещений.
После регистрации, пользователю предлагают указать работы, учёт которых будет выполняться. Также требуется настроить таблицу, указав номера этажей и названия помещений.
Для настройки списка работ, пользователь может создать записи самостоятельно или выбрать уже существующие из справочника по умолчанию, расположенного слева. Список работ можно клонировать из другой шахматки. На базе сторонней библиотеки был разработан компонент для работы с классификаторами (древовидными списками), который включает в себя поиск по вхождению. Позднее он пригодится нам в настройках фильтрации.
Для настройки списка работ, пользователь может создать записи самостоятельно или выбрать уже существующие из справочника по умолчанию, расположенного слева. Список работ можно клонировать из другой шахматки. На базе сторонней библиотеки был разработан компонент для работы с классификаторами (древовидными списками), который включает в себя поиск по вхождению. Позднее он пригодится нам в настройках фильтрации.
Для настройки таблицы, в первой версии, предусмотрена предзаполненная форма. Таким образом, новые пользователи, которые хотят ознакомиться с функционалом, не будут тратить время на ввод данных. В следующих версиях планировалось добавить выпадающий список с набором типовых домов от различных застройщиков.
Для настройки таблицы, в первой версии, предусмотрена предзаполненная форма. Таким образом, новые пользователи, которые хотят ознакомиться с функционалом, не будут тратить время на ввод данных. В следующих версиях планировалось добавить выпадающий список с набором типовых домов от различных застройщиков.
Первый подход к описанию базовых требований к функциональности таблицы.
Первый подход к описанию базовых требований к функциональности таблицы.
Так выглядел основной экран настроенной шахматки. Слева список работ, которые выполняются на объекте. Вверху название объекта. В верхнем правом углу переключатель, меняющий отображение полей (листов шахматки), не сбрасывающий прокрутку и управляемый в том числе «горячими клавишами» с клавиатуры.
Так выглядел основной экран настроенной шахматки. Слева список работ, которые выполняются на объекте. Вверху название объекта. В верхнем правом углу переключатель, меняющий отображение полей (листов шахматки), не сбрасывающий прокрутку и управляемый в том числе «горячими клавишами» с клавиатуры.
Форма ввода данных о работе. Если данные указаны ранее, то поля заполнены. Фокус автоматически передается на поле формы, соответствующее установленному значению в переключателе листов. Таким образом, например, можно выбрать весь столбец, нажав на заголовок. В открывшей форме ничего не меняя нажать на клавиатуре кнопку Delete и Enter. Все значения в этой колонке, для выбранного поля будут удалены. Всё привычно и понятно.
Форма ввода данных о работе. Если данные указаны ранее, то поля заполнены. Фокус автоматически передается на поле формы, соответствующее установленному значению в переключателе листов. Таким образом, например, можно выбрать весь столбец, нажав на заголовок. В открывшей форме ничего не меняя нажать на клавиатуре кнопку Delete и Enter. Все значения в этой колонке, для выбранного поля будут удалены. Всё привычно и понятно.
О главном

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

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

Отчёты и реестры на выплату представляют из себя слепки данных. Это означает, что, сформировав реестр на выплату, вы не имеете зависимостей от настроек таблицы и списка работ. Единственное, что нужно оставить — это отображение оплаченных объёмов в форме ввода, если конкретно эта работа в этом помещении уже оплачивалась.

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

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

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

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

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

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

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

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

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

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

Шрифт, цвет, монотонность и компонентная база

Команда разработки использовала готовую библиотеку компонентов MUI С моей же стороны были небольшие запросы по доработке стилей.

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

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

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

Использовались иконки из моего набора. Посмотреть, скачать исходники и оптимизированные SVG можно на этой странице.

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

Также была выполнена работа по анимации прелоадеров.
Ковбой-девелопмент в полный рост! :)
Полезные ссылки

Библиотека для переноса слов:
https://github.com/sergeysolovev/hyphenated
https://github.com/denisotree/hyphenated-ru

Для работы с классификаторами:
https://jakezatecky.github.io/react-checkbox-tree/

Для вывода дат:
https://date-fns.org/docs/Getting-Started

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

Заключение

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

↑ Наверх


13 марта, 2023
Пётр Лутов
Дизайн в разработке программного обеспечения