Er du bange, når du opdager, at dit næste projekt er at designe en kompleks og responsiv datatabel? 😨
Du er ikke alene, jeg har set nogle store designere skælve i deres støvler ved tanken om at løse dette problem. Men der er ingen grund til at være bange! For nylig tog jeg denne designudfordring op, og nu er jeg her for at dele nogle tips, der hjalp mig med at finde frem til et design, som vores brugere elsker.
Der er mange forskellige muligheder for, hvordan man designer tabeller, for slet ikke at tale om, hvordan man kan gøre dem responsive. Kolonner og rækker kan omplaceres, ændre størrelse, klappes sammen, minimeres eller endda forsvinde, når browservinduet bliver smallere.
Som med alle designløsninger afhænger det bedste design af, hvordan dine læsere skal bruge dataene. Vi foretog nogle brugerundersøgelser i starten af dette projekt for at give en vis retning og identificerede, at for vores projekt:
- Disse tabelformede oplysninger ville blive brugt lige meget på en blanding af desktop-, tablet- og mobilenheder.
- Disse tabeller kunne indeholde mange kolonner med fri tekst såvel som tal.
- Visse vigtige oplysninger skulle forblive synlige hele tiden.
Med disse indsigter fra vores brugere er her de vigtigste ting, som jeg tog fat på, da jeg udviklede et designsystem til teksttunge datatabeller.
Først skal du bestemme, hvilken slags tabel det er. Er det en sammenligningstabel, hvor læseren sammenligner data på tværs af flere kolonner, eller er det en indholdstabel, hvor datasættene er uafhængige af hinanden?
Min tabel ligner mere en indholdstabel end en sammenligningstabel. At identificere dette tidligt hjalp mig til at forstå, hvilke oplysninger der skal forblive tæt på hinanden i den smalle skærmstørrelse.
Mobil først
Den første version, jeg designede, var den smalle skærmversion. Jeg kiggede med vilje på denne før bredskærmsversionen, da det er vigtigt for vores brugere at se tabellerne på mobilen. Derfor var jeg nødt til at finde en måde at få komplekse og ikke-lineære oplysninger ind i et vertikalt format.
Jeg vidste, at det ville være meget lettere at skalere designet op, når der er masser af horisontal plads, end at designe en smuk tabel til desktop og kæmpe for at få den til at forblive læsbar på mobil. Det betød også, at jeg havde touch-målstørrelser i tankerne fra starten og ikke var afhængig af handlinger som hover for at afsløre oplysninger.
Jeg besluttede at behandle indholdet mere som en liste i smalle visninger, så de vigtige oplysninger forblev meget synlige og skanningsvenlige.
Konsistent styling
Rækkerne skal omplaceres, når skærmstørrelsen ændres, så jeg brugte styling til at hjælpe med at bevare forbindelsen mellem dem. Hvis kolonneoverskrifterne f.eks. er med fed skrift med grå baggrund, skal du også bruge den samme stil i den smalle visning. Det vil hjælpe læserne med at omplacere den nye fordeling af cellerne.
Typografi er din ven
Det er let at glemme sine typografiske principper, når man har mange begrænsninger, men at træffe en bevidst beslutning om at optimere læsbarheden vil være en stor hjælp for dine læsere, især i et projekt som mit, hvor tabellerne har meget tekst.
Typografi er til for at ære indholdet. ~ Robert Bringhurst
Scanning
Gør det nemt at scanne hurtigt ved at holde læseflowet enkelt og klart. Jeg valgte at lade teksten i hver kolonne hænge ud fra samme kant, så læseren kan scanne teksten lineært.
Linjelængde
Forsøg ikke at gå på kompromis med tekstens linjelængde ved at klemme en masse kolonner ind på et smalt rum, ellers sænker det læsehastigheden. Jeg indstiller en minimumsbredde for kolonner med sammenhængende tekst.
Etiketter
Tænk over, hvor etiketterne skal placeres, så de ikke optager for meget plads, men stadig giver en vis sammenhæng til oplysningerne.
Jeg placerede etiketterne over hvert stykke celleindhold i min liste, hvor de fyldte mindre, i stedet for ved siden af. Og det gjorde også oplysningerne lettere at scanne. Jeg har stylet etiketterne forskelligt, så det er let at skelne mellem en fast etiket og variabelt indhold.