Почему интерфейс приложения выглядит неаккуратно и при чем тут миллениалы и штангенциркуль?

Этот пост — реакция на дискуссию, которая произошла у меня на работе по поводу обоснованности pixel-perfect верстки и на мем, который я увидел в другом уважаемом канале.

Острота чувств определяется тем, насколько маленькие детали мы можем различить. Например, коль скоро мы говорим про визуальную составляющую приложения, острота зрения — это наша способность визуально отделить одну точку от другой: например две звезды на небе могут сливаться в одну в зависимости от их взаимного расположения, дистанции и оптических особенностей глаза, буквы на таблице Сивцева (ШБМНК…) начинают размываться на определенной строчке и становиться неразличимыми etc. Можно сказать, что острота зрения — это как разрешение монитора: чем оно ниже, тем меньше тонких деталей мы можем увидеть и наоборот.
Однако, человеческий глаз обладает и остротой другой модальности – пространственной. В англоязычной литературе, такой феномен получил название hyperacuity — гиперострота. Продолжая метафору с разрешением: если «обычная» острота зрения ограничена плотностью «пикселей» нашей сетчатки – фоторецепторов, то пространственная острота позволяет видеть «субпиксельные» различия.
«Субпиксельные различия» – это способность замечать несоосность двух линий, кривизну или отсутствие центровки (см. картинку)
Если попытаться оценить различия этих модальностей количественно, то исследования, которые я нашел, заявляют о том, что наш глаз может различить объекты, разделенные 30-60 угловыми секундами, и отклонения в 5 угловых секунд для пространственных отличий

✝️Чтобы лучше понять масштаб различий: способности различать объекты, разделенные 30-60 угловыми секундами (0.5-1 MOA) достаточно, чтобы разглядеть черты лица человека на расстоянии 150 метров, а разрешающей способности в 5 угловых секунд – достаточно, чтобы разглядеть монетку на расстоянии 400 метров. Мы никогда не увидим монетку с такого расстояния, но даже малейшая неточность пространственного расположения будет бросаться в глаза.

Этот эффект получил применение в нониусной шкале (шкале Вернера) для штангенциркулей, а знаменитый фокус с шоколадкой эксплуатирует эту идею за пределами видимых глазом различий.

Поэтому «ад перфекциониста» – это не выдумка миллениалов, это действительность, которую замечает любой зрячий человек (простите, миллениалы).

Современные инструменты для проектирования и имплементации UI отлично справляются и с выравниванием и с центровкой и конечно же умеют рисовать прямые линии без изломов.
Алгоритмы сглаживания позволяют избавиться от «лесенок» по краям, и современные дисплеи способны гарантировать избыточную плотность пикселей

Однако, некоторые интерфейсы продолжают выглядеть неаккуратно. Как я писал ранее, дизайн — это (эмерджентная) система. И адекватная реализация каждого дискретного компонента системы не гарантирует того, что вся система будет выглядеть хорошо. Когда мы смотрим на экран, содержащий несколько различных компонентов, каждый может быть сверстан корректно, но между ними, например, не будет сквозной симметрии. Этот эффект неплохо изучен в психологии и в научных работах по компьютерной графике и называется гештальт-эффектом (можно посмотреть статью Якоба Нильсена на эту тему): суть эффекта в том, что мы склонны проводить мнимые линии, границы там, где их нет. И когда глазу не получается продолжить воображаемую соосную линию, возникает чувство дискомфорта и общей неаккуратности интерфейса.

Pixel-perfect практика позволяет контролировать эти небольшие флуктуации и целостность системы элементов на одном экране. Конечно, не всегда получается ей следовать, как по техническим причинам или по причинам экономической целесообразности, но точно никогда не стоит пренебрегать этой практикой, если вам кажется, что маленькие погрешности в верстке окажутся незамеченными.

#product_management #it #UI #UX #design #дизайн