klikbar tabel-række

[FNA-atp]

Hej FDS team, I en selvbetjeningløsning er der brug for, at brugeren kan klikke på en tabel-række og komme videre til en ny side. Vi har i vores tidligere selvbetjeningløsninger brugt ">" på rækken, når der skal åbnes en ny side, og "pil ned" når for at folde yderligere rækker ud. se billederne herunder.

Vi har brug for jeres input til, hvordan vi skal gribe det an med klikbare tabel-rækker? skal vi køre samme princip, som vi har usabilitytestet på eksisterende selvbetjeningløsninger eller har I et bedre forslag?

M.v.h Farzana

[detfaellesdesignsystem]

@FNA-atp Hvad med at bruge "åbner en ny side" ikonet, når nu det er det som sker? Og samtidig bruge en tooltip på hele linjen, der fortæller brugeren at man ved klik på linjen åbner en ny side? Det vil så se således ud:

Mvh Sune

[FNA-atp]

Hej Sune, Super godt forslag :)

Vil man ikke misforstå ikonet og tro på, at man går væk fra løsningen(åbner en ny fane)?

Med venlig hilsen Farzana Nasry

---

Fra: detfaellesdesignsystem notifications@github.com Sendt: torsdag, marts 28, 2019 11:05 AM Til: detfaellesdesignsystem/dkfds-components Cc: Farzana Nasry - FNA; Mention Emne: Re: [detfaellesdesignsystem/dkfds-components] klikbar tabel-række (#24)

@FNA-atphttps://github.com/FNA-atp Hvad med at bruge "åbner en ny side" ikonet, når nu det er det som sker? Og samtidig bruge en tooltip på hele linjen, der fortæller brugeren at man ved klik på linjen åbner en ny side? Det vil så se således ud: [Artboard – 3]https://user-images.githubusercontent.com/44367338/55148087-dd5e8d80-5147-11e9-94e7-9a7888c695aa.jpg

Mvh Sune

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/detfaellesdesignsystem/dkfds-components/issues/24#issuecomment-477526503, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AuG7YOt2Xr371EKk9--QhY_dDMpUXDRTks5vbJPfgaJpZM4cPiK8.

[detfaellesdesignsystem]

@FNA-atp Måske jeg har misforstået dig, jeg læste det som at brugeren går til en ny side/fane, men mener du at at linjen folder sig ud, når man klikker på den, a la en accordion?

Hvis du mener at linjen folder ud, så har vi følgende eksempel https://detfaellesdesignsystem.github.io/dkfds-docs/udvidelser/datatables/?s=virkdk#expandable-table

Mvh Sune

[FNA-atp]

Hej igen, Jeg tilføjer lige nogle billeder, så man bedre kan forstå problemet :-)

Fra niv. 2 på tabellen kan man klikke sig videre til en ny side (ikke nyt vindue):

Vi har samme udfordring på en ny løsning - spørgsmålet er om vi kan genbruge samme logik eller....? :-)

[TinaLinneOlsen]

Jeg vil gerne melde mig på banen i den her tråd. Jeg har ved flere lejligheder også haft brug for, at en tabel er en indgangsvinkel til at åbne en ny side eller udføre en handling på tværs af rækker. Nedenstående er screenshots fra to forskellige løsninger, hvor vi egentlig har løst det forskelligt. Enten ved at gøre tekst til et link eller sætte en knap ind på selv linjen. Desuden er der også brug for at tabeller som har checkboxe, kan få tilknyttet knapper, som gør det muligt at udføre en handling.

Fordelen ved den her model er at det virker på mobil, da brugerne stadig kan navigere videre, uden det tvinger dem til at trykke på det + ikon, som vil vises i de avancerede tabeller i mobilvisningen.

Tidligere var 'Send til AES' knappen i den her løsning et link, men det overså dem vi brugertestede med. Efter vi ændrede det til en knap, så fungerede det godt for brugerne. Lige den løsning vi lavede var udelukkende til virksomheder, og derfor var den mobile tilpasning ikke så vigtig. Generelt er ulempen ved den her model dog, at knappen på rækkerne som udgangspunkt er skjult for brugerne i mobilvisning (da den kun vil komme til syne når der trykkes på + ikon). Desuden har vi her haft brug for en knap, som gør det muligt for brugerne at handle, når de markere i checkboxe.

