Testare divizată cu foi de stil CSS

Publicat: 2021-07-19

Cea mai rapidă modalitate de a împărți semnificativ testarea unui site web este de a face modificări îndrăznețe în foaia de stil în cascadă (CSS) în cadrul unui experiment la nivel de site.

De ce sunt importante foile de stil CSS

Fișierul principal CSS al unui site web este un punct central de referință care controlează stilurile, pozițiile și comportamentele comune ale tuturor elementelor de pe fiecare pagină web.

În fișierul principal CSS sunt setările pentru toate fonturile, marginile, culorile, aliniamentele și multe altele. Este cel mai important fișier de pe majoritatea site-urilor web șablonate și poate schimba drastic aspectul unui site web doar cu o modificare mică.

Teste divizate pe site pe care ar trebui să le efectuați de fiecare dată

Există multe elemente comune pe un site web care joacă un rol important în cât de ușor este citirea, utilizarea, navigarea, evidențierea apelurilor la acțiune și afișarea tuturor informațiilor cheie.

Atunci când un utilizator decide dacă va contacta sau poate face o achiziție pe un site web, oricare dintre cele de mai sus ar putea fi un factor decisiv în oprirea conversiei. Mai jos sunt câteva considerații cheie pentru elementele la nivel de site:

Butoane de îndemn

Toate conversiile online încep cu un buton de îndemn (CTA), un link sau un widget. Dimensiunea, culoarea, formularea și poziția uniformă a acestor CTA fac o mare diferență față de ratele de conversie. Anumite culori ale butoanelor CTA, de exemplu, se pot amesteca prea mult cu fundalul sau pot pune inconștient utilizatorul să nu mai facă clic pe ele, în funcție de ceea ce percep ca o culoare negativă. Textul folosit pe linkuri și butoane face, de asemenea, o diferență. De exemplu, simpla modificare a butonului „TRIMITE” al unui formular pentru a spune „TRIMITE” produce rezultate mai bune, deoarece „trimiteți” este perceput ca un cuvânt puternic. Puteți citi mai multe despre acest lucru în ghidul final al CTA-urilor aici, pe VWO.com.

Există o ușoară variație de verde utilizat pentru butoanele „Cumpărați acum”. Combinația 2 a produs 1,5% mai multe produse adăugate în coș decât combinația 1 originală — Există o ușoară variație de verde utilizat pentru butoanele „Cumpărați acum” (evidențiat). Combinația 2 a generat 1,5% mai mulți utilizatori care au adăugat produse în coș decât Controlul original, Combinația 4 a fost cu 1,4% mai proastă

Marimea fontului

Acest element rar testat joacă un rol important în accesibilitate pentru mulți utilizatori. Fonturile sunt adesea prea mici pentru ca unii utilizatori să le poată citi, deci este posibil să fie nevoie să utilizeze funcția de zoom dacă sunt familiare, dar acest lucru nu este întotdeauna posibil sau ușor pe dispozitivele mobile. Dimensiunile fonturilor prea mari pot fi, de asemenea, dăunătoare, deoarece pot încetini viteza de citire, în special pe versiunile de site-uri web pentru dispozitive mobile. Citiți mai multe despre știința din spatele dimensiunilor fonturilor aici pe imarc.com.

Tipul fontului

Din nou, stilul fontului este rar testat pe multe site-uri web, se pare că este decis în faza inițială de proiectare a dezvoltării și apoi uitat pe multe site-uri web. Stiluri diferite de fonturi au niveluri diferite de lizibilitate. De asemenea, unele fonturi sunt disponibile numai pe anumite dispozitive, iar unele apar foarte prost pe anumite dispozitive la anumite dimensiuni, fără Rasterizarea fonturilor. Puteți utiliza o familie de fonturi pentru a utiliza o serie de fonturi, începând cu cele preferate și trecând la fonturi mai simple, cum ar fi Arial, care sunt întotdeauna pe fiecare dispozitiv. Pot fi incluse noi fonturi pe un site web prin JavaScript sau un serviciu precum Google Fonts. Puteți afla mai multe în această postare pe TypeWolf.com pe primele zece fonturi web din 2016.

Stilul fontului

