Design receptiv: cele mai bune practici și considerații

Site-urile web responsive sunt site-uri care se adaptează la toate dimensiunile și rezoluțiile ecranului, nu numai pe desktop, ci și pe mobil, tabletă și, uneori, chiar pe televizor.

Potrivit Statista, traficul mobil a fost responsabil pentru 52,64% din tot traficul global în 2017, ceea ce înseamnă că un site web nu bine optimizat pentru dispozitive mobile pierde aproximativ jumătate din trafic . Până la sfârșitul anului 2018, este de așteptat ca cota globală de trafic pentru dispozitivele mobile să crească la 79%, ceea ce reprezintă o creștere excepțională.

Companiile fără un site web mobil rămân în urmă într-un ritm alarmant, deoarece 8 din 10 vizitatori nu vor mai interacționa cu un site web care nu se afișează bine pe dispozitivul lor. Este mult prea ușor pentru utilizatori să apese butonul Înapoi și să încerce o afacere rivală, iar Google chiar plasează site-urile web care nu răspund mai jos în căutarea lor .

Puteți susține testul Google de compatibilitate mobilă aici.

Înseamnă ceva din toate acestea că mobilul este mai important decât desktopul? Nu. 83% dintre utilizatorii de telefonie mobilă spun că ar trebui să poată continua experiența pe desktop dacă doresc.

Aruncă o privire la această versiune eBay optimizată pentru dispozitive mobile și la cum ar arăta dacă nu ar fi optimizată pentru dispozitive mobile. Ați lua în considerare și versiunea neoptimizată?

Pentru a proiecta site-uri web care pot concura pe internetul de astăzi, designerii web trebuie să fie experți în design web responsive (RWD). De unde ar trebui să înceapă?

O abordare pe mobil mai întâi a designului web receptiv

Designul web în primul rând mobil înseamnă proiectarea mai întâi a site-ului web mobil și lucrul până la versiunea desktop. Există o serie de motive pentru care această abordare funcționează bine.

1. Site-urile web mobile au mai multe preocupări de utilizare (acest lucru se datorează în mare parte lipsei imobiliare a ecranului), așa că este practic și mai eficient ca accentul principal să fie pe designul mobil.
2. Este mai ușor să măriți versiunea mobilă decât să reduceți versiunea desktop (din nou, din cauza lipsei de spațiu pe site-urile mobile).
3. Designul web pentru dispozitive mobile ajută la reevaluarea a ceea ce este necesar din punct de vedere vizual și funcțional.

Proiectarea unui site web ca site receptiv pentru dispozitive mobile îi obligă pe designeri să pună o serie de întrebări importante, deoarece există mai puține imobiliare pe ecran cu care să lucrați. Iată întrebările care trebuie puse:

• Este cu adevărat necesară această caracteristică/funcție?
• Cum putem proiecta ceva minimalist mai întâi pentru mobil, care ulterior se va extinde bine pentru desktop-uri?
• Merită acest efect vizual timpul necesar pentru încărcare pe mobil?
• Care este obiectivul principal și ce elemente vizuale ajută utilizatorii să-l atingă?

Vom arunca o privire la câteva exemple de design web receptiv într-un moment. Deocamdată, să vorbim despre ce dispozitive, dimensiunile ecranului și browserele web sunt relevante astăzi.

Ce rezoluții de ecran sunt relevante pentru designul web responsiv?

Iată cele mai comune rezoluții de ecran pentru utilizatorii de dispozitive mobile, tablete și desktop din întreaga lume. După cum puteți vedea, există o gamă largă de rezoluții, așa că nici mobilul, tableta și nici desktopul nu domină cota de piață în acest moment - ceea ce ne spune este că designerii ar trebui să le ia în considerare pe toate atunci când se gândesc la designul web responsive.

• 360x640 (mobile mic): 22,64%
• 1366x768 (laptop mediu): 11,98%
• 1920 x 1080 ( desktop mare): 7,35 %
• 375x667 (media mobilă): 5%
• 1440x900 (medie desktop): 3,17%
• 720x1280 (mobil mare): 2,74%

La fel ca în cazul defalcării dispozitivului, ar trebui să segmentăm datele în funcție de locație pentru a se potrivi cu datele demografice ale utilizatorilor (sau datele demografice anticipate ale utilizatorilor) ale publicului nostru țintă. De asemenea, merită să luați în considerare rezoluțiile care câștigă popularitate, deoarece, deși unele dimensiuni de ecran nu sunt în prezent atât de comune, acestea pot fi în viitor. Acest lucru îi va ajuta pe designerii receptivi să creeze UX pentru viitor, care va funcționa chiar și atunci când cota de piață se schimbă.