Jeg synes ikke selv jeg har fundet den helt gode løsning endnu, men det er uden tvivl en mangelvare i FDS lige nu, som jeg synes er relevant at have en dialog om.

[detfaellesdesignsystem]

@TinaLinneOlsen @FNA-atp Vi vil meget gerne have det gode eksempel på, hvorledes man kan sende brugerne videre til en ny side fra en tabel med på FDS. Det vil være fedt om vi kan standardisere måden, hvorved vi gør det, så det ikke opfindes forfra igen og igen.

Jeg er ikke meget for de eksempler, der anvender en chevron (>), da det ikke er mig entydigt givet hvad som sker. I det viste eksempel ville jeg snarere tro at noget foldede sig ud nedenfor end at det åbnede en ny side, særligt da det ligner at chevronen ovenfor har foldet det nedenfor ud. Her kunne et simpelt "Vis" link erstatte chevronen tænker jeg. Det vil også minde om eksemplet med sagsnummeret.

Tinas eksempler ligner ikke umiddelbart ens situationer? Linket på sagsnummeret ligner at man kan få yderligere specifikationer vist, hvorimod knappen indikerer en handling - umiddelbart ville jeg ikke tro at "send til AES" knappen åbner en ny side. Det er ikke sikkert at det er et problem at knappen åbner en ny side, hvis denne side handler om at få sagen sendt videre. Linket på sagsnummeret er nok at foretrække, når der er tale om kun at kunne få vist en uddybende specifikation på en ny side.

Måske vil brugen af et (simpelt) link, på den rette plads i tabellen være nok til at løse problemet og skabe ensartethed på tværs af tabeller, således at der anvendes et link til at lede brugeren til en ny side? - det er jo også det links er til :)

Mvh Sune Det Fælles Designsystem

[TinaLinneOlsen]

Du har ret i de to situationer er lidt forskellige i forhold til deres funktion. Som sagt synes jeg ikke selv, at jeg nødvendigvis har fundet de helt gode løsningerne endnu. Det kræver noget mere test at vurdere. På det projekt jeg arbejder på går vi snart i gang med at skitser til en helt ny selvbetjeningsløsning, og der kommer vi til at arbejde med de avancerede tabeller. Så når den proces går i gang, så tænker jeg vi kan tage dialogen omkring det løbende. Så er det med udgangspunkt i konkrete brugerbehov.

[FNA-atp]

Hej Sune (og Tina )

Sune, jeg synes dine overvejelser er gode - vi har ikke en guld løsning endnu.

Løsningen med enchevron(>) er usabilitytestet på 3 løsninger - og jeg kan huske den bestod fint alle de 3 gange. Jeg er enige med dig i, at den er ikke god at bruge, når der skal åbnes en ny side. Der er generelt mangel på et ikon for "åben link på samme vindue", synes jeg :-/

Vi er i gang med at opgradere en løsning til DK-FDS , som pt. åbner alle 3 niveauer i én lang tabel :-/

Jeg har skitseret nedenstående - har brugt en chevron(>) til niv 2. Men istedet kan man også bruge enchevron(>) (peger op/ned) på niv 1.

Hvad tænker du?

[FNA-atp]

Hej Sune, Vi har en prototype, du kan se på, for at forstå behovet :-)

Link til prototypen: https://atp-mobilefirst-eksempel.netlify.com/

Eksempler på tabel-behov: 1) Vælg Betalingsoversigt -> klik på pilen i en række i tabellen -> Ny side viser en ny tabel samt en breadcrum som tilbage link 2) Vælg Opkrævninger -> scroll ned til tabellen og klik på udvid-pilen i en række -> klik på pilen i en af under-rækkerne -> ny side viser en ny tabel samt en breadcrum som tilbage link

[detfaellesdesignsystem]

@FNA-atp Hej Farzana Jeg har givet prototypen et kig. Jeg tænker at vi afventer Jeres gode arbejde inden vi inkluderer noget i FDS og ser hvad som giver mest mening for brugerne. Lige nu tænker jeg stadig at et link er chevronen overlegen, da jeg "overraskes" når den ikke folder tabel-rækken ud, men går til en anden side. Jeg har lidt samme fornemmelse med vis-linket, særligt hvis der kun står "vis", da jeg andre steder oplever at "vis" enten åbner en modal eller folder rækken ud. Derfor tror jeg at linket skal "sige" noget om hvad brugeren møder. Man kan i det konkrete tilfælde måske også arbejde med om linket står inde i tabellen eller udenfor. Slutteligt kunne typen måske være et link.

