Зачем я добавил диван в калькулятор ремонта

У ремонта есть неприятная привычка: ответ на один вопрос почти сразу порождает следующий.

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

С этих вопросов мой «Мастерок» и начал обрастать раскладками, объёмными комнатами и другими инструментами. С 17 августа по 16 сентября на сайте было 6 536 посетителей. В сравнении, которое показывает Метрика, это рост на 26,32%. Платное продвижение я не запускал. Большинство посетителей приходит из поиска.

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

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

Так сейчас выглядит раскладка ламината. Диван нужен для ощущения масштаба. Покупать его калькулятор не предлагает.

Калькулятор ответил. А ремонт всё ещё стоит

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

Правда, по одному количеству трудно судить, насколько сайт стал полезнее. Можно добавить ещё десять форм и всё равно оставить человека с тем же вопросом: «Хорошо, я получил число. Что с ним делать дальше?»

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

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

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

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

Сначала посмотрим на посещаемость

За последний показанный месяц Метрика насчитала 6 536 посетителей, 8 335 визитов и около 13,1 тысячи просмотров. В строке переходов из поисковых систем указано 6 090 посетителей. Есть также прямые заходы и переходы по ссылкам, поэтому говорить «весь трафик исключительно из поиска» было бы неточно.

Месячный срез Метрики. У посетителей показан рост на 26,32%. Даты периода, с которым идёт сравнение, на скриншоте не раскрыты. Один посетитель мог приходить из разных источников, поэтому складывать эти строки как независимые группы нельзя.

А вот несколько страниц из блока «Просмотры URL» за тот же период:

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

Думаю, дело в том, что человеку мало узнать количество материала. Хочется посмотреть, что получится именно в его комнате. Ради этого я и занялся визуальной частью, о которой расскажу дальше.

Зачем калькулятору диван

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

Объёмную картинку проще соотнести со своей квартирой. Видны пол, стены и окно. Сразу понятно, куда направлены доски и как выглядит рисунок. Поэтому у раскладок появились 2.5D-режимы.

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

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

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

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

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

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

Обои: куда делся почти целый рулон

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

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

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

Объёмный вид обоев. Для проверки количества есть отдельная развёртка и карты раскроя рулонов. Окно и дверь в этом режиме помогают оценить масштаб.

С окном возникла неочевидная проблема. Раз оно нарисовано на стене, пользователь вполне может решить, что его площадь уже вычли. Но модель обоев не делает такого автоматического вычета: она предполагает, что полотна заводятся на проёмы и подрезаются на месте.

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

Поэтому вместе с количеством рулонов нужно показывать раскладку, подгонку и условия расчёта. Человек сможет сверить их со своей стеной и этикеткой рулона, разобраться с остатками. Если что-то не сходится, будет понятно, какие размеры или настройки проверить.

Квартира закончилась, а инструменты всё добавляются

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

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

На примере ниже потолок 4 × 6 метров, двенадцать точек и отступы по 600 мм. На схеме сразу видно, что именно будет размечаться. Объяснить такую сетку одной фразой сложнее, чем показать её.

Двенадцать точек на плане. Светлые пятна условные: по этой картинке нельзя определить, насколько яркой будет комната.

Здесь инструмент отвечает только за расположение светильников. А чтобы понять, достаточно ли их для комнаты, нужно знать характеристики самих приборов, высоту потолка и назначение помещения. Ровная сетка не гарантирует хороший свет.

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

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

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

Двадцать метров профиля не всегда помещаются в двадцать один

Следующий инструмент называется «Линейный раскрой». Звучит не слишком дружелюбно, хотя задача знакомая: нарезать покупные палки на нужные куски и понять, сколько палок брать.

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

В исходном примере нужны шесть стоек по 2600 мм и восемь перемычек по 580 мм. В сумме получается 20,24 метра. Покупной профиль длиной три метра.

Если просто разделить общую длину на три и округлить, получится семь заготовок. Только каждая стойка занимает 2,6 метра отдельной заготовки. После шести стоек остаются куски примерно по сорок сантиметров. Ни одной перемычки длиной 58 сантиметров из них уже не получить.

