Пара советов
по дизайну веб-форм

Совет первый. Существует забытое всеми правило оформления переключателей и радиокнопок. Почти всегда эти элементы интерфейса оформляются вот так:

Но чтобы избежать грубейшей ошибки, следовало бы делать так:

Если читатель не сразу заметил разницу, то ему стоит попробовать активировать переключатель щелчком по надписи, а не по самому значку. В первом случае такой щелчок бесполезен, во втором — успешно срабатывает.

Это очень удобный и простой прием, но совершенно незаслуженно забытый. Забыли его потому, что во многих руководствах по верстке рекомендуется не использовать «устаревший» элемент <label>. Однако описанный прием можно реализовать только с помощью явного указания атрибута for в элементе label, точно совпадающего с атрибутом id переключателя.

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

Мобильный веб-серфинг кладет весомый минус в чашу весов горизонтальных подписей. Дело в том, что на ограниченном пространстве телефона форму с такими пояснениями заполнять катастрофически неудобно, потому что приходится постоянно двигать страницу туда-сюда: прочитал название поля — заполнил, прочитал — заполнил, и так далее.

По этой причине следует использовать вертикальный порядок подписей.

Андрей Маркелов