Component: Link #206

jeffreylauwers · 2024-01-15T16:00:01Z

jeffreylauwers
Jan 15, 2024
Collaborator

verschillende varianten van het link component

We willen graag meer leren over het Link component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een 'link' 😉 naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht op Slack

Naam

Link

Doel

Een verwijzing om een een externe bron of bestand te openen of te navigeren binnen dezelfde pagina of website.

Gerelateerde componenten

Rich text content

Richtlijnen

Links in een formulier - NL Design System
Onze richtlijnen rondom links in formulieren.

Onderzoek

Removing the external link icon - GOV.UK
Tim Paul legt uit waarom GOV.UK het external icoon weglaat bij externe links.

Opening Links in New Browser Windows and Tabs - Nielsen Norman Group
Artikel over het openen van links in en nieuw scherm of tab.

In page links - Nielsen Norman Group
Artikel over anker-links die je naar bepaalde secties op dezelfde pagina laten 'springen'.

Learn more links - Nielsen Norman Group
Artikel over de negatieve effecten van links met als label 'Lees meer' of 'Meer informatie'.

Beyond Blue Links: Making Clickable Elements Recognizable - Nielsen Norman Group
Artikel over de visuele weergave van interactieve elementen.

Startpunt - NL Design System (Youtube)
Video snippets van een gebruikersonderzoek rondom een meer-stappen-formulier. De links om naar het formulier te navigeren worden gevonden en begrepen.

Aanpassen - NL Design System (Youtube)
Video snippets van een gebruikersonderzoek rondom een meer-stappen-formulier. De links om vanuit het controle scherm een aanpassing te doen gevonden en begrepen.

Terug - NL Design System (Youtube)
Video snippets van een gebruikersonderzoek rondom een meer-stappen-formulier. De links om naar een vorige stap te navigeren worden gevonden en begrepen.

The perfect link - A11y collective
Artikel over het gebruik van links en toegankelijkheid.

Print url after links - CSS tricks
CSS methode om bij het printen van een pagina de url achter de link te tonen.

sergei-maertens · 2024-01-15T18:08:12Z

sergei-maertens
Jan 15, 2024

Open Formulieren maakt hier gebruik van op verschillende plaatsen:

Anchor component: https://open-formulieren.github.io/open-forms-sdk/?path=/docs/pure-react-components-anchor--docs
inside paragraph level text (we'll change this to a non-label paragraph at some point 😉 ) https://open-formulieren.github.io/open-forms-sdk/?path=/docs/pure-react-components-statement-checkbox--docs
login options: https://open-formulieren.github.io/open-forms-sdk/?path=/docs/composites-login-options--docs
form step back link: https://open-formulieren.github.io/open-forms-sdk/?path=/story/private-api-formstep--default
"edit" link in form step data summary: https://open-formulieren.github.io/open-forms-sdk/?path=/story/private-api-formstepsummary--default
confirmation page (download PDF, go to payment) https://open-formulieren.github.io/open-forms-sdk/?path=/docs/private-api-post-completion-views--index
progress indicator: https://open-formulieren.github.io/open-forms-sdk/?path=/story/private-api-progressindicator--default

0 replies

jeffreylauwers · 2024-01-18T13:27:26Z

jeffreylauwers
Jan 18, 2024
Collaborator Author

Amsterdam

Screenshots / Varianten

Standalone
Op zichzelf staande koppelingen staan direct na inhoud. Ze mogen niet in zinnen of alinea's worden gebruikt. Ze hebben nooit een icoon.

Inline
Inline koppelingen worden gebruikt in zinnen of alinea's met tekst. Aan inline koppelingen mag een 16 px icoon toegevoegd worden. Die staat achter de

koppeling. Gebruik geen overdaad aan inline-links op dezelfde pagina. Het verwart de gebruiker.

In List
Voor lijsten van koppelingen staan chevrons. De chevrons kunnen vervangen worden door andere iconen binnen een categorie. Een combinatie van chevrons en iconen binnen een categorie is niet toegestaan.