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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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