<
УЦ Контакт

Лидер IT образования

Как приятно знать, что ты что-то узнал (Мольер)

 
03056, Киев, пер. Ковальский 13, 1-й этаж, офис №2
 
Программы курсов

Акция! Студентам - Скидка 15%! Слушателям IT Academy бесплатное посещение English Club

Статья>>Психологія в дизайні

Ця стаття більше зацікавить дизайнерів. Ті з них, хто має вищу освіту в цій галузі, вже знайомі з багатьма, з перерахованих тут фактів. Але статистика показує, що основний відсоток, навіть відомих дизайнерів, не має спеціалізованої освіти. Я часто зустрічаю міркування, що web дизайн - це оформлення інформації. Говорять про нього як елементі, існую-чому окремо від тексту і має свої правила і закони. Не забувають згадати про його важливість (звичайно загальними фразами). Стоп! А хіба графіка, колір, текст, заголовки і вся композиція не складає інформаційний зміст сторінки? Основний відсоток одержуваної людиною інформації, сприймається зором. За статистикою сприймається 83% інформації візуально. І 40% з неї запам'ятовується людиною (проти 20% від почутого!). А зображення може нести в собі не трохи не менше (а іноді і більше) інформації, ніж текст. Але як зв'язати їх воєдино? Як змусити дизайн нести тему сторінки? Ось це вже питання психології. Ні, залишимо в спокої Юнга та Фреда з їх фундаментальними теоріями і звернемося до прикладної психології. Будь-яке зображення викликає у людини асоціації. Але проблема в тому, що одні предмети, сюжети або графічні елементи викликають у всіх людей (вірніше, у багатьох) однакові асоціації, а інші - абсолютно різні. І, якщо ви помилково будуєте асоціативний ряд, то можна завести користувача зовсім не туди, куди вам хотілося. Тому, для побудови стійких асоціацій, настрою або образу, часто потрібно доповнювати композицію елементами, зміцнюючи тематичну лінію. Такими елементами може бути що завгодно: зображення, слово (первинне джерело інформації) або ціла фраза, лінія, розмивка, колаж. Головне, прагнути не до сліпого ускладнення, а до створення стійкого асоціативного ряду по конкретній темі і у відповідності зі що стоять перед сайтом завданнями. Ви, напевно, вже помітили, що на складних, деталізованих, іноді не зрозумілих з першого погляду зображеннях, хочеться затримати погляд - глядачеві цікаво "розгадати загадку" і розгадка сенсу приносить естетичне задоволення і позитивні емоції. Такі "шаради" на довго залишаються в пам'яті. Але не багато хто з них дійсно несуть тему або настрій. Більшість схоже на просту мозаїку, зборище не зв'язаної між собою графічної інформації. Творчість дизайнера в індивідуальних роботах може бути будь-яким - це його особиста справа. Тут працює поняття "дизайн заради дизайну". Часто перетворюючись на прагнення епатувати глядача. Але в оформленні конкретного замовлення, розрахованого на велику і різну аудиторію, важливо не перестаратися. Користувач, переглядаючи оформлення, завжди прагне зробити висновок, шукає закінченість в розумінні представленої інформації. І зробивши його, випробовує естетичне задоволення. Завдання дизайнера допомогти йому в цьому. Побудувати твердий, конкретний асоціативний ряд, розкриваючи тему. Простий приклад - коли використовується перевернутий текст. Це проста перешкода для його сприйняття і користувач здатний прочитати цей текст, але рішення цієї загадки приносить підсвідоме задоволення і загострює увагу на цьому слові або фразі. Інша справа - чи доречно така дія в конкретній ситуації. Тепер, про способи і інструментах. Перше, на чому хочеться зупинити увагу - це способи проведення користувача по композиції, побудова асоціативного ряду в потрібному напрямку. Сприйняття текстової інформації (у більшості мов) відбувається зліва направо і зверху вниз. Це правило добре допомагає в карикатурах (достатньо простий приклад), коли є сюжетний текст (наприклад, питання - відповідь). Щоб глядач правильно зрозумів сюжет, потрібно примусити його прочитати спочатку питання, а потім відповідь. Текст питання виноситься наверх зображення, ближче до лівого кута, а текст відповіді вниз зображення або правіше від питання. Це перший принцип, але є й інші способи загострити увагу на конкретних деталях. Є ще просторове поняття сприйняття інформації. Те, що знаходиться ближче (на передньому плані) сприймається раніше, чимось, що на задньому. Ефект заднього плану можна отримати досить сильною розмиванням. Об'єкт, з нормальною різкістю, виглядатиме розташованим на передньому плані, і сприйматися першим. Великі і досить яскраві (контрастують) елементи так само сприймаються раніше дрібних, деталізованих. Будь "виділений" об'єкт в композиції стає тематичним або смисловим центром. Фахівці "Строганівки" радять використовувати не більше 3 тематичних центрів при 5-7 керуючих елементах (у рекламних матеріалах ще менше). Я залишу це без коментарів, але в деяких ситуаціях дозволю собі не погодитися. Взяти хоча б композиції, засновані на використанні ритму ... Ще один спосіб загострити увагу на конкретній деталі - це освітлення. Будь-яке джерело світла гарантовано примушує звертати на себе увагу. Навіть тінь і затемнення деяких деталей має на увазі існування джерела світла. І затемнені деталі відтісняються яскравішими, освітленими. Але, використовуючи ефект освітлення (вносячи джерело світла), можна зробити грубу помилку. Людське око легко розрізняє неправильне (не природне) накладення тіней. За цим, поняттям світла і тіні приділяється дуже велика увага в програмі навчання художників. Ось один приклад з моєї практики. Довгі обговорення світлової схеми в дизайн макеті, викликали природне прагнення до творчості у клієнта (досить часта ситуація). Але його пропозицію повалило мене в шок. Він запропонував зробити графічний елемент темно синього кольору, а тінь від нього жовтою! Переконання, що це не правильно, породили питання: ... але це ж можна намалювати? Можна, звичайно, але ... мені не захотілося. Такі "притягнуті за вуха" графічні рішення є неприродними. Подібна брехня підсвідомо викликає почуття сумніву і недовіри. Є ще одна небезпека. Ніколи не намагайтеся грати з пропорціями і перспективою в реалістичних зображеннях і колажах без конкретної мети. Закони просторової геометрії і природних пропорцій - це закони природи. Запитайте у людей, які мають вищу художню освіту, скільки часу вони присвятили вивченню перспектив і пропорцій. Людське око легко помічає брехню в цій області. І є небезпека, що користувач підсвідомо, відволікаючись від теми, зосередить увагу на пошуку джерела зорового дискомфорту в зображенні і зробить абсолютно інші висновки, ніж вам хотілося. Інша ситуація, коли це зроблено свідомо, зосереджуючи увагу на цьому (наприклад, щоб викликати зоровий парадокс). Тоді, потрібно постаратися прибрати інші складні елементи, уникаючи конфліктів. Тепер, трохи про "вічне" - про колір. Ви, швидше за все, вже не раз читали різні матеріали на цю тему і не раз бачили статті про психологічне сприйняття кольорів. Раджу завжди скептично підходити до цього питання. Залишимо безперечним фізичні аспекти поєднання і властивостей кольорів, а зупинимося на психології. Багато висновки зроблені на основі досить спірних тверджень. У питанні сприйняття конкретного кольору, психологи підходять індивідуально до кожної людини. Справа в тому, що конкретний колір у кожного асоціюється з конкретним чином, річчю або подією в його житті і знаходиться в підсвідомості людини. А ці асоціації можуть бути різними - як позитивними, так і негативними. Це відноситься не до всіх кольорів підряд, а тільки до деяких основних (у всіх по-різному). Ще, сприйняття кольору може носити тематичну спрямованість. Наприклад, червоний. У технічній області він символізує небезпеку, а в області моди чуттєвість і сміливість. Якщо взяти червоний колір в природі, то, швидше за все, він породить асоціації з солодкістю стиглих ягід. А в соціальній сфері він змусить згадати про комунізм, але у жителів інших країн цього може і не бути. Вийшла досить різноманітна картина асоціацій, пов'язаних з червоним кольором. І можна сміливо забути багато однозначні твердження. За цим, дуже обережно вибирайте кольори для кожної конкретної ситуації і уникайте тиску одного суцільного кольору, не продумавши тематику кольору. Може бути, у самого важливого клієнта, він викличе абсолютно негативні асоціації. Не соромтеся опитувати своїх знайомих, при побудові композиції, цікавлячись їхньою думкою і асоціаціями - це дуже корисна практика. Лінії, стрілки, спрямований градієнт, ритм викликають стійке направляюче, що вказує вплив. Але, використовуючи їх, уникайте ситуації, коли доводитися переглядати композицію "проти шерсті". Це викликає дискомфорт на рівні підсвідомості і підсвідоме бажання знайти його причину. Шрифт також може викликати різні асоціації. Наприклад, готичний шрифт викликає асоціації з культурою Європи і він не може застосовуватися в темі інших культур або історичного періоду. Але це вже типографіка і для вивчення її існує спеціальна література (наприклад, книга Еміля Рудера "Типографіка"). Якщо ви web дизайнер, то у вас може виникнути ще одна проблема - процес завантаження сторінки. Буде прикро, якщо елементи, що управляють асоціативним рядом, будуть завантажені не в тій послідовності. Але це вже не така велика проблема. Якщо вам дійсно потрібно показати все зображення відразу, то ви можете використовувати "шар завантаження", що закриває всю сторінку до тих пір, поки вона не завантажиться цілком, або прибрати цей шар, на якомусь етапі завантаження сторінки за допомогою скрипта. Але не забувайте проставити спосіб його "ручного" відключення, для "нетерплячих" користувачів. Ця стаття може дописуватися нескінченно, але, сподіваюся, я зміг пояснити важливість психології в дизайні. Робоче місце психолога, в рекламних агентствах, вже давно існує. А дизайнер просто зобов'язаний бути непоганим психологом. Якщо ви прагнете до професіоналізму, то постарайтеся прочитати відповідну літературу і знайти можливість спілкування з психологом. Не залишайте без уваги різні статистичні дані і публікації про результати досліджень. Не соромтеся запитувати ради і частіше обговорюйте свої роботи з іншими. Раджу виховувати правильна побудова асоціативного ряду в сюжеті. Завжди робіть висновки самі і скептично ставитеся до висновків інших. А книжки Д. Карнегі залиште в спокої, їх треба вивчати в школі.

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