«Контраст — це різниця яскравості та/або кольору фону та об’єкта або декількох об’єктів, яка робить один об’єкт (або його зображення на моніторі) більш помітним», – Wikipedia.
В реальному світі, контрастність просто допомагає нам відрізняти об’єкти один від одного. В інтернеті контрастність дуже важлива, оскільки вона дозволяє дизайнерам і маркетологам фактично керувати увагою відвідувачів, які прийшли на їх сайти — це робиться за допомогою кольору або без нього.
Як контрастом кольорів привернути увагу
Щоб наочно проілюструвати, як колірний контраст можна використовувати для виділення найважливішого елемента цільової сторінки, давайте розглянемо домашню сторінку програми Mailchimp в різних дозволах.
Ви розумієте, що я маю на увазі? Праворуч є невелике зображення червоного кольору – контрастність кнопки закликає до дії. Цей фрагмент сторінки сильно виділяється на тлі інших елементів, що максимально привертає увагу відвідувача. У поєднанні з якісним копірайтингом це може призвести до значного збільшення кількості переходів.
Можна переборщити з «попсою»?
На жаль так, можна. Насправді, цим часто зловживає бізнес, бажаючи виділити свої веб-сайти, вважаючи що це естетично і професійно. Дизайнери ж особливо ненавидять запити типу «зробити сайт попопсовей».
Причина в тому, що словосполучення «зробити це попопсовей» не говорить ні про що, але багато маркетологи вірять, що таким чином максимально точно ставлять завдання дизайнеру. Пропонуємо вам відеоролик на тему того, чому вираз «просто зроби його попопсовей» так ріже вухо дизайнера.
Основна проблема «зроби попопсовей» полягає в наступному: втрачається професійний підхід. Дизайн, надмірно перенасичений фарбами і великою кількістю анімації, насправді більше підходить для диснеївських мультфільмів…
.. але не завжди – подібне рішення може відмінно вписатися в рекламну кампанію професійних послуг. Наприклад, таких як надає «Bank of America».
Психологія ефекту контрасту
Дія ефекту контрасту грунтується на прагненні людини все порівнювати. Щоб пояснити, що саме я маю на увазі, я створив ці кілька зображень (всі вони розміщені з дотриманням авторських прав):
Ви розумієте, що я тільки що зробив? Я зробив чоловіка середніх років молодше або старше залежно від того, як я хочу вам представити – я просто змінив людини, з яким його порівнюю. Цей трюк постійно використовують у сфері маркетингу і реклами, і він має великий успіх.
Як застосовувати ефект контрасту для Web
Ефект контрасту можна легко використовувати в онлайн-сфері. Візьмемо, приміром, ServerDensity, доходи якого в певний момент збільшилися на 114 %. Те, що вони зробили, досить просто — взяли всі ціни з кожної конкретної упаковки, і, визначивши їх середнє значення, порівняли його з мінімумом і максимумом (а також представили це все візуально, у вигляді графіка).
Маючи максимальну і мінімальну ціни товару, вони підкреслили середнє значення, що є класичним прикладом використання психологічного контрасту. Більшість людей, маючи досить високі вимоги до певного товару, не бажають платити за це високу ціну. У підсумку вони обирають середній варіант.
Ось ще один дуже цікавий психологічний контраст – експеримент з ціноутворенням, проведений Деном Аріелі, коли він помітив особливість визначення ціни на журнал «Economist».
Він опитав сотні студентів Массачусетського технологічного інституту на предмет того, який варіант вони підписалися. В результаті 16 людей вибрали варіант за $59, але 84 студента із запропонованих варіантів передплати вибрали останній, де пропонується паперовий варіант плюс веб-розсилка за $125.
Після цього Ден Аріелі прибрав середній із запропонованих варіантів і протестував вже іншу групу — результати виявилися наступними: 68% опитаних вибрали варіант передплати за $59 і 32% зголосилися придбати журнал за $125.
Пропоную вам ознайомитися з графіком результатів двох тестувань, що дозволяє наочно побачити виконання завдання:
Ці два проведених опитування наочно демонструють застосування ефекту контрасту в реальних проектах. Якщо ви використовували щось подібне для досягнення своїх цілей або ж у вас були інші цікаві схожі випадки, ми можемо поспілкуватися на цю тему в коментарях.
Переклад статті «The Importance of Color & Contrast in Increasing Sales and Conversions» був підготовлений дружною командою проекту Сайтостроение від А до Я.
