Принцип сходства: похожее читается вместе

Сходные по видимым признакам элементы могут восприниматься как группа даже на расстоянии. В интерфейсе это помогает выделить повторяющиеся типы объектов и связать части одного представления. Но одинаковое оформление стоит выбирать по смыслу: внешнее сходство ещё не доказывает одинаковое поведение.

В работе 1923 года Макс Вертгеймер изменял цвет элементов, сохраняя расстояния, и рассматривал возникающую группировку. Перевод Эллиса 1938 года, раздел II.

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

Представьте таблицу обращений. Для каждой заявки показаны номер, тема и статус: «Новая», «В работе», «Закрыта». Это учебный пример Atlas UX.

Статусы одного типа получают одинаковую форму метки и устойчивое оформление во всех строках. Так можно сопоставлять заявки, между которыми расположены другие записи. Текст статуса остаётся видимым: человеку не нужно запоминать значение каждого оттенка.

Теперь представьте, что метка «Закрыта» оформлена точно как кнопка «Закрыть заявку». Человек может попробовать нажать на статус или принять действие за уже полученный результат. У этих элементов разная роль, и проектировщику стоит отразить различие в оформлении и подписи. Это практический вывод для нашего примера, а не результат эксперимента Вертгеймера с таблицами.

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

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

Дать независимый от цвета признак. Для статуса используйте текст; для серии на графике — также подпись, форму маркера или рисунок линии. Цвет не должен быть единственным зрительным способом передать информацию или различить элементы. Это отдельное требование доступности, а не следствие гештальт-принципа. WCAG 2.2, критерий 1.4.1.

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

Сходство также может конфликтовать с близостью: цвет предлагает собрать одни элементы, расстояние — другие. Такой конфликт описан в современном обзоре гештальт-организации. Van Geert и Wagemans, online 2023, выпуск 2024.

В экспериментах Johansson и Ulrich с квадратами согласованность контраста и расстояний влияла на определение групп. Авторы обсуждают ограничения интерпретации и различия между участниками. Из этого нельзя вывести правило «цвет всегда слабее расстояния» для любого интерфейса. Исследование 2024 года.

Попросите найти все заявки одного статуса, затем выбрать действие над одной заявкой. Наблюдайте, что человек объединяет в группу, где принимает метку за кнопку и как объясняет различия. Смотрите на ошибки и успешность выполнения, а не только на впечатление от палитры.

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

Близость использует расстояние между элементами. Принцип Якоба касается знакомых способов взаимодействия: понятный вид компонента и опыт его использования связаны, но это разные вопросы. Эффект фон Ресторф рассматривает память об отличающемся элементе; он не обещает, что любая яркая кнопка получит больше нажатий.

• Wertheimer, 1923; перевод Ellis, 1938. Laws of Organization in Perceptual Forms — историческое происхождение, разделы II–III.
• Wagemans et al., 2012. A Century of Gestalt Psychology in Visual Perception I — исследовательский обзор, DOI 10.1037/a0029333.
• Van Geert & Wagemans, online 2023 / выпуск 2024. Prägnanz in visual perception — взаимодействие принципов, DOI 10.3758/s13423-023-02344-9.
• Johansson & Ulrich, 2024. Serial processing of proximity groups and similarity groups — первичное исследование, DOI 10.3758/s13414-024-02861-2.
• W3C. Understanding SC 1.4.1: Use of Color — официальное пояснение требования доступности.