Crearea unui tabel receptiv.

Afișarea datelor voluminoase pe un ecran mic este întotdeauna un puzzle. Ce moduri puteți rezolva problema și cum ar trebui să arate o masă convenabilă pe un telefon mobil?

Este de remarcat faptul că tabelele se extind adesea dincolo de ecran, nu doar pe dispozitivele mobile: se întâmplă să conțină mai multe coloane sau rânduri decât încap pe un monitor imens sau chiar mai multe. Cu toate acestea, cu cât ecranul este mai mic, cu atât este mai probabil să apară probleme de utilizare.

Elementele cheie dintr-o vizualizare de tabel sunt coerența conținutului și atributele semnificative. Ambele sunt deosebit de importante pentru mesele mobile. Mai întâi ar trebui să creați un tabel convenabil pentru monitoare mari și apoi să creați o versiune pentru ecrane mici. O astfel de nevoie poate fi un motiv excelent pentru a rafina conținutul tabelului și a-l face mai convenabil pentru toți utilizatorii.

Numărul de coloane din tabel care urmează să fie afișate pe un ecran mobil depinde de lățimea acestora, iar conținutul lor trebuie să fie clar, fără a fi nevoie să utilizați zoom-ul.

Pentru textele complexe sau lungi, de exemplu în tabelele de comparație, doar 2 coloane vor încadra pe un ecran mobil îngust. Și dacă tabelul este umplut în mare parte cu numere, coloanele pot fi făcute mai înguste și, prin urmare, se pot potrivi mai mult.

Statisticile National Rugby League constau din numere, astfel încât 11 coloane se potrivesc confortabil pe un ecran mobil, fără a fi nevoie de derulare orizontală. Vă rugăm să rețineți că acest rezultat este obținut prin utilizarea doar a siglei echipei adverse în prima coloană și a abrevierilor, care este posibil să nu fie clare pentru cei neinițiați. Cu toate acestea, doar fanii rugby-ului sunt interesați de statistici atât de detaliate despre jucători.

Rotirea telefonului este o ultimă soluție

Dacă rotiți telefonul pe orizontală, mai multe coloane vor încăpea pe ecran. Totuși, în același timp, numărul de linii este redus, iar utilizatorilor le poate părea enervant să fie nevoiți să rotească smartphone-ul (mai ales dacă are un blocaj de rotație). Gândiți-vă cu atenție dacă lățimea mare a mesei justifică aceste dezavantaje.

Pentru a compara cardurile de credit pe site-ul web Citi, utilizatorii trebuie să urmeze instrucțiunile: „Întoarceți-vă telefonul pe orizontală pentru a continua să comparați cardurile de credit”. În același timp, la rotire, cea mai mare parte a ecranului este ocupată de imagini uriașe ale cărților de credit, care sunt fixate în loc la derulare, lăsând foarte puțin spațiu pentru conținutul tabelului în sine. Aceasta este o greșeală a multor site-uri mobile: dacă pe un desktop imaginile pot fi un bun titlu pentru o coloană, atunci pe un mobil sunt necesare.

În orice tabel care se întinde pe mai mult de un ecran vertical, titlurile coloanelor lipicioase ajută utilizatorul să evite confuzia cu privire la context.

În tabelul de comparație cu Best.Buy din stânga, nu sunt înregistrate nici coloanele și nici titlurile acestora, iar datele sunt greu de citit. În dreapta este cum arată acest tabel când este derulat, fără nicio explicație vizibilă.

Deși este în general nedorit atât pe dispozitive mobile, cât și pe desktop, este relativ acceptabil pentru mese mari de pe dispozitive mobile. Când datele nu se potrivesc pe ecran, este posibil ca vizitatorii să fie nevoiți să le folosească. Cu toate acestea, în acest caz, este necesar: ar trebui să fie evident că acestea nu sunt toate datele disponibile. Ca și în cazul glisoarelor, săgețile și elementele decupate transmit aceste informații cel mai clar. Punctele sunt uneori folosite, dar de obicei sunt mai greu de observat și de înțeles.

Pe site-ul eBag, ultima coloană de produse este tăiată, astfel încât utilizatorii să înțeleagă că derularea orizontală este disponibilă.

Site-ul web al Subaru folosește puncte și săgeți deasupra tabelului pentru a arăta utilizatorilor că există mai multe ecrane de conținut disponibile. Punctele creează o oarecare confuzie, deoarece două dintre ele sunt evidențiate pentru a afișa „locația curentă” (adică cele două coloane vizibile în prezent). În plus, este mai bine să plasați săgețile nu deasupra mesei, ci chiar în ea.

