Илья
3 мая 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Как теория близости работает в интерфейсе?

Часть первая


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

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



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


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

А. Лебедев. Теория близости

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


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


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


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

Ещё здесь технозависимость

Нет

Да



Нажиматься, конечно, должны и кружки, и подписи

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

Нет

Да



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

Нет

Да



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

Правило внутреннего и внешнего — следствие теории близости

Это замечание касается и чекбоксов

Без группировки

С группировкой

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


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

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

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

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

Нет

•••••••

Да

•••• •••


Продолжение

P. S. Я проведу практический курс «Пользовательский интерфейс и представление информации» 22, 23, 24 и 26 апреля в Москве

 

Запись открыта до ВС 16 апр


Поделиться

Комментарии

Никита Прокопов
3 мая 2016

Пример с чекбоксами из гугль-календаря:

Станислав Ефимов
4 мая 2016

Илья, вы правы насчёт «Майи» только если смотреть в отрыве от контекста.
Дело в том, что наборы «куч» объединены в группы по смыслу: работа с полигонами, эффектами, светом. Например, выбирать «Пейнт-эффектс» таким образом удобно, потому что сразу видна часто используемая палитра. Ещё удобно сохранять настроенные инструменты на полку.

Если не считать, что в новой версии иконки сделали уродливыми, оболочка вполне удобная. Особенно если учесть, что надо упорядочить десятки (если не сотни) команд.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.





Недавно всплыло

У меня остаётся ощущение, что я идиот, «рассыпала бобы», но на конкретных ошибках не могу себя поймать 3 Расскажите об обратной связи в интерфейсе 1 Столкнулся с проблемой, когда долго общаешься с клиентом, и потом выясняется, что его не устраивает порядок цен. Часть 1 2 5