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

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

Часть вторая


Так выглядело окно входа с паролем в старом Айтюнсе:


Слева — выбор между Эплом и Аолом. Им соответствуют два поля. У меня Эпл, я ввожу эпл-айди в первое поле и нажимаю Энтер. Но справа от Аола вдруг появляется красная стрелка и указывает мне на второе поле: «Аол-то сюда введи, э». Но у меня нет Аола!

Оказывается, второе поле — это пароль от эпл-айди. Красная стрелка указывает на поле и не имеет отношения к Аолу.

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

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

В более новой версии радиогруппу отодвинули подальше от полей:


Не множество полос разной длины, а три латинских буквы

Принципы гештальта

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

Если сломать сбивающие с толку связи, проблема исчезает:

Теперь, правда, хочется переверстать всё окно, чтобы оно стало красивым.

То же с вертикальным выравниванием. Когда соседние этажи одинаково разделены на колонки, они кажутся связанными:

Совет о чередовании ритма
  • Читатель пытается сопоставить:
  • офисная мебель — по размеру офиса;
  • кабинеты руководителя — по производителям;
  • офисные кресла — по стоимости;
  • а также у нас есть — мы нашли.

В нашем восприятии «притягиваются» объекты с большой визуальной массой. На трассе Челябинск—Екатеринбург случайно образовалось кафе «Пропан»:



В «Твиттере» кнопка закрытия окна случайно связалась с настройкой уведомлений:

Общая теория близости

В приложении «Медузы» все вертикальные расстояния между блоками — одинаковые:


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

Дизайнер попытался «спасти» дизайн, добавив на фотографиях белую стрелку снизу. Но такая стрелка — неествественный способ связывать объекты.

Близость сильнее.

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

 

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


Поделиться

Комментарии

Сергей Черкасенко
10 мая 2016

Добрый день. Постоянно ловлю себя на мысли, что фото персоналии выше тянет на себя смысл. Теория близости в действии. Сейчас кажется, что Максим отвечает на вопрос. И никак не могу развидеть:


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

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

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

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





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

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