Link i tabel der går til en underliggende side

Link i række der går til en underliggende side

Link i række uden for tabel der går til en underliggende side

Sats bidrag som link

Jeg afventer Jeres brugertest og så må vi se om vi skal inkludere noget fælles i FDS.

Mvh Sune FDS

[FNA-atp]

Hej Sune, Jeg ved ikke, om projektet kan nå at have ændringerne med og brugerteste dem :-/ men hvis de gør det, skal jeg nok vende tilbage med testresultater :-)

Men for at samle op, har jeg nedenstående punkter:

1. vis/luk link kan godt bruges, hvis rækken skal foldes ud/ind
2. Brug af linktekst fx "indberetninger", som siger noget om, hvad brugeren møder. Fx. hvis der åbnes en ny side, hvor der vises mere information om den enkelte indberetning.

Jeg har på nedenstående billede vist:

• når rækken foldes ud/ind, kan vi bruge Vis/Luk link (niv 1)
• når rækken er foldet og brugeren skal læse specifikt om et enkelt bidrag (dvs. gå til en ny side) - bruger vi linket "Se bidrag".

Hvad synes du? har jeg forstået dine pointer korrekt? :-)

[detfaellesdesignsystem]

Hej Farzana

vis/luk er +/- i designsystemet og venstrestillet At skrive vis virker sikker bedre end en chevron. Mit problem med chevronen var dog ikke i forhold til vis/luk funktionaliteten, men var at der umiddelbart under "vis" chevronen var en identisk chevron, som opførte sig markant anderledes. Det bryder med princippet om at "ens elementer skal gøre det samme" ellers risikerer man at forvirre brugerne unødvendigt. I designsystemet anvender vi ikke chevrons til vis/luk funktionalitet. Den måde FDS håndterer vis/luk eller åbn/luk på i tabeller er via et + (plustegn) i venstre side (se den avancerede tabel https://dkfdsdevelop.github.io/dkfds-docs/udvidelser/datatables/#expandable-table). Det samme gør sig gældende for vores accordions. Det gør vi fordi nogle har været så venlige at teste på det og komme med nogle anbefalinger, som i designssystemet er blevet overført til tabeller. https://uxmovement.com/navigation/where-to-place-your-accordion-menu-icons/ https://www.viget.com/articles/testing-accordion-menu-designs-iconography/ https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/

Se bidrag som link er bedre end en chevron Mit gæt er at linket "se bidrag" er bedre end en chevron. Det som jeg kan være i tvivl om, er hvorvidt et link placeret inde i en tabel tydeligt kommunikerer, hvad der vil ske for brugeren, når linket fører væk fra tabellen. Ofte er et link placeret i en tabel udtryk for en slags tabel-funktionalitet, fx et tal eller en dato som ligner et link, hvor hvis man klikker på det, så åbner det en måde at redigere det nævnte tal eller datoen på, eller hvis der fx står "vis" som link, så folder det rækken ud, og åbner altså ikke en ny side. Det er ikke sikkert det er et problem, at ting der ligner links opfører sig som andet end links, og at brugerne ikke forvirres over at links i samme tabel opfører sig væsensforskelligt (FDS anbefaler at anvende "funktionslinks" til links, der ikke er links som leder til nye sider, men som kalder en eller anden funktionalitet). Så når i forhåbentligt får testet på det på et tidspunkt, kan vi måske lave en god anbefaling for hvordan man anvender links i tabeller og hvordan man linker fra en tabel og over i en ny side.

Mvh Sune FDS

[FNA-atp]

Hej Sune, Tak for det hurtige svar :-) +/- er helt klart bedre end linket "vis/luk" - brugeren bliver ikke i tvivl om funktionaliteten. og du har ret mht. "ikke funktionslinks" i tabellen - men det må komme an på en brugertest :-). Jeg har skitseret nedenstående på paint.

[detfaellesdesignsystem]

Husk at dele Jeres fund fra brugertests. Jeg lukker dette issue imellemtiden.

Mvh Sune Det Fælles Designsystem