Оптимизация визуального дизайна согласно гештальт-принципам непрерывности и синхронности (часть 2)

Posted on by riasevastopol

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

В первой части данной серии статей мы разглядели близости и принципы сходства (similarity and proximity), растолковывающие, как смогут быть организованы элементы в зависимости от их отношения к вторым элементам. Сейчас отечественное внимание будет сосредоточено на правилах непрерывности (continuation or continuance) и синхронности (последний кроме этого время от времени именуется «принципом неспециализированной судьбы», common fate). Оба они связаны с перемещением и образуют отношения между объектами за счет собственной динамической специфики.

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

  • применение принципов и Визуальное восприятие гештальта в веб-дизайне

Непрерывность

Дорога, теряющаяся где-то далеко. Ступени лестницы, ведущие вверх по бугру. Река, петляющая между районами города. Ежедневно мы видим подобные сцены, отечественные взгляды скользят по ним, и мы не подмечаем подробностей.Оптимизация визуального дизайна согласно гештальт-принципам непрерывности и синхронности (часть 2) Мы склонны сопровождать взором постоянное, ничем не нарушаемое перемещение, череду элементов, образующих прямые линии либо изгибы.

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

Отечественный взор прикован к дороге, протянувшейся через целый город к горизонту

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

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

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

Использование принципа непрерывности на практике

Мы можем применять принцип непрерывности, дабы оказать помощь взору пользователя пройти по определенному пути в дизайне. Непрерывность образовывает отношения между объектами и завлекает внимание к отдельным элементам либо их группам. Как видно из изображения ниже, последовательности обуви на сайте Nike выстроены в ровные прямые линии, что разрешает нам просматривать их в нужном направлении: слева направо.

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

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

Непрерывность содействует выбору направления и ведет нас горизонтально от последовательности к последовательности

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

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

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

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

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

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

Непрерывность показывает нам вертикальное направление перемещения глаз по колонкам информации

Прерванное перемещение

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

На сайте Warby Parker ровная вертикальная колонка изображений предполагает прокручивание вниз по экрану. Нежданно плавное перемещение прерывается изображением, имеющим необыкновенную форму. Это изображение останавливает перемещение по странице и завлекает к себе особенное внимание.

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

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

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

Действенное использование принципа непрерывности

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

1. Избегайте нарушения непрерывности, а вдруг прибегаете к ней, убедитесь, что она трудится в вашу пользу.

2. Дабы поощрить верное перемещение по странице, не инкорпорируйте в собственный дизайн элементы, прерывающие заданное направление, к примеру, через чур широкое свободное пространство (White Space), графику либо изображения громадного размера. Но, подобно Warby Parker, вы имеете возможность применять прерванное перемещение, дабы привлечь интерес к серьёзному элементу либо отметить начало либо финиш определенной части страницы либо группы объектов.

3. Все элементы направляться выстраивать ровно и последовательно.

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

5. Применяйте подсказки, дабы указать направление перемещения.

6. Для горизонтальной прокрутки, аналогичной той, что мы видели в примере из App Store, отыщите метод продемонстрировать, что справа либо слева имеется дополнительные опции для просмотра.

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

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

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

  • 5 психотерапевтических изучений по восприятию визуальной информации

Синхронность

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

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

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

Свора рыб, передвигающихся совместно, превосходно демонстрирует принцип синхронности

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

Синхронность возможно посильнее группирования по принципу сходства, создавая новые отношения

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

Принцип синхронности утрачивает силу, в случае если перемещение не синхронизировано

Использование принципа синхронности на практике

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

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

Надавите на play, дабы взглянуть, как перемещение руководит вниманием и удерживает пользователей на исполнении текущей задачи

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

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

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

Надавите play, дабы заметить, как перемещение завлекает внимание и собирает элементы

Нарушение синхронности

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

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

В приложении от гипермаркета товаров для дома Home Depot пользователи смогут просматривать результаты поиска по запросу «микроволновые печи», двигаясь вверх и вниз по перечню. Нажатие на кнопку «Сравнить» в верхней части экрана ведет к тому, что перечень легко сдвигается вправо, открывая поле, разрешающее выбрать модели для сравнения. Это неожиданное перемещение формирует контраст с вертикальным перелистыванием и переводит фокус внимания на новый контекст выбора продуктов для сравнения.

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

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

Это неожиданное перемещение, нарушающее процесс перелистывания, заставляет нас еще внимательнее изучить товары, представленные на странице.

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

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

Применение анимации для данного элемента, движущегося перпендикулярно по отношению к главному направлению, ведет к концентрации внимания именно на следующей статье, а не на элементах около нее.

Надавите play, дабы заметить, как контраст двух разнонаправленных перемещений ведет к фокусированию внимания на отдельном элементе

Действенное использование принципа синхронности

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

1. Выдерживайте синхронность перемещения.

2. Как мы видели в примере с приложением Paper, элементы либо группы элементов, движущиеся совместно, воспринимаются как имеющие определенную сообщение. Применяйте однообразные и постоянные скорость и направление для сохранения этого результата.

3. Прибегайте к контрастам для привлечения внимания.

4. Нарушение привычного перемещения заставляет пользователей концентрироваться на обстоятельстве задержки, как это происходит в примере с Houzz. Применяйте подобные контрасты для перетягивания внимания на ответственные элементы либо для обозначения новых структурных частей дизайна.

  • Когнитивная пользовательский опыт и психология: 7 гештальт-правил визуального восприятия

Заключение

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

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

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

Высоких вам конверсий!

По данным: smashingmagazine.comimage source Christian Beirle Gonzalez

Случайные статьи:

geshtalt


Подборка похожих статей:

riasevastopol

More Posts