detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
44 stars 13 forks source link

Vælg sprog #37

Closed TinaLinneOlsen closed 5 years ago

TinaLinneOlsen commented 5 years ago

Vi har behov for at brugerne kan vælge sprog i en selvbetjeningsløsning. Hvad tænker i om nedenstående løsning?

image

detfaellesdesignsystem commented 5 years ago

Hej @TinaLinneOlsen

Række 1 i menuen er forbeholdt portaler og oplysninger fra NemLog-in. Sådan skal det helst fortsætte med at være, så vi ikke får alle mulige afarter af headerens top og portaler og NemLog-in har mulighed for at gøre brug af denne del af siden til at skabe sammenhæng på tværs af selvbetjeningsløsninger og portaler. jf. https://detfaellesdesignsystem.github.io/dkfds-docs/komigang/tildesignere/sideopbygning/#header

Nedenfor illustrerer jeg nogle muligheder for placering af sprogvælgeren som I/vi med fordel kunne teste i forhold til placering og anvendelse af ikon eller flag.

Placering Sprogvælgeren bør placeres i headerens række 3, 4, 5 eller i footeren. Virks designmanual rummede dette eksempel, hvor sprogvælgeren er vist i den komplekse header http://test.adviceasdev.dk/virk/examples/eksempel-indberetning-kompleks.html. Jeg kommer ind på flag og ikoner nedenfor.

GovUK har sprogvælgeren under headeren https://land-registry-elements.herokuapp.com/language-switcher/demo og her er et eksempel fra usa, hvor sprogvælgeren også er placeret under headeren https://www.usa.gov/.

Du kan læse om GovUKs tanker omkring sprogvælgere her: https://paper.dropbox.com/doc/Multiple-language-support-hSVIJqjyWFVc5N6Irvxnn

Alternativt kunne der stilles forslag om at det er bliver muligt, at der tvinges en "tynd" ekstra række ind over række 1, men dette skal i så fald godkendes af portalerne og der skal laves regler for det før jeg kan foreslå det. Denne artikel gennemgår forskellige måder at gribe sprogvælgeren an på: https://medium.com/@khalidaljaaidi/whats-the-best-way-to-implement-a-language-switcher-part-1-desktop-web-a118ecd0752c.

Flag eller ikon Der er kritiske røster omkring det at anvende flag til at illustrere sprog, da ikke alle flag nødvendigvis korrelerer med et sprog og da der kan være stærke følelser forbundet med flag. Jeg ved ikke hvor relevant det er i denne kontekst, men det er værd at være bevidst om det. En hurtig google søgning synes at problematisere anvendelsen af flag: https://usersnap.com/blog/design-language-switch/, https://wplang.org/never-use-flags-language-selection/, https://responsivenews.co.uk/post/123104512468/13-tips-for-making-responsive-web-design Jeg synes det ville være fedt at finde ud af om flag virker bedre end et ikon, og om vi uforvarende kunne risikere at "støde" nogle ved at anvende et flag fremfor et andet.

At finde et ikon for sprogvalg er dog heller ikke helt uproblematisk, da der endnu ikke er et standardiseret ikon for "sprogvalg" og det som nogle forsøger at gøre til standard, har jeg endnu ikke set på sites nogen steder http://www.languageicon.org/. En globus forekommer mig oftere anvendt som ikon for sprog/lande (uproblematisk eller ej). Material design har to tæt beslægtede ikoner som jeg tænker det ville være oplagt at teste om virker, det ene er en mere abstrakt globus (søg på "language" på materialdesigicons.com) for sprog og det andet er en globus (søg på "globe" på materialdesigicons.com). Umiddelbart er den abstrakte globus at foretrække visuelt, men hvad virker bedst? Vi mangler en best practise på området. Så her er endnu en oplagt mulighed for at i deler Jeres brugertest med os, så vi kan udsige noget mere definitivt.

Forslag til alternative placeringer og anvendelse af flag og ikoner Umiddelbart vil jeg foreslå Jer at placere sprogvælgeren i headerens række 3,4,5 som i finder det bedst, og ellers kan footeren også anvendes.

Sprogvalg i header med material sprog ikon

Sprogvalg I header med material globus ikon

Sprogvalg I header med material sprog ikon i dropdown

Sprogvalg I header med flag 2

Sprogvalg I header med flag 1

Sprogvalg I footer med flag 1

Sprogvalg I footer med flag 2

Sprogvalg I footer med material sprog ikon i dropdown

Sprogvalg i footer med material sprog ikon

Lad mig vide om i får testet noget af og hvad I finder der virker bedst.

Mvh Sune FDS

TinaLinneOlsen commented 5 years ago

Hej Sune,

Tak for input. Det er en god pointe at holde række 1 og 2 ens gennem alle selvbetjeningsløsninger.

Det kan muligvis godt fungere at placere det i række 3. Grunden til at jeg var lidt påpasselig med det, er fordi vi i løsningen også har behov for at brugerne kan ændre adgang. Der har tidligere været et issue herinde omkring at ændre virksomhed, og det forslag som blev lavet i det issue ville vi også gerne bruge. Det betyder det kunne se ud som nedenstående, hvis man både har sprogvalg og skift af adgang.

image

Jeg tror ikke nødvendigvis der skal bruges flag, sådan er det bare i den nuværende løsning. I forhold til test, så er sprogvalg ikke en hovedvej og derfor bliver det nok ikke meget vi vil få testet lige den funktionalitet.

detfaellesdesignsystem commented 5 years ago

Hej Tina (@TinaLinneOlsen)

Det var så lidt. Jeg er glad for at kunne hjælpe. Jeg synes i skal køre med dit forslag og se (brugerteste) om det virker efter hensigten. Lad mig meget gerne vide om Jeres brugere kan finde ud af det, for så kunne vi lave dit forslag til et eksempel med "ændre virksomhed" og "sprogvælger" i FDS.

Mvh Sune FDS