De exemplu, rezoluțiile 360x640 (care corespund în mare parte cu dispozitivele Samsung care folosesc Android) au crescut cu 5,43% în ultimul an. Designerii pot folosi informații valoroase ca acestea pentru a decide asupra punctelor de întrerupere cheie de răspuns înainte de a începe designul unui site web.

Ce browsere web sunt populare astăzi?

Designul web responsive înseamnă oferirea unei experiențe perfecte pe orice dispozitiv și, deoarece diferite browsere web redă pagini web în moduri diferite, site-urile web trebuie testate pentru a se asigura că sunt compatibile cu o varietate de browsere web mobile și desktop.

Chiar dacă scalarea unui site web la punctele de întrerupere responsive corecte este în primul rând responsabilitatea unui dezvoltator web, designerul web este cel care decide exact cum se va adapta un site web receptiv la diferite dimensiuni de ecran pentru a crea o experiență optimă de utilizator.

Iată o defalcare la nivel mondial a cotei de piață a browserelor web pentru dispozitive mobile și desktop.

• Chrome: 55,04%
• Safari: 14,86%
• Browser UC: 8,69%
• Firefox: 5,72%
• Opera: 4,03%
• Internet Explorer: 3,35%

Designul responsive nu se referă doar la „a face totul să se potrivească”, ci și la adaptarea la capabilitățile hardware-ului dispozitivului și a browserului web , precum și la rezoluția dispozitivului. Un exemplu în acest sens ar putea fi faptul că, în timp ce Google Chrome acceptă proprietatea CSS overscroll-behavior: (care definește ce se întâmplă atunci când utilizatorul defilează prea greu spre marginea ferestrei de vizualizare), nu este acceptat în niciun alt browser web.

Cele mai bune practici de design responsive

Eliminați frecarea

Așa cum am menționat mai devreme, o abordare a designului web responsive care primește telefonul mobil îi va ajuta pe designeri să evalueze ceea ce este cu adevărat necesar pentru ca utilizatorul să-și atingă obiectivul principal.

Pe măsură ce avansăm la versiunea pentru tabletă (și mai târziu la versiunea desktop), putem începe apoi să ne gândim la obiectivele secundare și la microinteracțiuni, fluxuri de utilizatori și CTA (indemnuri) care fac ca acele obiective ale utilizatorului să fie realizabile. Ceea ce este mai important este că ne concentrăm mai întâi pe obiectivele primare ale utilizatorului și eliminăm orice frecare inutilă care nu ajută nici obiectivele primare, nici secundare.

Un obiectiv principal ar putea fi achiziționarea unui produs, în timp ce obiectivul secundar ar putea fi înscrierea la un buletin informativ (care ar putea duce la o achiziție ulterioară).

Iată un exemplu grozav de eliminare a fricțiunilor: Deoarece interfețele mobile cu utilizatorul sunt de obicei mai greu de navigat, cel mai bine ar fi să treceți la o pagină de achiziție pentru magazinele mobile de comerț electronic și să activați doar finalizarea în mai mulți pași pentru magazinele de comerț electronic desktop.

Design pentru degetele mari

Designul web responsiv este complicat în sensul că utilizatorii vor interacționa cu site-ul web desktop prin clicuri, dar versiunea mobilă prin atingeri și glisări. Există și diferențe fizice. Utilizatorii de desktop au de obicei computerele pe o suprafață, în timp ce utilizatorii de telefonie mobilă își țin dispozitivele în mâini. Aceste diferențe schimbă semnificativ modul în care designerii de interfață de utilizare mobilă proiectează ținte de atingere și alte elemente importante de interfață cu care interacționează utilizatorii.

Să aruncăm o privire la câteva exemple:

• Oamenii se așteaptă de obicei ca navigarea principală pe desktop să fie în partea de sus; cu toate acestea, pe mobil, ar trebui să fie în partea de jos. Degetele mari nu ajung confortabil în vârf.
• Alte elemente interactive ar trebui să fie, de asemenea, ușor accesibile. Aceasta înseamnă să le păstrați în centrul ecranului, deoarece este mai dificil pentru degetele mari să ajungă în părțile laterale și colțurile ecranelor dispozitivului.
• Pentru ca acestea să poată fi accesate cu ușurință, linkurile importante și CTA-urile ar trebui să aibă o înălțime de cel puțin 44 de pixeli (țintele de atingere mai mici sunt dăunătoare pentru utilizare).

