Hur man designar ett bord: On-Point Guide för att göra det rätt
Att använda tabeller och rutnät är vanligt när man designar digitala produkter och instrumentpaneler. Datatabeller hjälper till att organisera en stor del av informationen.
De presenterar data på ett mer läsbart och begripligt sätt. De hjälper också till att betona viktig data och förbättra datavisualiseringen.
Tabeller används ofta som en UI-komponent, men många gör fortfarande misstag när de designar datatabeller. Vissa bordsdesigner är fulla av visuellt brus eller är för komplexa, vilket resulterar i en dålig användarupplevelse.
Att få rätt tabell-UI-design skapar bättre datavisualiseringar och jämförelser. Att designa bord på rätt sätt gör dem attraktiva och förbättrar läsbarheten.
Den här guiden visar hur du optimerar datatabelldesign och förbättrar tabellfunktionalitet.
Designa datatabeller på rätt sätt
När du planerar en bordsdesign finns det två saker att arbeta med: bordsstilen och bordsfunktionaliteten.
Bordstil
Justera tabelldata
För att skilja text från numerisk data, justera texten till vänster och siffror till höger. Sådan anpassning gör det lättare att jämföra två olika data.
Tabellrubriker bör också anpassas till deras kolumndata för en strukturerad tabelldesign.
Vissa tabellceller kan ha flera rader text, till exempel beskrivningar. Den vertikala justeringen för sådant innehåll bör vara överst.
Annars kommer kolumndata inte att justeras med varandra.
Lägger till utvalt avsnitt
Pristabell som du kan skapa med wpDataTables
Ett utvalt avsnitt är en tabellkolumn , rad eller en cell som författaren vill framhäva. Det används vanligtvis på pristabeller eller när man jämför prenumerationsplaner.
Använd ett utvalt avsnitt för att markera viktig information i tabellen. Detta kan till exempel vara den mest prisvärda planen eller ett populärt inslag bland en lista.
För att skapa en utvald sektion, ändra formateringen av cellerna. Ändra till exempel fyllningsfärgen för cellen eller teckensnittsstorleken på texten så att den sticker ut.
Applicera färger
En datatabell bör inte ha för många färger. Använd dem endast för tabellrubriker, negativa och positiva trender och utvalda avsnitt.
Att lägga till för många färger skapar visuellt brus. Detta gör det svårt att urskilja element som behöver lyftas fram.
Använd mörkare nyanser av grått för teckensnittsfärg och ljusare nyanser av grått för kantfärg istället för den vanliga svarta färgen. Genom att använda mjukare svarta nyanser blir det mindre intensivt, vilket minskar påfrestningen på ögonen.
Använd olika färger när du särskiljer kategorier eller när du betonar högsta och lägsta värden. För att framhäva vissa avsnitt i tabellen, använd ljusare eller djärvare fyllningsfärger för att få dem att sticka ut.
Omväxlande radfärger
Tabell med sammanslagningsceller som du kan skapa med wpDataTables
Omväxlande radfärger förbättrar läsbarheten. Den sätter visuella ledtrådar, hjälper människor att följa en lista med information och ansluta data.
Detta är särskilt användbart när du skapar en stor databas. Det fungerar också bra för små datatabeller.
Skapa en "zebra-ränder"-effekt genom att alternera vit fyllnadsfärg med en mörkare färg som ljusgrå. Om du använder andra färger, använd en ljus fyllningsfärg och varva den med en något mörkare nyans.
Använder monospaced font
För en mer strukturerad tabelldesign, använd en typsnittsstil med monospace för numeriska data.
Tabular, eller monospaced font, har en fast bredd och avstånd för varje tecken. Detta förbättrar typografin och läsbarheten.
Exempel på typsnitt med monospace inkluderar Courier, Courier New, Lucida Console och Monaco.
För att ytterligare förbättra symmetri, se till att formatera siffror i samma längd, som datum till exempel. Istället för att skriva 15/3/2019, formatera datumet som 15/03/2019.
Visualisera tabelldata
Förvandla kolumndata till horisontella stapeldiagram. Detta hjälper till att visualisera data och skapa en överblick.
Horisontella stapeldiagram låter användare jämföra datamängder och tolka dem med lätthet. Varje stapel sitter i en kolumn bredvid data den representerar, vertikalt justerad och uppdelad i rader.
Om du infogar ett stapeldiagram utökas kolumnen ofta för mycket. Överväg därför att endast visa staplar för att visualisera viktiga värden.
En annan metod för att visualisera tabelldata är att använda värmekartor.
Heatmaps justerar färgnyansen på cellbakgrunden eller fyllningsfärgen baserat på det numeriska värdet på cellen, vilket skapar en enfärgsgradient. Ju högre numeriskt värde, desto mörkare blir fyllningsfärgen.
Tabellfunktioner
Gör det responsivt
En effektiv datatabell fungerar bra på olika enheter. Den måste visa data på ett läsbart sätt när den öppnas på smartphones, surfplattor och bärbara datorer.
Att titta på bord på mindre skärmar kräver en hel del förändringar i bordsdesignen. En bordsdesign byggd på stora stationära datorer kanske inte fungerar på mindre enheter.
Testa tabellen på mobila enheter. Se till att användare kan skanna igenom information utan att behöva rulla oändligt.
Se upp för krympta kolumner och dolda texter eftersom dessa resulterar i dålig användarupplevelse.
Kom ihåg att på mindre skärmar är smala kolumner bättre. Det finns olika sätt att göra kolonnerna tunnare.
Detta inkluderar användning av ikoner, förkortningar, kortare nummerformat och avrundade numeriska data. Alltså 2,5 m istället för 2 500 000 och 0,3 istället för 0,3241.
Aktivera omordning av kolumner
Stora datatabeller är ibland svåra att läsa på grund av deras storlek och mängden information de innehåller. Genom att göra det möjligt för användare att ändra ordning på kolumner kan de fokusera på de kolumner de behöver läsa.
Det betyder också att de kan göra detta utan att rulla fram och tillbaka. Detta hjälper användare att minimera röran, smälta små bitar av information och ordna kolumnerna efter deras behov.
Överväg att ha en fast radhöjd
Tabell som du kan skapa med wpDataTables
Om datatabellen innehåller många kolumner, förankra de första kolumnerna. Detta kommer att behålla sammanhanget medan användare bläddrar igenom resten av tabellen.
Att ha anpassningsbara kolumner rekommenderas starkt. Men tabellrader måste ha en fast höjd för att bibehålla symmetri och undvika att förvirra läsarna.
Oavsett data förbättrar den fasta radhöjden tabellens UI-design och grafik.
Använder paginering för långa datatabeller
Paginerad tabell som du kan skapa med wpDataTables
Det finns en oskriven regel att datatabeller inte bör vara längre än en skrivbordsskärm. Detta är dock inte möjligt om en datatabell är lång.
Förhindra långa datatabeller från att uppta en stor del av en webbsida och maximera vitutrymmet. Gör detta genom att aktivera sidnumreringsfunktionen.
Detta tjänar också till att guida läsarna genom tabellen och hjälpa dem att navigera.
När du använder paginering, inkludera sidnumret för att visa hur många sidor det finns och vilken sida läsarna är på. Dessutom, för att ge användarna mer kontroll, låt dem anpassa hur många rader som ska visas per sida.
Inkludera tabellsorteringsfunktion
Genom att tillåta användare att ha mer kontroll över datatabellen förbättras tabellens UI-design. Om tabellen innehåller mycket information är ett sätt att hjälpa läsarna att hitta den data de behöver att lägga till en sorteringsfunktion.
Sortering gör det möjligt för användare att ordna data enligt specifika logiska ordningar.
Detta kan vara alfabetiskt, ändrat datum och tid, stigande, fallande och mer. Ju fler alternativ, desto bättre.
Ett annat sätt att sortera data är att inkludera ett sökfält. Detta gör att läsare kan söka efter specifik data som namnet på ett företag, plats, produkter och mer.
Filtrera data
Tabell med filter som du kan skapa med wpDataTables
Filtrering av data är ett annat sätt att öka funktionaliteten hos en datatabell. Användare kan smälta stora mängder data, förstå trender och göra jämförelser.
De kan också lokalisera viss information och analysera komplexa data. Detta gäller särskilt för numeriska datatabeller.
Se till att användare kan anpassa parametrar eller filteruppsättningar för vissa kolumner. Inkludera också ett avancerat filtreringsalternativ för att spara filteruppsättningen de skapade för framtida användning.
Behåll sammanhang, använd fasta rubriker och frysta kolumner
Att läsa igenom en stor datatabell kräver mycket vertikal och horisontell rullning. För att bibehålla sammanhanget , fäst kolumnrubriker såväl som den första kolumnen eller de första kolumnerna.
Microsoft Excel och Google Sheets hänvisar till förankrade kolumner som "frysta".
För enklare tabellnavigering, lägg till ett komplett radval. Detta tillåter användare att markera viktiga rader när de rullar horisontellt.
Detta kan vara knepigt om tabellen har expanderbara rader och kan resultera i en annan effekt.
Sista tankar om hur man designar ett bord på rätt sätt
Att veta vad man ska tänka på när man skapar en design för tabellgränssnitt leder till effektiva tabeller. Dessa tillåter användare att jämföra data och sortera information, och ökar också läsbarheten.
Att lära sig att designa ett bord gör det möjligt för designers att minska visuellt brus och utnyttja vitt utrymme på bästa sätt. Designtipsen som ges här kan optimera tabelldesign och användardata.
Genom att följa dessa tips förbättras den övergripande bordets stil och funktionalitet. Vidare hjälper de till att förbättra användarupplevelsen och varumärkesimagen.
Om du tyckte om att läsa den här artikeln om hur man designar en tabell, bör du kolla in den här om hur man gör en datatabell.
Vi skrev också om några relaterade ämnen som exempel på datatabeller, pristabellexempel, DataTables-alternativ, JavaScript -tabellbibliotek, WordPress-tabellplugin -program, hur man skapar en tabell i WordPress utan plugin, hur man infogar en tabell i WordPress, WordPress-priser tabellplugins, och hur man skapar statistiska tabeller i WordPress.