Это база: геометрические и оптические нюансы в дизайне интерфейсов

Привет, vc.ru! Вы задумывались о том, как особенности нашего восприятия отражаются в дизайне интерфейсов? Какие нюансы возникают в связи с этим, что с ними делать, как использовать или как с ними бороться, читайте в нашей статье.

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

Отчего мы строим наш мир именно геометрическим? Первое, потому что он максимально комфортный для человека. Например, рассматривая картины прямоугольной формы или кино на прямоугольных экранах, человек чувствует себя комфортно. Второе: легко строить. Упрощенно: дома прямоугольной формы строить легче, чем изогнутые. Здесь работают принципы архитектуры.

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

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

Самый общий нюанс — это силовые линии. Если вам задать вопрос: «Какая геометрическая фигура изображена на картинке ниже?», то сразу же ответите: «Треугольник».

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

Отсюда определение: силовая линия — это невидимая или оптическая (что в принципе одно и то же) линия, относительно которой движется наш взгляд или наше восприятие.

Метод силовых линий — так называемый прием Гештальт. Его в графическом дизайне часто используют в дизайне логотипов. Например, вместо буквы «А» делают стилизованные треугольники, или промежутки между буквами складываются в другую букву. То есть существуют невидимые и видимые части.

В дизайне интерфейсов силовые линии используются в F- и Z- паттернах. Это довольно старый прием, сейчас уже менее популярный.

В F-паттерне силовые линии (они бывают вертикальные, горизонтальные, диагональные), по которым размещается контент, образуют форму «F».

Три точки на примере выше формируют вертикальную силовую линию, а текст формирует горизонтальные силовые линии. Появляется F-паттерн.

Z-паттерн - разновидность F-паттерна. Просто взгляд при просмотре слева-направо не возвращается обратно, а по диагонали переходит к нижней точке.

Дизайн сайтов в период с 2020 г. сильно поменялся концептуально. Связано это с тем, что сменились паттерны восприятия. Сейчас новый паттерн восприятия — вертикальная силовая линия, вокруг которой строится весь контент.

Есть два вида размещения вертикальной силовой линии:

По центру

Силовая линия делит интерфейс ровно посередине и весь контент выстраивается относительно центральной силовой линии.

Слева

Силовая линия смещается левее центра, где-то наблюдается сильное смещение, где-то менее, но тем не менее это левая сторона.

Речь только о европейском восприятии. Японская, китайская и арабская письменности стоят обособленно, подчиняются своим правилам. Всё завязано на том, как человек пишет и читает: справа-налево или слева-направо.

Вертикальные силовые линии дают намного лучше восприятие, чем F- и Z- паттерны. Пользователь идет взглядом по центру сайта, и слева, и справа примерно одинаковое расстояние, охватываются сразу все области. Если мы хотим сделать акцент на чем-то важном, то ставим этот элемент на силовую линию.

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

Почему? Потому что показывать левую нет смысла, т.к. не позволяет размер. Связано это с тем, что контент уходит не в горизонт, а в вертикаль.

Была проведена масса разных исследований на данную тему, в частности от Instagram (Принадлежит Meta, запрещенной в РФ организации). В 2018 г. разработчики соцсети тестировали насколько людям нравится вертикальный скроллинг. Были проведены А/В-тесты горизонтальной/вертикальной прокрутки. Результатом исследования стал вывод о том, что людям гораздо удобнее скроллить бесконечно вниз. Собственно, по этой причине появились вертикальные силовые линии. При создании интерфейсов становится важно, чтобы пользователи скроллили относительно какой-то линии, оттого весь контент размещают у этой линии.

Мы описали общий принцип построения контента по силовым линиям, который действует и на некоторые частные случаи.

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

Если раньше текстовый блок, заголовок и плашка с текстом выравнивались относительно внешней линии, то сейчас все чаще встречаются варианты выравнивания всего текста по силовой линии. То есть текст в плашке и задает силовую линию, относительно которой выравнивается весь остальной контент.

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

Это пошло из книгопечатания и типографики. Как шрифты, кегели и веса. Разделение на силовые линии придумали не дизайнеры, они только подхватили.

Если взять книгопечатание, то там огромное количество правил. Обычный читатель обращает внимание только на удобство чтения. Зачастую, сложные для восприятия книги печатают более простым шрифтом, чтобы не усложнять восприятие. Отчасти, возвращение к силовой линии, отказ от Z и F-паттернов – это упрощение восприятия. Так человеку комфортнее.

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

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

В чем же загадка? Все в тех же силовых линиях. Когда у нас взгляд идет по силовой линии относительно грани квадрата и скользит до круга, то свободное пространство заставляет наш взгляд «проваливаться». В связи с этим круг начинает уменьшаться оптически, не геометрически. Геометрически фигуры абсолютно одинаковы по высоте и ширине.

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

В итоге фигуры визуально стали одного размера или весят оптически одинаково.

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

Где еще в дизайне интерфейсов применяется оптическая компенсация? Например, в дизайне полей для сообщений, где есть поле для текста, и кнопка «Отправить».

Многим дизайнерам известно проклятие кнопки Play. Если треугольник вписать ровно по центру круга, то кажется, что треугольник смещен влево. Но на самом деле он находится четко по центру. Здесь на помощь приходит оптическая компенсация. Для этого треугольник надо просто вписать в круг и отцентровать.

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

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

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

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

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

В самом простом виде блок логотипов партнеров организуют с помощью плашек. То есть каждый логотип размещается в одинаковые плашки. Логотип внутри плашки центруется. Но такой вариант самый простой. Высший пилотаж — это, конечно, без всяких плашек. Какая-то геометрическая основа может быть, но невидимая, прозрачная, чтобы был виден только сам логотип.