Курсометр: от веб-формы к арт-объекту
Как скучная форма обратной связи стала прибором — и почему красивый интерфейс пришлось переделывать после встречи с Telegram.
Четыре ручки вместо анкеты
Сначала я выбрал четыре вещи, которые действительно помогают мне менять курс: понятность, темп, баланс теории и практики, атмосферу.
Ещё хотелось спрашивать, сколько времени человек потратил. Но такой вопрос легко превращается в маленький табель: хочется соврать или почувствовать вину, что занимался мало. А моя задача — узнать про курс, а не оценить человека.
Как должен выглядеть прибор, которого нет
Я пошёл генерировать референсы. Хотелось компактного настольного объекта: молочный металл, чёрные ручки, винты, один оранжевый акцент, мягкие следы использования. Не стерильный интерфейс и не пульт атомной станции — вещь, которую хочется покрутить.
Показать исходный промпт
Создай фронтальный концепт компактного настольного прибора для сбора обратной связи от учебной группы. Это должен быть дружелюбный интерактивный объект между аналоговым лабораторным прибором 1970-х, аудиосинтезатором и музейным экспонатом. Он не должен выглядеть как корпоративный dashboard, школьный тест, пульт управления атомной станцией или интерфейс компьютерной игры.
Корпус компактный, с мягко скруглёнными углами. Материалы: тёплый молочно-серый окрашенный металл или плотный матовый пластик, немного чёрного металла, деликатные винты, лёгкие следы использования. Четыре крупные тактильные поворотные ручки расположены в сетке 2×2. У каждой ручки есть дуговая шкала, риска-указатель и пустые места для двух крайних подписей.
Наверху небольшая табличка для названия прибора и узкое поле для имени. Внизу крупная физическая кнопка отправки и небольшой зелёный индикатор состояния. Настроение: человечное, немного ироничное, тактильное, уютное, приглашающее покрутить. Строго фронтальный вид без перспективного искажения. Не добавлять читаемый текст: подписи будут добавлены в HTML.
CSS знал форму, но не чувствовал материал
Я сразу пошёл делать HTML-прототип. Получилось так себе. Всё было нарисовано средствами CSS и выглядело как веб-форма, которая надела костюм прибора.
Тогда я решил собрать объект из отдельных красиво нарисованных деталей: ручек во всех положениях, кнопки, лампочки, тумблера. Так у элементов появились настоящие тени, фактура и вес.
Победил Cuprum. Потом появился звук
Подписи тоже должны были ощущаться нанесёнными на корпус, а не взятыми из интерфейсного набора. Я попросил агента собрать наглядную шрифтовую панель. Победил Cuprum.
Потом я добавил звук: разные ручки щёлкали немного по-разному. Кого-то это наверняка бесит, поэтому рядом появился выключатель. Но без звука прибор терял часть телесности и маленький вау-эффект.
Звук не заменяет обратную связь на экране. Он добавляет ощущение механики — и всегда может быть выключен.
Я двигал детали, а проблема была во всём предмете
Низ ручек обрезался, корпус расползался по ширине, подписи жили сами по себе. Я исправлял локальные замечания, но Курсометр всё ещё ощущался как аккуратно стилизованная страница.
Перелом случился, когда вместо «сделай красивее» я начал размечать скриншоты: убрать лишний оранжевый круг, поставить подписи под ручку, сузить корпус, спрятать лампу. Замечания про характер превратились в геометрию.
Я отсёк лишнее — и отправил друзьям
Корпус собрался, шкалы успокоились, появилась одна цельная панель. Я доделал форму вечером и отправил друзьям похвастаться.
Утром пришла проверка реальностью: моя чудо-форма у людей не работала.
Telegram не оценил мои красивые свайпы
Во встроенном браузере Telegram движение ручек пальцем срабатывало нестабильно. Можно было призывать людей открыть ссылку в обычном браузере — но это плохой сценарий. Telegram Mini App поддержал бы жесты лучше, но для одной формы это уже слишком много конструкции.
Настоящий дизайнерский вызов оказался не в том, чтобы защитить красивое взаимодействие, а в том, чтобы сохранить ощущение прибора в реальных условиях.
Первые пять секунд утренней проверки. Прибор живой, а свайп — нет.
Оставить кручение. Добавить тапы
Решение оказалось простым: все деления вокруг ручки стали кликабельными. Можно по-прежнему тянуть и крутить, а можно надёжно выбрать значение одним тапом. Тапы не ломают кручение, а кручение не мешает тапам.
Это небольшой компромисс, но не капитуляция. Курсометр остался прибором — просто научился понимать ещё один жест.
Картинка ведёт в живой Курсометр. Там можно крутить ручки, нажимать на деления и включать звук.
Ретроспектива дизайн-процесса
По итогам я попросил агента разобрать не только результат, но и сам путь: как в следующий раз быстрее прийти от референса к работающему интерактивному арт-объекту.
Что сработало
- Мы не зацементировали первое решение и дали идее сменить форму.
- Размеченные скриншоты переводили ощущение «не то» в конкретные правки.
- В конце появилась цельная грамматика: одна панель, воздух, физические детали, один оранжевый акцент.
Где потеряли время
- К реализации перешли раньше, чем утвердили арт-направление целиком.
- Локально чинили детали, сохраняя грамматику обычной веб-формы.
- Не собрали заранее стенд всех состояний ручек, кнопки, лампы и тумблера.
- Назвали экран готовым до полной мобильной и доставочной проверки.
Курсометр — не веб-форма, стилизованная под прибор. Это прибор, внутри которого незаметно спрятана веб-форма.
Как я соберу следующий арт-объект
- Зафиксирую творческий контракт: первое ощущение, функцию, визуальные инварианты и антипримеры.
- Сделаю 2–3 цельных статичных варианта в реальном размере — пока без кода.
- После выбора соберу стенд компонентов и все состояния ассетов.
- Утвержу один канонический мобильный экран и композицию целого предмета.
- Только потом добавлю механику: жесты, звук, отправку и параметры ссылки.
- Отдельно пройду визуальную, интерактивную и доставочную проверки.
- Публиковать буду на контрольных точках, а промежуточные версии сравнивать локально.