Объекты, расположенные рядом, кажутся нам связанными.

Это кажется самоочевидным, но ошибки повсеместны. В интернет-магазине «Ламода» невозможно понять, какие цены относятся к каким товарам — все расстояния одинаковые:

У «Гисметео» ночные градусы ближе к дневной иконке, чем к своей:

У «Кинопоиска» поле находится прямо под словами «Войти на сайт», а относящаяся к нему кнопка «Искать» отделена втрое большей дыркой:

Часто страдают радиокнопки. Эти образуют пары с чекбоксами ниже:

Тут кажется, что нужно выбрать по варианту в каждой из четырёх колонок:

А хуже этого окна нет вообще ничего:

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

При этом важно, чтобы подписи всё же были ближе к своим кружкам, чем кружки друг к другу:

Нет

Да

Если хочется поставить радиокнопки в строку, следует использовать другой их дизайн:

Нет

Да

Близость — самый естественный способ показать связь. В формах следует группировать связанные поля, размещая их ближе друг к другу:

Здесь всего пять полей, но без группировки всё равно выглядит сложно:

Если предположить, что имя и фамилию действительно для чего-то нужно вводить раздельно, то эти поля должны были стоять вместе; номер и срок карты — тоже вместе. А список принимаемых карт вообще в этом ряду ни к чему.

То же самое с тулбарами. В плохом кнопки идут безразличной кучей. «Майя»:

В хорошем — сгруппированы по смыслу. Почта:

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

Продолжение