1. Небажання впроваджувати психологічні прийоми
2. 1. Сліпе наслідування
3. 2. Тьмяний call-to-action
4. 3. Надмірна колірна палітра сайту
5. 4. Різний колір у однотипних елементів
6. 5. Однакові кольори у різнотипних елементів
7. 6. Недолік контрасту
8. 7. Нестандартний колір посилань
9. 8. Бляклий мінімалізм не для імпульсивних продажів
10. 9. Недоречне чорний
11. 10. Кольорові обмеження дизайнеру
12. висновки

Робота з кольором - найважливіший навик будь-якого веб-дизайнера. Грамотне володіння їм може принести сайту успіх, а навіть невелика помилка в створенні гами доставити багато клопоту в майбутньому. У цій статті фахівці сервісу AskUsers розберуть 10 помилок, які дизайнери допускають при роботі з кольором на сайті, і розкажуть вам, як їх уникнути.

Небажання впроваджувати психологічні прийоми

Існує чимало иссследований, які описує реакції і емоції користувача на колірну гамму сайтів. Це, безумовно, поле для спору - колірні переваги визначаються національною культурою, особистим досвідом, іншими причинами, але не враховувати зовсім настрій, що передається кольором, не можна. І при створенні сайтів точно так же варто застосовувати те, що нам відомо про сприйняття кольору.

Наприклад, помаранчевий - прекрасно мотивуючий до покупок колір. Відмінно передає заклики до дії, підходить для інтернет магазинів.

Зелений колір символізує довіру, а що може бути важливіше довіри, коли мова заходить про їжу?

1. Сліпе наслідування

Класична помилка замовника - проекція власних уявлень про дизайн. Ваш улюблений форум зроблений в теплих «карамельних» кольорах, основні тексти темно-коричневі, а фон повідомлень блідо-жовтий? Це не означає, що сайт, присвячений кондиціонерів, повинен успадкувати таку гаму. Кондиціонери повинні створювати відчуття свіжості - не дарма більшість сайтів такого роду витримується в блакитних і білих тонах.

Навіть якщо вам дуже подобається якийсь сайт, задумайтеся, перш ніж замовляти «точно таке ж, але про мої товари».

2. Тьмяний call-to-action

Якщо у вас на сайті є потужний заклик до дії, він повинен бути помітний користувачеві - за нього повинен зачепитися очей користувача. Блідий і не виділяється call-to-action, навіть якщо він відмінно сформульований, просто не буде працювати. Не так вже й хороша і протилежна ситуація, коли СТА буквально кричить «НАТИСНИ МЕНЕ». Заклик до дії має бути гармонійним і виділятися за рахунок вибору контрастних кольорів і дизайну.

3. Надмірна колірна палітра сайту

Найчастіше для оформлення сайту досить двох-трьох кольорів. Бувають, звичайно, дуже вдалі дизайнерські рішення і з великою кількістю квітів, але це винятки. Трапляється, два кольори виглядають відмінно, а при додаванні третього виходить каша.

Радимо використовувати при підборі колірної гами як мінімум колірної коло. При підборі з його допомогою квітів потрібно пам'ятати, що добре поєднуються один з одним сусідні кольори і ті, що розташовані навпроти.

Радимо також використовувати спеціалізовані сайти . Тут можна сформувати свою гаму або використовувати одну з вже готових.

На першому прикладі для оформлення тексту використовується 3 кольори, на другому всього два. Саме другий варіант виглядає краще і текст на ньому простіше читається.

4. Різний колір у однотипних елементів

Якщо на вашій посадкової сторінці є три кнопки оформлення замовлення, все вони повинні бути одного кольору. Після того, як користувач побачить першу, він буде сприймати інші так само. Якщо кнопки різних кольорів мають однакові функції, це може викликати деяке замішання.

На прикладі дві кнопки з одним і тим же призначенням на одному сайті. Невдале рішення.

5. Однакові кольори у різнотипних елементів

Протилежна ситуація - коли ви використовуєте «улюблений» колір скрізь, де вам здається, що треба зробити красиво. Кнопки, які передбачають дії, і неклікабельние елементи не повинні бути схожі за кольором, це порушує логіку використання сайту. Зробивши клікабельно кнопку певного кольору і стилю, ви створюєте патерн поведінки, і якщо подібний елемент виявиться неактивним, це порушить звичне поведінку користувача.

6. Недолік контрасту

У гонитві за незвичайної і яскравою кольоровою гамою дизайнери часто втрачають важливий момент: колір тексту і колір фону повинні бути достатньою контрастні, щоб текст було легко читати. Цей принцип наочно демонструється на прикладах нижче.

