ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 148
Numărul 147 Numărul 146 Numărul 145 Numărul 144 Numărul 143 Numărul 142 Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ 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. 

Conferință TSM

NUMĂRUL 147 - Automotive

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects