Proiectare web reactivă: Secretul construirii de aplicații web care se simt uimitor

În ultimul an, am observat două tehnici subtile utilizate de unii dezvoltatori care fac ca o aplicație web să se simtă lentă și nebunească, până la foarte reactivă și șlefuită.

Cred că aceste tehnici sunt suficient de importante încât au nevoie de un nume: Reactiv Web Design.

În rezumat, designul web reactiv este un set de tehnici care pot fi utilizate pentru a construi site-uri care se simt întotdeauna rapid și receptiv la intrarea utilizatorului, indiferent de viteza sau latența rețelei.

În calitate de dezvoltatori web și autori de cadre, cred că găsirea modalităților de a face ca aceste modele să fie implicite în tot ceea ce construim este o prioritate maximă pentru îmbunătățirea UX și a performanțelor percepute pe web.

Tehnica 1: încărcări instantanee cu ecrane de schelet

Atunci când este folosită bine, această tehnică este aproape niciodată observată, dar are un impact imens asupra performanțelor percepute ale unui site.

Interesant este că tehnica este folosită de aproape toate aplicațiile native și le face să se simtă foarte reactive chiar și pe rețelele groaznice, dar aproape niciodată nu este folosită pe web!

Oportunitatea în acest fel se află!

Pe scurt, ecranele scheletului se asigură că, de fiecare dată când utilizatorul atinge orice buton sau link, pagina reacționează imediat tranziționând utilizatorul la acea pagină nouă și apoi încărcând conținut în pagina respectivă, când conținutul devine disponibil.

Facebook folosind un ecran cu schelet pentru a îmbunătăți performanțele percepute atunci când îl deschideți pentru prima dată

Ecranele scheletului sunt o tehnică de performanță percepută esențial, deoarece fac ca aplicațiile să se simtă mult mai rapid, reducând dramatic numărul de momente în care utilizatorul este lăsat să se întrebe:

Ce se întâmplă? Este chiar încărcarea? L-am atins corect?

Flipkart.com este un exemplu rar de site web care folosește această abordare. Prin urmare, navigarea prin categorii sau atingerea produselor se simte fulgerând rapid, chiar și atunci când rezultatele reale durează câteva secunde pentru a încărca:

O captură de ecran a flipkart.com lansată de pe ecranul de pornire în mod autonom pe Android

Când se utilizează cel mai bine această tehnică, conținutul care este deja disponibil, cum ar fi miniaturile sau titlurile articolului, poate fi reutilizat pentru a îmbunătăți performanțele percepute și mai mult, făcând încărcările să se simtă cu adevărat instantanee.

app.jalantikus.com utilizează modelul Ecranelor scheletului și reutilizează titlurile și miniaturile în tranziții

Site-uri de testare cu ecrane scheletice

Testarea cât de bine utilizează site-urile această tehnică este ușor: pur și simplu folosiți emulația de rețea Chrome pentru a face rețeaua cât mai lentă, apoi faceți clic pe un site. Dacă se descurcă bine, site-ul se va simți încântător și răspunde la contribuția dvs.

Cea mai lentă viteză acceptată în emulația rețelei Chrome

Tehnica 2: „Încărcări stabile” prin dimensiuni predefinite pe elemente

Știți că sentimentul în care un site web sare în jurul valorii în timp ce încercați să-l utilizați? Încercați doar să citiți un articol și textul continuă să se miște? Asta numim o „încărcare instabilă” și trebuie să o ardem cu foc .

Conținutul slate.com sare foarte agresiv pe măsură ce pagina se încarcă. Cu cât rețeaua este mai lentă, cu atât sare mai mult.

Încărcările instabile fac ca site-urile să interacționeze greu și le face să se simtă ... bine ... Instabile!

Căutarea pe un site instabil îmi amintește întotdeauna de modul în care îmi imaginez că s-ar putea plimba în timpul unui cutremur

Încărcările instabile sunt cauzate de imagini și anunțuri încorporate într-o pagină, dar care nu includ informații de dimensionare. În mod implicit, browserul cunoaște dimensiunea acestora doar odată ce au fost încărcate, așa că de îndată ce o imagine se încarcă, THUNK !, întreaga pagină alunecă în jos .

Pentru a preveni acest lucru, toate etichetele de pe o pagină trebuie să includă proactiv dimensiunile imaginii pe care le vor conține.

În multe cazuri, imaginile utilizate pe anumite pagini au întotdeauna aceeași dimensiune, astfel încât dimensiunea lor poate fi inclusă pur și simplu în șablonul HTML, dar în unele cazuri, dimensiunea imaginilor este dinamică și, astfel, dimensiunea lor trebuie calculată atunci când imaginea este încărcată, apoi șablonată. în HTML când este creat.


Același lucru este valabil și pentru reclame, adesea un vinovat când vine vorba de încărcări instabile. Ori de câte ori este posibil, creați o divizare care va conține un anunț și setați-o în dimensiunea dvs. cu cea mai bună presupunere a cât de mare va fi acest anunț.

Rețineți că încărcările instabile sunt în situația lor cea mai grea în rețelele lente, deoarece tocmai v-ați stabilit să citiți conținut atunci când acesta sare brusc și nu puteți fi niciodată sigur că sunteți în siguranță.

Pune totul la un loc

Am creat un mic site demonstrativ la reactive.surge.sh pentru a demonstra diferența dintre designul web convențional și reactiv.

Încărcare convențională a articolelor

Rețineți cât de lent se simte și cât de frustrant este saltul de conținut. Interesant este că aceste ordine de magnitudine sunt mai enervante pe dispozitivele mobile atunci când ating ecranul și nu văd cum reacționează.

Încărcarea unui articol cu ​​design web reactiv

Cu un design reactiv, sarcina se simte instantaneu, iar site-ul rămâne reactiv când atinge pictograma din spate și titlul articolului de mai multe ori

Înveliți

Cu cât rețeaua este mai lentă, cu atât este mai rău experiența utilizatorului atunci când tranzițiile de pagină se blochează în rețea și paginile sărind pe perioade extinse.

Cu Reactiv Web Design putem face ca experiența noastră să se simtă agitată și să răspundă („Responsive Design”, așa cum a fost deja luat un nume, chiar!) Chiar și pe rețele lente și dureroase.

Mi-ar plăcea să aud despre datele din comunitate cu privire la efectul performanței percepute pe API-uri, cum ar fi implicarea și veniturile!

În plus, aș încuraja autorii de cadru și bibliotecă să ia în considerare modul de creare a ecranelor de schelet și încărcări stabile în mod implicit, cunoscute și sub numele de groapă a succesului.

Dacă aveți gânduri în acest sens, vă rugăm să-mi redactați un mesaj @owencm, iar dacă v-a plăcut acest lucru, vă rugăm să-i dați un ♥!

P.S. aveți grijă să consultați site-ul de demo reactive.surge.sh pe un dispozitiv mobil, pentru gloria deplină!