7. Нестандартний колір посилань

Користувач повинен мати можливість відрізнити посилання серед тексту, не чіпаючи мишку. Звичайно, колір тут - не єдиний інструмент дизайнера, але, мабуть, найдієвіший. Три правила:

• Посилання повинні бути видно без наведення на них курсора.
• При наведенні курсора посилання повинна змінювати колір.
• Відвідані посилання необхідно відзначати іншим кольором, це особливо критично, якщо мова про інформаційному сайті з безліччю публікацій.

На прикладі дизайнер вибрав вкрай невдалий колір оформлення посилань для навігації по портфоліо.

8. Бляклий мінімалізм не для імпульсивних продажів

Сьогодні дуже модно створювати Лендінзі, націлені, як правило, на імпульсивні продажу. Такі сторінки впливають на емоції людини, на пробудження в ньому одномоментного бажання купити товар. Інша модний напрямок у створенні сайтів - мінімалізм, він як правило, характеризується одним або двома кольорами, часто строгими.

Два цих модних віяння найчастіше несумісні. Не можна продавати в розрахунку на емоції, якщо ваш сайт не створює цих самих емоцій при перегляді.

Спокійні тони і строгий мінімалізм доречні, коли покупка раціональна. Так, мінімалізм може бути і не нудним, різнобарвним і дуже навіть емоційним, але зараз багато дизайнерів схильні до сірих тонів і «повітрю», що не дуже-то поєднується з продають посадочними сторінками.

Але це не означає, що продає емоційний Лендінгем повинен сяяти всіма кольорами веселки.

9. Недоречне чорний

Маркетологи вже давно привчили споживачів в відчутному світі до того, що чорний колір упаковки майже завжди означає високу вартість і преміальний рівень якості товару. Ось для прикладу елітна марка пельменів і дорогі крупи:

Наші звички, як і методи маркетологів, перекочовують з супермаркетів на простори інтернету, наприклад, сайт ювелірної компанії, виконаний в чорному кольорі, виглядає елегантно і дорого:

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

10. Кольорові обмеження дизайнеру

Це правило не стосується безпосередньо до дизайну сайту і підбору кольорової палітри. Мова про постановку завдань перед дизайнером при розробці сайту. Якщо у вас немає вже впровадженого фірмового стилю або впізнаваного логотипу (хоча і в цьому випадку правило частково є), не варто ставити дизайнеру суворі рамки і обмеження по використовуваним кольорам.

Ваше бачення може бути скільки завгодно прекрасним, але дозвольте дизайнеру запропонувати своє. Якщо після декількох спроб дизайнер так і не зможе показати щось, що вам сподобається, тільки тоді варто задавати йому жорсткі рамки в підборі колірної гами.

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

висновки

Колірна гамма створює перше враження користувача про сайт. Дуже важливо, щоб воно було позитивним. Але не можна просто так акцентувати увагу людей на кольорі, подавайте з його допомогою інформацію. Якщо ви не впевнені в правильності вибору, скористайтеся даними теплових карт або простим прийомом розмиття готового интерфейсного рішення. Суть прийому дуже проста: необхідно за допомогою графічних програм розмити всю станицю і подивитися які елементи і блоки привертають увагу в першу чергу. Перший, другий і третій блок, які привертають увагу, повинні бути найважливішими елементами з точки зору автоматизоване.

Для прикладу ми розмили перший екран Aviasales.ru - увагу привертають блоки елементів 1, 2 і 3. Після прочитання заголовка, тобто формування у користувача правильних очікувань, він (згадуємо про правила контрасту) буде дивитися на потрібні елементи вибору параметрів і call-to-action.

А подивіться, як чітко виділяється на розмитому тлі основна дія на сайті ostrovok.ru .

Якщо ваші інтерфейси проходять подібні тести на ура, то подальші поліпшення сайту необхідно проводити, грунтуючись на розумінні користувальницької психології, тобто аналізуючи фідбек від реальних користувачів. За допомогою запитань на кшталт: "Куди ви подивилися в першу чергу: на які 3 елементи сайту, і в якому порядку? Куди вам хочеться натиснути в першу чергу і чому? "В AskUsers ви зможете зрозуміти не тільки як розподіляється увагу користувачів, але і чому користувачі дивляться на ті чи інші елементи. Дана інформація допоможе виявити цілий ряд проблем в поточному інтерфейсі і знайти оптимальні варіанти їх вирішення.

Пам'ятайте, що форма підпорядковується змістом. Кольорове оформлення служить інструментом, що дозволяє сконцентрувати увагу користувача на важливою для користувача і власника сайту інформації.