WITH koristeći HTML Možete podesiti boje svih linkova na stranici, kao i promijeniti boje za pojedinačne linkove.

Postavite boju svih linkova na stranici

Boje linkova se postavljaju kao atributi oznake .

Atributi su opcioni i ako nisu specificirani, koriste se zadane vrijednosti.

link - Definira boju veza na web stranici (podrazumevana boja je plava, #0000FF).

vlink - boja već posjećenih linkova. Zadana boja je ljubičasta, #800080. IN HTML boje

obično su dati brojevima u heksadecimalnom kodu, u obliku #rrggbb, gdje r, g i b označavaju crvenu, zelenu i plavu komponentu, respektivno.

Primjer 1: Postavljanje boja veze

Boja veze Sadržaj stranice Boja ne mora biti navedena u heksadecimalnom formatu koji možete koristiti

ključne riječi

. U ovom primjeru, boja pozadine web stranice je postavljena na crnu, a boja veze na crvenu.

Pogodnije je koristiti CSS za promjenu boje linkova. Da biste postavili boju za sve veze na web stranici, sljedeće pseudo-klase se primjenjuju i dodaju selektoru A.

posećeno — Stil za posećeni link.

aktivno — Stil za aktivnu vezu. Veza postaje aktivna kada kliknete na nju.

Primjer 1: Postavljanje boja veze

Da bismo to učinili, koristit ćemo svojstvo stila boje koje postavlja boju određenog teksta, u ovom slučaju veze.

Primjer 2. Boja linkova specificiranih putem stilova

Korištenje stilova , gdje je #rrggbb heksadecimalna boja. Također možete koristiti nazive boja ili odrediti boju u formatu: rgb (132, 33, 65) . Decimalne vrijednosti za crvenu, zelenu i plavu prikazane su u zagradama (primjer 3).

Primjer 1: Postavljanje boja veze

Internet marketing

Upotrebljivost

Ovaj primjer pokazuje tri različita načina postavljanja boja pomoću stilova.

Rad s bojom je najvažnija vještina svakog web dizajnera. Pravilna upotreba može donijeti uspjeh web stranici, a čak i mala greška u kreiranju asortimana može uzrokovati mnogo problema u budućnosti. U ovom članku ćemo pogledati 10 grešaka koje dizajneri rade kada rade s bojama na web stranici i reći vam kako ih izbjeći.

Nesklonost primjeni psiholoških tehnika

Postoje mnoge studije koje opisuju reakcije i emocije korisnika na shemu boja web stranica. Ovo je svakako polje za debatu - preferencije boja određuju nacionalna kultura, lično iskustvo, drugih razloga, ali nemoguće je ne uzeti u obzir raspoloženje koje prenosi boja. A kada kreirate web stranice, jednako je vrijedno primijeniti ono što znamo o percepciji boja.

Na primjer, narandžasta je odlična boja koja motivira kupovinu. Savršeno prenosi pozive na akciju, pogodan za online trgovine.

Zelena simbolizira povjerenje, a šta može biti važnije od povjerenja kada je hrana u pitanju?

1. Slijepa imitacija

Klasična greška kupca je projekcija vlastitih ideja o dizajnu. Da li je vaš omiljeni forum urađen u toplim "karamelnim" bojama, glavni tekstovi su tamno smeđi, a pozadina poruka blijedožuta? To ne znači da bi stranica posvećena klima uređajima trebala naslijediti ovaj asortiman. Klima uređaji bi trebali stvarati osjećaj svježine - nije uzalud većina ovakvih stranica dizajnirana u plavim i bijelim tonovima.

Čak i ako vam se zaista sviđa određena stranica, razmislite dvaput prije nego što naručite „potpuno isto, ali o mojim proizvodima“.

2. Nejasan poziv na akciju

Ako na svojoj web stranici imate moćan poziv na akciju, korisniku bi to trebalo biti uočljivo – oko korisnika treba biti prikovano za njega. Blijed i neupadljiv poziv na akciju, čak i ako je savršeno formuliran, jednostavno neće raditi. Suprotna situacija nije tako dobra, kada CTA bukvalno vrišti „PRISNI ME“. Poziv na akciju treba da bude harmoničan i da se ističe izborom kontrastnih boja i dezena.

3. Pretjerana paleta boja stranice

Najčešće su dvije ili tri boje dovoljne za dizajn web stranice. Ima, naravno, veoma uspešnih. dizajnerska rješenja i sa puno boja, ali to su izuzeci. Dešava se da dvije boje izgledaju sjajno, ali kada dodate treću ispadne nered.

Preporučujemo korištenje barem kotača boja pri odabiru palete boja. Prilikom odabira boja uz njegovu pomoć, morate imati na umu da se susjedne boje i one koje se nalaze nasuprot njima dobro slažu jedna s drugom.


Također preporučujemo korištenje specijaliziranih stranica. Ovdje možete kreirati vlastiti asortiman ili koristiti jedan od gotovih.

U prvom primjeru za dizajn teksta koriste se 3 boje, u drugom samo dvije. To je druga opcija koja izgleda bolje i tekst na njoj je lakši za čitanje.

4. Različite boje za slične elemente

Ako vaša odredišna stranica ima tri dugmeta za naplatu, svi bi trebali biti iste boje. Nakon što korisnik vidi prvu, na isti način će percipirati i ostale. Ako dugmad različitih boja imaju iste funkcije, to može izazvati određenu zabunu.

Evo primjera dva dugmeta iste namjene na istoj web stranici. Loša odluka.

5. Iste boje za različite vrste elemenata

Suprotna situacija je kada koristite svoju „omiljenu“ boju gde god mislite da treba da bude lepo urađena. Dugmad za akciju i elementi na koje se ne može kliknuti ne bi trebali biti slični u boji, to narušava logiku korištenja stranice. Pravljenjem dugmeta na koji se može kliknuti određene boje i stila, kreirate obrazac ponašanja, a ako se takav element ispostavi da je neaktivan, poremetit će uobičajeno ponašanje korisnika.

6. Nedostatak kontrasta

U potrazi za neobičnim i svijetlim bojama, dizajneri često promašuju važna tačka: Boja teksta i boja pozadine trebaju imati dovoljan kontrast da tekst bude lak za čitanje. Ovaj princip je jasno prikazan u primjerima u nastavku.

7. Nestandardna boja veze

Korisnik bi trebao moći razlikovati link od teksta bez pomjeranja miša. Naravno, boja ovdje nije jedini alat dizajnera, ali možda i najefikasniji. tri pravila:

• Linkovi bi trebali biti vidljivi bez prelaska miša preko njih.


• Veza bi trebala promijeniti boju kada pređete preko nje.


• Posjećeni linkovi moraju biti označeni drugom bojom, što je posebno važno ako je riječ o informativnoj stranici s mnogo publikacija.

U primjeru, dizajner je odabrao krajnje nesretnu boju za dizajn linkova za navigaciju portfoliom.

8. Izblijedjeli minimalizam nije za impulsivnu prodaju.

Danas je vrlo moderno kreirati odredišne ​​stranice, obično usmjerene na impulsnu prodaju. Takve stranice utječu na emocije osobe, budi u njemu trenutnu želju za kupovinom proizvoda. Još jedan moderan trend u kreiranju web stranica je minimalizam, obično ga karakterizira jedna ili dvije boje, često stroge.

Ova dva modna trenda najčešće su nespojiva. Ne možete prodavati na osnovu emocija ako vaša stranica ne izaziva upravo te emocije kada se gleda.

Smireni tonovi i strogi minimalizam prikladni su kada je kupovina racionalna. Da, minimalizam ne može biti dosadan, šarolik, pa čak i vrlo emotivan, ali sada su mnogi dizajneri skloni sivim tonovima i "vazduhu", što baš i ne ide uz prodajne ideje. odredišne ​​stranice.

Ali to ne znači da emotivna odredišna stranica koja prodaje treba da sija svim duginim bojama.

9. Neprikladna crna

Trgovci su odavno navikli potrošače u opipljivom svijetu na činjenicu da crno pakovanje gotovo uvijek znači visoku cijenu i vrhunski nivo kvalitete proizvoda. Evo primjera elitnog brenda knedli i skupih žitarica:

Naše navike, kao i metode marketinga, sele se iz supermarketa na internet. Na primjer, web stranica jedne draguljarske kompanije, izrađena u crnoj boji, izgleda elegantno i skupo:


Ne biste trebali koristiti puno crne kao boju pozadine na vašoj web stranici ako pružate usluge u segmentu niskih cijena ili prodajete jeftinu robu. Utisci posjetitelja na stranici neće odgovarati vašoj prodajnoj ponudi.

10. Ograničenja boja za dizajnera

Ovo pravilo se ne odnosi direktno na dizajn web stranice i odabir palete boja. Govorimo o postavljanju zadataka dizajneru prilikom izrade web stranice. Ako nemate već implementiranu korporativni identitet ili prepoznatljiv logo (iako je u ovom slučaju pravilo djelomično primjenjivo), ne biste trebali dizajneru postavljati stroge granice i ograničenja upotrijebljenih boja.

Vaša vizija može biti lijepa koliko god želite, ali neka dizajner ponudi svoju. Ako vam dizajner nakon nekoliko pokušaja ipak ne može pokazati nešto što vam se sviđa, tek tada mu treba postaviti stroga ograničenja u odabiru boja.

Još jedan izuzetak: ako ste sigurni da je vaša opcija dizajna boja dobro osmišljena i možete sami sebi opravdati ovaj izbor. Kupci u pravilu ne uzimaju u obzir ono što dizajner uzima u obzir - čitljivost teksta, dovoljnu svjetlinu dugmadi i optimalan broj boja.

Zaključci

Šema boja stvara prvi utisak korisnika o web lokaciji. Veoma je važno da bude pozitivno. Ali ne možete samo usmjeriti pažnju ljudi na boju; Ako niste sigurni u pravi izbor, koristite podatke toplotne karte ili jednostavan trik zamagljivanje gotovog rješenja interfejsa. Suština tehnike je vrlo jednostavna: trebate je koristiti grafički programi zamutite cijelu stranicu i vidite koji elementi i blokovi prvi privlače pažnju. Prvi, drugi i treći blok koji privlači pažnju trebali bi biti najvažniji elementi u smislu korisničkog scenarija.

Na primjer, zamaglili smo prvi ekran Aviasales.ru - blokovi elemenata 1, 2 i 3 privlače pažnju nakon čitanja naslova, tj. Formirajući ispravna očekivanja kod korisnika, on će (zapamtite pravila kontrasta) pogledati potrebne elemente za odabir parametara i poziv na akciju.


I pogledajte kako se jasno ističe zamagljena pozadina glavna akcija na web stranici ostrovok.ru.


Ako vaša sučelja odlično prođu takve testove, onda bi daljnja poboljšanja stranice trebala biti provedena na temelju razumijevanja psihologije korisnika, tj. analizira povratne informacije od stvarnih korisnika. Koristeći pitanja poput: „Gdje ste prvo pogledali: koja 3 elementa stranice i kojim redoslijedom? Gdje želite prvo kliknuti i zašto?” u AskUsers možete razumjeti ne samo kako se pažnja korisnika distribuira, već i zašto korisnici gledaju na određene elemente. Ove informacije pomoći će identificirati brojne probleme u trenutnom interfejsu i pronaći optimalna rješenja za njih.

Zapamtite da je forma podređena sadržaju. Dizajn u boji služi kao alat za usmjeravanje pažnje korisnika na informacije koje su važne za korisnika i vlasnika stranice.

Koja boja dugmeta ima najveću stopu konverzije staro je filozofsko pitanje na koje mnogi ljudi znaju odgovor. "Crveno" - odgovorit će početnici u marketingu. "Kontrastno" - odgovorit će iskusni trgovci. Testirali smo 21.666 korisnika na ovu temu. I došli smo do prilično zanimljivih zaključaka.

Na početku članka morate dodati intrige i uzbudljive činjenice kako biste privukli pažnju. Na osnovu ovog savjeta mogu reći da smo u praksi jednostavnom promjenom boje gumba dobili povećanje konverzije do 65%. U ovom članku ćemo govoriti o rezultatima i kako to učiniti.

Koliko možete povećati konverzije pomoću boje?

Neću vam reći da smo izmislili čarobnu pilulu za upravljanje konverzijama. U slučajevima povećanja konverzija, došao sam do jednog jednostavnog zaključka. Ne postoje 100% izjave koje će uvijek raditi za sve. Magične tablete takođe. Ranije smo pisali o tome kako u nekim slučajevima riječ “besplatno” smanjuje konverzije. Šta tek reći o drugim „stopostotnim“ istinama.

Dakle, koliko možete povećati svoju stopu konverzije samo promjenom boja gumba?

Dobili smo i do 65% povećanja konverzije. 65% je bio maksimalni rezultat testa. Prosjek je bio 11%. Ali čak i ovo povećanje konverzije je vrlo dobar rezultat. S obzirom da se to može postići promjenom boje dugmeta.

Crvena je boja pobjednika

Mnogi stručni testovi kažu da crveno dugme ima najveću stopu konverzije. Zašto? Znamo da svaka boja ima svoje asocijacije i izaziva određene emocije. Crvena boja implicira zaustavljanje, opasnost i strast. I u većini slučajeva (vjeruje se) to dovodi do najbolji rezultati u internet marketingu.

Ispod je algoritam za kreiranje A/B testova:

1. Kreirajte widget u konstruktoru. Traje 5 minuta.
2. Kopirajte ga i izvršite izmjene za test. Traje 1 minut.
3. Kreirajte A/B test i odaberite ove widgete. Traje 1 minut.

1. Kreiranje widgeta u konstruktoru

Da biste kreirali widget, morate biti registrovani u konstruktoru.

Proces kreiranja sastoji se od 3 koraka:

1. Odaberite predložak widgeta koji ćete koristiti.
2. Uredite widget: - napišite željeni tekst - promijenite boju i postavite sliku, ako je potrebno
3. Odaberite postavke prikaza: - kada prikazati widget (po vremenu, kada napuštate, prilikom pomicanja po stranici itd.) - na kojim uređajima (računar, mobilni, tablet) - šta učiniti nakon konverzije (recite hvala, preusmjerite putem link ili jednostavno zatvorite widget)

Možete pogledati ovaj video o kreiranju widgeta. Ovdje je detaljno razmotrena svaka faza. Tekstualne upute na kreiranju widgeta se nalazi.

Želio bih napomenuti da postoji mnogo više opcija prilagođavanja u dizajneru. Na primjer, prikaz prilikom pregleda određenog broja stranica, po danu u sedmici, prema izvoru preporuke, učestalosti prikaza i još mnogo toga. Ali prvo vam savjetujem da koristite osnovne postavke, a zatim eksperimentirajte s dodatnim.

2. Kopirajte widget i izvršite izmjene za test

Nakon što kreirate widget, potrebno je da napravite njegovu kopiju. Da izvršite promjene u novom widgetu i pokrenete A/B test. Da biste to učinili, kliknite na ikonu „Kopiraj“ u kreiranom widgetu.

Automatski je omogućeno na sajtu. Sada ga moramo isključiti, pošto nije uređivan. Da biste to učinili, promijenite status.

Sada idite na njegove postavke klikom na ikonu "Dodaj u uređivač".

Ovdje promijenite željeni element koji želite testirati. Na primjer, promijenimo boju gumba. Ovo se radi jednim klikom. Samo trebate odabrati drugu boju gumba.

Kliknite na "Boja dugmeta" i odaberite onu koju želite.

Nakon toga, sačuvajte widget. U 4. koraku, ne morate ništa mijenjati da biste zadržali postavke prethodnog widgeta. Da biste to učinili, jednostavno kliknite na dugme "Sačuvaj".

Sada ste kreirali 2 widgeta sa različite boje dugmad Možete prijeći na kreiranje A/B testa. Radi praktičnosti, ostaje samo da promijenite ime u drugom widgetu.

3. Kreirajte A/B test

Da biste kreirali test, potrebno je da odete na meni „A/B testovi“. I kliknite na dugme "Kreiraj test".

Ovdje vam treba:

Odaberite lokaciju - napišite naziv testa

Odaberite vrstu testa

Što se tiče vrste testa. KEPLER LEADS ima 2 različite vrste A/B test: klasični i individualni. Razlika je u prikazivanju widgeta posjetiteljima koji se vraćaju. Ako želite prikazati posjetitelja koji se vraća nova opcija widget, odaberite Classic Test. Ako želite da korisniku koji se vraća ne bude prikazana druga opcija vidžeta (prvi prikazani se pamti i samo ovaj se uvijek aktivira, ovisno o postavkama prikaza), tada odaberite Pojedinačno.

Nakon odabira vrste testa, kliknite na dugme „Dodaj“. Ostaje posljednji korak - odaberite widgete za test. Da biste to učinili, kliknite na ćeliju "Widgeti" i odaberite ih.

Nakon odabira widgeta, provjerite da li su svi aktivni. Ako postoje neaktivni widgeti, možete ih omogućiti ovdje.

Sve! Test je kreiran. Sve rezultate možete vidjeti u statistici testa. Da biste to učinili, kliknite na ikonu "Prikaz" desno od naziva testa. Preporučuje pokretanje testova na ukupnom prometu od 1000 impresija (ovo se može vidjeti u koloni „Pregledi“). Nakon toga, odlučite da pokrenete sljedeći test.

Zaključak

Vaš posao se tu ne završava. Sada moramo pratiti rezultate, i nakon što dođemo do značajnih podataka (preporučujemo 1000 ili više posjetitelja) testirati druge hipoteze. To mogu biti naslovi, tekstovi poziva na akciju, propozicije vrijednosti, slike itd. O drugim A/B testovima ćemo pisati u sljedećim člancima. Podijelite svoje rezultate u komentarima.

Nastavljam da objavljujem zanimljive, a po mom mišljenju korisne vijesti iz velikog i ogromnog svijeta SEO. Danas ćemo pričati o bojama dizajna web stranica... Da, da, upravo o shemama boja. Pa, počnimo. Boja dizajna web stranice utiče na klikovnu stopu oglašavanja, smatraju psiholozi sa Univerziteta Oksford u SAD.

Ponašanje: uticaj boje sajta na klikovnu stopu oglašavanja na portalima

Američki naučnici su to izračunali redovni korisnik provede otprilike 2 minute na jednom internet portalu. Od toga su za nas odlučujuće zadnjih 4-7 sekundi - SEO specijalisti, iako se to odnosi i na dizajnere. U tom periodu korisnik ili napusti web stranicu ili klikne na oglas koji mu se nudi. Izbor zavisi od boje web stranice i oglasnih blokova. Opcija "najgora" (nepoželjna i na koju se ne može kliknuti). dizajn web stranice- ovo je dizajn sajta u sivim ili crvenim tonovima. Promet će se približiti nuli (stopa klikanja), kao i efikasnost reklamiranja objavljenog na Internet resursu. Udobnost i spokoj doživljavaju korisnici koji se nalaze na lokacijama gdje je dominantna bela boja. Dobro kliknu na banere, kontekstualno oglašavanje privlače ih samo ako su naslovi neočekivano (veoma) svijetli i visokog kontrasta, a tekst i URL su maksimalne veličine. Gotovo ista stvar se događa sa zelenim dizajnom.

Plavi dizajn portala služi za povjerenje, a žuti je najbolji za kontekst

Web stranice sa plavim dizajnom i izgledom izazivaju povjerenje (one koje odmah padaju na pamet su: društvenim medijima"VKontakte" i "Facebook"). Zanimljivo, oglašavanje ovdje funkcionira ako se nalazi na bijeloj pozadini, a naslovi su postavljeni u 2 nijanse tamnije (i opet ovo odgovara našim omiljenim "VKontakte" i Facebooku). Najviše pobjednički boja dizajna web stranice, prema britanskim psiholozima, žuta. Omjer posjeta i klikova ovdje je 1 prema 2,5, jer mnogi korisnici interneta gledaju 2-3 oglasa odjednom. Ali baneri na svim žutim stranicama su neefikasni. Još jedna dobra boja za dizajn portala gdje ljudi kliknu na reklamne blokove i banere je nekontrastna smeđa. Evo rezultata za baner oglašavanje je 1 klik na 3 posjete, za kontekstualne je otprilike 1 do 2.

PS. Hajde da sumiramo. Prva stvar koja nas zbunjuje je da, naravno, ispitana publika ne govori ruski, mi imamo drugačiji mentalitet. Ipak, stanovnici ZND nisu stanovnici Amerike ili Evrope. Ruske web stranice oduvijek su se odlikovale duginim bojama i nijansama u dizajnu, za razliku od suzdržanih europskih i američkih internetskih resursa (upečatljiv primjer je web stranica Apple). Drugo, s tim u vezi, na naše reklame se „klikne“ (moje vlastito zapažanje) jer su svijetle i kontrastne. Ne možete se složiti oko žutih stranica i portala - oni ne ulijevaju povjerenje kod domaćih korisnika mreže (neću ni reći odmah za veliki žuti portal - ni jedan ne pada na pamet), osim možda među malom djecom (iako je ovo moje mišljenje)! Uopšteno govoreći, verovatno ćete morati da uradite mali test, o čemu ću govoriti u odeljku „eksperimenti“.

Nema potrebe da pokušavate da pogodite dizajn boja reklama na koje će posetioci najverovatnije kliknuti. Morate eksperimentirati s prikazivanjem reklama u različitim bojama. A na osnovu njegovih rezultata saznat ćemo preferencije posjetitelja vaše stranice. Međutim, izvan prozora je 21. vijek. Stoga ćemo napisati malu skriptu koja će sve učiniti umjesto nas.

Koje boje odabrati za reklame

U svom eksperimentu sam se odlučio na tri osnovne boje: plavu, crvenu i zelenu. Uzeo sam svaki od njih sa različitim stepenom osvetljenosti. I dodao sam im još jednu boju - boju linkova na mom sajtu. Tako će u mom eksperimentu učestvovati sedam boja.

Skripta za rotiranje boja oglasa

Kao osnovu uzimam skriptu za prikazivanje reklama iz YAN-a (Yandex Advertising Network) koju mi ​​je dao Profit-Partner. Dodajmo mu automatsku promjenu boje. Za svaku boju napravićemo jedinstvenu etiketu. Tako da ubuduće, koristeći ove sekcije, možete analizirati koja boja reklama na vašem sajtu je privlačnija posetiocima.

Pustimo skriptu u akciju i počnimo prikupljati podatke. Statistika će pokazati rezove koje je kreirala naša skripta.

Kako pravilno provesti eksperiment odabira dizajna boja oglasa

Eksperiment se mora izvoditi 24 sata dnevno najmanje nedelju dana. Uzeti u obzir sve vremenske zavisnosti i karakteristike vikenda i radnih dana. Važno je da se svaka shema boja prikaže najmanje 1000 puta.

Zaključci iz eksperimenta koja je boja bolja

Ako birate između tri glavne boje, onda na mojoj web stranici nema jasnog lidera. Razlika od nekoliko posto može biti posljedica greške. Ali opći trend se poklapa s preporukama stručnjaka Profit-Partner COP - boja koja se više klika je crvena.

Ako detaljno pogledamo svih sedam boja, posjetitelji preferiraju sljedeću grupu: tamnocrvena (#990000), svijetlo zelena (#00CC00) i tamnoplava (#000099).

Savjetujem vam da ne gledate moju statistiku, već da provedete vlastiti eksperiment u odabiru dizajna boja vaših oglasa reklamna mreža Yandex.
Ako imate nekoliko lokacija, onda za svaku stranicu morate provesti vlastiti eksperiment.
Ako promijenite dizajn, ponovo pokrenite eksperiment.
Ako imate nekoliko oglasnih jedinica kao ja, onda za svaku oglasnu jedinicu također morate provesti vlastiti eksperiment. Iznenadit ćete se, ali na mojoj stranici se korisničke postavke razlikuju reklamni blokovi u sredini i na kraju članka.
Eksperiment se mora izvoditi 24 sata dnevno najmanje 7 dana.

Operacija