Тег: веб-формы

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

О том, что программисту неплохо было бы не просто формально выполнять требования из ТЗ, но ещё и стараться понимать, откуда такие требования возникли и с какой бизнес-задачей связаны
Такая вам мысль на ночь. Человек заполнил форму, нажал кнопку «Купить» или там «Пожаловаться». Но не заполнил какое-то обязательное поле

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

Комментирую дизайн. Элементы прыгают между соседними экранами. Кнопки кажутся задизейбленными. Непонятен сценарий регистрации

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

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

У нас сложная форма настройки логических условий фильтра со вложенностями и прочими делами. Приводим её в чувство путём чистки от всего графического мусора

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