Dacă utilizatorii trebuie să recurgă la derulare orizontală, coloana din stânga, care conține de obicei titluri de rând, ar trebui să fie înghețată, astfel încât utilizatorii să vadă întotdeauna titlurile rândurilor.

Fidelity a remediat numele atașamentelor și titlurile coloanelor. Ultima coloană din dreapta este decupată pentru a ajuta utilizatorii să înțeleagă că derularea orizontală este disponibilă.

Officeworks.com.au a remediat prima coloană de produs, astfel încât utilizatorii să poată compara toate celelalte opțiuni cu aceasta. Produsul din prima coloană servește ca punct de referință pentru comparație, iar utilizatorii îl pot înlocui cu altceva. Săgețile plasate direct în tabel arată clar că datele pot fi derulate la stânga și la dreapta.

Dacă datele nu se potrivesc pe ecran, utilizatorii probabil nu vor avea timp sau înclinație să le exploreze complet. Deci întrebarea este cum să le furnizeze doar informațiile de care au nevoie. Răspunsul la această întrebare depinde de sarcină și de tipul de date. Iată două strategii pentru a limita cantitatea de date în diferite situații:

• Utilizatorul selectează datele de care este interesat înainte de a le vedea.
• Utilizatorul selectează datele de care este interesat în timp ce le vizualizează.

Prima abordare funcționează atunci când utilizatorul trebuie să vadă datele, dar nu să le compare și selectează doar ceea ce are nevoie înainte ca datele să fie încărcate. De exemplu, el poate fi interesat doar de caracteristicile unei anumite mașini, de proprietățile nutriționale ale unui anumit fel de mâncare sau de statisticile pentru un anumit jucător, iar utilizatorul nu le compară cu alte opțiuni.

Pentru a vedea informațiile nutriționale pentru Jamba Juice, vizitatorii trebuie să selecteze băutura de care sunt interesați pentru a vedea informații despre aceasta. Comutatorul Mic/Mediu/Mare vă permite să selectați opțiunea dorită, dar nu vă permite să le comparați. Pentru a înțelege, de exemplu, diferența de calorii dintre un pahar mic și un pahar mediu, utilizatorul trebuie mai întâi să-și amintească numărul de calorii pentru paharul mic, apoi să treacă la cel mediu, să caute numărul de calorii pentru acesta și să scadă unul. de la celălalt înșiși – multă muncă mentală pe care majoritatea oamenilor sunt prea leneși să o facă.

A doua strategie este de a oferi utilizatorului controlul asupra recenziei în timp ce navighează prin date. De exemplu, un utilizator dorește să vadă asemănările sau diferențele dintre două opțiuni, în timp ce altul dorește să cunoască caracteristicile specifice ale produselor, cum ar fi capacitatea portbagajului sau caracteristicile de siguranță, dar nu este interesat de diferența de niveluri de zgomot dintre două mașini. Abilitatea de a selecta rânduri și coloane de afișat permite utilizatorilor să se concentreze asupra caracteristicilor care contează pentru ei.

Pe site-ul web Dell, utilizatorii selectează specificațiile produsului care îi interesează din meniul din partea de sus a paginii. Stânga: În mod implicit, sunt afișate toate caracteristicile. În centru: utilizatorul le selectează pe cele de care are nevoie. Dreapta: este afișat doar ceea ce a selectat.

Dacă tabelul include date care pot fi grupate pe categorii, faceți acest lucru și permiteți utilizatorilor de telefonie mobilă să:

• obțineți o înțelegere generală a tipurilor de date disponibile în tabel;
• obține acces direct la informațiile de interes.

Pe Samsung.com, diagramele de comparație pot afișa toate specificațiile sau doar asemănările dintre produse sau doar diferențele sau criteriile selectabile de utilizator. Site-ul grupează date cu atribute similare, permițându-vă să selectați seturi de date de interes. În același timp, grupurile de date oferă o imagine de ansamblu asupra conținutului paginii, spunând utilizatorilor ce informații despre produs sunt disponibile.

În Aspro: În continuare, începând cu versiunea 1.1.7, puteți adapta tabelele pentru versiunea mobilă. Este necesar să faceți modificări codului sursă al paginii - adăugați o clasă care este responsabilă pentru adaptabilitatea tabelelor.

Un tabel simplu în versiunea mobilă trece dincolo de pagină.

Pentru a face tabelul receptiv, accesați pagina în care a fost adăugat tabelul. Apoi accesați modul de editare a codului sursă.

Înainte de eticheta de deschidere