Tabeller med information är tråkiga. På ett sätt är de menade att vara så. Ett bra bord kommunicerar mycket information på ett kortfattat, lättförståeligt sätt. Eftersom betoningen verkligen borde vara på informationen kan överdesign av ett bord döda effektiviteten. I de rätta händerna kan smart design inte bara göra bordet mer attraktivt men kan faktiskt öka läsbarheten.
Idag tar vi en titt på flera sätt som du kan förbättra funktionaliteten och estetiken på dina bord. En av de vanligaste ställena vi för närvarande hittar bord online är på en webbapps prissättningssida så att de flesta av våra exempel kommer att ta denna form, bara kom ihåg att dessa principer kan tillämpas på vilken typ av informativ nät (oavsett om det verkligen är en tabell).
Vertikal, Horisontell eller Matrix?
Som alltid börjar vi med det uppenbara. Det första steget är att bestämma en generell struktur på ditt bord. Den struktur du ska välja beror på typen och komplexiteten i den information du presenterar.
Att välja mellan vertikala kolumner och horisontella rader kan i hög grad bero på personliga preferenser. Skissa ut ditt innehåll i varje form och bestämma vilken metod du tycker ger informationen bäst. Självklart, om ditt meddelande är baserat på flera variabler är en matris vägen att gå. Här är några exempel:
Vertikal
Horisontell
Matris
Börja i Excel
För posten är det första och förhoppningsvis den sista tiden du hör mig föreslår att du använder Microsoft Office för något designrelaterat. Sanningen är att bord utan tvekan är lätt att göra i Excel; det är ganska mycket vad det gör. Jämför detta med den tid det tar dig att hårdkoda organisationsstrukturen i HTML och Excel kommer att vinna varje gång.
I dag snubblat jag över en stor liten webbapplikation som heter Tableizer som låter dig klistra in i dina tabeller från Excel för att omvandla dem till HTML. Du måste fortfarande hantera det mesta av stylingen på egen hand, men du kommer definitivt att spara lite tid på framsidan.
Tableizer
Använd en tabellgenerator
Hatar Excel? Känn inte dåligt, jag också. Om du fortfarande vill spara dig lite tid på att skapa det grundläggande skelettet i ett HTML-bord, finns det massor av online-generatorer som kommer att få jobbet gjort. Observera att jag sa? Grundläggande skelett ,? Tänk inte att du är färdig efter att ha använt en av dessa för att fuska din väg ut ur en liten kodning. Du har fortfarande en lång väg att gå om du inte vill att den ska suga.
Här är en snabb lista över gratis bordgeneratorer för att spara dig en Google-sökning:
- QuackIt
- Tabeller Generator
- TextFixer
En liten styling går långt
Nu när du har ett grundläggande bord, är det första steget mot att ta det ut ur 90-talet att lägga till lite CSS. Självklart kan du bli galen och spendera timmar som experimenterar med olika stylingalternativ, kom ihåg att även en liten bit färg- och stilsortering kan drastiskt förbättra både läsbarheten och attraktionen av bordet.
Detta är en gammal, men fortfarande relevant, handledning om grundläggande bordsmönster med CSS som täcker grunderna.
Lägg till ett utvalt avsnitt
Detta är extremt vanligt i prissättningstabeller men gäller för alla bord. Tänk på informationen i tabellen och överväg om du vill att tittaren ska fokusera på en viss del. Oavsett om det är planen med det bästa värdet eller ett populärt element i en lista med funktioner, försök att ändra färg och / eller storlek så att den sticker ut från resten.
Det finns definitivt massor av vägar, både subtila och överst, för att göra den presenterade sektionen uppenbar. Här är några för inspiration:
Färgdifferentiering
Storleksdifferentiering
Färg & Storleksdifferentiering
Gör informationen Sorterbar
Om du skapar tabeller med mycket information som är organiserad i flera kolumner, är det en bra idé att överväga att lägga till en sorteringsfunktion så att dina användare kan välja hur de vill se informationen organiserad.
Mint.com integrerar tabell sortering i din lista över transaktioner, vilket gör det super enkelt att byta från en datumbaserad vy till en kategoribaserad vy så att du kan identifiera områden där du tenderar att spendera mycket pengar.
Här är några jQuery-plugins som ger dig ett snabbt sätt att lägga till den här funktionen:
- sorttable
- tablesorter
Använd ikoner
Som jag nämnde ovan är poängen att organisera information i tabeller att göra det förstårbart med en blick. Genom att klippa ner den nödvändiga läsningen kan väldesignade ikoner drastiskt förbättra hastigheten vid vilken en besökare kan förstå informationen i ditt bord.
Akta dig, det går båda sätten. Slarviga ikoner kan låta dina användare repa sina huvuden och försöka lista ut vad du försöker kommunicera.
Lägg till Zebra Stripes
Detta är en ganska grundläggande idé som går tillbaka till så länge som informationstabeller har funnits. Lägga till alternerande radfärger hjälper dina ögon att följa kommunikationslinjen och koppla den flytande informationen i mitten av ett bord med förankrad kategori på sidan eller botten.
Denna enkla teknik kan öka läsbarheten av både stora och små bord, men det är en bra tumregel att alltid inkludera ränder (eller någon annan visuella hjälpmedel) om tabellen kräver att läsaren att ansluta bitar av information som är mer än en tum eller två ifrån varandra.
Det är superklassigt att göra med CSS:
Gå Minimal
Hatar det glänsande web 2.0-seriet från det föregående tipset? Inget problem, det finns ett ännu starkare argument för att minimera tabellgrafiken. Detta gör att användaren kan fokusera på innehållet utan onödiga distraheringar. Använd rena, subtila rutnätslinjer (eller inga linjer), enkla typsnitt och färger som kontrast fint med din bakgrund.
Lägg till en sökfunktion
Ibland räcker det inte med att lägga till en sorteringsfunktion.När du har sidor med information för att sortera igenom, slår ingenting på ett sökfält. Detta är enkelt nog att göra med sprinkling av jQuery:
- Så här skapar du ett filter / sökbord
Överbelasta inte bordet med uppsägningar
Om ditt bord inte gör information mer läsbar så är det kontraproduktivt. Apputvecklare älskar att tout stora listor med funktioner och ett bord är definitivt ett naturligt och till och med lämpligt sätt att ta itu med. Ibland packar emellertid designers tabeller med mycket onödig, överflödig information som kan presenteras på ett mycket bättre sätt.
Kolla in exemplet ovan från Invoice Machine. De fyra planerna som de erbjuder är nästan identiska med undantag för tre funktioner. Detta ger 15 onödiga rader som gör att dina ögon hoppar fram och tillbaka för att ansluta kontrollerna med motsvarande funktion. En enkel punktlista eller tabell som sagt? Alla våra planer innehåller följande funktioner :? skulle tillåta användare att snabbt se att oavsett vilken plan de väljer, de får alla dessa funktioner.
Då kunde bordet reserveras för differentieringsområden, vilket skulle skära ner till en mycket mer hanterbar 3 eller 4 rader. Återigen, låt mig betona att tabeller ska göra informationen mer läsbar. Om ditt bord inte uppfyller detta mål är det kontraproduktivt.
Skapa utökade områden
En annan bra funktion som du kan lägga till i dina tabeller är möjligheten att expandera vissa rader. Detta gör att du kan lägga mycket innehåll i ett relativt snyggt utrymme. Att dra av det här är ganska enkelt med ett jQuery-plugin som heter jExpand. Här är en handledning från jankoatwarpspeed om hur man implementerar det.
Om du använder ett expanderbart bord, var noga med att dina rubriker gör det helt klart var du ska hitta viss information. Det sista du vill är irriterad användare, siktar genom varje sektion för att hitta vad de vill ha.
Markera relationer
Detta är en teknik som verkligen ökar läsbarheten hos ett komplext bord eller en matris. Tanken är att markera vilken cell som användaren svävar över tillsammans med både kolumnen och raden som den tillhör. Det är inte det enklaste att dra av, men det är helt möjligt med lite smart kod. Här är ett exempel på hur man gör det.
Jag är säker på att det är mer än du någonsin velat veta om tabeller i webbdesign. Använd kommentarerna nedan för att meddela dina tankar om teknikerna ovan och var noga med att dela med dig av några unika tabeller du hittar!