Cum să proiectezi tabele complexe (și responsive!) și să nu-ți pierzi mințile

Nu sunteți singuri, am văzut câțiva mari designeri tremurând în cizme la gândul de a rezolva această problemă. Dar nu aveți de ce să vă temeți! Recent, am acceptat această provocare de design, iar acum sunt aici pentru a vă împărtăși câteva sfaturi care m-au ajutat să ajung la un design pe care utilizatorii noștri îl iubesc.

Există o mulțime de opțiuni diferite pentru cum să proiectezi tabele, ca să nu mai vorbim de cum să le faci responsive. Coloanele și rândurile se pot repoziționa, redimensiona, prăbuși, minimiza sau chiar dispărea atunci când fereastra browserului devine mai îngustă.

Ca în cazul tuturor soluțiilor de design, cel mai bun design depinde de modul în care cititorii dvs. vor utiliza datele. Am efectuat o cercetare a utilizatorilor la începutul acestui proiect pentru a oferi o anumită direcție și am identificat că pentru proiectul nostru:

• Aceste informații tabelare ar fi utilizate în mod egal pe un mix de dispozitive desktop, tabletă și mobile.
• Aceste tabele ar putea conține multe coloane de text liber, precum și numere.
• Certe fragmente importante de informații ar trebui să rămână vizibile în orice moment.

Cu aceste informații de la utilizatorii noștri, iată care sunt principalele lucruri pe care le-am abordat atunci când am dezvoltat un sistem de proiectare pentru tabelele de date cu mult text.

În primul rând, determinați ce fel de tabel este. Este un tabel de comparație, în care cititorul compară date pe mai multe coloane, sau este un tabel de conținut, în care seturile de date sunt independente unul de celălalt?

Tabloul meu seamănă mai mult cu un tabel de conținut decât cu un tabel de comparație. Identificarea acestui lucru încă de la început m-a ajutat să înțeleg ce informații trebuie să rămână în imediata apropiere în dimensiunea îngustă a ecranului.

Mobile first

Prima versiune pe care am proiectat-o a fost cea pentru ecran îngust. Am analizat-o în mod intenționat înainte de versiunea cu ecran lat, deoarece vizualizarea tabelelor pe mobil este importantă pentru utilizatorii noștri. Prin urmare, trebuia să găsesc o modalitate de a încadra informații complexe și neliniare într-un format vertical.

Știam că ar fi mult mai ușor să măresc dimensiunea designului atunci când există mult spațiu orizontal, decât să proiectez un tabel frumos pentru desktop și să mă lupt să îl fac să rămână lizibil pe mobil. De asemenea, a însemnat că am ținut cont de la început de dimensiunile țintă tactile și nu mă bazam pe acțiuni precum hover pentru a dezvălui informații.

Am decis să tratez conținutul mai mult ca pe o listă în vizualizările înguste, astfel încât informațiile importante să rămână foarte vizibile și scanabile.

Stilizare consecventă

Rândurile trebuie să se repoziționeze atunci când dimensiunea ecranului se schimbă, așa că am folosit stilizarea pentru a ajuta la păstrarea legăturii dintre ele. De exemplu, dacă titlurile coloanelor sunt în bold cu un fundal gri, folosiți același stil și în vizualizarea îngustă. Acest lucru va ajuta cititorii să refacă noua distribuție a celulelor.

Tipografia este prietenul tău

Este ușor să uiți de principiile tale tipografice atunci când ai o mulțime de constrângeri, dar să iei o decizie conștientă de a optimiza lizibilitatea va fi de mare ajutor pentru cititorii tăi, mai ales într-un proiect ca al meu în care tabelele au foarte mult text.

Tipografia există pentru a onora conținutul. ~ Robert Bringhurst

Scanare

Facilitează scanarea rapidă prin menținerea unui flux de lectură simplu și clar. Am ales ca textul din fiecare coloană să fie atârnat de aceeași margine, astfel încât cititorul să poată scana textul într-un mod liniar.

Lungimea liniei

Încercați să nu compromiteți lungimea liniei de text prin strivirea multor coloane într-un spațiu îngust, pentru că altfel încetinește viteza de citire. Am stabilit o lățime minimă pentru coloanele de text continuu.

Etichete

Gândiți-vă unde să poziționați etichetele, astfel încât să nu ocupe o cantitate excesivă de spațiu real, dar să ofere totuși un anumit context informațiilor.

Am pus etichetele deasupra fiecărui bit de conținut al celulei din lista mea, unde au ocupat mai puțin spațiu, mai degrabă decât în lateral. Și, de asemenea, a făcut ca informațiile să fie mai ușor de scanat. Am stilizat etichetele în mod diferit, astfel încât să fie ușor de distins diferența dintre o etichetă fixă și un conținut variabil.

.