Сайт в интернете – это ваше представительство.
Ваши услуги и товары будут настолько востребованы, насколько вы заинтересуете посетителя сайта воспользоваться ими. Это можно делать уже с первых секунд восприятия вашего сайта посетителем! Люди воспринимают 80% информации на визуальном уровне. Привычные для человека композиция, структура, цвет (стереотипы) определенных категорий сайтов, это то, что может привлечь внимание посетителя первых секунд посещения вашего сайта.
Да, именно благодаря стереотипам можно наиболее эффективно сформировать образ вашего сайта.
Стереотип – это некий стандарт, прочно сложившийся, постоянный образ Чего-нибудь. Чтобы проиллюстрировать стереотип на бытовом уровне, приведу пример. Что приходит вам в голову, когда вы слышите слово арбуз! Уж точно не бело-синий треугольник. То есть при виде зеленого шара с черными полосами на ум приходит лето, солнце и туалет.
Это и есть стереотипы, которыми надо научиться пользоваться при создании сайта! Они могут быть как положительными, так и отрицательными и по-разному влиять на разные группы населения, т.е. категории.
В нашей голове они облегчают процесс обработки получаемой информации, приравнивай полученные данные к уже имеющейся и закрепившейся базе знаний. В рекламной сфере это помогает, экономя время для создания новых стереотипов, быстрому и по большей части окончательному формированию отношения к источнику информации, т.е. к рекламируемому товару или услуге. Можно подстраиваться под стереотипы, усиливать позитивные и ослаблять негативные представления, а можно и формировать их, используя визуальные каналы восприятия. Говоря о психологии в дизайне сайта в первую очередь, конечно же, нужно обратиться к психологии восприятия цвета.
Учитывая то для какой аудитории предназначен ваш сайт, можно подобрать наиболее подходящие для ваших целей цвета. Каждый цвет основного спектра воздействует определенным образом, у него есть базовые психологические характеристики. Многие знают, что красный – побуждает к действию, голубой – умиротворяет, оранжевый – жизнерадостный, зеленый – склоняет к сотрудничеству и создает ощущение комфорта.
Но все же каждый человек воспринимает цвета с небольшими поправками на индивидуальность, внутреннее состояние, внешние факторы. Поэтому к выбору комбинаций красок в дизайне сайта нужно подходить вдумчиво, учитывая ассоциативный ряд, который может вызывать тематика сайта. Например, если на вашем сайте продаются продукты питания, то подойдут природные цвета: зеленый, желтый, оранжевый. Однако к оранжевому цвету нужно подходить с особым вниманием, иначе будет доминировать его отрицательная особенность – подавление, раздражение. Но, это относится и к другим цветам основного спектра. Любой цвет, достигая своих максимальных характеристик, имеет тенденцию изменять свойства своего влияния на противоположные. Кроме того разные оттенки спектра имеют собственные нюансы в психологическом восприятии. Например, темно-серый может восприниматься как цвет скуки, а светло-серый – способствовать охлаждению, успокоению.
У разных социальных групп восприятие цвета и цветовых сочетаний то же разное. Связано это с тем, что в разных группах разные ценности. Они по-разному воспринимают мир, по-разному взаимодействуют. С возрастом меняется жизненная позиция, соответственно и цветовая категория.
Например, авторитетные компании с традициями и историей использует коричневый цвет, который наводит на мысль о респектабельности, уважении и внимании к клиенту и безопасности.
Цвет оказывает влияние и на визуальное восприятие пространства сайта. Человек не в состоянии в один момент охватить все детали сознательно, но восприятие информации уже происходит. Так, например, голубой цвет психологически делает пространство сайта более открытым, расширяет его. Первое ощущение от вашего сайта будет для него комфортным. Возможно, тогда он задержится здесь…
После этого посетитель приступает к общему анализу увиденного. Т.к люди воспринимаем информацию слева направо и сверху вниз, поэтому в левой части сайта хорошо бы разместить такую информацию, которая сразу акцентирует внимание на значимой информации, которая отражает ваше самое главное сообщение к клиенту (потребителю). Например, это может быть краткое описание услуг, которые оказывает компания или девиз, миссия компании. Главная страница не должна быть перегружена информацией, а большое количество флеш-элементов может эмоционально утомить посетителя и потерять его внимание. Поэтому не стоит добавлять много красивых деталей только потому, что они красивые! Важно помнить о простой и понятной структуре. Картинки необходимо подбирать исходя из того, как их визуальный ряд дополняет и отражает текстовую информацию. Тогда посетитель сможет быстро ориентироваться на сайте.
Составить хороший заголовок дело не из простых! Он должен показывать суть, смысл текста, содержать вопрос или быть связан с концом текста.
Стилистика текста тоже оказывает определенное психологическое влияние на аудиторию. Вопрос, интрига или игра слов побуждают посетителя прочитать весь текст целиком – таким образом, вы сможете донести свое послание полностью. Стиль текста может содержать лексику, которая оказывает скрытое воздействие на уровне эмоций или обращений к базовым потребностями личности по Маслоу. В написании таких текстов вам поможет не только копирайтер. Хороший психолог сможет исправить и усилить воздействие ваших текстов.
Очень ответственным моментом является выбор шрифта! Шрифт должен привлечь внимание читателя и помочь ему сосредоточиться на чтении текста, выделить наиболее важные аргументы.
Каждый рисунок шрифта придаёт тексту своеобразную эмоциональную окраску. Шрифт должен соответствовать тому, что вы продаете. Шрифты более простого рисунка с прямоугольным контуром букв подходят для набора текстов, в которых рекламируется простота формы, прочность, надёжность предмета. Жирные тяжёлые шрифты уместно применять для рекламы стиральных машин, холодильников, электрополотёров, а лёгкие – для рекламы парфюмерных, ювелирных изделий, шёлковых тканей, кружев и т.п.
Человеческий глаз воспринимает не отдельные буквы, а группы слов и текста. Поэтому важно правильно выбрать размер шрифта, расстояние между буквами, строчками, длину строк и расположение текста на странице. Главный критерий – легкая читаемость. Если надо применить разный размер букв, то желательно рисунок (стиль) шрифта оставить прежним.
Цвет шрифта и фона всегда должны быть контрастными – чем резче выделяется шрифт на фоне, тем он легче читается и воспринимается посетителем сайта.
Веб-дизайн — это оформление информации. Говорят о нём, как элементе, существующем отдельно от текста и имеющем свои правила и законы. Не забывают упомянуть о его важности (обычно общими фразами).
Неужели графика, цвет, текст, заголовки и вся композиция не составляет информационное содержание страницы веб-сайта? Основная часть получаемой человеком информации воспринимается зрительными органами, что важно учесть при создании сайта. По статистике, зрительно воспринимается до 83% информации. И 40% этой информации запоминается человеком (против 20% от услышанного!). А изображение может нести в себе ничуть не меньше (а иногда и больше) информации, чем текст. Но как связать их воедино? Как заставить веб-дизайн «передавать» тематику страницы?
Этот вопрос лежит в скорее в области психологии, нежели информационных технологий.
Оставим в покое Юнга и Фрейда с их фундаментальными теориями и обратимся к «прикладной» психологии. Любое изображение вызывает у человека определенные ассоциации. Проблема заключается в том, что предметы, сюжеты или графические элементы вызывают у разных людей совершенно различные ассоциации. И, если Вы при создании сайта строите изначально ошибочный ассоциативный ряд, можно «завести» пользователя совсем не туда, куда изначально планировалось. Поэтому, для создания устойчивых ассоциаций, настроения или образа, часто нужно дополнять композицию второстепенными элементами, укрепляя тематическую линию. Такими элементами может быть что угодно: изображение, слово (первичный источник информации) или целая фраза, линия, размывка, коллаж. Главное – стремиться не к слепому утяжелению, структуры сайта, а к созданию устойчивого ассоциативного ряда, относящегося к конкретной области, в соответствии со стоящими перед веб-сайтом задачами.
Вы, наверное, уже заметили, что на сложных, детализированных, иногда непонятных с первого взгляда изображениях, хочется задержать взгляд — зрителю интересно «разгадать загадку», и разгадка скрытого смысла приносит эстетическое удовлетворение и положительные эмоции. Такие «шарады» надолго остаются в памяти. Но немногие из них несут действительно глубокий смысл или передают настроение. Большинство похоже на простую мозаику, набор не связанных между собой графических элементов. Творчество дизайнера при создании сайта в индивидуальных работах может быть любым — это его личное дело. Здесь имеет место понятие «дизайн ради дизайна», которое, к сожалению, часто превращается в стремление эпатировать зрителя. Но в оформлении конкретного заказа, рассчитанного на большую, многослойную аудиторию, важно не перестараться. Пользователь, оценивая оформление веб-сайта, всегда стремится сделать вывод, ищет законченность в представлении информации. И, сделав его, испытывает эстетическое удовлетворение. Задача дизайнера — помочь ему в этом. Построить «твёрдый», конкретный ассоциативный ряд, раскрывая тему. Простой пример — использование перевёрнутого текста. Это простая преграда для его восприятия, и пользователь способен прочитать этот текст, но решение этой загадки приносит подсознательное удовольствие и заостряет внимание на этом слове или фразе. Другой вопрос — уместно ли такое действие в конкретной ситуации.
Теперь поговорим о способах «умелого эпатирования» и инструментах для достижения результата. Первое, на чём хочется остановить внимание — это способы проведения пользователя по композиции, построения ассоциативного ряда в нужном направлении. Восприятие текстовой информации (в большинстве языков) происходит слева направо и сверху вниз. Это правило хорошо помогает в карикатурах (достаточно простой пример), когда присутствует сюжетный текст (например, вопрос — ответ). Чтобы зритель правильно понял сюжет, нужно заставить его прочесть сначала вопрос, а потом ответ. Текст вопроса выносится в верхнюю часть изображения, поближе к левому углу, а текст ответа – в нижнюю часть изображения (или правее вопроса). Это первый принцип, но есть и другие способы заострить внимание на конкретных деталях. Существует и пространственное восприятие информации. Предмет, находящийся ближе к зрителю (на переднем плане), подсознательно воспринимается немного раньше, чем-то, что расположено на плане заднем. Эффект заднего плана можно получить путем достаточно сильной размывки. Объект, обладающий стандартной резкостью, при таком способе выделения будет восприниматься прежде других. Крупные и достаточно яркие (контрастирующие) элементы также воспринимаются раньше мелких, детализированных. Любой «выделенный» объект композиции становится тематическим или смысловым центром. Специалисты «строгановки» советуют использовать не более трех тематических центров при пяти-семи управляющих элементах (в рекламных материалах – и того меньше). Я оставлю данный совет без комментариев, но в некоторых ситуациях я все же позволил бы себе не согласиться (взять хотя бы композиции, основанные на использовании ритма!).
Ещё один способ заострить внимание на конкретной детали веб-дизайна — это освещение. Любой источник света гарантированно заставляет обращать на себя внимание. Даже тень и затемнение некоторых деталей подразумевает существование источника света. И затемнённые детали «оттесняются» на задний план более яркими, освещёнными.Будьте осторожны — при использовании эффекта освещения (внесении источника света), легко совершить грубую ошибку. Человеческий глаз легко различает неправильное, неестественное наложение теней. Именно поэтому понятиям света и тени уделяется очень большое внимание в программе обучения художников. Вот один конкретный пример из моей практики: долгие обсуждения световой схемы в дизайн-макете вызвали у клиента естественное стремление к творчеству (достаточно частая ситуация), однако его предложение повергло меня в шок. Он предложил сделать графический элемент тёмно-синим, а тень его – жёлтой. Убеждения в неправильности выбора порождали вопросы наподобие «но это же можно нарисовать?». Можно, конечно, но … мне не хотелось. Такие «притянутые за уши» графические решения являются неестественными. Подобная ложь подсознательно вызывает чувство сомнения и недоверия.
Есть ещё одна опасность. Никогда не «играйте» с пропорциями и перспективой в реалистичных изображениях и коллажах без конкретной цели. Законы пространственной геометрии и естественных пропорций — это законы природы. Спросите у людей, имеющих высшее художественное образование, сколько времени они посвятили изучению перспектив и пропорций. Человеческий глаз легко замечает ложное в этой области. И есть опасность, что пользователь подсознательно, отвлекаясь от темы, сосредоточит внимание на поиске источника зрительного дискомфорта в изображении и сделает совершенно не те выводы, на которые планировалось направить веб-дизайн. Другая ситуация – это может быть сделано сознательно, для сосредоточения внимания (например, чтобы вызвать ощущение зрительного парадокса). В этом случае необходимо постараться убрать другие сложные элементы, избегая конфликтов.
Теперь – немного о «вечном» — о цвете, который очень важен для веб-дизайна. Вы, скорее всего, уже не раз читали различные материалы на эту тему и не раз видели статьи о психологическом восприятии цветов, которые используются при создании сайта. Советую всегда скептически подходить к этому вопросу. Оставим в качестве непреложной истины физические аспекты сочетания и свойств цветов, остановимся на психологии. Многие выводы сделаны на основе достаточно спорных утверждений. В вопросе восприятия конкретного цвета психологи подходят индивидуально к каждому человеку. Дело в том, что конкретный цвет у каждого ассоциируется с конкретным образом, вещью или событием в его жизни и находится в подсознании человека. Эти ассоциации могут быть различными — как положительными, так и отрицательными. Это относится не ко всем цветам подряд, а только к некоторым основным (впрочем, у всех этот эффект проявляется по-разному). Также восприятие цвета может носить тематическую направленность. Например, красный — в технической области он символизирует опасность, а в области моды — чувственность и смелость. Если рассматривать красный цвет в «природном» контексте, то, скорее всего, он породит ассоциации со сладостью спелых ягод. А в социальном контексте он заставит вспомнить о коммунизме, но у жителей стран дальнего зарубежья таких ассоциаций может и не возникнуть. Перед нами достаточно разнообразная картина ассоциаций, связанных с красным цветом. Можно забыть многие утверждения, констатирующие однозначность восприятия. Поэтому очень осторожно выбирайте цвета для оформления каждого конкретного веб-сайта и избегайте давления одного тона, не продумав тематику цвета. Может быть, у самого важного клиента, он вызовет поток негативных ассоциаций. Не стесняйтесь опрашивать своих знакомых в процессе построения композиции, интересуясь их мнением и ассоциациями, возникающими у них — это очень полезная практика.
Линии, стрелки, направленный градиент, ритм вызывают устойчивое направляющее, указывающее воздействие. Но, используя их, избегайте ситуации, когда приходится просматривать композицию «против шерсти». Это вызывает дискомфорт на уровне подсознания, подспудное желание найти его причину.
Шрифт, которым оформлен текст, присутствующий на веб-сайте, также может вызывать различные ассоциации. Например, готический шрифт вызывает ассоциации с культурой Европы, он не может применяться в контексте других культур или неподходящего исторического периода. Этими вопросами должны заниматься компетентные специалисты, подбор шрифтов — целая наука, и для изучения её существует специальная литература (например, книга Эмиля Рудера «Типографика»).
Если вы — веб-дизайнер, то у вас может возникнуть ещё одна проблема — процесс загрузки страницы. Будет обидно, если элементы, управляющие ассоциативным рядом, будут загружены не в той последовательности. Но это уже не такая большая проблема. Если вам действительно нужно показать всё изображение сразу, то вы можете использовать «слой загрузки», закрывающий всю страницу до тех пор, пока она не загрузится целиком, или убрать этот слой, на каком-то этапе загрузки страницы с помощью скрипта. Но не забывайте предусмотреть способ его «ручного» отключения – для «нетерпеливых» пользователей.
Тема психологии в веб-дизайне неисчерпаема. Надеюсь, в рамках небольшой статьи я смог объяснить важность психологии в веб-дизайне. Рабочее место психолога во многих рекламных агентствах уже давно существует. А дизайнер просто обязан быть неплохим психологом. Если вы стремитесь к профессионализму, постарайтесь прочесть соответствующую литературу, найти возможность общения с профессиональным практикующим психологом. Не оставляйте без внимания различные статистические данные и публикации результатов исследований. При создании сайта не стесняйтесь спрашивать совета и чаще обсуждайте свои работы с другими.
