ВЛИЯНИЕ НАСЫЩЕННОСТИ ЭЛЕМЕНТОВ ДИЗАЙНА НА ПОНИМАНИЕ ИНТЕРФЕЙСА

АННОТАЦИЯ

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

ABSTRACT

Usability of interfaces is a topic of discussion in many companies and literature. The article is devoted to the influence of the richness of design elements on the understanding of the interface. Contains information about the usability of the site. The effect of "chromatic stereoscopy" is considered. An illustrative example of the influence of element saturation on user experience is given. From the point of view of the target action, the impact of saturated colors on user behavior is analyzed.

Ключевые слова: насыщенность, контраст по насыщенности, дизайн, интерфейс, пользователь, юзабилити, хроматическая стереоскопия.

Keywords: saturation, saturation contrast, design, interface, user, usability, chromatic stereoscopy.

Введение

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

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

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

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

- выделение отдельных элементов дизайна упрощает чтение.

- более удобный и понятный интерфейс.

Цель исследования

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

Исследование

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

Если на белом фоне расположить желтый и фиолетовый цвета, то «близкий» по оттенку – желтый – погрузится в глубину белого и будет менее ярко выделяться. Тогда как фиолетовый будет выступать вперед. При использовании черного фона впечатление поменяется. Желтый цвет выступит вперед, а фиолетовый, как «родственный», будет удерживаться черным.

Так применяется контраст по насыщенности.[1] Он действует на восприятие следующим образом: чистые, насыщенные цвета выступают вперед по сравнению с близкими по оттенку. Как только к этому контрасту прибавляется контраст светлого и темного, то впечатление глубины снова изменяется.

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

Насыщенность цвета — присутствие в нём серого цвета. Чем насыщеннее цвет, тем меньше в нем серого. Чем менее насыщенный цвет, тем больше в нем серого.

Кроме того, существует такая закономерность ассоциативного восприятия, как эффект «хроматической стереоскопии» [2], или выступания и отступания цветов. Предмет более интенсивного цвета различается лучше и выглядит как расположенный более близко, а по мере снижения насыщенности уходит в глубину и ощущается как расположенный дальше. То есть интенсивные цвета выходят вперед по отношению к ненасыщенным цветам. Светлые тона на чёрном фоне будут выступать вперёд в соответствии со степенью их светлости. На белом фоне впечатление будет обратное: светлые тона останутся на уровне белого фона, а тёмные постепенно выступят вперёд. Тёплые цвета будут выступать вперёд, а холодные уходить в глубину.

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

Цвет является одним из инструментов выражения идеи дизайна интерфейса и его юзабилити – свойств, обеспечивающих комфортную работу пользователя с сайтом. [3]

Одним из таких свойств являются СТА кнопки – элементы, подразумевающие целевое действие. [4] Продуманный дизайн кнопок и действий важен для положительного пользовательского опыта.

Как правило, чтобы управлять вниманием пользователей, помочь им сориентироваться в интерфейсе и одновременно подтолкнуть к целевым действиям, дизайнеру необходимо правильно работать с цветом и его насыщенностью. [5-7]

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

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

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

Результаты исследования

Цвета влияют на наше восприятие вещей. Влияют они и на восприятие интерфейса сайта.

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

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

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

Рисунок 1. Различная насыщенность элементов на примере кнопок

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

Вывод

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

Список литературы:

1. Иттен И. Искусство цвета [Электронный ресурс] URL:https://colorscheme.ru/art-of-color/abstract.html (дата обращения: 04.2021).
2. Ефимов А.В., Панова Н.Г. ВЛИЯНИЕ ПОЛИХРОМИИ НА ФОРМООБРАЗОВАНИЕ. Московский архитектурный институт (государственная академия), Москва, Россия. 2014. [Электронный ресурс]. URL: https://marhi.ru/AMIT/2014/4kvart14/efimov/efimov.pdf (дата обращения: 04.2021).
3. БрусенцоваТ. П. Проектирование интерфейсов пользователя: пособие для студентов специальности 1-47 01 02 «Дизайн электронных и веб-изданий» / Т. П. Брусенцова, Т. В. Кишкурно. – Минск: БГТУ, 2019. – 172 с.
4. Как правильно оформлять СТА-кнопки [Электронный ресурс] URL: http://surl.li/qkma (дата обращения: 04.2021).
5. А.П. Антипов, В.А. Келлер, В.В. Павлюк. ИССЛЕДОВАНИЕ ВЛИЯНИЯ ЦВЕТА В РАЗРАБОТКЕ ДИЗАЙНА ВЕБ-ИНТЕРФЕЙСА. Омский государственный технический университет (ОмГТУ), г. Омск.
6. Бондарь О.В., Чмутин А.М. Насыщенность цвета, контраст насыщенностей и переносимая ими изобразительная информация // Современные научные исследования и инновации. 2018. [Электронный ресурс]. URL:https://web.snauka.ru/issues/2018/03/85975 (дата обращения: 04.2021).
7. Абишева С.И. А 15 Цветоведение: учеб. пособие для студ. высш. учеб. заведений /Абишева С.И. – Павлодар, 2009 - 116 с.
8. Как цветовое решение сайтов и приложений влияет на конверсию. [Электронный ресурс]. URL: http://blog.aic.ru/color-converse/ (дата обращения: 04.2021).