СЪС използвайки HTMLМожете да зададете цветовете на всички връзки на страницата, както и да промените цветовете за отделните връзки.

Задайте цвета на всички връзки на страницата

Цветовете на връзките се задават като атрибути на тагове .

Атрибутите не са задължителни и ако не са посочени, се използват стойности по подразбиране.

връзка – Определя цвета на връзките на уеб страница (цветът по подразбиране е син, #0000FF).

vlink - цвят на вече посетените линкове. Цветът по подразбиране е лилав, #800080. IN HTML цветове

обикновено се дават с числа в шестнадесетичен код във формата #rrggbb, където r, g и b означават съответно червения, зеления и синия компонент.

Пример 1: Задаване на цветовете на връзката

Цвят на връзката Съдържание на сайтаЦветът не трябва да бъде посочен в шестнадесетичен формат;

ключови думи

. В този пример цветът на фона на уеб страницата е черен, а цветът на връзката е червен.

По-удобно е да използвате CSS за промяна на цвета на връзките. За да зададете цвета за всички връзки на уеб страница, се прилагат следните псевдокласове и се добавят към селектора A.

посетено — Стил за посетената връзка.

активен — Стил за активната връзка. Връзката става активна, когато щракнете върху нея.

Пример 1: Задаване на цветовете на връзката

За да направим това, ще използваме свойството color style; то задава цвета на конкретен текст, в този случай връзки.

Пример 2. Цвят на връзките, зададен чрез стилове

Използване на стилове , където #rrggbb е цветът в шестнадесетична форма. Можете също да използвате имена на цветове или да посочите цвета във формат: rgb (132, 33, 65) . Десетичните стойности за червено, зелено и синьо са показани в скоби (пример 3).

Пример 1: Задаване на цветовете на връзката

Интернет маркетинг

Използваемост

Този пример показва три различни начина за задаване на цветове с помощта на стилове.

Работата с цвят е най-важното умение на всеки уеб дизайнер. Правилното му използване може да донесе успех на сайта и дори малка грешка при създаването на гама може да причини много проблеми в бъдеще. В тази статия ще разгледаме 10 грешки, които дизайнерите правят, когато работят с цвят на уебсайт, и ще ви кажем как да ги избегнете.

Нежелание за прилагане на психологически техники

Има много изследвания, които описват реакциите и емоциите на потребителите към цветовата схема на уебсайтовете. Това със сигурност е поле за дебат - цветовите предпочитания се определят от националната култура, личен опит, други причини, но е невъзможно да не се вземе предвид настроението, предадено от цвета. И когато създаваме уебсайтове, също толкова си струва да прилагаме това, което знаем за цветоусещането.

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

Зеленото символизира доверието, а какво може да бъде по-важно от доверието, когато става дума за храна?

1. Сляпа имитация

Класическата грешка на клиента е проекцията на собствените му идеи за дизайна. Любимият ви форум е направен в топли "карамелени" цветове, основните текстове са тъмнокафяви, а фонът на съобщенията е бледожълт? Това не означава, че сайт, посветен на климатиците, трябва да наследи тази гама. Климатиците трябва да създават усещане за свежест - не напразно повечето сайтове от този вид са проектирани в сини и бели тонове.

Дори ако наистина харесвате определен сайт, помислете два пъти, преди да поръчате „точно същия, но за моите продукти“.

2. Липсващ призив за действие

Ако имате мощен призив за действие на уебсайта си, той трябва да бъде забележим за потребителя - окото на потребителя трябва да бъде приковано към него. Един блед и неоткрояващ се призив за действие, дори да е перфектно формулиран, просто няма да работи. Обратната ситуация не е толкова добра, когато CTA буквално крещи „НАТИСНЕТЕ МЕ“. Призивът за действие трябва да е хармоничен и да се откроява чрез избора на контрастни цветове и дизайн.

3. Прекомерна цветова палитра на сайта

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

Препоръчваме да използвате поне цветно колело, когато избирате цветова палитра. Когато избирате цветове с негова помощ, трябва да запомните, че съседните цветове и тези, разположени срещу тях, се съчетават добре един с друг.


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

В първия пример се използват 3 цвята за проектиране на текста, във втория само два. Именно вторият вариант изглежда по-добре и текстът на него се чете по-лесно.

4. Различни цветове за подобни елементи

Ако вашата целева страница има три бутона за плащане, всички те трябва да са с един и същи цвят. След като потребителят види първия, той ще възприеме и останалите по същия начин. Ако бутоните с различни цветове имат еднакви функции, това може да доведе до известно объркване.

Ето пример за два бутона с еднакво предназначение на един и същи уебсайт. Лошо решение.

5. Еднакви цветове за различни видове елементи

Обратната ситуация е, когато използвате вашия „любим“ цвят навсякъде, където смятате, че трябва да бъде направено красиво. Бутоните за действие и елементите, които не могат да се кликват, не трябва да са сходни по цвят; това нарушава логиката на използване на сайта. Създавайки кликващ бутон с определен цвят и стил, вие създавате модел на поведение и ако такъв елемент се окаже неактивен, това ще наруши обичайното поведение на потребителя.

6. Липса на контраст

В преследване на необичайни и ярки цветове, дизайнерите често пропускат важен момент: Цветът на текста и цветът на фона трябва да имат достатъчно контраст, за да направят текста лесен за четене. Този принцип е ясно демонстриран в примерите по-долу.

7. Нестандартен цвят на линка

Потребителят трябва да може да различи връзката от текста, без да движи мишката. Разбира се, цветът тук не е единственият инструмент на дизайнера, но може би най-ефективният. Три правила:

• Връзките трябва да са видими, без да задържате курсора на мишката върху тях.


• Връзката трябва да промени цвета си, когато задържи курсора.


• Посетените линкове трябва да бъдат маркирани с различен цвят, това е особено критично, ако говорим за информационен сайт с много публикации.

В примера дизайнерът е избрал изключително неудачен цвят за дизайна на връзките за навигация в портфолиото.

8. Избледнелият минимализъм не е за импулсивни продажби.

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

Тези две модни тенденции най-често са несъвместими. Не можете да продавате въз основа на емоции, ако вашият сайт не създава същите тези емоции при гледане.

Спокойни тонове и строг минимализъм са подходящи, когато покупката е рационална. Да, минимализмът може да бъде не скучен, цветен и дори много емоционален, но сега много дизайнери са склонни към сиви тонове и „въздух“, което всъщност не върви добре с продаваните идеи. целеви страници.

Но това не означава, че една емоционална целева страница, която продава, трябва да блести с всички цветове на дъгата.

9. Неподходящо черно

Маркетолозите отдавна са свикнали потребителите в материалния свят с факта, че черните опаковки почти винаги означават висока цена и първокласно ниво на качество на продукта. Ето пример за елитна марка кнедли и скъпи зърнени храни:

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


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

10. Цветови ограничения за дизайнера

Това правило не важи директно за дизайна на уебсайта и избора на цветова палитра. Говорим за поставяне на задачи на дизайнера при изработка на уеб сайт. Ако нямате вече внедрена корпоративна идентичностили разпознаваемо лого (въпреки че в този случай правилото е частично приложимо), не трябва да давате на дизайнера строги граници и ограничения върху използваните цветове.

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

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

Изводи

Цветовата схема създава първото впечатление на потребителя за сайта. Много е важно то да е положително. Но не можете просто да фокусирате вниманието на хората върху цвета; използвайте го, за да предадете информация. Ако не сте сигурни в правилния избор, използвайте данни от топлинна карта или прост трикзамъгляване на готовото интерфейсно решение. Същността на техниката е много проста: трябва да използвате графични програмизамъглете цялата страница и вижте кои елементи и блокове първи привличат вниманието. Първият, вторият и третият блок, който привлича вниманието, трябва да бъдат най-важните елементи от гледна точка на потребителския сценарий.

Например, замъглихме първия екран на Aviasales.ru - блокове от елементи 1, 2 и 3 привличат вниманието след прочитане на заглавието, т.е. Формирайки правилните очаквания в потребителя, той (помнете правилата на контраста) ще разгледа необходимите елементи за избор на параметри и призив за действие.


И вижте колко ясно се откроява замъглен фоносновно действие на уебсайта ostrovok.ru.


Ако вашите интерфейси преминат такива тестове с отличие, тогава следващи подобрения на сайта трябва да се извършат въз основа на разбиране на потребителската психология, т.е. анализиране на обратна връзка от реални потребители. Използвайки въпроси като: „Къде погледнахте първо: кои 3 елемента от сайта и в какъв ред? Къде искате да щракнете първо и защо?“ в AskUsers можете да разберете не само как се разпределя вниманието на потребителите, но и защо потребителите гледат определени елементи. Тази информацияще помогне да се идентифицират редица проблеми в текущия интерфейс и да се намерят оптимални решения за тях.

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

Кой цвят на бутоните има най-висок процент на реализация е стар философски въпрос, на който много хора знаят отговора. „Червено“ - ще отговорят начинаещите търговци. „Контрастно“ - ще отговорят опитни търговци. Тествахме 21 666 потребители по тази тема. И стигнахме до някои доста интересни заключения.

В началото на статията трябва да добавите интрига и вълнуващи факти, за да привлечете вниманието. Въз основа на този съвет мога да кажа, че на практика получихме увеличение на конверсията до 65% чрез проста промяна на цвета на бутона. В тази статия ще говорим за резултатите и как да го направите.

Колко можете да увеличите реализациите с цвят?

Няма да ви казвам, че изобретихме магическо хапче за управление на преобразуването. В случаите на увеличаване на конверсиите стигнах до едно просто заключение. Няма 100% твърдения, които винаги да работят за всички. Вълшебните хапчета също. По-рано писахме за това как в някои случаи думата „Безплатно“ намалява реализациите. Какво можем да кажем за другите „стопроцентови“ истини.

И така, колко можете да увеличите процента си на реализация само като промените цветовете на бутоните?

Получихме до 65% увеличение на реализациите. 65% беше максималният резултат от теста. Средната стойност беше 11%. Но дори това увеличение на конверсията е много добър резултат. Като се има предвид, че това може да се постигне чрез промяна на цвета на бутона.

Червеното е цветът на победителите

Много експертни тестове казват, че червеният бутон има най-висок процент на реализация. защо Знаем, че всеки цвят има своите асоциации и предизвиква определени емоции. Червеният цвят означава спиране, опасност и страст. И в повечето случаи (смята се) води до най-добри резултатив интернет маркетинга.

По-долу е алгоритъмът за създаване на A/B тестове:

1. Създайте джаджа в конструктора. Отнема 5 минути.
2. Копирайте го и направете промени за теста. Отнема 1 минута.
3. Създайте A/B тест и изберете тези джаджи. Отнема 1 минута.

1. Създаване на джаджа в конструктора

За да създадете джаджа, трябва да сте регистрирани в конструктора.

Процесът на създаване се състои от 3 стъпки:

1. Изберете шаблона за изпълним модул, който ще използвате.
2. Редактирайте джаджата: - напишете желания текст - променете цвета и качете изображение, ако е необходимо
3. Изберете настройки за показване: - кога да се показва джаджата (по време, при напускане, при превъртане на страницата и т.н.) - на какви устройства (компютър, мобилен телефон, таблет) - какво да се прави след преобразуването (кажи благодаря, пренасочи чрез връзка или просто затворете джаджата)

Можете да гледате това видео относно създаването на джаджа. Всеки етап е разгледан подробно тук. Текстови инструкциивърху създаването на джаджа се намира.

Бих искал да отбележа, че в дизайнера има много повече опции за персонализиране. Например показване при преглеждане на определен брой страници, по ден от седмицата, по източник на препратки, честота на показване и много други. Но първо ви съветвам да използвате основните настройки и след това да експериментирате с допълнителни.

2. Копирайте джаджата и направете промени за теста

След като създадете джаджа, трябва да направите нейно копие. За да направите промени в новата джаджа и да изпълните A/B тест. За да направите това, щракнете върху иконата „Копиране“ в създадената джаджа.

Той се активира автоматично на сайта. Сега трябва да го изключим, тъй като не се редактира. За да направите това, променете състоянието.

Сега отидете на неговите настройки, като щракнете върху иконата „Добавяне към редактора“.

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

Кликнете върху „Цвят на бутона“ и изберете желания от вас.

След това запазете джаджата. В четвъртата стъпка не е нужно да променяте нищо, за да запазите настройките на предишния уиджет. За да направите това, просто щракнете върху бутона „Запазване“.

Сега сте създали 2 джаджи с различни цветовебутони Можете да преминете към създаване на A/B тест. За удобство остава само да промените името във втората джаджа.

3. Създайте A/B тест

За да създадете тест, трябва да отидете в менюто „A/B тестове“. И кликнете върху бутона „Създаване на тест“.

Тук имате нужда от:

Изберете сайт - напишете името на теста

Изберете тип тест

Относно вида на теста. KEPLER LEADS има 2 различни видове A/B тест: Класически и Индивидуален. Разликата е в показването на джаджи на завръщащи се посетители. Ако искате да покажете завърнал се посетител нова опция widget, изберете Класически тест. Ако искате на завърналия се потребител да не се показва друга опция за джаджа (първата показана се запомня и само тази винаги се задейства, в зависимост от настройките на дисплея), тогава изберете Индивидуално.

След като изберете типа тест, щракнете върху бутона „Добавяне“. Остава последната стъпка - изберете джаджи за теста. За да направите това, щракнете върху клетката „Виджети“ и ги изберете.

След като изберете уиджети, проверете дали всички са активни. Ако има неактивни джаджи, можете да ги активирате тук.

всички! Тестът е създаден. Можете да видите всички резултати в статистиката на теста. За да направите това, щракнете върху иконата „Преглед“ вдясно от името на теста. Препоръчва провеждане на тестове върху общ трафик от 1000 импресии (това може да се види в колоната „Изгледи“). След това решете да изпълните следващия тест.

Заключение

Вашата работа не свършва дотук. Сега трябва да проследим резултатите и след достигане на значителни данни (препоръчваме 1000 или повече посетители) да тестваме други хипотези. Това могат да бъдат заглавия, текстове с призиви за действие, ценностни предложения, изображения и т.н. Ще пишем за други A/B тестове в следващите статии. Споделете вашите резултати в коментарите.

Продължавам да публикувам интересни и според мен полезни новини от големия и необятен свят SEO. Днес ще говорим за цветовете на дизайна на уебсайтове... Да, да, точно за цветовите схеми. Е, да започваме. Цвят на дизайна на сайтавлияе върху честотата на кликване върху рекламата, смятат психолози от Оксфордския университет в САЩ.

Поведенчески: влиянието на цвета на сайта върху честотата на кликване на рекламата в порталите

Това са изчислили американски учени редовен потребителпрекарва приблизително 2 минути в един интернет портал. От тях последните 4-7 секунди са решаващи за нас - SEO специалисти, въпреки че това важи и за дизайнерите. През този период от време потребителят или напуска уебсайта, или кликва върху предложената му реклама. Изборът зависи от цветове на уебсайта и рекламния блок. „Най-лошата“ (нежелана и невъзможна за кликване) опция дизайн на уебсайт- това е дизайн на сайта в сиви или червени тонове. Трафикът ще се доближи до нула (честота на кликване), както и ефективността на рекламата, публикувана в интернет ресурс. Комфорт и спокойствие се усещат от потребители, които са на сайтове, където доминиращият цвят е бял. Те кликват добре върху банери, контекстна рекламате се привличат само ако заглавията са неочаквано (много) ярки и с висок контраст, а текстът и URL адресът са с максимален размер. Почти същото се случва и със зелените дизайни.

Синият дизайн на портала е за доверие, а жълтият е най-добър за контекст

Уебсайтове със син дизайн и оформление будят доверие (тези, които веднага идват на ум са: социални медии"ВКонтакте" и "Фейсбук"). Интересното е, че рекламата тук работи, ако е разположена на бял фон, а заглавията са зададени в цвят с 2 нюанса по-тъмен (и това отново отговаря на любимите ни „VKontakte“ и Facebook). Най-печеливши цвят на дизайна на уебсайта, според британски психолози, жълт. Съотношението на посещенията към кликванията тук е 1 към 2,5, тъй като много интернет потребители гледат 2-3 реклами наведнъж. Но банерите на всички жълти сайтове са неефективни. Друг добър цвят за дизайна на портали, където хората кликват върху рекламни блокове и банери, е неконтрастно кафяво. Ето резултата за банерна рекламае 1 кликване на 3 посещения, за контекстно е приблизително 1 към 2.

PS. Нека да обобщим. Първото нещо, което ни смущава, е, че, разбира се, тестваната аудитория не е рускоговоряща; ние имаме различен манталитет. Все пак жителите на ОНД не са жители на Америка или Европа. Руските уебсайтове винаги са се отличавали с цветове и нюанси на дъгата в дизайна, за разлика от сдържаните европейски и американски интернет ресурси (ярък пример е уебсайтът на Apple). Второ, във връзка с това нашите реклами са „кликани” (мое собствено наблюдение), защото са ярки и контрастни. Можете да не сте съгласни с жълтите сайтове и портали - те не вдъхват доверие сред потребителите на домашни мрежи (дори няма да кажа веднага за големия жълт портал - нито един не идва на ум), освен може би сред малки деца (въпреки че това е моят мнение)! Като цяло, вероятно ще трябва да направите малък тест, за който ще говоря в раздела „експерименти“.

Няма нужда да се опитвате да отгатнете цветовия дизайн на рекламите, върху които е по-вероятно посетителите да кликнат. Трябва да експериментирате с показването на реклами в различни цветове. И въз основа на неговите резултати ще разберем предпочитанията на посетителите на вашия сайт. Но зад прозорците е 21 век. Затова ще напишем малък скрипт, който ще направи всичко вместо нас.

Какви цветове да изберете за реклами

В моя експеримент се спрях на три основни цвята: син, червен и зелен. Взех всеки от тях с различна степен на яркост. И добавих още един цвят към тях - цвета на линковете в моя сайт. Така в моя експеримент ще участват седем цвята.

Скрипт за редуване на цвета на рекламата

Като основа вземам скрипта за показване на реклами от YAN (рекламна мрежа Yandex), който ми беше даден от Profit-Partner. Нека добавим автоматична промяна на цвета към него. За всеки цвят ще създадем уникален етикет. Така че в бъдеще, използвайки тези секции, можете да анализирате кой цвят на рекламите на вашия сайт е по-привлекателен за посетителите.

Нека да пуснем скрипта в действие и да започнем да събираме данни. Статистиката ще покаже срезовете, създадени от нашия скрипт.

Как правилно да проведете експеримент за избор на цветови дизайн на рекламите

Експериментът трябва да се провежда денонощно поне една седмица. Да се ​​вземат предвид всички времеви зависимости и характеристики на почивните и работни дни. Важно е всяка цветова схема да бъде показана поне 1000 пъти.

Изводи от експеримента, кой цвят е по-добър

Ако избирате от три основни цвята, тогава няма ясен лидер на моя сайт. Разлика от няколко процента може да се дължи на грешка. Но общата тенденция съвпада с препоръките на специалистите на Profit-Partner COP - по-кликнатият цвят е червеният.

Ако разгледаме всичките седем цвята в детайли, следната група е предпочитана от посетителите: тъмно червено (#990000), светло зелено (#00CC00) и тъмно синьо (#000099).

Съветвам ви да не гледате моята статистика, а да проведете свой собствен експеримент за избор на цветово оформление на вашите реклами рекламна мрежаЯндекс.
Ако имате няколко сайта, тогава за всеки сайт трябва да проведете свой собствен експеримент.
Ако промените дизайна, изпълнете експеримента отново.
Ако имате няколко рекламни елемента като мен, тогава за всеки рекламен елемент също трябва да проведете свой собствен експеримент. Ще се изненадате, но на моя сайт потребителските предпочитания се различават рекламни блоковев средата и края на статията.
Експериментът трябва да се провежда денонощно в продължение на поне 7 дни.

Операция