Как вызвать необходимые ассоциации у аудитории сайта. Цвет и формы

Цвет и форма (я объединяю в этом понятии shape и form) являются ключевыми элементами изобразительного искусства, а как следствие и веб-дизайна. Они существенно влияют на восприятие и взаимодействие пользователя с сайтом. В первую очередь именно цвет и формы вызывают эмоции и ассоциации, что, в свою очередь, воздействует на принятие решений.

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

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

Зрение является основным инструментом взаимодействия человека с окружающей средой. Поэтому цвет и формы — это самые мощные инструменты для коммуникации на уровне эмоций и восприятия.

За долгое время человеческой истории по всему миру люди замечали как различные цвета и формы могут вызывать определенные эмоциональные реакции и ассоциации. В 20-ом веке психологи активно изучали ассоциации, которые вызывают цвета и формы (исследования Г. Иттена и Й. Альберса, Г. Я. Ланга). Также параллельно этому зарождается наука семиотика (наука исследующая свойства знаков и знаковых систем), которая позже разделяется на синтактику, семантику и прагматику, которые становятся частью лингвистики, а также многие другие, например, биосемиотика.

На основе этих и других исследований в СНГ маркетологии нулевых формируются следующее понятие трех порядков ассоциаций:

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

Строго аналогичное понятие за пределами СНГ обнаружить не удалось, самое близкое — это семиотическое разделение на денотацию и коннотацию.

Денотация — это прямое значение слова, чаще всего зафиксированное в словарях.

Коннотация — это дополнительные ассоциативные значения слова, зачастую эмоциональные или чувственные.

Также есть понятие разделения ментальности (и как следствие ассоциаций) на:

• Личные/индивидуальные черты, то есть личные ассоциации, в некоторых источниках называемые аннотацией;
• Общекультурные черты, то есть ассоциации на уровне культуры (например, блины-масленица);
• Общечеловеческие черты, то есть ассоциации свойственные в той или иной мере всем людям. Например, символ солнца-звезда Солнце.

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

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

Пример первый: ВкусВилл

Одним из отличных примеров является сайт магазина продуктов для здорового питания "ВкусВилл".

• Цветовая палитра
  Основной цвет сайта "ВкусВилл" — зеленый, что идеально соответствует тематике полезных продуктов и ассоциируется с природой, натуральностью и свежестью. Дополнительно (в баннерах и блоках) на сайте используется ярко-голубой, желто-оранжевый и пастельные оттенки, что также ассоциируется со всем вышеперечисленным (а именно через схожесть с соответствующими фруктами, овощами и т.п.). Замечу, что все цвета светлые и яркие, что опять отсылает нас к тому, что все "в самом соку".
• Формы
  "ВкусВилл" использует скругленные углы, что придает дизайну мягкость, дружелюбность и заботу. Также эти формы ассоциируются с природой, ведь в ней очень мало строгих и острых форм, особенно в мире флоры.
• Шрифт
  Фирменный шрифт, с растянутыми буквами, создает узнаваемый и индивидуальный стиль, и выглядит не так строго как обычные гротески. Это помогает создать единый и неповторимый брендовый образ. Вот что о шрифте говорит Михаил Губергриц, творческий директор LINII — разработчик визуального языка бренда "ВкусВилл":
  

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

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

Пример второй: Всероссийский музей декоративного искусства

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

• Цветовая палитра
  Основной цвет сайта — белый, что дает воздуха и открытости, что подходит для представления экспонатов музея декоративного искусства. Редко используемый акцентный алый цвет привлекает внимание к важным элементам сайта, таким как бургер-меню и некоторые кликабельные иконки (целесообразность выделения именно этих элементов мы обсуждать не будем, т.к. это не в тематике статьи). Также этот цвет присутствует на фото многих экспонатов, что придает сайту целостности, при этом не перегружая его.
• Формы
  На сайте музея формы блоков в основном прямые и строгие, что создает впечатление порядка и аккуратности. Это соответствует атмосфере культурного учреждения, демонстрируя его профессионализм и серьезный подход к представлению своих экспонатов.
• Шрифт
  Акцентный шрифт, имитирующий как будто кованые изделия, добавляет уникальности и аутентичности дизайну сайта. Этот шрифт отлично сочетается с тематикой музея, который занимается искусством и ремеслами. Такой выбор делает визуальное восприятие сайта более интересным и запоминающимся.
• Выделение основного контента
  Выбор цветовой гаммы позволяет основному контенту сайта (фотографиям экспонатов и выставок) выделяться на фоне остальных элементов. Это создает фокус на визуальном материале и делает его более привлекательным. Если посетите сайт, то заметите, что многие экспонаты также анимированы, что еще больше увлекает пользователя.

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

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

Ошибки в дизайне это в первую очередь решения, которые не помогают или мешают выполнению поставленной перед сайтом задачи. Здесь я не рассматриваю исключения когда сайт это арт-проект, где “ошибки” допущены специально чтобы вызвать необходимую реакцию. Поэтому будем считать, что почти всегда задача это либо продажи продукта/услуги с высокой конверсией, либо увеличение времени, проведенного на сайте и тому подобное.

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

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

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

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

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

Как итог — важно проектировать дизайн вашего веб-сайта с учетом потребностей и предпочтений вашей аудитории. Функциональные решения всегда должны идти вперед вопросов эстетики или вкуса. Именно поэтому в редких случаях вышеописанные “ошибки” могут быть валидным решением поставленной задачи.

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

Создавайте единый стиль
Создайте единый, однородный стиль, который будет использоваться на всем сайте (а в идеале во всем от соцсетей до печатной продукции), чтобы создать единое впечатление и узнаваемость. А если что-то и выбивалось, то для решения какой-то задачи.

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

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

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

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

О том как пользователь действительно видит ваш сайт и на что действительно обращает внимание вы можете прочитать в статье моего коллеги: Как посмотреть на дизайн глазами клиента с помощью eye-tracking.

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

А если хотите быть в курсе новостей и обновлений в области маркетинга, дизайна и UX, присоединяйтесь к нашему сообществу в Telegram и посетите наш сайт.