Design for sidestillede knapper

[KirstenTo]

Hej

Jeg er i gang med at designe en løsning, hvor der skal være to ligestillede knapper ved siden af hinanden.

Jeg har fået oplyst, at jeg skal bruge de primære knapper og tog oprindeligt udgangspunkt i temaet for Borger.dk med grønne knapper som default og sorte som active.

Men efter diskussion i teamet er der enighed om, at det er svært at se, hvilken knap der er klikket på, når den ene er sort og den anden grøn. Pt. er løsningen lavet med neutralt design i stedet for.

Har du nogle anbefalinger til valg af design ved ligestillede knapper?

På forhånd tak for hjælpen :) Kirsten

[detfaellesdesignsystem]

Hej @KirstenTo

Tak for din henvendelse!

Vi har oprettet en sag og vil vende tilbage til dig.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[detfaellesdesignsystem]

Hej Kirsten

Tak fordi du inddrager os i Jeres overvejelser. Jeg skal forsøge at hjælpe Jer videre så godt jeg kan, med forbehold for at jeg ikke kender løsningen. Et billedeksempel på det I arbejder på ville gøre det nemmere. Jeg tegner nogle eksempler nederst og beskriver overvejelserne bag, men det er med et kæmpe forbehold, da jeg ikke præcist ved hvad det er jeg giver anbefalinger omkring, hvorfor de bliver generelle.

