Proiectare modernă a interfeței interioare - partea 1: tabele

Gânduri, modele și soluții.

Proiectarea pentru întreprindere este grea. De ce? Pentru că, în general, software-ul Enterprise este complicat. Aveți cantități vaste de date de afișat, interfețe de utilizator configurabile, fluxuri de lucru complexe, sarcini automatizate și multe altele. Proiectarea pentru toate aceste lucruri poate fi o provocare .

Drept urmare, unele aplicații Enterprise oferă o experiență de utilizator slabă și ajung să pară, bine, un pic plictisitoare.

Aplicație tipică pentru întreprindere

Peste o serie de postări, voi dezvălui câteva modele comune de utilizare a utilizatorilor pentru aplicații, probleme și soluții posibile.

Merită subliniat, nu există dimensiuni unice. Modelele și soluțiile menționate mai jos sunt aspecte pe care le-am găsit să funcționeze, prin iterație, feedback-ul utilizatorilor și testare. Soluțiile trebuie, bineînțeles, adaptate aplicației dvs. și, mai important, a utilizatorilor dvs. Nimic nu bate pentru a vorbi cu utilizatorii dvs. și a-i urmări folosind software-ul dvs.

Să începem cu tabele

Aplicațiile Enterprise trebuie să se ocupe de cantități mari de date și, deoarece nu există o modalitate mai bună de afișare a unei cantități semnificative de date (încă) decât un tabel, să începem de acolo.

Mai sus este un exemplu tipic de tabel într-o aplicație de întreprindere. Nu este minunat. Să explorăm cum putem îmbunătăți experiența tabelelor complexe și ce trebuie să luăm în considerare atunci când facem acest lucru.

Iată câteva întrebări pe care trebuie să le luăm în considerare atunci când proiectăm și construim un tabel de date:

  • Ce dispozitive vor fi utilizate pentru a vizualiza tabelul?
  • Avem control asupra datelor care vor fi afișate sau pot fi configurate de utilizator?
  • Cum putem ajuta scanarea rapidă a datelor din tabel? - Dacă tabelul va conține o mulțime de date, cum putem face ușor pentru utilizatori să găsească datele de care au nevoie?
  • Rândurile vor avea acțiuni partajate, cum ar fi modificarea sau ștergerea?
  • Celulele tabelului pot conține o mulțime de date, adrese sau chiar paragrafe de text?

Mai presus de toate, nu uitați să vorbiți cu utilizatorii dvs., aflați cum vor folosi tabelul și datele pe care le va prezenta.

Notă: Pentru restul acestei postări, presupun că lucrăm la o aplicație bazată pe web, deși majoritatea punctelor de mai jos se aplică oricărei aplicații de întreprindere indiferent de platformă.

Noțiuni de bază mai întâi

Vom începe cu un tabel de bază nestilat care prezintă detalii despre clienți fictivi:

Masă neetilată

Mai întâi, adăugăm câteva stiluri de bază care asigură o separare clară a rândurilor, facilitează lizibilitatea și elimină unele dintre stilurile implicite ale browserului.

Masă stilată

Este de la sine înțeles că tabelul ar trebui să fie accesibil tuturor utilizatorilor. Utilizarea marcării semantice corespunzătoare este o necesitate, astfel încât utilizatorii de cititori de ecran să poată naviga prin tabel o celulă simultan, auzind anteturile de coloane și rânduri care le-au vorbit. Anteturile coloanelor trebuie să fie descriptive și relevante. Stilurile de tabel trebuie să îndeplinească liniile directoare de contrast WCAG 2 AA (sau chiar AAA în funcție de nivelul de conformitate necesar).

Tabelele responsive

Utilizatorii ar putea vizualiza aplicația noastră pe orice dispozitiv, așa că trebuie să ne asigurăm că tabelul nostru va fi utilizabil, indiferent dacă este afișat pe mobil, tabletă sau desktop.

Masa noastră la 375px x 667px (iPhone 7)

