detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
44 stars 13 forks source link

Tekstbredde i alert-bokse ligner en fejl #41

Closed LeneSolveigAndersen closed 5 years ago

LeneSolveigAndersen commented 5 years ago

Tekstbredden i alertbokse ser meget mærkelige ud på desktop, hvis der er mere end én linje tekst. Det ligner en fejl, at der kun er tekst på ca. halvdelen af pladsen.

Jeg er med på, at intentionen er at øge læsbarheden (https://designsystem.dk/design/typography/#linjel%C3%A6ngde), men i dette tilfælde ligner det en fejl - og jeg kan være bekymret over, om borgerne vil tro, at der mangler noget tekst og derfor bliver bekymrede over, om de nu også får alt information med.

Det vil derfor være godt, hvis det gøres muligt at anvende hele bredden, når der er tale om længere tekster i alert-bokse.

image

[Brug denne type issues, når der ikke er tale om fejl, men om opdateringer og forbedringer af eksisterende kode/beskrivelser/eksempelvisninger. (Use this issue type for updates and improvements to the code/descriptions/examples that are not bugs.)]

Navn i designsystemet (Feature name in the design system) Identificer det element (fx en komponent), der skal opdateres eller forbedres. (Identify the feature (eg a component) that needs to be updated or improved upon.)

Link til det der skal opdateres (URL to what needs to be updated) Indsæt et link om muligt. (If possible, provide a URL.)

Skyldes dit forslag et problem? Beskriv venligst. (Is your update request related to a problem? Please describe.) Beskriv problemet klart og præcist. Fx jeg bliver irriteret, når... (A clear and concise description of what the problem is. Ex. I'm always frustrated when...)

Beskriv det du gerne ser ske. (Describe the solution you'd like) Giv en præcis beskrivelse af, hvad der skal opdateres/forbedres og hvordan. (A clear and concise description of what you want to happen.)

Beskriv de alternativer du har overvejet. (Describe alternatives you've considered) Giv en kort og præcis beskrivelse af alle de alternativer du har overvejet. (A clear and concise description of any alternative solutions or features you've considered.)

Supplerende bemærkninger (Additional context) Tilføj yderligere beskrivelser og billeder her. (Add any other context or screenshots about the feature request here.)

detfaellesdesignsystem commented 5 years ago

Hej @LeneSolveigAndersen,

Tak for din henvendelse!

Du kan bruge klassen alert--paragraph på en besked/alert, således at boksen ikke fylder hele bredden af siden, men "wrapper" om teksten.

Se nederste eksempel her: https://designsystem.dk/komponenter/beskeder/#forskellige-teksteksempler

Sig endelig til, hvis ovenstående ikke giver mening.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

LeneSolveigAndersen commented 5 years ago

Hej Kristina Tusind tak for hurtig hjælp - det prøver vi:-)

LeneSolveigAndersen commented 5 years ago

Hmm, nu har vi prøvet, og det ser værre ud end det første. Er der nogen mulighed for at beholde hele bredden på alert-boksen og gøre tekstenbredden større, så margen mellem tekst og højre side ikke bliver så voldsom stor, og får det til at ligne en fejl?

image

detfaellesdesignsystem commented 5 years ago

Hej @LeneSolveigAndersen

I Designsystemet er det valgt at vægte brugervenlighed, som fx læsbarhed, fremfor "design", hvilket afspejles i de valg der er truffet også omkring linjelængde. Den sidste måde du har sat det op på, er præcis den måde vi ville anbefale dig og andre at sætte info-beskeden op på (vi ville dog nok venstrestille begge cards også, samt indholdet i cardsne, men det er en anden snak). Vi vil ikke anbefale at gøre linjelængden længere uanset om du anvender en stor eller en lille boks, da det nedsætter læsbarheden.

I forbindelse med at fylde komponenter, eller sider for den sags skyld, ud, så er god brug af "white space" noget vi anbefaler. Man skal ikke føle sig nødsaget til at fylde tomrum ud. "White space" og god plads i og imellem ting er med til at lette den kognitive belastning og gøre det nemmere for brugeren at afkode, hvordan det på siden skal forstås, så det er vi ikke bekymrede for.

Nu bevæger jeg mig ud over dit spørgsmål - med forbehold for at jeg ikke er forretningsekspert og måske kan have misforstået det hele - men kunne den information som du har i den blå infobesked ikke være indeholdt i de to cards nedenfor, eller de kunne evt have overskrifterne "Feriepenge før skat" og Feriepenge efter skat" enten inde i eller udenfor (se eksempler nedenfor)?

Overskrift udenfor

Overskrift indeni

Forklaring indeni

Mvh Sune Team FDS

detfaellesdesignsystem commented 5 years ago

Jeg håber det hjalp. Jeg lukker issuet. Skriv endelig igen, hvis vi kan hjælpe med noget.

Mvh Sune Det Fælles Designsystem