Lectură recomandată: Ghidul fundamental pentru utilizarea mobilă.

Profitați de hardware-ul nativ al dispozitivelor mobile

Hardware-ul mobil (cum ar fi camera dispozitivului sau serviciile GPS) nu este rezervat în mod special pentru aplicațiile native și, așa cum am menționat mai devreme, designul web responsiv nu înseamnă doar „a face totul să se potrivească”. Este, de asemenea, despre adaptarea la capacitățile dispozitivului. În cazul designului web mobil, deoarece dispozitivele mobile au camere ușor de utilizat, unele microinteracțiuni, cum ar fi introducerea datelor, sunt de fapt mai ușoare pe ecrane mai mici, atâta timp cât site-urile web profită de hardware-ul nativ disponibil.

Să aruncăm o privire la câteva exemple:

• Scanarea cardurilor de credit/încărcare (deoarece formularele sunt adesea dificile pe mobil)
• Partajarea fotografiilor pe rețelele sociale, deoarece media este deja pe dispozitivul dvs
• Autentificare cu doi factori (pentru că sunteți deja pe dispozitivul mobil)
• Verificarea rapidă a stocurilor/analitice (deoarece aplicațiile mobile simplifică informațiile)
• Efectuarea unei căutări pe web cu voce (deoarece hands-free este mai ușor decât tastarea)

Faceți layout-urile fluide/adaptabile în mod implicit

Nu toți utilizatorii își vor maximiza browserul desktop. Aceasta înseamnă că, deși designerii trebuie să ia în considerare punctele de întrerupere receptive ale dispozitivelor pe care utilizatorii le folosesc astăzi, trebuie să țină seama și de ceea ce se întâmplă între aceste puncte de întrerupere.

Punctele de întrerupere receptive ar trebui folosite pentru a „redistribui” aspectul și conținutul pe un dispozitiv nou, dar pentru a lua în considerare toate dimensiunile dintre acestea (doar pentru orice eventualitate), layout-urile trebuie să fie altfel fluide (adică se adaptează/se întind în mod natural ca browser-ul se redimensionează).

Țineți cont de aceste sfaturi atunci când proiectați machete fluide/adaptabile:

• Unitățile procentuale vor permite elementelor să fie fluide.
• Setarea lățimii minime și maxime poate activa scenariul „dar nu mergeți mai mic/mai mare decât acesta”.
• Formatele de imagine SVG pot fi mărite și reduse fără a pierde calitatea și sunt independente de rezoluție (spre deosebire de JPG și PNG, care nu sunt).

Nu uitați de orientarea peisajului

Am vorbit mai devreme despre anumite puncte de întrerupere receptive, dar trebuie să luăm în considerare și faptul că acele ferestre mobile pot fi afișate și în orientare peisaj. În timp ce implementarea unui aspect fluid va face din punct de vedere tehnic conținutul adaptabil, pierderea unei părți echitabile a feței de vizualizare portret poate fi o piedică în calea utilizării și accesibilității.

Navigațiile sunt de obicei sigure (uneori sunt mai bune, de fapt, deoarece utilizatorii navighează de obicei în orientare peisaj cu două degete mari), dar defilarea devine semnificativ mai dificilă, ceea ce este mai puțin decât optim, deoarece utilizatorului i se cere să deruleze mai mult pe peisaj.

Designerii ar putea dori să ia în considerare proiectarea și pentru puncte de întrerupere peisajului; de exemplu, elementele care se stivuiesc vertical pe mobil ar putea fi afișate ca un glisor cu butoane de navigare din stânga și din dreapta, ceea ce înseamnă că utilizatorul nu trebuie să deruleze.

Amintiți-vă, și tipografia poate fi receptivă

Chiar dacă designerii UX folosesc de obicei unități de pixeli pentru a proiecta site-uri web, pe web, un punct nu mai este neapărat egal cu un pixel, deoarece dispozitivele diferite au rezoluții diferite. iPhone X, de exemplu, are 458 PPI (pixeli per inch), așa că acolo unde dimensiunile pixelilor devin mai mici, putem obține o grafică mai clară în același spațiu fizic (Apple numește această tehnologie „Retina”, iar Android o numește „hDPI”).

