Moderne Enterprise UI-design - Del 1: Tabeller

Tanker, mønstre og løsninger.

Det er svært at designe til virksomheden. Hvorfor? Fordi Enterprise software generelt er kompliceret. Du har store mængder data, der kan vises, brugerkonfigurerbare UI'er, komplekse arbejdsgange, automatiserede opgaver og meget mere. At designe til alle disse ting kan være lidt af en udfordring .

Som et resultat tilbyder nogle Enterprise-applikationer en dårlig brugeroplevelse og ender med at se godt ud, lidt kedelige.

Typisk virksomhedsapplikation

I løbet af en række stillinger vil jeg nedbryde nogle almindelige brugergrænseflader til virksomhedsapplikationer, problemer og mulige løsninger.

Det er værd at påpege, der er ingen størrelse, der passer til alle. Mønstrene og løsningen nævnt nedenfor er ting, som jeg har fundet at fungere, gennem iteration, feedback fra brugerne og test. Løsninger skal naturligvis være skræddersyet til din applikation og vigtigere af dine brugere. Intet slår at tale med dine brugere og se dem bruge din software.

Lad os starte med tabeller

Enterprise-applikationer skal beskæftige sig med store mængder data, og da der ikke er nogen bedre måde at vise en betydelig mængde data (endnu) end en tabel, så lad os starte der.

Ovenfor er et typisk eksempel på en tabel i en virksomhedsapplikation. Dejligt er det ikke. Lad os undersøge, hvordan vi kan forbedre oplevelsen af ​​komplekse tabeller, og hvad vi skal overveje, når vi gør det.

Her er nogle spørgsmål, vi skal overveje, når vi designer og bygger ud en datatabel:

  • Hvilke enheder bruges til at se tabellen?
  • Har vi kontrol over de data, der vises, eller er de konfigurerbare af brugeren?
  • Hvordan kan vi hjælpe med hurtig scanning af tabeldata? - Hvis tabellen vil indeholde en masse data, hvordan kan vi så gøre det nemt for brugerne at finde de data, de har brug for?
  • Vil rækker have delte handlinger, såsom redigering eller sletning?
  • Kunne tabelceller indeholde masser af data, adresser eller endda afsnit af tekst?

Husk først og fremmest at tale med dine brugere, find ud af, hvordan de vil bruge tabellen og de data, den vil præsentere.

Bemærk: I resten af ​​dette indlæg antager jeg, at vi arbejder med en webbaseret applikation, selvom hovedparten af ​​nedenstående punkter gælder for enhver virksomhedsapplikation uanset platform.

Grundlæggende først

Vi starter med en grundlæggende unstylet tabel, der viser fiktive kundeoplysninger:

Ustylet bord

Lad os først tilføje nogle grundlæggende stilarter, der giver en klar adskillelse af rækker, hjælpe med læsbarheden og fjerne nogle af standardbrowser-stilarterne.

Stilbord

Det siger sig selv, at tabellen skal være tilgængelig for alle brugere. Brug af korrekt semantisk markering er et must, så brugere af skærmlesere kan navigere gennem tabellen en celle ad gangen, høre kolonne og rækkeoverskrifter, der er talt til dem. Kolonneoverskrifter skal være beskrivende og relevante. Bordformater skal opfylde WCAG 2 AA-kontrastretningslinjer (eller endda AAA afhængigt af det nødvendige niveau for overholdelse).

Responsive tabeller

Brugere kan se vores applikation på enhver enhed, så vi er nødt til at sikre, at vores tabel kan bruges uanset om den vises på mobil, tablet eller desktop.

Vores bord på 375px x 667px (iPhone 7)

I øjeblikket er vores tabel ikke lydhør, så det ser ikke godt ud på enheder med mindre skærme. Responsiv borddesign er et kæmpe emne, der ligger uden for dette indlæg. Lad os nu se på to almindelige tilgange:

Sammenklappende kolonner

Kolonner, der oversvømmer skærmens bredde, skjules

Med dette mønster skjules alle kolonner, der ikke passer på skærmen. De kan skiftes af brugeren for at vise de skjulte data. Du kan tage dette et skridt videre ved at definere, hvilke kolonner der skal prioriteres ved forskellige visningsbredder, så kritiske kolonner stadig er synlige på mindre skærme.

Vandret rulende tabeller

Vandret rullende tabel

Måske er brugere nødt til at sammenligne flere rækker hurtigt uden at skulle hoppe rundt med at udvide ting? Et almindeligt mønster er at lade tabellen rulle vandret på mindre skærme og fjerne behovet for skjulte kolonner. Overvej at bruge begge mønstre og give en mulighed for at skifte mellem de to.

Håndtering af masser af data

I øjeblikket ser vores bord ok ud, men har nogle problemer med anvendeligheden. Forestil dig, at vi havde 10.000 rækker, at finde en bestemt rekord kan være en udfordring.

paginering

Pagination i aktion

Ved at tilføje pagination kan vi begrænse antallet af rækker pr. Side, hvilket gør dataene lidt lettere at fordøje. Ovenfor bruger vi ti rækker pr. Side.

Pagination har mange fordele. Det gør det lettere for brugere at søge gennem listen manuelt, giver dem en følelse af kontrol (i modsætning til uendelig rulning) og giver brugerne mulighed for at holde et mentalt notat af en rows placering. Når vi bruger pagination, skal vi give brugeren mulighed for at vælge antallet af poster pr. Side (ideelt at gemme deres valg for fremtiden) og også vise det samlede antal poster på listen, og hvor mange der er i betragtning.

