Психология Web-дизайна. Искусство Web-гипноза

При одинаковом наборе элементов сайт можно сделать уютным и притягательным, а можно – холодным или сухо деловым. Соблюдая определенные правила, можно легко добиться требуемой эмоциональной окраски.

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

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

Какими именно средствами можно привлечь и удержать внимание посетителей, вызвать доверие или побудить к конкретным действиям?

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

Человеческое восприятие

Web-дизайнер, решившийся внедрить в свое искусство аспекты психологической науки, в первую очередь должен начать с анализа процесса восприятия человеком разнородной информации. Речь идет о восприятии за довольно короткий промежуток времени (с ходу), ведь время пребывания посетителя на Web-странице может быть очень непродолжительным: если ему что-то сразу не понравилось, то достаточно несколько секунд и клика мышкой, чтобы навсегда уйти по ссылке на другой Web-ресурс.

По мнению психологов, с ходу человек способен воспринять 7(+-)2 структурных единицы или блока изучаемого материала, будь то графические объекты или текст. Это означает, что если, к примеру, использовать меню из более чем 7 элементов либо десяток информационных блоков на одной странице, то сайт может оказаться очень тяжелым для восприятия.

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

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

Магия слов

Несмотря на широкие возможности в графическом оформлении современного Web-ресурса, первостепенное значение по-прежнему имеет текстовая часть сайта.

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

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

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

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

Наиболее удобны для чтения строки длиной 26-40 символов. Более длинные строки плохо воспринимаются, так как требуют нескольких повторных просмотров для выделения слов текста.
Многие не могут ничего продать на очень хорошо выполненном сайте только потому, что люди ошеломлены грамматическими построениями текстовой части. Чтобы текст в целом был комфортен для восприятия, можно использовать так называемый «телеграфный стиль», то есть писать короткие и простые слова, фразы, предложения.

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

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

Как вы яхту назовете...

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

Заголовки – один из основных помощников в деле привлечения внимания читателя, формировании читательской аудитории сайта. Исследования австралийского специалиста в области Web-дизайна Колина Вейлдона выявили, что неудачно выбранный текст заголовка может уменьшить доходчивость соответствующего текста с 67 до 17%.

Эмоции в шрифтах

Говоря об актуальности подбора шрифтов, необходимо заметить, что основные требования, предъявляемые к шрифту, - это читаемость. Однако каждое шрифтовое начертание говорит на своем собственном языке. Разные стили начертания букв (гарнитуры) несут с собой различное эмоциональное наполнение: шрифты с засечками (serif) традиционны и консервативны, тогда как (без засечек, sans serif) выглядят более современно и молодо.

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

Документы (печатные и электронные), набранные относительно мелким шрифтом (например, 8 пунктов) с небольшим разнообразием размеров и начертаний символов, создают спокойный, уравновешенный стиль, а сообщения, использующие разнообразные размеры и более крупный (например, 12 пунктов) шрифт для основного текста, выглядят более импульсивными.

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

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

Согласно исследованиям Колина Вейлдона, незначительные изменения межстрочного интервала

могут увеличить число понявших текст от 77 до 98%, изменение стиля заголовков способно

увеличить коэффициент удобочитаемости от 57 до 92%, а неудачная комбинация шрифтов

способна снизить доходчивость сообщения до 3%.

Живопись для сайта

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

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

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

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

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

Цветные рычаги воздействия

Одним из самых мощных средств воздействия на восприятие человека является цвет. Именно этот элемент часто становится камнем преткновения для Web-разработчика при создании нового ресурса Internet.

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

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

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

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

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

Светлые цвета, например белый или желтый, как бы распространяются на расположенные рядом с ними более темные цвета и уменьшают окрашенные в эти цвета поверхности (эффект иррадации). Это явление играет существенную роль при конструировании шрифтов. В то время как, например, буквы E и F сохраняют на белом фоне свою полную высоту, высота таких букв, как O и G, несколько уменьшается, еще больше уменьшаются из-за острых окончаний буквы A и V.

Еще одна сторона человеческого восприятия — возникновение чувств, переживаний под влиянием того или иного цвета.

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

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

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

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

Рекомендации напоследок

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

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

Какую именно цветовую гамму выбирать для своего сайта, как строить графику и текстовое наполнение – нужно решать в каждом конкретном случае. Единственный совет, который можно в итоге дать: пользуясь Web-инструментарием, помните о заключенной в нем силе, применяйте его продуманно – и получите превосходный результат!

Автор - Сергей Коловоротный

Статьи по теме

Гигантская подборка сервисов для веб-дизайна. Логотипы, фотобанки, иконки, шрифты и прочее

Онлайн-сервисы для работы с визуальным контентом и дизайном сайта, собрали бесплатные и недорогие площадки. Материал обновлен...

2023-12-28

Дизайн сайта: особенности творческого процесса

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

2019-08-07

Создание логотипа: семь сервисов в помощь

После того, как основная бизнес-идея сформирована, определены продукты и услуги, которые компания будет продвигать на рынке, возникает н...

2019-01-30

20 ценных уроков дизайна от "Мстителей"

Может это и звучит как-то странно, но марвеловские супергерои могут не только скрасить наш досуг своими приключениями, но и дать нам нес...

2015-05-11

15 трендов веб дизайна в 2014-2015 году

1. Первостепенность дизайна для мобильных устройств. Разработка дизайна теперь начинается с маленьких экранов, следующим шагом являетс�...

2014-06-05

Как не надо верстать сайт или 7 ошибок начинающего веб-мастера

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

2011-12-27

Факторы, определяющие хороший логотип

Если вы решили создать логотип, то нужно подумать о том, где он может использоваться. Существует пять факторов, которые определяют наско�...

2011-12-27

Борьба поисковиков и оптимизаторов

Сегодня интернет стал реальной бизнес-средой, и позиция сайта компании в результатах поискового запроса оказывает значительное вли�...

2011-04-13

Почему не стоит скачивать шаблоны с варезников

Нам часто задают один и тот же вопрос, — какой смысл платить нам за установку шаблона, если полно варезников, где все шаблоны можно скача�...

2011-04-13

О пользе точности темплейтов

Лирическое отступление: Темплейты для сайта (сториборды, вайрфреймы) - спроектированные проволочные схемы страниц сайта. Темплейты пок...

2011-04-07

Методы веб-дизайна и юзабилити

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

2011-04-07

Шаблонные решения для web-сайтов

При проектировании стандартных элементов веб-сайта посмотрите, как это сделано на других веб-сайтах, и не изобретайте велосипед. Меньше...

2011-04-07

Как сделать картинки в стиле Карсона

Самое модное сейчас в дизайне — шрифты. Их в работе должно быть как можно больше. Неважно, ЧТО вы этими шрифтами пишете, главное — раск�...

2011-04-07

Переживания должны передаваться

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

2011-03-29

Про заказчиков

Сегодня наш выпуск посвящён не дизайну или дизайнерам, а тому, с кем они имеют дело — заказчикам. Заказчики делятся на несколько групп. Т...

2011-03-29