Электронный сомелье

Сверстайте форму из PSD-файла для ввода коктейля.

Автор описания и дизайна — Александр Шпак.

Как это работает?

Выбор коктейля начинается с выбора бокала. От него зависят пункты меню в разделах «Тип», «Крепость», «Основа», как видим, часть из них становится неактивными в определенных случаях.

Ингредиенты выполнены не в виде форм ввода, а таблицы. Это облегчает восприятие информации, хоть и требует немного больше телодвижений. Зато появляется возможность реализовать простую сортировку пунктов при помощи drag'n'drop и не ограничивать выбор пользователя только семью ингредиентами. Цветовое решение названий компонентов акцентирует внимание на украшениях.

Время приготовления изменяет шкалу в зависимости от выбора чекбокса «увеличенное время».

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

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

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