Stilurile de fonturi, cum ar fi înălțimea liniei, sublinierea, îndrăzneala, culoarea și marginile afectează, de asemenea, accesibilitatea și lizibilitatea. Este mai probabil să faceți clic pe linkuri atunci când sunt albastre și subliniate, lucru care a fost testat meticulos de Google și eBay de-a lungul anilor, iar Google a testat chiar și linkuri negre în 2016. Dacă linkurile nu se evidențiază clar ca linkuri pe site-ul dvs. , atunci ar trebui să fie testați și veți găsi că prezintă adesea un angajament mai mare după ce au fost schimbați.

Conversiile au crescut cu 1,9% prin simpla modificare a fontului de pe acest site web

Culori de fundal

Adesea, site-urile web sunt realizate pe un fundal alb, dar dacă vă uitați la site-ul dvs. preferat de știri sau la platforma de socializare, este adesea o ușoară nuanță de albastru sau gri. Culorile de fundal pot ajuta anumite zone ale paginii web să iasă în evidență, cum ar fi o casetă de informații sau un banner de ofertă specială. De asemenea, culoarea de fundal poate întări marca sau tipul de produs afișat și această corelație îmbunătățește ratele de conversie, deoarece conținutul pare mai relevant. Aflați mai multe despre psihologia culorilor pentru site-uri web pe acest articol de pe Jimdo.com și vedeți cum culorile precum portocaliu înseamnă o afacere bună (gândiți-vă la Amazon) și albastru înseamnă neutralitate și tehnologie (gândiți-vă la Facebook sau Twitter).

Repoziționarea sau ascunderea elementelor

Fișierul CSS controlează marginile și căptușeala pentru toate elementele obișnuite de pe paginile web și vă permite, de asemenea, să eliminați complet anumite elemente utilizând comanda „afișare: nici unul”. Unele moduri în care puteți utiliza acest lucru sunt încercarea de a reduce spațiul irosit pe verticală, eliminarea informațiilor inutile, modificarea spațiului între CTA-uri importante sau experimentarea eliminării anumitor blocuri de conținut. Uneori, mai puțin este mai bine pe paginile web (principiul păstrează-o-simplu-prost) și este o practică bună să vezi cât de mult poate fi eliminat dintr-o pagină web, îmbunătățind în același timp rata de conversie.

Implicarea s-a îmbunătățit cu peste 16% când a fost adăugat conținut pe această pagină — Implicarea s-a îmbunătățit cu peste 16% atunci când conținutul a fost inclus în paginile categoriilor

Platforme pentru testarea divizată a fișierelor CSS pe site

Este foarte important să păstrați șabloanele pe un site web consecvente pentru fiecare utilizator în parte, atunci când trec de la o pagină la alta. Ar putea fi dăunător (și cu siguranță un experiment slab) dacă o singură pagină ar fi testată A / B în timp ce altele au rămas la fel.

Este necesar un software special de testare împărțit pentru a menține modificările fișierului CSS consecvente de la pagină la pagină pentru fiecare utilizator individual, din păcate „Experimentele de conținut” gratuite de la Google Analytics nu răspund acestor tipuri de teste împărțite. Iată câteva instrumente pe care ați putea dori să le utilizați:

Optimizator de site-uri vizuale (VWO) - vwo.com - Am găsit că acesta este cel mai simplu software de testare divizată de implementat. Se ocupă de toate tipurile de teste divizate pe HTML, CSS sau JavaScript și, de asemenea, generează hărți de căldură ale utilizatorului, dacă este necesar. Structurile de preț pot fi găsite aici
Optimizely - optimizely.com - Aceasta gestionează, de asemenea, toate tipurile de teste divizate pe HTML, CSS sau JavaScript și poate face unele teste divizate foarte avansate, dacă este necesar. Informații privind prețurile pot fi găsite aici

Concluzie

Configurarea unui test de divizare CSS la nivel de site este ușor și eficient, dar este posibil să aveți nevoie de ajutor de 15 minute de la un dezvoltator dacă nu sunteți familiarizați cu CSS.

Odată ce site-ul web are fonturile, stilurile și CTA-urile potrivite, vă puteți concentra pe paginile de destinație cheie ale site-ului web și pe alte elemente de nișă. Acest lucru mărește ratele de conversie și face site-ul web mult mai eficient fără a necesita trafic suplimentar.

Dacă aveți nevoie de ajutor, nu ezitați să ne contactați.