У лягушек есть одна интересная особенность. По долгу своей легушачьей жизни они сидят в засадах и выжидают. А когда мимо пролетает насекомое, язык лягушки (или вся лягушка целиком) выстреливает ровно в то место, где находится жертва. В процессе эволюции у лягушки сформировался участок мозга, который способен вычленять в поле зрения движущийся объект на однородном фоне. Простая мысль — лягушка устроена так, что не может не заметить раздражитель.

Почему это важно? Потому что эволюция не обошла нас стороной, и мы тоже обладаем таким же участком мозга. А раздражители — это всё что мигает, двигается и появляется в поле зрения.

Хотите ли вы этого или нет, а мозг, пользуясь зрением, сразу замечает, где появились движущиеся кружки, даже если они возникли на периферии — вне локуса внимания. И новый появившийся объект в тот же момент овладевает вашим вниманием. Поэтому любые «неспокойные» изображения и состояния нужно использовать с особой осторожностью. Многие это уже поняли и чтобы привлечь внимание к определенному месту, например, в интерфейсе слегка пошатывают кнопку или пару раз мигнут элементом, на который нужно обратить внимание.

Примеры хорошего применения с учетом рефлекса:
— иконка программы в Мак ОС начинает выпрыгивать из дока, если в ней что-то случилось;
— редактор codepen.io в несохранённом проекте трясёт кнопкой Save;
— бета Яндекс.Браузера проигрывает анимацию на вкладке, в которой что-то произошло;
— «поворотники» в автомобиле мигают, чтобы их было заметно среди остальных огней;
— стоп-сигналы в некоторых автомобилях мигают, если срабатывает антиблокировочная система при торможении.

Не все ещё понимают, что мигание нужно использовать только в определенный момент времени, когда оно необходимо. Из-за этого получаются нерабочие, но популярные решения:
— Мигающие знаки пешеходного перехода. Призванные обезопасить пешехода, обращают внимание водителя на себя и отвлекают от пешехода.
— Анимированные светодиодные табло. Обращают внимание на себя, но переключаются на следующее состояние и сразу прячут то, на что человек обратил внимание.
— Повсюду на сайтах второстепенные элементы оказываются раздражителями, а важные остаются статичными. Например, анимированный баннер против статичного сообщения об ошибке заполнения формы.

Визуальный раздражитель — мощный инструмент привлечения внимания. Используйте его чаще. Там, где уместно и помогает пользователю. Всегда держите в уме, что красная рамка выделяет хуже, чем лёгкое пошатывание или мигание.

Есть два типа элементов управления: дискретные и непрерывные. Изменение громкости — это непрерывный параметр, даже если шаг изменения будет 1 децибел, то всё равно ухо практически не уловит такую малую разницу и изменение на несколько децибел будет слышиться как плавное. По тем же причинам, можно считать непрерывным изменение температуры. А смена между несколькими возможными режимами — дискретный параметр. Переключение песни в плеере — тоже.

А теперь посмотрите на этот концепт тач-интерфейса для автомобиля:

Мало того, что им невозможно пользоваться, пока не выучишь все жесты и их вариации, так ещё есть проблема несовпадения контролирующего элемента и параметра. В случае с громкостью и температурой всё хорошо — значения меняются плавно, по мере движения руки. А вот со сменой источника звука и переключением треков большая беда. Пальцы на тач-интерфейсе приходится вести плавно, а значения меняются ступенями. Интерфейс не приводит никакой обратной связи, поэтому переключение на 5-й или на 6-й трек одинаково вероятно. «Железными» кнопкам обычной магнитолы можно переключать песни не глядя. С таким тач-интерфейсом придётся всё время контролировать процесс переключения, а ошибка может случиться из-за ямки на дороге. Вместо того, чтобы повысить безопасность на дороге, такой интерфейс будет больше отвлекать водителя на себя.

Поэтому элемент управления должен соответствовать элементу, которым управляют. Это соответствие ещё называют когерентностью. Чтобы в таком автомобильном тач-интерфейсе всё стало когерентно, стоит оставить «перетягивание» для непрерывных параметров и придумать другие жесты для дискретных. Пример дискретного жеста — свайп. Свайп влево и вправо логично подходит для переключения песен. Свайп вверх открывает плейлист. Свайп в стороны тремя пальцами переключает источник звука. При этом можно оставить «перетягивание» в стороны для перемотки песни.

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

Никогда, ни при каких обстоятельствах и ни в коем случае на сайте не должен появляться поп-ап поверх всего, пока пользователь сам этого не захотел.

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

Хозяева сайта обычно стараются, чтобы читателю было интересно. Разыскивают новые темы, о которых рассказать, подготавливают статьи. И вот читатель сидит, вчитываешься в текст, разглядывает картинки, как вдруг в середине абзаца его прерывает внезапный поп-ап! Первые секунды читатель обескуражен: «что произошло? Почему я читал черный текст по белому и вдруг всё стало тёмным и появилось что-то новое. Я же ничего не нажимал». Единственное желание в такой момент — побыстрее закрыть поп-ап и продолжить чтение. Но так как внезапный поп-ап прервал читателя на полуслове, то придётся сначала найти, где он остановился. Казалось бы, читатель проявил интерес к вашему сайту, а вы, мало того, что не даёте ему спокойно ознакомиться с содержанием страницы, так ещё и предлагаете неинтересные ему вещи.

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

Некоторые пишут, что использовать внезапные поп-апы использовать можно, но осторожно. Якобы, если пользователь уже две минуты торчит на сайте, то его можно отвлечь. Нет — отвлекать пользователя внезапными действиями нельзя. Это некультурно. Вы как владелец сайта выставляете себя мудаком, который заботится только о собственных цифрах и подписчиках, а основное содержание страницы воспринимает как наживку.

Если хотите чтобы люди подписались на ваш фейсбук поместите кнопку рядом со статьёй. Не надо совать поп-ап в лицо поперёк текста. Разместите плавающий блок, да хоть врезку сделайте посреди текста, но не прерывайте чтение нежеланными окнами. Это банальная вежливость. Если человеку интересен сайт, то он найдёт способ подписаться на вас в удобных ему соцсетях.

Я не против поп-апов в целом. Они хорошо справляются, когда нужно привлечь внимание на конкретном: полях ввода или главном действии. Поп-ап воспримется нормально, если пользователь сам инициировал его появление — нажал кнопку, например.

Когда мы выбираем что-то на тач-устройстве, при отпускании пальца он непроизвольно двигается рывком немного в сторону, просто потому, что физиологически удобнее увести палец не вверх, ортогонально поверхности экрана, а немного наискось. Если выбор не дискретный, как барабан на айфоне, а какой-то более точный (как какая-нибудь рисовалка, например), то последнее движение должно игнорироваться программой. То есть, алгоритм должен понимать, что вот человек держал палец, вот что-то ещё дернулось и палец уже не на экране, значит последний рывок был случайный и его не надо принимать в расчёт.

На маке, если «хлопнуть» по капс-локу, ничего не произойдёт (даже если нажатия достаточно для замыкания контактов). Но если нажать уверенно и чуть медленней, то он включится. Также работает и макос/айос прокрутка — она не начинается до уверенного движения в одну из сторон, случайные короткие взмахи не учитываются. Хотя, при отпускании пальца, прокрутка может немного дернуться, но это не критично для неё, как критично по отношению к интерфейсам, где, например, координаты задаются положением пальца на экране. Мало того, что точность пальца весьма низкая, так ещё есть вполне вероятный шанс сбить всё после кропотливой подгонки.