În acest moment, tabelul nostru nu răspunde, așa că nu va arăta grozav pe dispozitivele cu ecrane mai mici. Proiectarea tabelului sensibil este un subiect imens care se află în afara domeniului de aplicare al acestei postări. Deci, deocamdată, să analizăm două abordări comune:

Coloane colapsate

Coloanele care revărsă lățimea ecranului sunt ascunse

Cu acest model, toate coloanele care nu se potrivesc pe ecran sunt ascunse. Pot fi comutate de utilizator pentru a afișa datele ascunse. Puteți face acest pas în continuare prin definirea carei coloane ar trebui să fie prioritare la diferite lățimi ale afișajului, asigurându-vă că coloane critice sunt încă vizibile pe ecrane mai mici.

Tabele de defilare orizontală

Tabel cu defilare orizontală

Poate că utilizatorii trebuie să compare mai multe rânduri rapid fără să fie nevoiți să ocoliți extinderea lucrurilor? Un model obișnuit este acela de a permite tabelului să deruleze orizontal pe ecrane mai mici, eliminând nevoia de coloane ascunse. Luați în considerare utilizarea ambelor modele și oferiți o opțiune pentru a comuta între cele două.

Tratarea cu o mulțime de date

În acest moment, tabelul nostru pare ok, dar are unele probleme de utilizare. Imaginați-vă că avem 10.000 de rânduri, găsirea unei înregistrări anume ar putea fi o provocare.

Paginare

Paginarea în acțiune

Prin adăugarea paginării, putem limita numărul de rânduri pe pagină, ceea ce face ca datele să fie ușor digerate. Mai sus folosim zece rânduri pe pagină.

Paginarea are multe beneficii. Îi ușurează utilizatorilor să caute manual în listă, le oferă un sentiment de control (spre deosebire de derularea infinită) și permite utilizatorilor să păstreze o notă mentală a unei locații pe rânduri. Când utilizăm paginarea, ar trebui să permitem utilizatorului să aleagă numărul de articole pe pagină (salvându-le în mod ideal alegerea pentru viitor) și să afișăm, de asemenea, numărul total de articole din listă și câte sunt la vedere.

Paginarea definită de utilizator

Permiterea utilizatorului să modifice numărul de articole pe „pagină” poate fi mai ușor atunci când compară mai multe rânduri decât poate cuprinde 1 sau mai multe pagini.

De asemenea, merită să luăm în considerare ce cantitate de date va avea nevoie de paginarea tabelului. De exemplu, dacă paginăm la 10 articole pe pagină, dar există doar 11 elemente, atunci un utilizator ar trebui să facă clic pe alături pentru a vedea rândul final. De ce nu verificați programatic dacă există, spuneți mai mult de 20 și dacă dați acest lucru, permiteți paginarea.

Încărcarea leneșă

Se încarcă mai multe rânduri la cerere

Un alt model obișnuit, fie printr-un buton „încărcare mai mult” sub tabel, fie prin încărcare de date suplimentare atunci când utilizatorul derulează în partea de jos a tabelului. Aș recomanda paginarea în acest sens, în special pentru beneficiile enumerate mai sus. Defilarea infinită elimină unele aspecte ale controlului utilizatorului (Când se vor termina datele? Câte înregistrări am vizualizat?). Este mai potrivit pentru aplicațiile care se concentrează pe utilizatorii care consumă un flux de date, decât pe o listă de date în care este nevoie de mai mult control pentru utilizatori.

Căutarea tabelului

Căutarea în direct a datelor din tabel

O altă soluție ar fi filtrarea datelor tabelului după criterii specifice de căutare.

Sortarea pe coloane

Sortare după coloană

Sortarea datelor pe coloane permite utilizatorilor să grupeze date similare după valori ale unei coloane.

Aceste modele funcționează excelent în tandem, filtrând tabelul pentru a afișa date relevante, căutând rezultate cu granulație fină și apoi sortând rezultatele după valoare.

Furnizarea unui rezumat al datelor

Un rezumat vizual oferă o imagine de ansamblu a tabelului însoțitor

Adăugarea unui rezumat vizual deasupra tabelului poate ajuta utilizatorul să analizeze rapid datele.

Proiectare pentru necunoscut

