Datatabeller Design

Grundlæggende

Evnen til at forespørge og manipulere data er et af de vigtigste krav til de fleste produkter, der er designet lige nu. Under hensyntagen til de forretningsmæssige mål og målsætninger og gøre hverdagens arbejde lettere og mere produktivt for tusinder af mennesker, der er tvunget til at bruge det produkt, du har designet 8 timer om dagen. I dag snakker vi Datatabeller.

Arbejder som UI / UX designer, specielt hvis dit fokus er enterprise produkter, støder du altid på en masse datatabeller. Ærligt talt, hvis vi taler om komplekse webapps størstedelen af ​​skærme, du bliver nødt til at designe indeholder, eller bare er et stort gitter. Da jeg er en af ​​de heldige, der arbejder på denne type projekter, er der næppe en dag, som jeg ikke behøver at designe et af dem. Så hvad er bordet? Kombinationer af kolonner og rækker, der hjælper dig med at præsentere dine data på en mest kedelige måde. Det er ikke så nemt, som det lyder. Her er flere tip til at gøre dine datatabeller bedre.

1. Hvornår skal man bruge tabeller, og hvad er fordelene?

Datatabel er en fantastisk løsning, når du har brug for at vise en masse information til stort antal varer. For eksempel vises en liste over klienter med deres I’d, status, kontakter, sidste aktivitet osv… bedst som en datatabel. Der er mange andre fordele, såsom: stor brug af plads, let skalerbarhed, let under udvikling, brugervenlig arbejdsgang med gitter (størstedelen arbejder allerede med Excel i mange år). Nem måde at finde og ændre noget på.

Men husk, der er mange måder at repræsentere data på. Beslutning om at bruge eller ikke at bruge net skal styres af brugerbehov. Når du skal give et overblik / resume bedre for at bruge flere grafer end tabeller. For eksempel kan aktiekurshistorik for en vis kapital i et år vises i en kæmpe tabel, men skemaet er bare meget mere effektiv måde at suge ind al denne info på.

2. Hvilke oplysninger skal vises?

De oplysninger, du viser i et gitter og rækkefølge i, hvad brugeren ser det betyder noget. Så beslutningen om, hvilke værdier der viser, i hvilken rækkefølge spiller en afgørende rolle i sidste ende. Det påvirker tid og mængde kræfter for brugeren at udføre sin opgave. Valg af datapunkter skal være baseret på brugerpersoner og scenarier, tidligere applikationsversioner og god del af logikken. Så skynder dig ikke at designe det, og brug bare lidt tid på at tænke over det

”Tænkning er det hårdeste arbejde, der er, hvilket sandsynligvis er grunden til, at så få engagerer sig i det” - Henry Ford

Der er ingen mening i at tilføje nålesøjle til tabellen, selvom den ser tom ud, det vil bare distrahere brugerfokus fra vigtige værdier. Men det er næsten aldrig et tilfælde, i de fleste scenarier os har du en interessentanmodning om at få plads til 23 kolonner i deres ældste og mindste skærm. Men tænk på det, da for meget af en god ting er dårligt. Flere kolonner tilføjer du sværere for brugerne at scanne den. Bedre at være streng i dit valg og fjerne alt unødvendigt. Hold de sekundære oplysninger skjult, medmindre brugeren er interesseret i listepost.

3. Fokuser på det vigtigste

Prøv at placere nøglekolonner fra venstre til højre (dette kan være den modsatte måde, baseret på det område, du laver design til), dette er baseret på den måde, vi læser information på. Kolonner til venstre får bare størst mulig opmærksomhed, og kun hvis vi interesserer mig noget, tjekker vi andre kolonner.

F-Layout bygger på forskellige eyetracking-undersøgelser for dets grundlæggende koncept. Disse videnskabelige undersøgelser viser, at websurfere læser skærmen i et “F” -mønster - se øverste, øverste venstre hjørne og venstre side af skærmen mest ... kun lejlighedsvis kigger mod højre side af skærmen. Disse eyetracking-undersøgelser argumenterer for at placere de vigtigste elementer på dit websted (branding, navigation, opfordring til handling) på venstre side af designet. Du kan finde ud af mere om F-mønstre i dette motiv af Brandon Jones http: / /webdesign.tutsplus.com

