Vizualna stabilnost elementov med nalaganjem strani je pomembna za spletno prodajo. Nenadni premiki besedila ali gumbov zmotijo uporabnike in povečajo število zapuščenih nakupovalnih košaric. To je tehnični detajl, zaradi katerega trgovine pogosto izgubljajo kupce.
Kaj pomeni tehnična stabilnost vmesnika?
Uporabnik odpre stran in bere opis izdelka. Med branjem se naloži oglasna pasica ali večja slika in vsebina poskoči navzdol. Bralec izgubi vrstico in mora spet poiskati mesto, kjer je ostal. Težava je še večja pri klikanju. Kupec želi potrditi plačilo, a se zaradi naknadno naložene slike nad gumbom struktura zamakne. Namesto potrditve nakupa klikne na preklic naročila ali na sosednji oglas.
Ta pojav imenujemo kumulativni premik postavitve (CLS). Meri nepričakovane premike vsebine med nalaganjem strani. Spletni ustvarjalci morajo vsakemu elementu vnaprej določiti prostor. Če brskalnik ne pozna dimenzij slike, bo prostor zanjo naredil šele po prenosu s strežnika. To premakne vse elemente pod njo in oteži uporabo strani.
Zakaj nestabilnost vpliva na prodajo?
Skakajoči elementi zmanjšujejo prodajo. Kadar stran deluje nepredvidljivo, obiskovalci pogosto podvomijo v njeno varnost. Pri spletnem nakupovanju in vpisovanju podatkov s kreditne kartice je to problematično. Strani z veliko vizualnimi premiki imajo višjo stopnjo odboja. Ljudje zavihek zaprejo in odidejo h konkurenci.
Težava je najbolj očitna na mobilnih telefonih. Zasloni so majhni in že majhen zamik spremeni prikazano vsebino. Napačen dotik zahteva nalaganje nove strani in iskanje poti nazaj. To pogosto privede do prekinitve nakupa, saj uporabnik izgubi osredotočenost.
Izkušnja je podobna kot v fizični trgovini. Če prodajalec kupcu izmakne izdelek iz rok, preden ga ta odloži v košarico, bo kupec odšel. Na spletu se to dogaja prek premikajočih se digitalnih gumbov.
Iskalniki in vizualna stabilnost
Iskalniki pri razvrščanju rezultatov upoštevajo tudi tehnično uporabniško izkušnjo. Vizualna stabilnost sodi med osnovne pokazatelje. Če stran ob nalaganju poskakuje, iskalnik to oceni kot slabo izkušnjo in lahko zniža njeno uvrstitev.
Vpliv na organski obisk
Slabša uvrstitev pomeni manjši obisk. Napredna izdelava spletnih strani zato zajema vnaprejšnje določanje dimenzij za vse vizualne elemente. Programerji in oblikovalci morajo predvideti obnašanje vsebinskih blokov na vseh velikostih zaslonov.
Primer spletnega trgovca
Vpliv vizualne stabilnosti je razviden iz analitike. Trgovina s kolesarsko opremo je imela visoko stopnjo zapuščenih košaric na mobilnih napravah. Analiza je pokazala veliko premikov postavitve pri nalaganju galerije slik in gumba za preverjanje zaloge. Uporabniki so zato klikali mimo gumba za nakup.
Metrika kumulativnega premika (CLS) je na strani izdelka znašala 0,78. To je previsoka vrednost, saj priporočila iskalnikov zahtevajo rezultat pod 0,10.
Ekipa je popravila kodo. Slike izdelkov so dobile fiksna razmerja stranic. Prostor za oglase in priporočene izdelke so rezervirali s praznimi bloki pravih dimenzij. Optimizirali so nalaganje sistemskih in spletnih pisav, da zamenjava ni več spreminjala višine vrstic. Po popravkih je stopnja premika padla na 0,03.
Konkretni rezultati
- Odbojna stopnja je padla s 64 na 39 odstotkov.
- Konverzija se je v treh mesecih po popravkih povečala za 2,1 odstotka.
- Število pritožb glede uporabniškega vmesnika je upadlo za polovico.
Pri povprečnem naročilu 180 evrov in 40.000 mesečnih obiskovalcih je ta tehnični popravek občutno zvišal prihodke trgovine.
Odpravljanje tehničnih težav
Večino težav povzročajo slike in video posnetki brez navedenih dimenzij. Včasih se je slika naložila in sama zavzela prostor. Danes mora biti v kodi za vsako sliko določeno razmerje širine in višine. Brskalnik pred prenosom slike nariše prazen okvir in ga nato napolni. Besedilo pod sliko tako med nalaganjem ostane pri miru.
Spletne pisave so pogost razlog za zamik vsebine. Brskalnik za besedilo najprej uporabi privzeto sistemsko pisavo in takoj pokaže vsebino. Ko se naloži izbrana pisava strani, se besedilo preoblikuje. Ker imajo pisave različne širine črk in višine vrstic, se odstavek ob zamenjavi zmanjša ali poveča. Temu se izognemo z določitvijo nadomestne pisave, ki se po dimenzijah ujema s končno izbiro.
Dinamična vsebina in stabilnost
Vstavljeni oglasi in zunanji gradniki so lahko problematični. Oglasne mreže prikazujejo oglase različnih velikosti. Če prostor za oglas ni določen z minimalno višino, se vsebina ob prikazu večjega oglasa umakne. Za oglasna mesta je treba določiti fiksne bloke. Če se oglas ne naloži, naj na strani ostane prazen prostor. To je manj moteče kot premik bralnega območja.
Enako velja za dinamična obvestila. Pasice za piškotke ali popuste na vrhu zaslona lahko obiskovalca zmotijo. Če se naložijo z zamikom, vso vsebino potisnejo navzdol. Takšna obvestila bi morala vsebino prekriti kot lebdeči element ali pa imeti prostor na vrhu zaslona rezerviran že na začetku nalaganja.
Orodja za prepoznavanje napak
Za odkrivanje tehničnih premikov uporabljamo orodja za analizo hitrosti. Te napake namreč niso vedno vidne na hitrih povezavah in zmogljivih računalnikih, ki jih imajo programerji. V brskalniku se zato umetno upočasni omrežje in simulira izkušnjo povprečne mobilne povezave.
Sistemi za analitiko beležijo premike postavitve pri dejanskih uporabnikih. Orodja pokažejo, kateri element je povzročil premik in za koliko pikslov se je vsebina zamaknila. Na podlagi teh podatkov lahko popravimo problematične podstrani, še preden težava zmanjša prodajo.
Zanesljivost spletnih mest
Spletne strani morajo delovati predvidljivo. Tehnična stabilnost vmesnika je nujna za normalno uporabo.
Odprava skakajočih elementov se neposredno pozna pri konverzijah. Stabilna stran zadrži obiskovalca, olajša branje in preprečuje napačne klike med nakupom.
