Reaktivni spletni dizajn: Skrivnost gradnje spletnih aplikacij, ki se počutijo neverjetno

V zadnjem letu sem opazil dve subtilni tehniki, ki jih uporabljajo nekateri razvijalci, ki uporabljajo spletno aplikacijo od počasnega in čudaškega do visoko reaktivnega in poliranega.

Menim, da so te tehnike dovolj pomembne, da potrebujejo ime: Reaktivni spletni dizajn.

Če povzamemo, reaktivno spletno oblikovanje je nabor tehnik, ki jih lahko uporabimo za izdelavo spletnih mest, ki se vedno počutijo hitro in se odzivajo na uporabnikov vnos, ne glede na hitrost ali zamudo omrežja.

Kot spletni razvijalci in avtorji okvirov menim, da je iskanje načinov, kako narediti te vzorce privzete v vsem, kar gradimo, glavna prednostna naloga za izboljšanje UX-a in zaznane učinkovitosti na spletu.

Tehnika 1: Takojšnje obremenitve s skeletnimi zasloni

Če se dobro uporablja, te tehnike skoraj nikoli ne opazimo, vendar ima velik vpliv na zaznano delovanje spletnega mesta.

Zanimivo je, da tehniko uporabljajo skoraj vse domače aplikacije in omogočajo, da se počutijo zelo reaktivno tudi v groznih omrežjih, na spletu pa je skoraj nikoli ne uporabljajo!

Priložnost tako leži!

Skratka, okostni zasloni zagotavljajo, da vsakič, ko uporabnik pritisne na kateri koli gumb ali povezavo, stran takoj reagira s prehodom uporabnika na to novo stran in nato vsebino naloži na to stran, ko postane vsebina dostopna.

Facebook s skeletnim zaslonom izboljša izboljšanje zaznane uspešnosti, ko ga prvič odprete

Skeletni zasloni so ključna tehnika delovanja, saj se aplikacije počutijo veliko hitreje, saj močno zmanjšajo število trenutkov, ko se uporabnik sprašuje:

Kaj se dogaja? Se sploh nalaga? Ali sem se dotaknil prav?

Flipkart.com je redek primer spletnega mesta, ki uporablja ta pristop. Brskanje po kategorijah ali tapkanje po izdelkih se zato počuti strelo, tudi če se dejanski rezultati naložijo nekaj sekund:

Posnetek zaslona spletnega mesta flipkart.com se je z začetnega zaslona začel v samostojnem načinu Android

Kadar se ta tehnika najbolje uporablja, lahko vsebino, ki je že na voljo, na primer sličice ali naslove člankov, ponovno uporabite za izboljšanje zaznane uspešnosti, s čimer se obremenitve počutijo resnično takojšnje.

app.jalantikus.com uporablja vzorec Zasloni skeleta in pri prehodih ponovno uporablja naslove in sličice

Preskušanje mest s skeletnimi zasloni

Preizkušanje, kako dobro spletna mesta uporabljajo to tehniko, je enostavno: preprosto uporabite spletno emulacijo Chrome, da naredite omrežje čim počasneje in nato kliknite po spletnem mestu. Če bo to dobro, se bo mesto še vedno počutilo prijetno in odzivno na vaš vložek.

Najpočasnejša hitrost, ki jo podpira emulacija v omrežju Chrome

Tehnika 2: "Stabilne obremenitve" s pomočjo vnaprej določenih velikosti elementov

Veste tisti občutek, kjer spletno mesto skače naokoli, medtem ko ga poskušate uporabljati? Pravkar poskušate prebrati članek in se besedilo še naprej giblje? Temu pravimo "nestabilen tovor" in ga moramo zakuriti z ognjem .

Vsebina slate.com skače naokoli zelo agresivno, ko se stran nalaga. Počasnejša kot je mreža, ki jo imate, daljši bo skok.

Zaradi nestabilnih obremenitev je spletna mesta težko medsebojno vplivati ​​in se počutijo ... dobro ... Nestabilno!

Brskanje po nestabilnem spletnem mestu me vedno spomni na to, kako si predstavljam, da bi bilo videti, ko bi se med potresom sprehajal

Nestabilne obremenitve povzročajo slike in oglasi, vdelani na stran, vendar ne vključujejo nobenih podatkov o velikosti. Brskalnik privzeto pozna velikost le teh, ko se naložijo, tako da takoj, ko se slika naloži, THUNK !, celotna stran drsi navzdol .

Da bi to preprečili, morajo vse oznake na strani aktivno vključevati dimenzije slike, ki jo bodo vsebovale.

V mnogih primerih so slike, ki se uporabljajo na določenih straneh, vedno iste velikosti, zato je njihova velikost lahko preprosto vključena v predlogo HTML, v nekaterih primerih pa je velikost slik dinamična, zato je treba njihovo velikost izračunati, ko je slika naložena in nato šablonirana. v HTML, ko je ustvarjen.


Enako velja za oglase, ki so pogosto krivci za nestabilne obremenitve. Kadar koli je to mogoče, ustvarite div, ki bo vseboval oglas, in v predlogi nastavite, da bo po velikosti najboljši ugibanje, kako velik bo ta oglas.

Upoštevajte, da so nestabilne obremenitve najslabše v počasnih omrežjih, saj ste pravkar naselili branje vsebine, ko nenadoma poskoči, in nikoli ne morete biti povsem prepričani, da ste varni.

Vse skupaj

Na reactive.surge.sh sem ustvaril majhno predstavitveno mesto, da dokažem razliko med običajnim in reaktivnim spletnim oblikovanjem.

Navadno nalaganje izdelkov

Upoštevajte, kako počasen je in kako frustrirajoče je skakanje vsebine. Zanimivo je, da so ta vrstna reda bolj moteča pri mobilnih napravah, ko tapkate po zaslonu in ne vidite, kako reagirajo.

Nalaganje članka z reaktivnim spletnim oblikovanjem

Z reaktivnim dizajnom se obremenitev počuti takojšnje in spletno mesto ostane reaktivno, ko večkrat tapnete ikono hrbta in naslov izdelka

Zavijanje

Bolj kot je mreža počasnejša, slabša je uporabniška izkušnja, ko prehodi strani v omrežju blokirajo in strani dalj časa skačejo.

Z reaktivnim spletnim oblikovanjem lahko svojo izkušnjo počutimo hitro in odzivno ("Odziven dizajn", kot je že bilo ime, dhoh!), Tudi v počasnih in bolečih omrežjih.

Rada bi slišala o podatkih skupnosti o učinku zaznane uspešnosti na KPI, kot sta angažiranost in prihodki!

Poleg tega bi spodbudil avtorje okvirjev in knjižnic, naj razmislijo, kako narediti okostne zaslone in stabilne obremenitve kot privzete, znane tudi kot jama uspeha.

Če imate kaj o tem, prosim, tvitnite mi @owencm, in če ste uživali v tem prosim, dajte mu a!

P.S. se prepričajte, da na mobilni napravi preverite predstavitveno spletno mesto democtive.surge.sh in si ogledate popolno slavo!