Hur man utformar komplexa (och responsiva!) tabeller utan att förlora förståndet

Du är inte ensam, jag har sett en del stora designers darra i sina stövlar vid tanken på att lösa detta problem. Men du behöver inte vara rädd! Nyligen tog jag mig an den här designutmaningen, och nu är jag här för att dela med mig av några tips som hjälpte mig att komma fram till en design som våra användare älskar.

Det finns många olika alternativ för hur du kan utforma tabeller, för att inte tala om hur du gör dem responsiva. Kolumner och rader kan omplaceras, ändra storlek, kollapsa, minimeras eller till och med försvinna när webbläsarfönstret blir smalare.

Som med alla designlösningar beror den bästa designen på hur dina läsare kommer att använda uppgifterna. Vi genomförde en användarundersökning i början av projektet för att ge en viss inriktning och identifierade att för vårt projekt:

• Denna tabellinformation skulle användas lika mycket på en blandning av stationära, surfplattor och mobila enheter.
• De här tabellerna skulle kunna innehålla många kolumner med fritext, samt siffror.
• Vissa viktiga delar av informationen bör vara synliga hela tiden.

Med dessa insikter från våra användare är här de viktigaste sakerna som jag tog upp när jag utvecklade ett designsystem för texttunga datatabeller.

Först ska du avgöra vilken typ av tabell det är. Är det en jämförelsetabell, där läsaren jämför data i flera kolumner, eller är det en innehållstabell, där datamängderna är oberoende av varandra?

Min tabell liknar mer en innehållstabell än en jämförelse tabell. Att identifiera detta tidigt hjälpte mig att förstå vilken information som måste ligga nära varandra i den smala skärmstorleken.

Mobil först

Den första versionen jag utformade var den smala skärmversionen. Jag tittade avsiktligt på denna före versionen med bred skärm eftersom det är viktigt för våra användare att visa tabellerna på mobilen. Därför behövde jag hitta ett sätt att få in komplex och icke-linjär information i ett vertikalt format.

Jag visste att det skulle vara mycket enklare att skala upp designen när det finns gott om horisontellt utrymme, än att utforma en vacker tabell för skrivbordet och kämpa för att få den att förbli läsbar på mobilen. Det innebar också att jag hade touch-målstorlekar i åtanke från början och inte förlitade mig på åtgärder som hover för att avslöja information.

Jag bestämde mig för att behandla innehållet mer som en lista i smala vyer så att den viktiga informationen förblev väl synlig och lätt att scanna.

Sammanhängande styling

Raderna måste omplaceras när skärmstorleken ändras, så jag använde styling för att hjälpa till att bibehålla kopplingen mellan dem. Om kolumnrubrikerna till exempel är fetstilade med grå bakgrund använder jag samma stil även i den smala vyn. Det hjälper läsarna att göra om den nya fördelningen av cellerna.

Typografi är din vän

Det är lätt att glömma bort sina typografiska principer när man har många begränsningar, men att fatta ett medvetet beslut om att optimera läsbarheten kommer att vara till stor hjälp för dina läsare, särskilt i ett projekt som mitt där tabellerna har mycket text.

Typografin finns till för att hedra innehållet. ~ Robert Bringhurst

Scanning

Gör det lätt att scanna snabbt genom att hålla läsflödet enkelt och tydligt. Jag valde att låta texten i varje kolumn hänga i samma kant så att läsaren kan skanna texten på ett linjärt sätt.

Radlängd

Försök att inte äventyra textens radlängd genom att trycka ihop många kolumner på ett smalt utrymme, annars saktar det ner läshastigheten. Jag fastställer en minsta bredd för kolumner med sammanhängande text.

Etiketter

Tänk på var du ska placera etiketter så att de inte tar överdrivet mycket plats, men ändå ger informationens sammanhang.

Jag placerade etiketterna ovanför varje bit av cellinnehållet i min lista, där de tog mindre plats, i stället för vid sidan. Och det gjorde informationen lättare att skanna också. Jag stylade etiketterna på olika sätt så att det är lätt att skilja på skillnaden mellan en fast etikett och variabelt innehåll.