Brugerdefinerbar pagination

At give brugeren mulighed for at ændre antallet af poster pr. “Side” kan gøre det lettere, når man sammenligner flere rækker, end der kan spænde over 1 eller flere sider.

Det er også værd at overveje, i hvilken mængde data tabellen skal bruge paginering. Hvis vi for eksempel paginerer til 10 elementer pr. Side, men der kun er 11 elementer, er en bruger nødt til at klikke ved siden af ​​for at se den sidste række. Hvorfor ikke programmatisk kontrollere, om der er, sige mere end 20, og i bekræftende fald aktivere pagination.

Lat ladning

Indlæser flere rækker efter behov

Et andet almindeligt mønster, enten ved en "indlæs mere" -knap under tabellen eller ved at indlæse yderligere data, når brugeren ruller til bunden af ​​tabellen. Jeg vil anbefale pagination over dette, hovedsageligt til fordelene ovenfor. Uendelig rulning fjerner nogle aspekter af brugerkontrol (Hvornår slutter dataene? Hvor mange poster har jeg set?). Det er mere velegnet til apps, der fokuserer på brugere, der bruger en strøm af data snarere end en liste over data, hvor der er brug for mere brugerkontrol.

Søgning i tabellen

Live søgning af tabeldata

En anden løsning ville være at filtrere tabeldataene efter specifikke søgekriterier.

Sortering efter kolonner

Sortering efter kolonne

Sortering af data efter kolonner giver brugerne mulighed for at gruppere lignende data efter en søjleværdi.

Disse mønstre fungerer godt sammen, filtrerer tabellen for at vise relevante data, søger efter finkornige resultater og sorterer derefter resultaterne efter værdi.

Tilvejebringelse af et resume af data

En visuel oversigt giver et overblik over den ledsagende tabel

Tilføjelse af en visuel oversigt over tabellen kan hjælpe brugeren med hurtigt at analysere dataene.

Design for det ukendte

I mange applikationer er det fuldstændigt muligt, at tabelstrukturen og dens data er defineret af brugeren, så du muligvis ikke ved, hvilke data der overhovedet udfylder tabellen. Et veludviklet bord skal rumme dette. Dette giver typisk et par ekstra udfordringer.

Kunne tabellen indeholde meget lange URL'er eller afsnit af tekst (adressedata, brugerindgivne meddelelser, formfeltværdier)? Vi har et par muligheder her:

Trunker lang tekst

Skal brugeren se alle den potentielt lange tekst for hver række på samme tid? Det er usandsynligt. En løsning ville være at beskære tekst i en længde, der er nyttig nok til at give brugeren et overblik over dataene og give en metode til at se mere, enten ved at linke til en anden side, vise mere indhold i en modal eller på en anden måde (vi Jeg berører dette senere).

Pakk lange strenge

Lange webadresser kan potentielt bryde layoutet på en responsiv tabel. Vi skal sørge for, at eventuelle links (eller lange ubrudte strenge) i en tabelcelle bryder korrekt for ikke at ødelægge tabellayoutet.

Række handlinger

Almindelige rækkehandlinger skal grupperes. Hvis det er muligt at udføre disse handlinger på flere rækker på samme tid, skal handlingen fjernes og tilføjes som en mulighed andetsteds på siden (tæt på tabellen). Vi har selvfølgelig brug for en måde at vælge flere rækker på.

Udførelse af handlinger på flere rækker på én gang.

Tabelhandlinger

Almindelige tabelhandlinger inkluderer:

Udskrivning af tabeldata

Tillad brugeren kun at udskrive tabellen og ikke det omgivende brugergrænseflade. Brug udskriftsmålrettede stilarter til at optimere tabelstyling til udskrivning. Fjern pagination, når du udskriver for at sikre, at alle tabeldata udskrives.

Download af tabeldata

Næsten alle strømbrugere vil downloade tabeldataene i et standardformat (CSV, JSON osv.) For at muliggøre datamanipulation i anden software. Hvis filstørrelsen sandsynligvis vil være stor, skal du overveje at bruge et zip-arkiv. Hvis arkivet ikke øjeblikkeligt er tilgængeligt, skal du informere brugeren og e-maile dem, når det er klar til at downloade.

Menu med handlinger på bordniveau

I dette eksempel har vi brugt en rullemenu "handlinger" over tabellen for at give mulighed for tabelspecifikke handlinger

Visning af yderligere række data

Afhængig af brugen, kan en bruger muligvis hurtigt få adgang til yderligere oplysninger om hver række, mens han forbliver i sammenhæng. Dette kan udføres på en række måder.

modals

Visning af ekstra rækkedata i en modal

Modaler giver brugeren mulighed for at forblive på samme side som tabellen, men give større fokus på de yderligere oplysninger og alle handlinger, der måtte udføres.

Detalje panel

Visning af ekstra rækkedata i et panel

Afhængig af situationen kan du opleve, at en modal muligvis ikke er den ideelle løsning, hvis du har brug for at holde dataene under modalen synlige. Et detaljerpanel, der glider ind på siden, kan være en bedre løsning, når du holder i en kontekst og behøver at holde dataene i tabellen synlige.

Lukende tanker

Der er ofte mere ved det ydmyge bord, end der møder øjet. Forhåbentlig vil nogle af de nævnte punkter hjælpe dig næste gang du kommer til at designe et bord.

Brugergrænsefladen ovenfor er bygget med Pulsar-designsystemet, der leverer størstedelen af ​​denne funktionalitet til Jadu Continuum-platformen.

Opdatering: Del 2, der ser på modale dialoger er nu live!