2.2.3. Психология и дизайн Интернет-баннера

Статистика показывает, что основная масса известных дизайнеров не имеет специализированного образования. Часто рассуждают, что web-дизайн - это оформление информации. Считают его элементом, существующим отдельно от текста и имеющим свои правила и законы. Графика, цвет, текст, заголовки и вся композиция составляют информационное содержание страницы. Основной процент получаемой человеком информации, воспринимается зрением. По статистике 83% информации воспринимается зрительно. Изображение может нести больше информации, чем текст. Но как связать их воедино? Как заставить дизайн нести тему страницы? Обратимся к прикладной психологии. Любое изображение вызывает у человека ассоциации. Проблема в том, что одни предметы, сюжеты или графические элементы вызывают у многих одинаковые ассоциации, а другие - совершенно различные. Если ошибочно строить ассоциативный ряд, то можно завести пользователя совсем не туда, куда хотелось. Поэтому, для построения устойчивых ассоциаций, настроения или образа, часто нужно дополнять композицию элементами, укрепляя тематическую линию. Такими элементами может быть что угодно: изображение, слово или целая фраза, линия, размывка, коллаж. Главное, стремиться не к слепому усложнению, а к созданию устойчивого ассоциативного ряда по конкретной теме и в соответствии со стоящими перед сайтом задачами.

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

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

Теперь, о способах и инструментах. Первое, на чём хочется остановить внимание - это способы проведения пользователя по композиции, построение ассоциативного ряда в нужном направлении. Восприятие текстовой информации в большинстве языков происходит слева направо и сверху вниз. Это правило хорошо помогает в карикатурах, когда есть сюжетный текст, например: вопрос - ответ. Чтобы зритель правильно понял сюжет, нужно заставить его прочесть сначала вопрос, а потом ответ. Текст вопроса выносится наверх изображения, поближе к левому углу, а текст ответа вниз изображения или правее от вопроса. Это первый принцип, но есть и другие способы заострить внимание на конкретных деталях. Есть ещё пространственное понятие восприятия информации. То, что находится ближе на переднем плане воспринимается раньше, чем на заднем. Эффект заднего плана можно получить достаточно сильной размывкой. Объект, с нормальной резкостью, будет выглядеть расположенным на переднем плане, и восприниматься первым. Крупные и достаточно яркие, контрастирующие элементы так же воспринимаются раньше мелких, детализированных. Любой «выделенный» объект в композиции становиться тематическим или смысловым центром.

Ещё один способ заострить внимание на конкретной детали - это освещение. Любой источник света гарантированно заставляет обращать на себя внимание. Даже тень и затемнение некоторых деталей подразумевает существование источника света. И затемнённые детали оттесняются более яркими, освещёнными. Но, используя эффект освещения (внося источник света), можно совершить грубую ошибку. Человеческий глаз легко различает неправильное (не естественное) наложение теней. Поэтому, понятиям света и тени уделяется очень большое внимание в программе обучения художников.

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

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

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

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

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

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

Советы по проектированию Интернет баннеров:

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

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

Анимация. Динамический баннер привлекает больше внимания, нежели статический. Этот факт подтверждает статистика: у анимированных баннеров отклик больше на 25%. Главное - это удачное решение технической стороны анимации, ввиду небольшой величины файла изображения.

Размер баннера. Зависимость отклика баннера от его размеров очевидна. Чем больше, тем выше отклик. Однако следует помнить, что с увеличением занимаемого места, увеличивается и оплата за его размещение.

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

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

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

• синий на белом;

• черный на желтом;

• зеленый на белом;

• черный на белом;

• зеленый на красном;

• красный на желтом;

• красный на белом;

• оранжевый на черном;

• черный на пурпурном;

• оранжевый на черном;

• черный на пурпурном;

• оранжевый на белом;

• красный на зеленом.

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