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

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

Радиокнопка


Переключатель

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



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

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

    <input type="checkbox" id="mycheck"><label for="mycheck">Переключатель</label>
		

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

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

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

Март 2012
Андрей Маркелов
Библиотека