MED ved hjelp av HTML Du kan angi fargene på alle lenker på siden, samt endre fargene for individuelle lenker.

Angi fargen på alle lenker på siden

Koblingsfarger er satt som tag-attributter .

Attributter er valgfrie, og hvis de ikke er spesifisert, brukes standardverdier.

link - Definerer fargen på lenker på en nettside (standardfargen er blå, #0000FF).

vlink - farge på allerede besøkte lenker. Standardfargen er lilla, #800080. I HTML-farger

er vanligvis gitt ved tall i heksadesimal kode, i formen #rrggbb, der r, g og b angir henholdsvis de røde, grønne og blå komponentene.

Eksempel 1: Angi lenkefarger

Lenkefarge Nettstedets innhold Fargen trenger ikke være spesifisert i heksadesimalt format du kan også bruke

søkeord

. I dette eksemplet er bakgrunnsfargen på nettsiden satt til svart og koblingsfargen er satt til rød.

Det er mer praktisk å bruke CSS for å endre fargen på lenker. For å angi fargen for alle lenker på en nettside, brukes følgende pseudoklasser og legges til A-velgeren.

besøkt — Stil for den besøkte lenken.

aktiv — Stil for den aktive koblingen. Linken blir aktiv når du klikker på den.

Eksempel 1: Angi lenkefarger

For å gjøre dette vil vi bruke stilegenskapen color , den setter fargen på bestemt tekst, i dette tilfellet lenker.

Eksempel 2. Farge på lenker spesifisert via stiler

Bruke stiler , der #rrggbb er fargen i heksadesimal. Du kan også bruke fargenavn eller spesifisere fargen i formatet: rgb (132, 33, 65) . Desimalverdiene for rød, grønn og blå vises i parentes (eksempel 3).

Eksempel 1: Angi lenkefarger

Internett markedsføring

Brukervennlighet

Dette eksemplet viser tre forskjellige måter å sette farger på ved hjelp av stiler.

Å jobbe med farger er den viktigste ferdigheten til enhver webdesigner. Riktig bruk av det kan gi suksess til nettstedet, og til og med en liten feil i å lage et utvalg kan føre til mye trøbbel i fremtiden. I denne artikkelen skal vi se på 10 feil som designere gjør når de jobber med farger på en nettside, og fortelle deg hvordan du unngår dem.

Motvilje mot å implementere psykologiske teknikker

Det er mange studier som beskriver brukerreaksjoner og følelser på fargeskjemaet på nettsider. Dette er absolutt et felt for debatt - fargepreferanser bestemmes av nasjonal kultur, personlig erfaring, andre grunner, men det er umulig å ikke ta hensyn til stemningen som formidles av farge. Og når du lager nettsider, er det like verdt å bruke det vi vet om fargeoppfatning.

For eksempel er oransje en flott farge som motiverer til shopping. Formidler perfekt oppfordringer til handling, egnet for nettbutikker.

Grønt symboliserer tillit, og hva kan være viktigere enn tillit når det kommer til mat?

1. Blind imitasjon

Den klassiske feilen til kunden er projeksjonen av deres egne ideer om designet. Er favorittforumet ditt laget i varme "karamell"-farger, hovedtekstene er mørkebrune, og bakgrunnen til meldingene er blekgul? Dette betyr ikke at et nettsted dedikert til klimaanlegg skal arve dette området. Klimaanlegg bør skape en følelse av friskhet - det er ikke for ingenting at de fleste nettsteder av denne typen er designet i blå og hvite toner.

Selv om du virkelig liker et bestemt nettsted, tenk deg om to ganger før du bestiller «nøyaktig det samme, men om produktene mine».

2. Svak oppfordring til handling

Hvis du har en kraftig oppfordring til handling på nettstedet ditt, bør det være merkbart for brukeren – brukerens øye skal være hektet på det. En blek og ukjent oppfordring til handling, selv om den er perfekt formulert, vil rett og slett ikke fungere. Den motsatte situasjonen er ikke så bra, når CTA bokstavelig talt skriker "PRESS MEG." Oppfordringen til handling skal være harmonisk og skille seg ut gjennom valget av kontrasterende farger og design.

3. Overdreven fargepalett på nettstedet

Oftest er to eller tre farger nok til å designe en nettside. Det er selvfølgelig svært vellykkede. designløsninger og med mange farger, men dette er unntak. Det hender at to farger ser bra ut, men når du legger til en tredje, viser det seg å være et rot.

Vi anbefaler å bruke minst et fargehjul når du velger en fargepalett. Når du velger farger med hjelpen, må du huske at nabofarger og de som ligger overfor dem passer godt med hverandre.


Vi anbefaler også å bruke spesialiserte nettsteder. Her kan du lage ditt eget sortiment eller bruke en av de ferdige.

I det første eksemplet brukes 3 farger for å designe teksten, i det andre bare to. Det er det andre alternativet som ser bedre ut, og teksten på det er lettere å lese.

4. Ulike farger for lignende elementer

Hvis landingssiden din har tre betalingsknapper, skal alle ha samme farge. Etter at brukeren ser den første, vil han oppfatte de andre på samme måte. Hvis knapper i forskjellige farger har samme funksjoner, kan dette føre til litt forvirring.

Her er et eksempel på to knapper med samme formål på samme nettside. Dårlig avgjørelse.

5. Samme farger for ulike typer elementer

Den motsatte situasjonen er når du bruker "favoritt"-fargen din uansett hvor du synes det skal gjøres vakkert. Handlingsknapper og ikke-klikkbare elementer skal ikke være like i farge, dette bryter med logikken ved bruk av nettstedet. Ved å lage en klikkbar knapp av en bestemt farge og stil, skaper du et atferdsmønster, og hvis et slikt element viser seg å være inaktivt, vil det forstyrre brukerens vanlige oppførsel.

6. Mangel på kontrast

I jakten på uvanlige og lyse farger savner designere ofte viktig poeng: Tekstfargen og bakgrunnsfargen skal ha nok kontrast til å gjøre teksten lett å lese. Dette prinsippet er tydelig demonstrert i eksemplene nedenfor.

7. Ikke-standard lenkefarge

Brukeren skal kunne skille en lenke fra tekst uten å bevege musen. Selvfølgelig er farge her ikke det eneste designerens verktøy, men kanskje det mest effektive. Tre regler:

• Linker skal være synlige uten å holde musepekeren over dem.


• Linken skal endre farge når den holdes over.


• Besøkte lenker må merkes i en annen farge. Dette er spesielt viktig hvis vi snakker om en informasjonsside med mange publikasjoner.

I eksemplet valgte designeren en ekstremt uheldig farge for utformingen av lenker for å navigere i porteføljen.

8. Falmet minimalisme er ikke for impulssalg.

I dag er det veldig fasjonabelt å lage landingssider, vanligvis rettet mot impulssalg. Slike sider påvirker en persons følelser, og vekker i ham et øyeblikks ønske om å kjøpe et produkt. En annen fasjonabel trend i å lage nettsider er minimalisme, den er vanligvis preget av en eller to farger, ofte strenge.

Disse to motetrendene er oftest uforenlige. Du kan ikke selge basert på følelser hvis nettstedet ditt ikke skaper disse følelsene når det vises.

Rolige toner og streng minimalisme er passende når kjøpet er rasjonelt. Ja, minimalisme kan ikke være kjedelig, fargerik og til og med veldig emosjonell, men nå er mange designere tilbøyelige til gråtoner og "luft", som egentlig ikke passer bra med å selge ideer. landingssider.

Men dette betyr ikke at en emosjonell landingsside som selger skal skinne med alle regnbuens farger.

9. Upassende svart

Markedsførere har lenge vant forbrukere i den materielle verden til det faktum at svart emballasje nesten alltid betyr høye kostnader og et førsteklasses produktkvalitetsnivå. Her er et eksempel på et elitemerke med dumplings og dyre frokostblandinger:

Våre vaner, som metodene til markedsførere, migrerer fra supermarkeder til Internett. For eksempel ser nettstedet til et smykkefirma, laget i svart, elegant og dyrt ut.


Du bør ikke bruke mye svart på nettsiden din som bakgrunn hvis du leverer tjenester i lavprissegmentet eller selger rimelige varer. Inntrykkene til besøkende på nettstedet ditt vil ikke samsvare med salgsforslaget ditt.

10. Fargebegrensninger for designeren

Denne regelen gjelder ikke direkte for nettsidedesign og valg av fargepalett. Vi snakker om å sette opp oppgaver for designeren ved utvikling av en nettside. Hvis du ikke har en allerede implementert bedriftens identitet eller en gjenkjennelig logo (selv om regelen i dette tilfellet er delvis gjeldende), bør du ikke gi designeren strenge grenser og restriksjoner på fargene som brukes.

Din visjon kan være så vakker du vil, men la designeren tilby sitt eget. Hvis designeren etter flere forsøk fortsatt ikke kan vise deg noe du liker, bør du først sette strenge grenser for ham i valg av farger.

Et annet unntak: hvis du er sikker på at fargedesignalternativet ditt er gjennomtenkt og du kan rettferdiggjøre dette valget for deg selv. Som regel tar kundene ikke hensyn til hva designeren tar hensyn til - tekstlesbarhet, tilstrekkelig lysstyrke på knapper og optimalt antall farger.

Konklusjoner

Fargeskjemaet skaper brukerens førsteinntrykk av nettstedet. Det er veldig viktig at det er positivt. Men du kan ikke bare fokusere folks oppmerksomhet på farger; Hvis du ikke er sikker på riktig valg, bruk varmekartdata eller enkelt triks gjør den ferdige grensesnittløsningen uskarp. Essensen av teknikken er veldig enkel: du må bruke grafikk programmer uskarp hele siden og se hvilke elementer og blokker som tiltrekker oppmerksomhet først. Den første, andre og tredje blokken som vekker oppmerksomhet bør være de viktigste elementene med tanke på brukerscenarioet.

For eksempel gjorde vi den første skjermen til Aviasales.ru uskarp - blokker med elementer 1, 2 og 3 tiltrekker seg oppmerksomhet Etter å ha lest tittelen, dvs. Ved å danne de riktige forventningene til brukeren, vil han (husk kontrastreglene) se på de nødvendige elementene for å velge parametere og handlingsfremmende uttrykk.


Og se hvor tydelig den skiller seg ut på uskarp bakgrunn hovedhandlingen på nettstedet ostrovok.ru.


Hvis grensesnittene dine består slike tester med glans, bør ytterligere forbedringer av nettstedet utføres basert på en forståelse av brukerpsykologi, dvs. analysere tilbakemeldinger fra ekte brukere. Bruke spørsmål som: "Hvor så du først: hvilke 3 elementer på nettstedet, og i hvilken rekkefølge? Hvor vil du klikke først og hvorfor?» i AskUsers kan du ikke bare forstå hvordan brukernes oppmerksomhet er fordelt, men også hvorfor brukere ser på visse elementer. Denne informasjonen vil bidra til å identifisere en rekke problemer i det gjeldende grensesnittet og finne optimale løsninger på dem.

Husk at form er underordnet innhold. Fargedesign fungerer som et verktøy for å fokusere brukerens oppmerksomhet på informasjon som er viktig for brukeren og nettstedets eier.

Hvilken knappefarge som har høyest konverteringsfrekvens er et gammelt filosofisk spørsmål som mange vet svaret på. "Rød" - nybegynnere vil svare. "Kontrast" - erfarne markedsførere vil svare. Vi testet 21 666 brukere på dette emnet. Og vi kom til noen ganske interessante konklusjoner.

I begynnelsen av artikkelen må du legge til intriger og spennende fakta for å tiltrekke oppmerksomhet. Basert på dette rådet kan jeg si at vi i praksis fikk en konverteringsøkning på opptil 65 % ved ganske enkelt å endre fargen på knappen. I denne artikkelen vil vi snakke om resultatene og hvordan du gjør det.

Hvor mye kan du øke konverteringene med farger?

Jeg vil ikke fortelle deg at vi oppfant en magisk konverteringshåndteringspille. I tilfeller med økende konverteringer har jeg kommet til en enkel konklusjon. Det er ingen 100 % utsagn som alltid vil fungere for alle. Magiske piller også. Vi skrev tidligere om hvordan ordet «gratis» i noen tilfeller reduserer konverteringer. Hva kan vi si om andre "hundre prosent" sannheter.

Så hvor mye kan du øke konverteringsfrekvensen bare ved å endre knappefargene?

Vi fikk opptil 65 % økning i konvertering. 65 % var maksimalt testresultat. Gjennomsnittet var 11 %. Men selv denne økningen i konvertering er et veldig godt resultat. Med tanke på at dette kan oppnås ved å endre fargen på knappen.

Rødt er fargen på vinnerne

Mange eksperttester sier at en rød knapp har høyest konverteringsfrekvens. Hvorfor? Vi vet at hver farge har sine egne assosiasjoner og fremkaller visse følelser. Rødfargen betyr stopp, fare og lidenskap. Og i de fleste tilfeller (manes det) fører det til beste resultater innen internettmarkedsføring.

Nedenfor er algoritmen for å lage A/B-tester:

1. Lag en widget i konstruktøren. Tar 5 minutter.
2. Kopier den og gjør endringer for testen. Tar 1 minutt.
3. Opprett en A/B-test og velg disse widgetene. Tar 1 minutt.

1. Opprette en widget i konstruktøren

For å lage en widget må du være registrert i konstruktøren.

Opprettingsprosessen består av 3 trinn:

1. Velg widgetmalen du vil bruke.
2. Rediger widgeten: - skriv ønsket tekst - endre fargen og last opp et bilde om nødvendig
3. Velg skjerminnstillinger: - når du skal vise widgeten (etter tid, når du forlater, når du ruller siden osv.) - på hvilke enheter (datamaskin, mobil, nettbrett) - hva du skal gjøre etter konverteringen (si takk, omdirigere via en lenke eller bare lukk widgeten)

Du kan se denne videoen om hvordan du lager en widget. Hvert trinn diskuteres i detalj her. Tekstinstruksjoner på å opprette en widget er plassert.

Jeg vil merke meg at det er mye flere tilpasningsmuligheter i designeren. Vis for eksempel når du ser på et visst antall sider, etter ukedag, etter henvisningskilde, visningsfrekvens og mye mer. Men først anbefaler jeg deg å bruke de grunnleggende innstillingene, og deretter eksperimentere med flere.

2. Kopier widgeten og gjør endringer for testen

Etter at du har opprettet en widget, må du lage en kopi av den. For å gjøre endringer i den nye widgeten og kjøre en A/B-test. For å gjøre dette klikker du på "Kopier"-ikonet i den opprettede widgeten.

Den aktiveres automatisk på nettstedet. Nå må vi slå den av, siden den ikke er redigert. For å gjøre dette, endre status.

Gå nå til innstillingene ved å klikke på "Legg til i redaktør"-ikonet.

Her endrer du ønsket element du vil teste. La oss for eksempel endre fargen på knappen. Dette gjøres med ett klikk. Du trenger bare å velge en annen knappfarge.

Klikk på "Knappfarge" og velg den du vil ha.

Etter det lagrer du widgeten. I det fjerde trinnet trenger du ikke å endre noe for å beholde innstillingene til den forrige widgeten. For å gjøre dette, klikk ganske enkelt på "Lagre"-knappen.

Nå har du laget 2 widgets med forskjellige farger knapper Du kan gå videre til å lage en A/B-test. For enkelhets skyld gjenstår det bare å endre navnet i den andre widgeten.

3. Lag en A/B-test

For å lage en test, må du gå til "A/B-tester"-menyen. Og klikk på "Opprett test"-knappen.

Her trenger du:

Velg et nettsted - skriv navnet på testen

Velg testtype

Angående type test. KEPLER LEADS har 2 forskjellige typer A/B-test: Klassisk og Individuell. Forskjellen er å vise widgets til returnerende besøkende. Hvis du vil vise en tilbakevendende besøkende nytt alternativ widget, velg Klassisk test. Hvis du vil at den returnerende brukeren ikke skal vises et annet widgetalternativ (den første som vises huskes og bare denne utløses alltid, avhengig av skjerminnstillingene), velg Individuell.

Etter å ha valgt testtype, klikk på "Legg til"-knappen. Det siste trinnet gjenstår - velg widgets for testen. For å gjøre dette, klikk på "Widgets"-cellen og velg dem.

Etter å ha valgt widgets, sjekk om de alle er aktive. Hvis det er inaktive widgets, kan du aktivere dem her.

Alle! Testen er opprettet. Du kan se alle resultatene i teststatistikken. For å gjøre dette, klikk på "Vis"-ikonet til høyre for testnavnet. Anbefaler å kjøre tester på total trafikk fra 1000 visninger (dette kan ses i «Visninger»-kolonnen). Etter dette bestemmer du deg for å kjøre neste test.

Konklusjon

Arbeidet ditt slutter ikke der. Nå må vi spore resultatene, og etter å ha nådd betydelige data (vi anbefaler 1000 eller flere besøkende) teste andre hypoteser. Dette kan være overskrifter, handlingsfremmende tekster, verdiforslag, bilder osv. Vi vil skrive om andre A/B-tester i de følgende artiklene. Del resultatene dine i kommentarene.

Jeg fortsetter å publisere interessante, og etter min mening nyttige nyheter fra den store og vidstrakte verden SEO. I dag skal vi snakke om farger på nettsider... Ja, ja, akkurat om fargevalg. Vel, la oss begynne. Farge på nettsteddesign påvirker klikkfrekvensen for annonsering, mener psykologer fra University of Oxford i USA.

Behavioral: påvirkningen av nettstedsfarge på klikkfrekvensen for annonsering på portaler

Det har amerikanske forskere regnet ut vanlig bruker bruker ca. 2 minutter på én Internett-portal. Av disse er de siste 4-7 sekundene avgjørende for oss - SEO-spesialister, selv om dette også gjelder designere. Det er i denne perioden at brukeren enten forlater nettstedet eller klikker på annonsen som tilbys ham. Valget avhenger av nettsted og annonseblokkfarger. Det "dårligste" (uønsket og ikke-klikkbare) alternativet nettsteddesign- dette er å designe siden i grå eller røde toner. Trafikken vil nærme seg null (klikkfrekvens), og det samme vil effektiviteten til annonsering som legges ut på en Internett-ressurs. Komfort og ro oppleves av brukere som er på steder der den dominerende fargen er hvit. De klikker godt på bannere, kontekstuell annonsering de tiltrekkes bare hvis overskriftene er uventet (veldig) lyse og har høy kontrast, og teksten og nettadressen har maksimal størrelse. Nesten det samme skjer med grønne design.

Blå portaldesign er for tillit, og gul er best for kontekst

Nettsteder med blått design og layout inspirerer til tillit (de som umiddelbart dukker opp er: sosiale medier"VKontakte" og "Facebook"). Interessant nok fungerer reklame her hvis den er plassert på en hvit bakgrunn, og overskriftene er satt i en farge 2 nyanser mørkere (og igjen passer dette til vår favoritt "VKontakte" og Facebook). Mest vinnende farge på nettsteddesign, ifølge britiske psykologer, gul. Forholdet mellom besøk og klikk her er 1 til 2,5, siden mange Internett-brukere ser på 2-3 annonser samtidig. Men bannere på alle gule nettsteder er ineffektive. En annen god farge for utformingen av portaler der folk klikker på annonseblokker og bannere er brun som ikke er kontrasterende. Her er resultatet for bannerannonsering er 1 klikk per 3 besøk, for kontekst er det omtrent 1 til 2.

PS. La oss oppsummere. Det første som forvirrer oss er selvfølgelig at publikummet som ble testet ikke er russisktalende, vi har en annen mentalitet. Likevel er ikke innbyggere i CIS innbyggere i Amerika eller Europa. Russiske nettsteder har alltid vært preget av regnbuefarger og nyanser i design, i motsetning til de beherskede europeiske og amerikanske Internett-ressursene (et slående eksempel er Apple-nettstedet). For det andre, i forbindelse med dette, "klikkes" våre annonser (min egen observasjon) fordi de er lyse og kontrasterende. Du kan være uenig om gule nettsteder og portaler - de vekker ikke tillit blant brukere av hjemmenettverk (jeg vil ikke engang si det med en gang om den store gule portalen - ingen kommer til å tenke på), bortsett fra kanskje blant små barn (selv om dette er min mening)! Generelt vil du sannsynligvis trenge en liten test, som jeg vil snakke om i delen "eksperimenter".

Det er ingen grunn til å prøve å gjette fargedesignet til annonser som det er mer sannsynlig at besøkende klikker på. Du må eksperimentere med å vise annonser i forskjellige farger. Og basert på resultatene vil vi finne ut preferansene til de besøkende på nettstedet ditt. Men utenfor vinduene er det 21. århundre. Derfor skal vi skrive et lite manus som vil gjøre alt for oss.

Hvilke farger å velge for reklame

I eksperimentet mitt bestemte jeg meg for tre primærfarger: blå, rød og grønn. Jeg tok hver av dem med forskjellige grader av lysstyrke. Og jeg la til en farge til - fargen på lenkene på nettstedet mitt. Dermed vil syv farger delta i eksperimentet mitt.

Skript for rotasjon av annonsefarger

Som grunnlag tar jeg skriptet for å vise annonser fra YAN (Yandex Advertising Network), som ble gitt til meg av Profit-Partner. La oss legge til automatisk fargeendring til den. For hver farge lager vi en unik etikett. Slik at du i fremtiden, ved å bruke disse delene, kan analysere hvilken farge på annonser på nettstedet ditt som er mer attraktivt for besøkende.

La oss sette skriptet i bruk og begynne å samle inn data. Statistikken vil vise skivene laget av skriptet vårt.

Hvordan utføre et eksperiment på riktig måte med å velge fargedesign på annonser

Forsøket skal gjennomføres døgnet rundt i minst en uke. For å ta hensyn til alle tidsavhengigheter og funksjoner i helger og arbeidsdager. Det er viktig at hvert fargeskjema vises minst 1000 ganger.

Konklusjoner fra eksperimentet, hvilken farge er bedre

Hvis du velger mellom tre hovedfarger, så er det ingen tydelig leder på siden min. En forskjell på flere prosent kan skyldes feil. Men den generelle trenden faller sammen med anbefalingene fra Profit-Partner COP-spesialister - jo mer klikkbar farge er rød.

Hvis vi ser på alle de syv fargene i detalj, foretrekkes følgende gruppe av besøkende: mørk rød (#990000), lysegrønn (#00CC00) og mørk blå (#000099).

Jeg anbefaler deg å ikke se på statistikken min, men å utføre ditt eget eksperiment med å velge fargedesign på annonsene dine annonsenettverk Yandex.
Hvis du har flere nettsteder, må du utføre ditt eget eksperiment for hvert nettsted.
Hvis du endrer designet, kjører du eksperimentet på nytt.
Hvis du har flere annonseenheter som jeg, må du også utføre ditt eget eksperiment for hver annonseenhet. Du vil bli overrasket, men på nettstedet mitt er brukerpreferansene forskjellige annonseblokker i midten og slutten av artikkelen.
Forsøket skal gjennomføres døgnet rundt i minst 7 dager.

Operasjon