Обновление калкулятора себестоимости спустя 6 лет

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

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

Обновил внешний вид

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

Изменил тексты для лучшего понимания

Раньше было «3 пунктов» и «.руб на единицу». Каких пунктов? Какую единицу? Непонятно.

Теперь стало гораздо понятнее: материалов и рублей на клиента.

Состояние по-умолчанию

Раньше при открытии не было ни одного материала. Левая часть экрана была пустой. Это выглядит ошибка. Пользователю надо догадаться, что нужно нажать на кнопку «+».

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

Добавил кнопку «Добавить ещё»

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

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

Числовая клавиатура на мобильном

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

Автоматическая прокрутка к новому пункту

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

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

Сохранение в куки

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

Сейчас после перезагрузки все сохраняется и если вы хотите вернуться к вашим записям — нет проблем!

На видео ниже я обновил страницу, но все данные остались там же.