Når du nævner grønne og sorte knapper, så vil jeg gætte på at i taler om knapperne fra HTML-guiden (https://htmlguide.borger.dk/layout-buttons.html) og ikke fra det Fælles Designsystem (FDS) (https://designsystem.dk/komponenter/buttons/?s=borgerdk), men så nævner du neutraltemaet, hvilket får mig til at tænke at i blander farver fra temaerne i FDS, hvilket absolut ikke er meningen. Uanset så er her en måde i kan løse det på med FDS.

Vi anbefaler på det kraftigste, at man kun anvender en "primærknap" pr. trin eller side i en løsning og at "primærknappen" er udtryk for den næste, givne eller mest oplagte handling for brugeren, samt at primærknappen altid er venstrestillet. Derudover anbefaler vi gerne at primærknappen forsøges holdt for sig selv ved at placere andre knapper andre steder på siden (hvor de er relevante) om end dette ikke altid lader sig gøre, hvilket jeg antager det ikke gør i Jeres tilfælde. Skal man have flere valgmuligheder, hvor ingen af dem er den primære (givne) for brugeren, vil de derfor begge være "sekundære" knapper. [Anvender I HTML-guiden er den grønne knap den primære og basisknapper sekundære].

Primærknap i FDS https://designsystem.dk/komponenter/buttons/?s=borgerdk#prim%C3%A6rknap Sekundærknap i FDS https://designsystem.dk/komponenter/buttons/?s=borgerdk#sekund%C3%A6rknapper

Eksempel på sidestillet primær og sekundærknap

Eksempel på to "ligeværdige" valgmuligheder (vi ville være forsigtige med ligeværdig muligheder side om side)

Jeg håber at dette kan hjælpe Jer videre og ellers er I velkomne til at skrive igen og evt. vedhæfte et billede af siden I arbejder på.

Mvh Sune Det Fælles Designsystem

[KirstenTo]

Hej Sune

Mange tak for din mail, den kan fint hjælpe mig/os videre.

Og bare for en god ordens skyld, så er jeg med på ikke at blande de to temaer, jeg har åbenbart bare fået formuleret mig lidt kluntet.

Hav en god dag 😊

Venlig hilsen Kirsten Tønnesen [Adobe Systems] Digitaliseringskonsulent · Digital Udvikling Direkte nummer 48 31 24 89 · Mobil 29 72 60 05 E-mail kt@atp.dkmailto:kt@atp.dk

ATP · Kongens Vænge 8 · 3400 Hillerød Telefon 70 11 12 13 · www.atp.dkhttp://www.atp.dk · CVR-nr. 43405810 Følg ATP Koncernen på Facebookhttps://www.facebook.com/atpkoncernen · LinkedInhttps://www.linkedin.com/company/atp

Oplysningerne i denne e-mail kan være fortrolige og er udelukkende beregnet til brug for de oven for angivne personer eller virksomheder. Vi gør opmærksom på, at udbredelse, omdeling eller kopiering af oplysningerne efter omstændighederne er forbudt. Hvis du har modtaget denne e-mail ved en fejltagelse, bedes du meddele det til afsenderen og derefter slette den. På forhånd tak.

Fra: detfaellesdesignsystem notifications@github.com Sendt: 19. august 2019 15:42 Til: detfaellesdesignsystem/dkfds-components dkfds-components@noreply.github.com Cc: Kirsten Tønnesen - KT KT@atp.dk; Mention mention@noreply.github.com Emne: Re: [detfaellesdesignsystem/dkfds-components] Design for sidestillede knapper (#51)

Hej Kirsten

Tak fordi du inddrager os i Jeres overvejelser. Jeg skal forsøge at hjælpe Jer videre så godt jeg kan, med forbehold for at jeg ikke kender løsningen. Et billedeksempel på det I arbejder på ville gøre det nemmere. Jeg tegner nogle eksempler nederst og beskriver overvejelserne bag, men det er med et kæmpe forbehold, da jeg ikke præcist ved hvad det er jeg giver anbefalinger omkring, hvorfor de bliver generelle.

Når du nævner grønne og sorte knapper, så vil jeg gætte på at i taler om knapperne fra HTML-guiden (https://htmlguide.borger.dk/layout-buttons.html) og ikke fra det Fælles Designsystem (FDS) (https://designsystem.dk/komponenter/buttons/?s=borgerdk), men så nævner du neutraltemaet, hvilket får mig til at tænke at i blander farver fra temaerne i FDS, hvilket absolut ikke er meningen. Uanset så er her en måde i kan løse det på med FDS.

Vi anbefaler på det kraftigste, at man kun anvender en "primærknap" pr. trin eller side i en løsning og at "primærknappen" er udtryk for den næste, givne eller mest oplagte handling for brugeren, samt at primærknappen altid er venstrestillet. Derudover anbefaler vi gerne at primærknappen forsøges holdt for sig selv ved at distribuere andre knapper i trinnet/på siden om end dette ikke altid lader sig gøre, hvilket jeg antager det ikke gør i Jeres tilfælde. Skal man have flere valgmuligheder, hvor ingen af dem er den primære (givne) for brugeren, vil de derfor begge være "sekundære" knapper. [Anvender I HTML-guiden er den grønne knap den primære og basisknapper sekundære].

Primærknap i FDS https://designsystem.dk/komponenter/buttons/?s=borgerdk#prim%C3%A6rknap Sekundærknap i FDS https://designsystem.dk/komponenter/buttons/?s=borgerdk#sekund%C3%A6rknapper

Eksempel på sidestillet primær og sekundærknap [image]https://user-images.githubusercontent.com/44367338/63268246-07018800-c294-11e9-9675-0220c84f0d1f.png

Eksempel på to "ligeværdige" valgmuligheder (vi ville være forsigtige med ligeværdig muligheder side om side) [image]https://user-images.githubusercontent.com/44367338/63268651-f1409280-c294-11e9-916c-a6a5ef314fff.png

Jeg håber at dette kan hjælpe Jer videre og ellers er I velkomne til at skrive igen og evt. vedhæfte et billede af siden I arbejder på.

Mvh Sune Det Fælles Designsystem

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/detfaellesdesignsystem/dkfds-components/issues/51?email_source=notifications&email_token=AM5KOK4PSQ4F6QLYXX3XV2DQFKPJNA5CNFSM4IMGSKP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4S7GNI#issuecomment-522580789, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AM5KOKZAJ3G5A6KKFAHC6ODQFKPJNANCNFSM4IMGSKPQ.

[TinaLinneOlsen]

Hej Sune,

I ATP har vi nogle løsninger, hvor man skal vælge mellem to ligestillede muligheder (se nedenstående billeder). Vil i i den situation så anbefale, at man skal bruge den sekundæreknap 'Default' til at starte med, og den sekundæreknap 'Active' når man har valgt en af mulighederne?

[detfaellesdesignsystem]

Hej @TinaLinneOlsen Tak for dit spørgsmål. Vi vil ikke anbefale at anvende almindelige knapper til en radioknapfunktionalitet, hvor vil vil anbefale at anvende radioknapper (https://designsystem.dk/komponenter/form-controls/#radioknap). Så vores model ville se således ud, hvilket også vil være mit forslag til jer. Håber det kan bruges. Mvh Sune Det Fælles Designsystem

[TinaLinneOlsen]

Hej Sune. Det giver god mening. Det er godt at vide at det er anbefalingen fra FDS, hvis nogle af vores eksisterende løsninger skal laves om til FDS design.

[detfaellesdesignsystem]

Tak for Jeres spørgsmål, jeg er glad for at jeg kunne hjælpe. Jeg lukker issuet.

Mvh Sune Det Fælles Designsystem