În multe aplicații, este în întregime posibil ca structura tabelelor și datele acesteia să fie definite de utilizator, astfel încât să nu știți ce date vor popula tabela deloc. O masă bine concepută ar trebui să se adapteze în acest sens. De obicei, aceasta prezintă câteva provocări suplimentare.

Tabelul ar putea conține adrese URL foarte lungi sau paragrafe de text (date de adresă, mesaje transmise de utilizator, valori ale câmpului formularului)? Avem câteva opțiuni aici:

Tronează text lung

Utilizatorul are nevoie să vadă tot textul potențial lung pentru fiecare rând în același timp? Este puțin probabil. O soluție ar fi să trunchiem textul pe o lungime suficient de utilă pentru a oferi utilizatorului o imagine de ansamblu asupra datelor și pentru a oferi o metodă pentru vizualizarea mai mult, fie prin conectarea la o altă pagină, afișând mai mult conținut într-un modal sau prin alt mod (noi Voi atinge acest lucru mai târziu).

Înfășurați șiruri lungi

Adresele URL lungi pot rupe aspectul unui tabel receptiv. Ar trebui să ne asigurăm că orice legături (sau șiruri lungi neîntrerupte) dintr-o celulă de tabel se rupe corect, pentru a nu rupe aspectul tabelei.

Acțiuni în rând

Acțiunile de rând comune ar trebui grupate. Dacă este posibil să efectuați aceste acțiuni pe mai multe rânduri în același timp, atunci acțiunea ar trebui eliminată și adăugată ca opțiune în altă parte a paginii (aproape de tabel). Desigur, vom avea nevoie de o modalitate de a selecta mai multe rânduri.

Efectuarea acțiunilor pe mai multe rânduri simultan.

Tabel Acțiuni

Acțiunile tabelului comun includ:

Tipărirea datelor tabelului

Permiteți utilizatorului să imprime numai tabelul și nu interfata interioară. Utilizați stiluri de tipărire tipărite pentru a optimiza stilul de masă pentru imprimare. Eliminați paginarea atunci când imprimați pentru a vă asigura că toate datele din tabel sunt tipărite.

Descărcarea datelor din tabel

Aproape toți utilizatorii de putere vor dori să descarce datele tabelului într-un format standard (CSV, JSON, etc.) pentru a permite manipularea datelor în alt software. Dacă dimensiunea fișierului este probabil mare, luați în considerare utilizarea unei arhive zip. Dacă arhiva nu este disponibilă instantaneu, informați utilizatorul și trimiteți-i prin e-mail când este gata de descărcare.

Meniu care oferă acțiuni la nivel de tabel

În acest exemplu, am folosit un meniu derulant „acțiuni” deasupra tabelului pentru a permite acțiuni specifice tabelei

Vizualizarea datelor suplimentare pe rând

În funcție de cazul de utilizare, un utilizator poate avea nevoie să acceseze rapid informații suplimentare despre fiecare rând în timp ce rămâne în context. Acest lucru poate fi realizat în mai multe moduri.

modals

Vizualizarea datelor suplimentare de rând într-o modalitate

Modalele permit utilizatorului să rămână pe aceeași pagină cu tabelul, dar acordă o atenție mai mare informațiilor suplimentare și acțiunilor care pot fi efectuate.

Panou de detalii

Vizualizarea datelor suplimentare de rând într-un panou

În funcție de situație, este posibil să constatați că o modalitate nu poate fi soluția ideală dacă trebuie să păstrați datele sub modal. Un panou de detalii care alunecă în pagină ar putea fi o soluție mai bună atunci când păstrați în context și trebuie să mențineți datele din tabel vizibile.

Gânduri de închidere

Adesea, este mai mult la umila masă decât la ochi. Sperăm că unele dintre punctele ridicate mai sus vă vor ajuta data viitoare când veți proiecta un tabel.

Interfața de utilizare de mai sus a fost construită cu sistemul de design Pulsar, care oferă cea mai mare parte a acestei funcționalități platformei Jadu Continuum.

Actualizare: Partea 2 care privește dialogurile modale este acum live!