Klickbara färger. Skript för att välja den optimala färgen för Ryan-reklam. Hur mycket kan du öka konverteringarna med färg
Vilken knappfärg som har högst konvertering är en gammal filosofisk fråga som många vet svaret på. "Röd" - nybörjare kommer att svara. "Kontrast" - erfarna marknadsförare kommer att svara. Vi har testat 21 666 användare i detta ämne. Och de kom till ganska intressanta slutsatser.
I början av artikeln måste du lägga till intriger och störande fakta för att väcka uppmärksamhet. Utifrån detta råd kan jag säga att vi i praktiken har fått en ökning av konverteringen upp till 65% med en enkel ändring av knappens färg. I den här artikeln kommer vi att prata om resultaten och hur man gör det.
Hur mycket kan du öka konverteringarna med färg?
Jag ska inte berätta att vi har uppfunnit ett magiskt piller för konverteringshantering. I fall av ökad konvertering kom jag till en enkel slutsats. Hundraprocentiga uttalanden som alltid kommer att fungera och för alla finns inte. Magiska piller också. Tidigare skrev vi om hur ordet "gratis" sänker konverteringen i vissa fall. Vad kan vi säga om andra "hundraprocentiga" sanningar.
Så, hur mycket kan du öka konverteringarna genom att helt enkelt ändra knappfärger?
Vi fick upp till 65 % högre konverteringsfrekvens. 65 % var det högsta betyget i testerna. Medelvärdet låg på nivån 11 %. Men även en sådan ökning av konvertering är mycket bra resultat. Med tanke på att detta kan uppnås genom att ändra färgen på knappen.
Rött är färgen på vinnarna
Många experttester säger att den röda färgknappen har mest hög konvertering. Varför? Vi vet att varje färg har sina egna associationer och väcker vissa känslor. Rött betyder stopp, fara och passion. Och i de flesta fall (som man tror) leder det till bättre resultat inom internetmarknadsföring.
Nedan är algoritmen för att skapa A/B-tester:
- Skapa widget i constructor. Tar 5 minuter.
- Kopiera den och gör ändringar för testet. Tar 1 minut.
- Skapa ett A/B-test och välj dessa widgets. Tar 1 minut.
1. Skapa en widget i konstruktorn
För att skapa en widget måste du vara registrerad hos konstruktören.
Skapandeprocessen består av 3 steg:
- Välj den widgetmall du ska använda.
- Redigera widgeten: - skriv önskad text - ändra färg och ladda upp en bild, om det behövs
- Välj visningsinställningar: - när widgeten ska visas (efter tid, när du lämnar, när du rullar sidan etc.) - på vilka enheter (dator, mobil, surfplatta) - vad du ska göra efter konverteringen (säg tack, omdirigera till en länk eller stäng bara widgeten)
Du kan titta på den här videon om hur du skapar en widget. Varje steg diskuteras i detalj här. Textinstruktioner för att skapa en widget finns.
Jag vill notera att det finns mycket fler alternativ för inställningar i konstruktorn. Till exempel att visa när du tittar på ett visst antal sidor, efter veckodag, efter referenskälla, visningsfrekvens och mycket mer. Men först rekommenderar jag dig att använda de grundläggande inställningarna och sedan experimentera med ytterligare.
2. Kopiera widgeten och gör ändringar för testet
När du har skapat en widget måste du göra en kopia av den. För att göra ändringar i den nya widgeten och sätta den i ett A/B-test. För att göra detta klickar du på ikonen "Kopiera" i den skapade widgeten.
Det aktiveras automatiskt på webbplatsen. Nu måste vi stänga av den, eftersom den inte är redigerad. För att göra detta, ändra status.
Gå nu till dess inställningar genom att klicka på ikonen "Till redaktör".
Ändra här det önskade elementet du vill testa. Låt oss till exempel ändra färgen på en knapp. Detta görs med ett klick. Du behöver bara välja en annan knappfärg.
Klicka på "Knappfärg" och välj den du vill ha.
Efter det sparar vi widgeten. I det 4:e steget kan du inte ändra något för att lämna inställningarna för den tidigare widgeten. För att göra detta klickar du helt enkelt på knappen "Spara".
Du har nu 2 widgets med olika knappfärger. Du kan gå vidare till att skapa ett A/B-test. För enkelhetens skull återstår det bara att ändra namnet i den andra widgeten.
3. Skapa ett A/B-test
För att skapa ett test måste du gå till menyn "A/B-tester". Och klicka på knappen "Skapa test".
Här behöver du:
Välj en webbplats - skriv namnet på testet
Välj testtyp
Angående typ av test. Det finns 2 i KEPLER LADDER olika typer A/B-test: Klassiskt och individuellt. Skillnaden ligger i att visa widgets för återkommande besökare. Om du vill att en återkommande besökare ska se en ny variant av widgeten väljer du Klassiskt test. Om du vill att den återkommande användaren inte ska visas en annan version av widgeten (den första som visas kommer ihåg och bara den fungerar alltid, beroende på visningsinställningarna), välj sedan Individuell.
När du har valt typ av test klickar du på knappen "Lägg till". kommer att förbli sista steget- välj widgets för testet. För att göra detta, klicka på "Widgets"-cellen och välj dem.
När du har valt widgetar, kontrollera om alla är aktiva. Om det finns inaktiva widgetar kan du aktivera dem här.
Allt! Testet har skapats. Du kan se alla resultat i teststatistiken. För att göra detta, klicka på ikonen "Visa" till höger om testnamnet. Rekommenderar att testa på total trafik från 1 000 visningar (detta kan ses i kolumnen Visningar). Ta sedan ett beslut om att köra nästa test.
Slutsats
Ditt arbete slutar inte där. Nu måste vi spåra resultaten, och efter att ha nått betydande data (vi rekommenderar från 1000 besökare), testa andra hypoteser. Det kan vara rubriker, uppmaningstexter, värdeförslag, bilder etc. Vi kommer att skriva om andra A/B-tester i kommande artiklar. Berätta för oss om dina resultat i kommentarerna.
Med HTML kan du ställa in färgerna för alla länkar på en sida, samt ändra färgerna för enskilda länkar.
Ställ in färgen på alla länkar på en sida
Länkfärger ställs in som taggattribut
. Attributen är valfria och om de inte är specificerade används standardvärdena.länk - definierar färgen på länkar på webbsidan (standardfärgen är blå, #0000FF).
vlink - färgen på redan besökta länkar. Standardfärgen är lila, #800080.
PÅ HTML-färger anges vanligtvis som hexadecimala siffror, i formen #rrggbb , där r, g och b betecknar de röda, gröna respektive blå komponenterna. Varje färg ges ett hexadecimalt värde från 00 till FF, vilket motsvarar ett intervall på 0 till 255 i decimal. Dessa värden sammanfogas sedan till ett enda nummer som föregås av #-symbolen (exempel 1).
Exempel 1: Ställa in länkfärger
Webbplatsens innehåll
Färgen behöver inte anges i hexadecimalt format, du kan också använda nyckelord. PÅ detta exempel Bakgrundsfärgen på webbsidan är inställd på svart och länkfärgen är inställd på röd.
Det är bekvämare att använda CSS för att ändra färgen på länkar. För att ställa in färgen för alla länkar på en webbsida används följande pseudoklasser, som läggs till i väljaren A .
besökt – stilen för den besökta länken.
aktiv – Stil för den aktiva länken. Länken blir aktiv när du klickar på den.
Exempel 2 visar hur man ändrar färgen på länkar på en webbsida med hjälp av stilar. För att göra detta använder vi stilegenskapen color , den anger färgen på viss text, i det här fallet länkar.
Exempel 2. Färg på länkar som ställs in via stilar
Webbplatsens innehåll
Ställ in färgen på enskilda länkar på en sida
Metoden ovan för att ställa in färger fungerar för alla länkar på en webbsida. Men ibland blir det nödvändigt att använda olika färger samtidigt. Ljusa färger, till exempel för mörka områden på en webbsida, respektive mörka färger för ljusa. Du kan också använda stilar för detta.
För att ändra färgen på en länk, använd attributet style="color: #rrggbb" i taggen , där #rrggbb är den hexadecimala färgen. Du kan också använda färgnamn eller ange en färg i formatet: rgb (132, 33, 65) . Inom parentes står decimalvärdena för rött, grönt och blått (exempel 3).
Webbplatsens innehåll
Internet marknadsföring
Användbarhet
I det här exemplet finns det tre olika sätt ställa in färger med stilar.
Du behöver inte försöka gissa färgschemat för annonser som besökarna är mer benägna att klicka på. Du måste experimentera med att visa annonser i olika färger. Och baserat på dess resultat lär vi oss vilka preferenser besökare på din webbplats har. Dock utanför 2000-talets fönster. Därför kommer vi att skriva ett litet manus som kommer att göra allt för oss.
Vilka färger att välja för reklam
I mitt experiment bestämde jag mig för tre primärfärger: blå, röd och grön. Tog var och en av dem med en annan grad av ljusstyrka. Och jag lade till ytterligare en färg till dem - färgen på länkarna på min sida. Således kommer sju färger att delta i mitt experiment.
Skript för annonsfärgrotation
Som grund tar jag skriptet för att visa annonser YAN (Yandex Advertising Network), som gavs till mig av Profit-Partner CSP. Låt oss lägga till en automatisk färgändring till den. Låt oss skapa en unik etikett för var och en av färgerna. Så att du i framtiden, med hjälp av dessa avsnitt, kan analysera vilken färg på annonserna på din webbplats som är mer attraktiv för besökarna.
Låt oss köra skriptet och börja samla in data. De skivor som skapas av vårt skript kommer att visas i statistiken.
Hur man genomför ett experiment med valet av färgdesignannonser
Experimentet bör genomföras dygnet runt i minst en vecka. För att ta hänsyn till alla tidsberoenden och funktioner för helger och arbetsdagar. Det är viktigt att varje färgschema visas minst 1000 gånger.
Slutsatser baserade på resultaten av experimentet, vilken färg är bättre
Om du väljer mellan tre primärfärger, så finns det ingen tydlig ledare på min sida. En skillnad på flera procent kan bero på ett fel. Men den allmänna trenden sammanfaller med rekommendationerna från Profit-Partner CSC-specialisterna - den mer klickbara färgen är röd.
Om vi i detalj överväger alla sju färgerna, orsakar följande grupp preferenser bland besökare: mörkröd (#990000), ljusgrön (#00CC00) och mörkblå (#000099).
Jag råder dig att inte titta på min statistik, utan att utföra ditt eget experiment med valet av färger för annonser i Yandex-annonsnätverket.
Om du har flera webbplatser måste du göra ditt eget experiment för varje webbplats.
Om du ändrade designen, experimentera sedan igen.
Om du har flera annonsenheter som jag, måste du för varje annonsenhet också utföra ditt eget experiment. Du kommer att bli förvånad, men på min sida skiljer sig användarpreferenserna i annonsenheterna i mitten och i slutet av artikeln.
Experimentet ska utföras dygnet runt i minst 7 dagar.
Jag fortsätter att publicera intressanta och enligt mig användbara nyheter från en stor och vidsträckt värld SEO. Idag ska vi prata om färgerna på webbplatsens design... Ja, ja, det handlar om färgscheman. Nåväl, låt oss börja. Färg (färgning) av webbplatsdesign påverkar klickbarheten för annonsering, tror psykologer från Oxford University i USA.
Beteende: inverkan av webbplatsens färg på klickfrekvensen för annonsering på portaler
Det har amerikanska forskare räknat ut vanlig användare spenderar cirka 2 minuter på en internetportal. Av dessa är de sista 4-7 sekunderna avgörande för oss – seo-specialister, även om det även gäller designers. det är under denna tidsperiod som användaren antingen lämnar webbplatsen eller klickar på annonsen som erbjuds honom. Valet beror på webbplats och annonsenhetsfärger. Det mest "dåliga" (oönskade och oklickbara) alternativet webbplatsdesign layout- detta för att designa webbplatsen i grå eller röda färger. Trafiken kommer att närma sig noll (klickfrekvens), effektiviteten av reklam som placeras på Internetresursen också. Komfort och lugn upplevs av användare som är på webbplatser som domineras av vitt. De klickar bra på banners, kontextuell reklam lockar dem bara om rubrikerna är oväntat (mycket) ljusa och har hög kontrast, och texten och webbadressen är av maximal storlek. Nästan samma sak händer med gröna mönster.
Blå portaldesign är förtroende och gul är bäst för sammanhang
Webbplatser med blå design och layout inger förtroende (kom genast att tänka på sociala nätverk"VKontakte" och "Facebook"). Intressant nog fungerar reklam här om den är placerad på en vit bakgrund, och rubrikerna är skrivna i 2 toner mörkare färg (och igen detta passar vår favorit VKontakte och Facebook). Mest vinnande webbdesign färg, enligt brittiska psykologer, gul. Förhållandet mellan besök och klick här är 1 till 2,5, eftersom många internetanvändare ser 2-3 annonser samtidigt. Men banners på alla gula sajter är ineffektiva. En annan bra färg för att designa portaler där annonsenheter och banners klickas på är en icke-kontrasterande brun. Här är resultatet för bannerannonsering 1 klick per 3 besök, för kontextuell annonsering är det ungefär 1 till 2.
PS. Låt oss sammanfatta. För det första är det pinsamt att publiken som testades förstås inte är rysktalande, vi har en annan mentalitet. Ändå är invånarna i OSS inte invånare i Amerika eller Europa. Ryska sajter har alltid kännetecknats av regnbågens färger och nyanser i design, i motsats till de återhållsamma europeiska och amerikanska internetresurserna (Apples webbplats är ett levande exempel). För det andra, i samband med detta "klickar" de också på reklam i vårt land (egen observation) ljusa och kontrasterande. Man kan vara oense om de gula sajterna och portalerna - de inger inte förtroende bland inhemska nätverksanvändare (jag ska inte ens säga direkt om den stora gula portalen - mer än en kommer att tänka på), förutom små barn (även om det här är min åsikt)! I allmänhet kommer det förmodligen att vara nödvändigt att genomföra ett litet test, som jag kommer att prata om i avsnittet "experiment".
Att arbeta med färg är en viktig färdighet för alla webbdesigners. Korrekt användning av det kan ge webbplatsen framgång, och även ett litet misstag i att skapa gamma kommer att medföra mycket problem i framtiden. I den här artikeln tar vi en titt på 10 misstag som designers gör när de arbetar med färg på en webbplats och berättar hur du undviker dem.
Ovilja att införa psykologiska tekniker
Det finns många studier som beskriver användarens reaktioner och känslor på färgerna på webbplatser. Detta är naturligtvis ett fält för tvist - färgpreferenser bestäms av nationell kultur, personlig erfarenhet, andra skäl, men det är omöjligt att inte ta hänsyn till stämningen som överförs av färg alls. Och när du skapar webbplatser är det också värt att tillämpa det vi vet om uppfattningen av färg.Till exempel är apelsin en bra shoppingmotivator. Förmedlar perfekt uppmaningar, lämplig för nätbutiker.
Grönt symboliserar tillit, och vad kan vara viktigare än tillit när det kommer till mat?
1. Blind imitation
Det klassiska misstaget för kunden är projiceringen av sina egna idéer om design. Är ditt favoritforum gjort i varma karamellfärger, med mörkbrun brödtext och ljusgul bakgrund? Detta betyder inte att en sajt dedikerad till luftkonditioneringsapparater ska ärva en sådan omfång. Luftkonditioneringsapparater bör skapa en känsla av friskhet - det är inte för inte som de flesta sajter av detta slag hålls i blått och vitt.Även om du verkligen gillar någon sida, tänk efter två gånger innan du beställer "exakt samma, men om mina produkter."
2. Dim uppmaning
Om du har en kraftfull uppmaning på din sajt bör den märkas för användaren – användarens blick ska fånga den. En blek och omärklig uppmaning, även om den är välformulerad, fungerar bara inte. Inte så bra och den motsatta situationen, när STA bokstavligen ropar "PUSH ME". Uppmaningen till handling ska vara harmonisk och sticka ut genom valet av kontrasterande färger och design.3. Överdriven plats färgpalett
Oftast räcker två eller tre färger för att designa en webbplats. Det finns naturligtvis mycket framgångsrika designlösningar med ett stort antal färger, men det är undantag. Det händer att två färger ser bra ut, men när du lägger till en tredje får du gröt.Vi råder dig att använda åtminstone ett färghjul när du väljer en färgpalett. När du väljer färger med det måste du komma ihåg att intilliggande färger och de som är motsatta är väl kombinerade med varandra. 
Vi rekommenderar också att du använder specialiserade webbplatser. Här kan du skapa ditt eget sortiment eller använda något av de färdiga.
I det första exemplet används 3 färger för att dekorera texten, i det andra bara två. Det är det andra alternativet som ser bättre ut och texten på det är lättare att läsa.
4. Olika färg för samma typ av element
Om din målsida har tre kassaknappar bör alla ha samma färg. Efter att användaren ser den första kommer han att uppfatta de andra på samma sätt. Om knappar i olika färger har samma funktioner kan detta orsaka viss förvirring.Till exempel två knappar med samma syfte på samma sida. Dåligt beslut.
5. Samma färger för olika typer av element
Den motsatta situationen är när du använder din "favorit" färg varhelst du tror att du behöver för att göra den vacker. Åtgärdsknappar och icke-klickbara element bör inte vara lika i färg, detta bryter mot logiken för att använda webbplatsen. Gör en klickbar knapp viss färg och stil skapar du ett beteendemönster, och om ett sådant element är inaktivt kommer det att bryta det vanliga användarbeteendet.6. Brist på kontrast
I jakten på ovanliga och ljusa färger missar designers ofta en viktig punkt: färgen på texten och bakgrundsfärgen måste ha tillräcklig kontrast för att göra texten lätt att läsa. Denna princip visas tydligt i exemplen nedan.
7. Icke-standard länkfärg
Användaren ska kunna särskilja länken mellan texten utan att röra musen. Naturligtvis är färg inte det enda designerns verktyg här, utan kanske det mest effektiva. Tre regler:- Länkar ska vara synliga utan att sväva över dem.
- När du håller muspekaren över bör länken ändra färg.
- Besökta länkar måste markeras i en annan färg, detta är särskilt viktigt när det gäller en informationssida med många publikationer.
8. Blekad minimalism är inte för impulsförsäljning
Idag är det väldigt modernt att skapa målsidor som i regel är inriktade på impulsförsäljning. Sådana sidor påverkar en persons känslor och väcker i honom en tillfällig önskan att köpa en produkt. En annan modetrend inom webbutveckling är minimalism, som vanligtvis kännetecknas av en eller två färger, ofta strikt.Dessa två modetrender är ofta oförenliga. Du kan inte sälja baserat på känslor om din webbplats inte skapar samma känslor när den visas.
Lugna toner och strikt minimalism är lämpliga när köpet är rationellt. Ja, minimalism kan vara tråkigt, färgstarkt och till och med väldigt känslomässigt, men nu är många designers benägna att gråa toner och "luft", vilket inte är särskilt kompatibelt med säljare. målsidor.
Men detta betyder inte att en säljande känslomässig målsida ska lysa med regnbågens alla färger.
9. Olämplig svart
Marknadsförare har länge lärt konsumenter i den påtagliga världen att svarta förpackningar nästan alltid innebär höga kostnader och förstklassig produktkvalitet. Här är ett exempel på ett elitmärke av dumplings och dyra spannmål:
Våra vanor, såväl som marknadsförares metoder, migrerar från stormarknader till Internet, till exempel, webbplatsen för ett smyckeföretag, gjord i svart, ser elegant och dyr ut: 
Du bör inte använda mycket svart på sajten som bakgrund om du tillhandahåller tjänster i ett lågprissegment eller säljer billiga varor. Besökarnas intryck av webbplatsen kommer inte att matcha ditt säljförslag.
10. Färgbegränsningar för designern
Denna regel gäller inte direkt för designen av webbplatsen och valet av färgpaletten. Det handlar om att sätta uppgifter för designern när man utvecklar sajten. Om du inte redan har en företagsidentitet eller en igenkännbar logotyp (även om regeln i det här fallet är delvis tillämplig), bör du inte sätta strikta ramar och begränsningar för färgerna som används av designern.Din vision kan vara hur vacker du vill, men låt designern erbjuda sin egen. Om designern efter flera försök fortfarande inte kan visa något som du gillar, är det bara värt att sätta honom en stel ram i valet av färger.
Ett annat undantag: om du är säker på att ditt färgschema är genomtänkt och du kan motivera detta val för dig själv. Som regel tar kunderna inte hänsyn till vad designern tar hänsyn till - textens läsbarhet, tillräcklig ljusstyrka på knapparna och optimal mängd färger.
Slutsatser
Färgschemat skapar användarens första intryck av sajten. Det är väldigt viktigt att det är positivt. Men du kan inte bara fokusera människors uppmärksamhet på färg, ge information med den. Om du är osäker på rätt val, använd värmekartdata eller ett enkelt knep för att sudda ut en färdig gränssnittslösning. Kärnan i receptionen är mycket enkel: det är nödvändigt med hjälp av grafiska program sudda ut hela sidan och se vilka element och block som drar till sig uppmärksamhet i första hand. De första, andra och tredje blocken som drar till sig uppmärksamhet bör vara de viktigaste elementen i fråga om anpassat skript.Till exempel gjorde vi den första skärmen på Aviasales.ru suddig - block med element 1, 2 och 3 lockar uppmärksamhet. bildandet av de korrekta förväntningarna på användaren, kommer han (minns om kontrastreglerna) att titta på de nödvändiga elementen för att välja parametrar och uppmaning. 
Och se hur tydligt huvudåtgärden på sajten ostrovok.ru sticker ut mot en suddig bakgrund. 
Om dina gränssnitt klarar sådana tester med råge, så bör ytterligare sajtförbättringar genomföras baserat på en förståelse för användarpsykologi, d.v.s. analysera feedback från riktiga användare. Med frågor som: "Var tittade du först: vilka tre delar av webbplatsen och i vilken ordning? Var vill du klicka först och varför?” i AskUsers kan du inte bara förstå hur användarnas uppmärksamhet fördelas, utan också varför användare tittar på vissa element. Denna informationen kommer att hjälpa till att identifiera ett antal problem i det aktuella gränssnittet och hitta de bästa alternativen för att lösa dem.
Kom ihåg att formuläret följer innehållet. Färgdesign fungerar som ett verktyg för att fokusera användarens uppmärksamhet på information som är viktig för användaren och webbplatsägaren.