Принципы гештальта в дизайне — принцип подобия
Когда объекты выглядят похожими друг на друга, наш мозг воспринимает их как группу или паттерн.
Принципы гештальта в дизайне — набор концепций и руководящих принципов, которые вытекают из гештальт-психологии. Она выдвигает теорию о том, что наш мозг рассматривает организованные группы предметов как единое целое, а не как отдельные элементы. Эти концепции помогают разобраться в человеческом восприятии и способах организации информации, чтобы передавать сообщения пользователям более эффективно.
Это третья часть серии о принципах гештальта в дизайне. Первая — Принцип близости — рассматривает, как мозг воспринимает группы предметов в зависимости от того, насколько близко они расположены друг к другу. Вторая — Принцип замкнутости/завершения — объясняет, как наш мозг способен воспринимать больше информации, чем находится в нашей видимости.
Как работает принцип подобия
Самый простой пример работы принципа подобия в контексте веб-дизайна — текст.
Каждый элемент визуального языка на веб-странице должен ссылаться на информационную архитектуру самой страницы и всего сайта. Я уже писал об этой идее, где в качестве примера приводил структуру текста. Она даёт мозгу простые подсказки в виде отступов, чтобы он мог понять, какой приоритет имеет та или иная информация на странице. Самые базовые правила типографики, по сути, и есть информационная архитектурная система. В противном случае весь текст будет выглядеть одинаково и, в соответствии с принципом подобия, человек будет воспринимать его как равнозначный — как равные элементы в плоской системе. Но текст так не работает.
Текст требует структуры — как для понимания сути текста, так и визуальной. Визуальная структура отражает структуру сути текста ещё до того, как человек прочтёт первое слово.
Вот почему системы типографики настолько важны для сканирования: размер, начертание и интервал отличают заголовок от следующего за ним абзаца. Отступы и сегментация списка выделяют его среди окружающего текста, а цитата стоит вне общей структуры, чтобы явно сигнализировать о важности извлечённой из всего текста фразы, написанной одной строкой. Если принцип подобия нарушен, то визуальный язык функционирует отдельно и независимо от сути самого текста, что приводит к его неправильной трактовке.
Принцип подобия и объекты
Говорят, что весь веб-дизайн можно свести к блокам и стрелкам. Это несправедливое упрощение, при условии, что мы понимаем, что блоки бывают разных форм и размеров!
Один из распространённых паттернов в контексте дизайна взаимодействия — сетка. Я не имею в виду базовую сетку, я говорю о практике расположения видимых объектов по сетке.
Сетки отражают множество различных деталей в контексте дизайна, полагаясь на принцип подобия.
В предварительном дизайн-макете, например, в варфрейме, указанное выше расположение будет отражать несколько деталей:
- здесь будет находиться больше одного объекта
- объекты — вариации одного типа контента
- объекты обладают равной степенью важности
Это простой пример подобия, с которым мы часто сталкиваемся и используем. Опасность заключается в том, что базовая информация, которую передаёт сетка, состоящая из одинаковых модулей, не транслирует информацию, необходимую для реализации дизайна. Без дополнительных визуальных деталей непонятно, кликабельные эти элементы или нет? Если да, то куда они ведут? Это уникальные элементы, созданные специально для этой страницы, или объекты из библиотеки данных? И так далее.
В примере выше к перечисленному списку деталей можно добавить ещё один вывод: эти объекты не обладают равной степенью важности. Однако сетка не передаёт информацию о том, какой тип контента содержат объекты. Здесь так или иначе работает принцип подобия.
Принцип подобия и действия
Хорошо спроектированная страница предусматривает, что всего за несколько секунд просмотра посетитель задаст себе три вопроса и тут же найдёт на них ответы:
Способ оформления текста на странице поможет во многом ответить на эти вопросы. Однако ответ на третий вопрос будет зависеть главным образом от чисто визуальных подсказок. На странице редко бывает только одна «дверь», через которую пользователь сайта может пройти. Организация множества объектов, каждый из которых представляет собой возможные пути, будет определять, насколько чётко он увидит все варианты.
Как и сетки, списки — наиболее базовый подход для представления конечного числа вариантов. Хороший список будет отражать принцип подобия, чтобы визуально транслировать свою функцию ещё до того, как человек прочитает текст.
Этот список помогает посетителям, которые сканируют страницу, быстро понять, как он соотносится с остальным контентом страницы и функционирует в его контексте. Принцип подобия обеспечивает восприятие этих трёх объектов как списка.
В предварительном дизайн-макете, например, в варфрейме, указанное выше расположение будет транслировать несколько вещей:
- здесь будет находиться больше одного объекта
- объекты — вариации одного типа контента
- объекты обладают равной степенью важности
Как и в случае с сеткой, можно включить дополнительные детали для передачи таких невидимых, но важных для их функции сведений: кликабельные объекты или нет? Если да, то куда они ведут? Это уникальные элементы, созданные специально для этой страницы, или объекты из библиотеки данных? И так далее.
Однако, что ещё более важно, в этом списке присутствует принцип подобия, чтобы человек мог определить объекты как группу объектов одного вида, которые по форме и функциям отличаются от окружающего их контента.
Как и все принципы гештальта в дизайне, принцип подобия может выглядеть обманчиво простой концепцией. Я надеюсь, что эти примеры будут помогать вам на протяжении всего процесса проектирования. И вы будете создавать такие композиции, которые позволят организовать информацию в лёгком для восприятия виде.
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement — подписывайтесь!