Психология в веб-дизайне

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

Я часто встречаю рассуждения, основанные на мысли, которая звучит следующим образом: `веб-дизайн — это оформление информации`. Говорят о нём, как элементе, существующем отдельно от текста и имеющем свои правила и законы. Не забывают упомянуть о его важности (обычно общими фразами).

Неужели графика, цвет, текст, заголовки и вся композиция не составляет информационное содержание страницы веб-сайта? Основная часть получаемой человеком информации воспринимается зрительными органами, что важно учесть при создании сайта. По статистике, зрительно воспринимается до 83% информации. И 40% этой информации запоминается человеком (против 20% от услышанного!). А изображение может нести в себе ничуть не меньше (а иногда и больше) информации, чем текст. Но как связать их воедино? Как заставить веб-дизайн "передавать" тематику страницы?
Этот вопрос лежит в скорее в области психологии, нежели информационных технологий.

Нет, оставим в покое Юнга и Фрейда с их фундаментальными теориями и обратимся к «прикладной» психологии. Любое изображение вызывает у человека определенные ассоциации. Проблема заключается в том, что предметы, сюжеты или графические элементы вызывают у разных людей совершенно различные ассоциации. И, если Вы при создании сайта строите изначально ошибочный ассоциативный ряд, можно «завести» пользователя совсем не туда, куда изначально планировалось. Поэтому, для создания устойчивых ассоциаций, настроения или образа, часто нужно дополнять композицию второстепенными элементами, укрепляя тематическую линию. Такими элементами может быть что угодно: изображение, слово (первичный источник информации) или целая фраза, линия, размывка, коллаж. Главное - стремиться не к слепому утяжелению, структуры сайта, а к созданию устойчивого ассоциативного ряда, относящегося к конкретной области, в соответствии со стоящими перед веб-сайтом задачами.

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

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

Ещё один способ заострить внимание на конкретной детали веб-дизайна — это освещение. Любой источник света гарантированно заставляет обращать на себя внимание. Даже тень и затемнение некоторых деталей подразумевает существование источника света. И затемнённые детали «оттесняются" на задний план более яркими, освещёнными.Будьте осторожны — при использовании эффекта освещения (внесении источника света), легко совершить грубую ошибку. Человеческий глаз легко различает неправильное, неестественное наложение теней. Именно поэтому понятиям света и тени уделяется очень большое внимание в программе обучения художников. Вот один конкретный пример из моей практики: долгие обсуждения световой схемы в дизайн-макете вызвали у клиента естественное стремление к творчеству (достаточно частая ситуация), однако его предложение повергло меня в шок. Он предложил сделать графический элемент тёмно-синим, а тень его - жёлтой. Убеждения в неправильности выбора порождали вопросы наподобие «но это же можно нарисовать?». Можно, конечно, но ...мне не хотелось. Такие «притянутые за уши» графические решения являются неестественными. Подобная ложь подсознательно вызывает чувство сомнения и недоверия.

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

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

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

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

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

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

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