Марат!
Перейти от формуляра к ползункам — правильный ход, если нужно помочь человеку понять взаимосвязь разных величин. В этом случае точное указание значений не имеет смысла, а мгновенная обратная связь интерфейса критична.
Однако мне кажется, вы всё сильно усложнили и запутались, в результате запутаете и клиента. Предлагаю вам воспользоваться методом предложений — моим любимым методом дизайна веб‑страниц.
Метод предложений
Суть: сначала ограничиться в дизайне единственным инструментом — предложениями.
Что вы хотите сказать пользователю этой страницей? Что бы вы сказали человеку, если вместо страницы вы бы были рядом с ним?
Вы пишете: «Цель: показать посетителю, сколько он сэкономит, используя светодиодное освещение». Возможно, я не прав, но у меня подозрение, что это не цель, а ваше решение, которое вы по ошибке приняли за цель. Настоящая цель, как я предполагаю, помочь покупателю понять, что светодиодные лампы выгоднее ламп накаливания. Вот и первое предложение готово:
Светодиодные лампы выгоднее ламп накаливания.
Тут проблема: кажется, что тебе врут. Все видели ценники светодиодных ламп и знают, что они намного дороже. Надо раскрыть противоречие в предложении, чтобы человек не думал, что мы от него что‑то прячем:
Светодиодные лампы выгоднее, хоть и дороже ламп накаливания.
Теперь всё чётко, однако сразу возникает вопрос: «Но как?!» Весь ваш калькулятор — попытка ответить на него, дав человеку инструмент расчёта стоимости владения лампой. Давайте не будем забегать вперёд и ответим предложением (цифры от балды, нужно поставить настоящие):
Светодиодные лампы выгоднее, хоть и дороже ламп накаливания. Они потребляют в 10 раз меньше электроэнергии и служат в 5 раз дольше.
Теперь, когда механизм экономии объяснён, можно переходить к убеждению. Ваше «показать, сколько человек сэкономит» — отличный способ. Давайте посчитаем, сколько же человек сэкономит и напишем ещё пару предложений (цифры снова от балды):
Светодиодные лампы выгоднее, хоть и дороже ламп накаливания. Они потребляют в 10 раз меньше электроэнергии и служат в 5 раз дольше. В году около 2000 рабочих часов. Если в офисе светит 60‑ваттная лампа накаливания, то за 5 лет при цене электричества 4 р. за кВт·ч вы тратите на электроэнергию 2000 × 60 × 5 × 0,004 = 2400 р. Она сгорает раз в год, при цене лампы 30 р. это ещё плюс 150 р., итого 2550 р.
Если использовать эквивалентную по освещению 6‑ваттную светодиодную лампу, то на электричество вы потратите в 10 раз меньше — 240 р., а на саму лампу — 300 р. один раз (она не сгорит), итого 540 р. Экономия — больше 2000 р. Умножьте на количество ламп в вашем офисе.
В принципе, дизайн 1.0 готов.
Можем его его улучшить, применив закон динамизации: сделаем все цифры переменными (заодно немного подредактируем текст). Получим что‑то такое:
Тут можно всё переставить по вкусу, добавить логотип и всё остальное.
Этот дизайн остаётся понятным, даже если не дёргать ни за какие бегунки. Достаточно прочитать текст.
Метод предложений имеет два важных свойства:
Он вправляет мозги. Если ты не можешь сделать страницу в виде текста из предложений, значит ты не понимаешь, зачем её делать и что хочешь сказать. Проблема не в отсутствии вдохновения, а в непонимании задачи. Когда задача понятна, сделать страницу проще простого, можно даже Фотошоп не открывать.
Он идеально совместим с прогрессивным джипегом, что жизненно важно для работы по ФФФ. Первый результат готов за полчаса. Дальнейшее время тратится на его доведение до блеска. Пока время есть, предложения раскрашиваются и размечаются, расставляются в блоки и столбики, заменяются иллюстрациями, видеороликами, инфографикой, интерактивными элементами. С каждым шагом страница становится всё круче, но в любой момент дизайн готов.
Предположим, что время ещё осталось. Приглашаю уважаемых советчиков предложить следующие шаги.