Вот и экономия: по общей длине вроде хватает, а перемычки пилить не из чего.

В итоге инструмент показывает восемь заготовок, то есть 24 метра покупки. И это гораздо понятнее, когда видишь полоски на схеме.

Чистая длина деталей составляет 20,24 м, купить нужно 24 м. Разница возникает не только из-за пропила: длинные стойки оставляют обрезки, которые коротковаты для перемычек.

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

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

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

Всё посчитали. Теперь бы не потерять

По мере роста инструментов появилась другая проблема: каждый из них мог быть удобным сам по себе, а вместе они напоминали вкладки, открытые вразнобой.

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

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

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

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

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

Среди небольших утилит есть «Сколько осталось?», которая решает обратную задачу. Обычно мы считаем, сколько купить для известной площади. Здесь можно идти от оставшегося материала и оценить, на что его хватит. Не самая громкая функция, но вопрос вполне житейский: банка уже есть, а хватит ли её на ещё одну стену?

Самая маленькая ошибка в этой большой истории

Без кода всё-таки не обойдёмся. Пока я занимался раскладками и переходами между ними, нашёл неприятную ошибку в обработке одного параметра.

При переходе из раскладки плитки в калькулятор терялся смысл выбранного запаса. Если в адресе не было нужного параметра, его отсутствие превращалось в ноль:

js

Number(null); // 0Number("");   // тоже 0Number("0"); // и снова 0

Для JavaScript всё нормально. Для человека это три разные ситуации: ничего не передали, оставили поле пустым или осознанно выбрали нулевой запас. Такое преобразование описано в MDN, но от знания документации материал обратно в корзине не появится.

Исправление оказалось коротким: сначала проверить отсутствие и пустую строку, только потом превращать значение в число. Явный ноль при этом должен остаться нулём.

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

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

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

Михалыч теперь умеет открывать калькуляторы сам

AI-прораб в проекте был давно. Раньше главное было в том, что он видел контекст и мог объяснить результат. Теперь он получил инструменты: найти подходящий калькулятор, посмотреть его поля и выполнить расчёт.

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

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

ts

const values = mergeCalculatorValues(def.fields, partial);const calculate = await getCalculateFn(slug);const result = calculate(values);

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

Мне нравится это разделение обязанностей. Модель разбирает фразу и объясняет результат. Калькулятор выполняет вычисления. Если нужен повторный расчёт с другими условиями, помощник может снова обратиться к инструменту.

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

Тестовый запрос при подготовке статьи: пол 12 м², плитка 600 × 300 мм, восемь штук в коробке. Под ответом видны использованные инструменты. Это демонстрация работы, а не отзыв пользователя.

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

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

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

И тут в проект пришли мультяшные строители

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

Это уже другое занятие. В калькулятор человек приходит с вопросом. Короткое видео он встречает, когда просто листает ленту и ничего не ищет. Чтобы остановиться, ему нужна понятная ситуация, движение или реплика, а не таблица расхода смеси.

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

Иллюстрация из видеораздела сайта. Это не кадр готового выпуска и не интерфейс генератора видео.

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

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

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

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

А рост не закончился одним удачным днём?

На квартальном графике видно общее движение вверх с обычными колебаниями по дням. С 17 июня по 16 сентября Метрика показывает около 14,7 тысячи посетителей и 31 тысячи просмотров. В строке поисковых систем указано около 13,5 тысячи посетителей.

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

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

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

Что я в итоге хотел показать

Если бы я начинал этот этап заново, то раньше задал бы себе вопрос: что человек делает сразу после получения числа?

С ламинатом нужно выбрать направление досок и проверить подрезки. С обоями приходится разбираться в полосах и остатках, с профилем нужно уместить детали в покупные заготовки. Из этих вопросов выросли новые инструменты. В 2.5D проще представить свою комнату, на обычном чертеже удобнее проверить размеры.

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

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

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

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