4. Tekstjustering

Justering spiller en stor rolle i tabellæsbarheden, hvor let du kan foretage beregninger i dit sind og sammenligning mellem forskellige rækker.

Der er 3 enkle regler.

  • Højrejusterede numeriske kolonner
  • Venstrejusterede tekstkolonner
  • Kolonnenavne justeret som kolonneindhold

At følge disse retningslinjer vil hjælpe dig med at gøre din tekst i gitteret tiltalende og let at læse. Hvad din tekst siger til brugerne er vigtig.

5. Størrelse betyder noget

Tabelens form skal være baseret på brugernes behov og evner. Mere informationstabeldisplay, mere kompliceret bliver det, skrifttyper og rækkehøjde bliver mindre for at passe til flere rækker over skærmfolden. På den anden side, hvis du ved, at antallet af rækker ikke vil være så stort, som for eksempel en liste over varer i din indkøbskurv, skal du ikke gøre det meget lille.

Meget ofte er mindre størrelse vejen at gå. Når du har enorme lister med emner, er antallet af emner, du kan vise uden rulle eller interaktion, meget vigtigt. Faldende rækkehøjde øger undertiden antallet af varer, du viser over folden to gange, og det er en stor ting. Normalt ønsker du, at rækkehøjde skal være tyndere, indtil det stadig ser rent ud, og information blandes ikke i et stort rod.

Men misforstå mig ikke. Jeg opfordrer dig ikke til at proppe så meget som muligt i din skærm ejendom. Prøv at fordoble dit hvidrum. Selv hvis datatabellen har masser af oplysninger, hvis du har anstændigt polstring, vil dit design ikke se tunge ud.

6. Typografi

I designtypografi er en af ​​de vigtigste ting, der enten gør dit arbejde stort eller almindeligt eller endda forfærdeligt. Tabellenes design er ikke en forskel. Kunsten at arbejde med skrifttyper er ikke en del af historien, og jeg er ikke den bedste person til at tale om det) Her er flere tip, selv jeg kan give

  • Brug ikke alle kasketter, som det er svært at læse
  • Undgå at bruge Serif-skrifttyper, da de skaber yderligere visuel støj
  • Undgå at bruge fed og kursiv
  • Brug kun gode skrifttyper

7. Fjern alt unødvendigt

Du har sandsynligvis hørt udtrykket "rent" design til ofte, før du læste denne artikel. Hvad jeg prøver at sige - mindre er mere. Brugergrænsefladen skal være så usynlig som muligt. Især når du håndterer store mængder data, lægger du allerede meget pres på mennesker, der vil arbejde med dit produkt, så du behøver ikke tilføje visuelle distraktioner. Dit mål er at få indhold til at skinne ikke indpakningen omkring det.

  • Fjern unødvendige separatorer
  • Fjern række strippet baggrund
  • Fjern skygger, 3d-effekter, glød osv.

8. Undgå duplikering

Jeg ser unødvendig kopiering meget ofte i UI-design. Det har stor indflydelse på læsbarheden, da det annoncerer ekstra elementer, der ikke tilføjer nogen værdi.

9. Designmønstre og fælles interaktioner

UX-designere kan nemt drage fordel af brugernes tendenser til mønster-søgende. Nøglen ligger i designmønstre, som er genanvendelige løsninger på brugervenlighedsproblemer. De er også tidsbesparende. Mønstre er de første løsninger, folk går til, når de ikke har tid til at opfinde noget nyt. Og som mange “det fungerer bare” løsninger, har mønstre en tendens til at klæbe rundt.

Tak, fordi du læste indtil slutningen. Håber, at du har fået en bøde med denne lille artikel nyttig. Må ikke være hård med mig, da det er min første prøve på medium)