(alterntativer til)Tabell-liste

[Stormoen]

Det har kommet et ønske om (og forslag til) en bedre visning av tabeller som liste på små skjermer. Dagens versjon tar opp mye plass og har dårlig informasjonshierarki.

Forslag til ny løsning gjør innholdet mer kompakt ved å sette overskrift ved siden av innhold, og legger til mulighet for kun å vise noen celler fra hver rad (se illustrasjon). Radene kan utvides for å vise alt innhold.

Tilknyttede oppgaver

• [x] #4069
• [x] #4070
• [ ] #4118

[Stormoen]

Vi er åpen for navneforslag! Enn så lenge kalt den:

Vertical Table Plassbesparende tabellvisning, med mulighet for ekspandering ved behov.

https://www.figma.com/design/jd7QGZJIQ5ZU6AhAq31yuv/branch/kWR9b5kMSttDX4zF1WlDkk/J%C3%B8kul-v2.0-(beta)?m=auto&node-id=14435-5036&t=O6gqWb905nLo94bv-1

[ivarni]

I koden i dag kalles varianten collapseToList og er ikke en egen komponent. Det er kanskje enklere å gjøre det på samme måte i Figma?

[ivarni]

Alternativt kunne vi laget denne som en egen komponent, det kan nesten hende det blir ryddigere både i kode og i APIet. Den kunne evnt erstattet hele collapseToList varianten vi har i dag og skilt de to tingene litt fra hverandre. Eller blir det tungvindt å bruke? Da måtte i så fall denne også hatt en versjon for store skjermer (kanskje en vanlig tabell der?).

Det er nemlig noen ganske leie tekniske utfordringer her mtp UU og tilgjengelighet som kan være vanskelige å løse innenfor hvordan dagens tabell-komponent er laget.

[Stormoen]

Usikker på hva som er best! Jeg tror ikke vi får til å bygge tabell på desktop til noe som brekker slik på mobil i Figma. Jeg har også inntrykk av at denne komponenten ikke erstatter vanlig tabellvisning på mobil - men er i tillegg til. I Figma-branch er den satt opp med variabler som gjør padding og tekst er ulik i screensize og density - men oppsettet er likt på tvers av flaten: https://www.figma.com/design/jd7QGZJIQ5ZU6AhAq31yuv/branch/kWR9b5kMSttDX4zF1WlDkk/J%C3%B8kul-v2.0-(beta)?m=auto&node-id=14766-707&t=ygkZ5gLXTm7FMFbG-1

I tillegg er det to varianter, en med mulighet for expandable (som var behovet/bestillingen) og en uten.

Tanker @piofinn ?

[piofinn]

@Stormoen i Figma kommer dere neppe unna å ha to komponenter for de to visningene, så det får man bare leve med, men man kan kanskje gi den et navn som angir at det er en variant/state av desktop-versjonen? Som det er nå, når den heter "Vertical Table" gir det inntrykk av at det er en helt egen komponent som alltid ser sånn ut og kan brukes uavhengig av skjermstørrelse. Kunne den heller hett noe som "Table Row Mobile" eller noe? (Komponenten representerer er jo en hel rad)

Men det er nok kanskje en case for to komponenter på en litt annen måte: Den visningen vi lager her er jo kun aktuell for "tabeller" som viser lister av noe (i eksemplene er det en liste av dokumenter). Kunne man hatt én komponent som er en liste, men som fremstår som en tabell på store skjermer, men brekker ned til denne visningen på små skjermer? F.eks. "Comparison List" e.l. Og så hatt en faktisk tabell som beholder formatet på små skjermer (med sidescroll) for de tilfellene man viser faktiske tabulære data.

I kode har dette ganske mye å si, ettersom det nesten er umulig å få tabeller til å se ut som noe annet enn tabeller og fortsatt oppføre seg riktig for skjermlesere o.l. Men en "Comparison List" kan jo være bygget opp som en liste av rader, som er mye lettere å jobbe med, og som uansett er mer semantisk riktig for de tingene den brukes til i dag. Så kan Table få se ut og oppføre seg som den vil i alle tilfeller 😊

Kanskje vi kan ta en liten diskusjon på det i neste uke? Er lettere å vise de tekniske begrensingene da uansett!

[Stormoen]

Etter en diskusjon på teamet ble vi enige om følgende: Denne tabellvisningen på mobil blir for kompleks og spesifikk (mtp tastaturnavigering/UU, tabell vs liste, ekspandering). Vi ser til dokumentvisninger hos Nav og HelseNorge, og vil foreslå å løse utfordringen ved bruk av andre komponenter som er lik på desktop og mobil. Eks card med expandmulighet pluss filter. Vi vurderte å tilpasse description list - men usikker på om dette behovet gjelder flere - og om dette er et mønster vi bør legge til rette for.