Aceasta înseamnă că o dimensiune de font de 16 px, de exemplu, ar părea mai mare sau mai mică pe unele dispozitive, în funcție de rezoluția sa. Dezvoltatorii web vor folosi de obicei unități em pentru a defini dimensiunile fontului, care sunt un tip de unitate receptivă în care 1em este egal cu 1 punct.

Instrumentele de transfer de proiectare precum Zeplin, Sympli, Marvel și InVision pot ajuta designerii să colaboreze cu dezvoltatorii în chestiuni care sunt o responsabilitate comună. În timp ce designerii execută proiectarea, iar dezvoltatorii execută codul, în ansamblu, fluxul de lucru pentru proiectarea produsului este un efort de echipă care necesită o comunicare solidă.

Sfaturi și bune practici pentru optimizarea performanței designului responsiv

Designul web responsiv nu se referă doar la modul în care arată, ci și la modul în care acționează și se simte. Adaptarea site-urilor web astfel încât să se încarce mai repede pe dispozitivul dorit este la fel de importantă.

Lazy Load Imagini și videoclipuri non-vitale

Imaginile și videoclipurile reprezintă o mare parte din dimensiunea totală de descărcare a unui site web, dar nu trebuie să le încărcați pe toate odată. Există două scenarii în care redarea conținutului media poate fi întârziată: conținutul de sub fold poate fi încărcat pe măsură ce utilizatorul defilează sub fold, iar media care blochează randarea ar trebui să fie descărcată numai după ce aspectul și conținutul au fost descărcate. Această practică se numește încărcare leneșă, în care încărcarea elementelor grele, neimportante este întârziată pentru a îmbunătăți performanța paginii.

Încărcare condiționată

Unele elemente ale site-ului web nu sunt destinate utilizatorilor de dispozitive mobile sau cel puțin nu merită încărcătura cognitivă suplimentară. Ne dorim ca site-urile noastre mobile să fie simple, așa că este logic să ascundem elemente în anumite scenarii. Acestea fiind spuse, trebuie să ne asigurăm că nu irosim resursele browserului și lățimea de bandă încărcând aceste elemente chiar și atunci când sunt ascunse; prin urmare, este cea mai bună practică să includeți aceste elemente numai în anumite condiții.

Încă o dată, un dezvoltator poate realiza acest lucru cu cod; cu toate acestea, designerii pot îmbunătăți performanța paginii comunicând condițiile când și unde anumite elemente ar trebui și nu ar trebui să existe.

Imagini receptive

După cum am menționat mai devreme, unele dispozitive afișează mai mulți pixeli pe inch, ceea ce poate duce la neclaritatea imaginilor dacă nu sunt exportate la rezoluția corectă. În funcție de rezoluția dispozitivului, unele vor necesita imagini la dimensiunea dublă (@2x), triplă (@3x) și chiar cvadruplă (@4x). Browserele web acceptă acum elementul <picture> , care alege rezoluția corectă a imaginii în funcție de dispozitiv.

Designerii care creează site-uri web responsive pot adapta imaginile pe dispozitivul corect, asigurându-se că exportă la toate rezoluțiile utilizate pe dispozitivele actuale (dacă nu sunteți sigur, întrebați dezvoltatorul dvs. - comunicarea este esențială atunci când vine vorba de design web responsive).

Concluzie

Wireframingul poate ajuta la eliminarea cutelor la începutul procesului de proiectare, iar acest lucru funcționează bine atunci când se adoptă o abordare a designului web responsive orientată spre mobil. Poate că există un punct de întrerupere receptiv care necesită o atenție suplimentară sau poate există un concept care pur și simplu nu este eficient în ceea ce privește capacitatea de răspuns mobil. Este mai bine să găsiți denivelările din drum mai devreme decât mai târziu (adică înainte de a adăuga estetică vizuală).

Instrumentele moderne de design precum Adobe XD, Marvel și InVision permit echipelor să testeze prototipuri pe dispozitive reale, să discute feedback în context și, în general, să colaboreze ca o echipă până când aspectul funcționează în toate scenariile.

Folosirea unui flux de lucru UX slăbit în care designul responsiv este condus de teste interne și feedback va asigura că experiența utilizatorului funcționează perfect pe toate platformele și rezoluțiile de ecran înainte de a fi prezentată unui utilizator real pentru prima dată.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator