ABONAMENTE VIDEO REDACȚIA
RO
EN
×
▼ LISTĂ EDIȚII ▼
Numărul 40
Abonament PDF

Să ducem responsive website la următorul nivel

Axente Paul
Senior UX Engineer
@3Pillar Global
PROGRAMARE

Responsive web design a început în urmă cu trei ani, când media queries a ajuns în standardul recomandat W3C's în iunie 2012. A fost cea mai anticipată caracteristică CSS la acea vreme, cea care a pus responsive înainte de web design și a schimbat regulile jocului, deschizând o ușă pentru posibilități infinite atât pentru designeri cât și pentru dezvoltatori. Cea mai importantă tendință care a urmat la scurt timp după introducerea sa a fost mobile first. 

După trei ani în care am realizat responsive websites, cred că ar trebui să ne oprim o clipă pentru a fixa direcția corectă spre care vrem să pornim. Până acum, singurul lucru responsive la website-ul nostru este felul în care arată și cum se simte pe un dispozitiv mobil și ocazional la imprimare. Dacă, o abordare device-first este calea de urmat, atunci ar trebui să avem în minte faptul că am putea să facem mult mai mult pentru a-i ajuta pe utilizatorii noștri. Am putea să profităm de toate lucrurile bune pe care le oferă API-urile HTML5 (status baterie, informații rețea, etc.) pentru a răspunde și a ne adapta anumitor evenimente cum ar fi: căderea rețelei, descărcarea bateriei în timp ce navigăm pe un website, etc. Dar de ce să ne oprim aici? Un responsive website ar trebui să răspundă în timp real cu o soluție pentru problema utilizatorului. 

Există multe moduri de a sprijini acest tip de responsiveness (capacitate de reacție) și chiar mai multe beneficii care vin din acest răspuns. Dar pentru a obține aceasta, va trebui să ne gândim la ce încercăm să facem. Să facem ca website-urile să arate bine pe dispozitive mobile este ușor, dar să le facem să reacționeze la modul în care un utilizator interacționează cu ele, este o altă poveste întreagă care necesită cunoașterea anumitor informații despre utilizator. De obicei, adunarea acestor informații ar fi interzisă prin lege, dar, deoarece noi folosim aceste informații pentru a îmbunătăți experiența utilizatorului, putem în continuare să facem website-uri. 

Exemplu de responsive website 

 Cum fiecare dintre noi utilizează web-ul într-un mod diferit, atunci de ce să nu facem un website care să răspundă comportamentului nostru și să se adapteze între anumite limite modului nostru unic de a utiliza web-ul? De prea mult timp, utilizatorii au fost cei care au trebuit să se adapteze felului în care funcționează un website; este timpul ca website-urile să se adapteze comportamentului utilizatorului. Nu ar trebui să împiedicăm anumite tipuri de utilizatori să ne utilizeze site-urile pentru simplul motiv că nu aparțin grupului țintă; ei ar putea totuși să ajungă să utilizeze site-ul, dar să devină frustrați dacă nu pot naviga ușor pe el. În loc să îndepărtăm poate utilizatorii care nu fac parte din grupul pentru care a fost creat website-ul, noi ar trebui să ne concentrăm pe crearea unui website care să răspundă tuturor. 

Angry Joe, o persoană hiperactivă și un jucător pasionat, poate reprezenta un exemplu sugestiv de analiză. Angry Joe adoră să își descarce nervii jucând, dar de obicei sfârșește partidele printr-un abandon plin de furie dacă lucrurile nu merg conform planului. Joe a început recent să facă cumpărături online, dar are dificultăți la utilizarea unui magazin de jocuri bine cunoscut, deoarece el are un mouse high DPI, care îl face să navigheze prea repede pe ecran și să dea click pe lucruri de care nu este interesat. În plus, fiind un fan PS4 avid, Joe nu dorește să vadă bara laterală vizibilă mereu care face reclamă unor jocuri învechite pe care el știe că nu va dori să le cumpere. În acest moment, chiar dacă lui Joe îi place cu adevărat această companie, website-ul îl descurajează să mai cumpere de acolo. 

Atunci cum ar trebui un responsive website să îi răspundă lui Joe și să îl convingă să rămână ?Prima lui problemă este navigarea pe site, care probabil că nu reprezintă o problemă pentru un utilizator obișnuit. Totuși, Joe și mouse-ul său highly responsive de obicei navighează într-un ritm foarte rapid și haotic și își pierde răbdarea de fiecare dată când face un click greșit. Pentru a rezolva această problemă, website-ul ar răspunde prin mărirea dimensiunilor butoanelor și a marginilor pe întreaga pagină, pentru a minimiza riscul de mai da un click greșit. 

A doua problemă a lui Joe este neplăcerea cauzată de faptul că website-ul nu îi recunoaște dragostea pentru jocuri PS4. Pentru a remedia asta, website-ul va răspunde prin afișarea categoriei PS4 drept primul obiect din meniu care apare și va arăta lista jocurilor PS4 înaintea oricărui alt tip de produs. În plus, Joe nu a dat niciodată click pe bara laterală, deci nu este nevoie ca aceasta să mai fie păstrată activă. Îndepărtarea barei laterale, nu numai că reduce șansele ca Joe să dea click greșit, dar de asemenea, permite website-ului să afișeze  cinci produse pe un rând în loc de numai patru. 

În acest moment, am reușit să îmbunătățim experiența lui Joe și să concentrăm totul în jurul lucrurilor care îi plac lui, doar prin urmărirea tiparelor sale de interacțiune și răspunzând punctelor dureroase. Acum Joe este un client mulțumit și își continuă activitatea pe acest website. El îl recomandă chiar unor noi clienți, deoarece îi place tare mult experiența de utilizator per ansamblu și serviciul pentru clienți. 

Chiar dacă Joe este numai un exemplu, mai există mulți alți utilizatori online care au probleme similare cu navigarea web. Mai sunt multe alte lucruri pe care am putea să le facem pentru utilizatorii noștri, dacă suntem dispuși să acordăm mai multă atenție unor mici detalii. A face un website care să arate bine pe diferite dispozitive este doar vârful aisbergului. În schimb, haideți să începem să facem website-uri inteligente care să răspundă cu o soluție unei probleme a utilizatorului, nu numai să își adapteze conținutul pentru a se potrivi pe diferite dispozitive. 

Sponsori

  • comply advantage
  • ntt data
  • 3PillarGlobal
  • Betfair
  • Accenture
  • Siemens
  • Bosch
  • FlowTraders
  • MHP
  • Connatix
  • MetroSystems
  • BoatyardX
  • Colors in projects

VIDEO: NUMĂRULUI 96