Link List

[Rozerinay]

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

Deel hieronder een link naar Figma, Storybook, Github 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 in Slack

---

Naam

Link List

Doel

Een lijst met gerelateerde links naar andere pagina’s of websites.

Ook bekend als

Link Group

Gerelateerde componenten

Link, Unordered List

Onderzoek

Guidelines for Visualizing Links - NN Group
Artikel waarin wordt verteld dat het niet noodzakelijk is om Links in een lijst te onderstrepen.
Er is wel een uitzondering bij de Link kleuren rood en groen. Deze kleuren veroorzaken problemen voor gebruikers met veel voorkomende vormen van kleurenblindheid. In dit geval wordt geadviseerd om de Links wel te onderstrepen.

Link List color on intranets - NN Group
Artikel waarin wordt verteld dat het onderstrepen van Links in een grote lijst de leesbaarheid kan verminderen en, afhankelijk van de spatiëring en het lettertype, het rommelig kan ogen.

Formatting Links for Usability - Baymard Institute
Artikel waarin wordt verteld dat het prima is om de onderstreping van Links te verwijderen die voorkomen in een lijst.

Removing the external link icon from GOV.UK - GOV.UK
Blogpost waarin wordt uitgelegd waarom de externe link icoon niet meer wordt gebruikt door gov.uk.

Onderzoek denhaag.nl - Gemeente Den Haag
Miro bord waar een inzicht uit het gebruikersonderzoek staat over de externe Link icoon. Het is belangrijk dat de externe Link icoon niet wordt gebruikt wanneer er niet buiten de website genavigeerd wordt.

Opmerking Bas over chevron in Link List - gemeente Amsterdam
Bas vertelt dat in gebruikersonderzoek naar voren is gekomen dat de chevron de indruk wekte dat dit een uitklapbaar element is.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Default
Een verzameling van gerelateerde links.

Custom icons
Een andere icoon dan de chevron in de list item wordt gebruikt om een link sneller of makkelijker te laten begrijpen.

Small text
In de footer wordt er small text gebruikt, ook voor lijsten.

Link
Een item dat alleen voorkomt in een lijst en gerelateerd is aan één onderwerp, zoals: 'Alles over openbare orde en veiligheid', of voorkomt wanneer er geen andere items beschikbaar zijn.

On Dark background
Lijst die wordt ingezet op donkere achtergronden, zoals in de footer.

On Light background
Lijst die wordt ingezet op lichte achtergronden.

Figma

---

Notities

• Optie voor icoon: vooraf aan het label.
• Icoon is aanklikbaar.
• Kan verschillende iconen bevatten.
• Heeft bij default state geen underline, in tegenstelling tot de Link, die dit wel heeft.
• Ook mogelijkheden voor een light of dark background.
• Heeft een andere styling op een gekleurde achtergrond.
• Kan ook één list item bevatten.
• Richtlijnen beschikbaar (Storybook).

[bas-kroese]

@rozeq

Ja dit is inderdaad onze toepassing momenteel.

Nu is het wel zo dat er twijfel is onder designers of we het chevron zouden moeten gebruiken voor de link, omdat uit onderzoek met gebruikers is gebleken dat sommigen dit verwarren met een uitklapbaar element. Dat is de affondance die de chevron dan geeft.

Nog een voorbeeld hoe wij het toepassen, in de footer voor de socials:

[Rozerinay]

@bas-kroese veel dank voor het delen! Heel waardevol.

Ik heb een aantal vragen over het onderzoek waar ik heel benieuwd naar ben:

• In welk context is de Link list onderzocht met gebruikers? Is het component getest waarbij één item aanwezig was of werd het in een lijst weergegeven?
• Weet je hoeveel gebruikers die verwarring ondervonden?
• Hebben jullie een vermoeden waardoor de verwarring ontstaat? Denk bijvoorbeeld aan de grootte van de icoon of de overeenkomsten met de Accordion (als de Accordion toevallig aan bod kwam in datzelfde onderzoek)?

[bas-kroese]

Terechte vragen. Ga ik achteran. Kom erop terug :)

[jeffreylauwers]

Oh ik lees dit toevallig net. Dit zijn mooie inzichten voor dit component en anderen waar chevrons (of pijllen) als iconen worden toegevoegd. Het gebruik van chevrons en pijlen is besproken tijdens het Design Open Hour 51. Waarbij we hebben uitgevraagd welke associatie designers (dus niet direct eindgebruikers!) hadden bij een combinatie van chevron of pijlen met tekst. Te vinden in het Figma Schetsboek.

[Rozerinay]

Den Haag

• Storybook
• Figma - Huidig

---

Screenshots / Varianten

Storybook

Default
Groep van links die de mogelijkheid biedt om naar andere pagina's te navigeren.

With image
Afbeelding die de lijst ondersteunt.

Dark background
Lijst die wordt ingezet op donkere achtergronden, zoals in de footer.

Figma - Huidig

---

Notities

• Onder de naam: Link group.
• Optie voor icoon: vooraf aan het label en in design ook een icoon erachter.
• Icoon voor het label is altijd een arrow.
• Heeft bij default state geen underline, in tegenstelling tot de Link, die dit wel heeft.
• Ook mogelijkheden voor een light of dark background.
• Richtlijnen beschikbaar (Storybook).

[Rozerinay]

DSO Toolkit

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

ul en ol
Groep van links die de mogelijkheid biedt om naar andere pagina's te navigeren of iets te downloaden.

In highlight box
Lijst die wordt ingezet op gekleurde achtergronden, zoals in de footer.

In nav
Lijst die wordt ingezet in de navigatie en de mogelijkheid biedt om te navigeren naar andere pagina's. Het laat tevens zien op welke pagina je je bevindt.

In footer
Lijst die wordt ingezet in de footer. Deze variant is ook te zien bij 'In highlight box'.

---

Notities

• Optie voor icoon: before en inline. De icoon after wordt overgenomen van het Link component.
• Icoon voor het label is altijd een chevron.
• Heeft bij default state geen underline, in tegenstelling tot de Link, die dit wel heeft.
• Ook mogelijkheden voor verschillende background colors.
• Heeft een andere styling op een gekleurde achtergrond.

[Rozerinay]

DUO

Documentatie website

---

Screenshots / Varianten

Link lijst
Een reeks items die over een onderwerp gaan en de mogelijkheid biedt om naar verschillende pagina's te navigeren, zoals links onder Meer informatie.

Link lijst met chevron
Wordt gebruikt wanneer er een reeks items is met vergelijkbare informatie, zoals het tonen van alle nieuwsonderwerpen of alle pagina's rondom de leerlingenadministratie.

Link lijst met chevron op een achtergrond
Lijst die wordt ingezet op gekleurde achtergronden.

---

Notities

• Beschikbaar onder List component.
• Optie voor icoon: voor en achter het label, maar ook een variant zonder icoon.
• Icoon voor het label is altijd een chevron en icoon achter het label een external link icon.
• Heeft bij default state een underline.
• Ook mogelijkheden voor een light of dark background.
• Richtlijnen beschikbaar (documentatie website).

[Rozerinay]

OpenGemeenten

• Documentatie website
• Patternlab

---

Screenshots / Varianten

Documentatie website

Footer contactlinks
Links in de footer die navigeren naar contactmogelijkheden zoals een telefoonnummer, e-mailadres of Whatsapp.

Footer socialmedialink
Links in de footer die navigeren naar social mediakanalen.

Patternlab

Metadata

dijkenwaard.nl

Footer link list
Links in de footer die navigeren naar pagina's anders dan de social mediakanalen en contactmogelijkheden.

---

Notities

• Footer contactlinks en Footer social media links bevatten een unordered list met daarin de class link-list.
• Lijst aan links is ook te zien onder het component Metadata.
• Optie voor icoon: voor het label.
• Kan verschillende iconen bevatten.
• Footer sociamedialink bevat enkel icoon en wordt horizontaal gepresenteerd.
• Ook mogelijkheden voor verschillende background colors.
• Heeft een andere styling op een gekleurde achtergrond.

[Rozerinay]

Rotterdam

Storybook

---

Screenshots / Varianten

Storybook

Rotterdam.nl

List link
Wordt gebruikt wanneer er een reeks items is met vergelijkbare informatie over één onderwerp, zoals Belastingen.
Of wanneer verschillende soorten informatie wordt gepresenteerd, zoals wat je snel kunt regelen.

List item

---

Notities

• Op de website staan verschillende lijsten aan links als List item weergegeven. Eén daarvan is een List link.
• Verschil in code en design met betrekking tot de styling, padding en de icoon.
• Optie voor icoon: voor het label.
• Heeft bij default state in Storybook geen underline en op de website wel een underline.
• Heeft op de website een strong weight, in tegenstelling tot de Link, die een regular weight heeft.
• Ook mogelijkheden voor verschillende background colors.

[Rozerinay]

RVO

• Documentatie website
• Storybook
• Figma
• Github

---

Screenshots / Varianten

Documentatie website

Storybook

Figma

rvo.nl
Footer item

Link list item

---

Notities

• Beschikbaar onder Footer component als Footer menu item.
• In design wordt de Button gebruikt.
• In code wordt de Link gebruikt.
• Optie voor icoon: voor het label. Op de website is een variant waarbij geen icoon wordt gebruikt.
• Icoon voor het label is altijd een chevron.
• Heeft bij default state geen underline, in tegenstelling tot de Link, die dit wel heeft.
• Ook mogelijkheden voor een light of dark background.

[Rozerinay]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

utrecht.nl

Andere weight

Andere kleur

Eén list item

---

Notities

• Optie voor icoon: vooraf aan het label.
• Icoon voor het label is altijd een chevron.
• Heeft bij default state geen underline, in tegenstelling tot de Link, die dit wel heeft.
• Heeft een strong weight, in tegenstelling tot de Link, die een regular weight heeft.
• Op de website heeft de list item verschillende kleuren.
• Kan ook één list item bevatten.

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Link list op het Community bord

[eslook]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Link list op het Candidate bord

[TessaViergever]

De chevron icon in de Link List doet mij denken aan een expandable functionaliteit (en niet alleen een link). Wellicht dat een icon hier niet nodig is of gebruik van bijv. een arrow icon i.p.v. een chevron?

[jeffreylauwers]

Hey Tessa, interessant!

Heel eerlijk... ik kan me óók goed voorstellen dat eindgebruikers die verwachting hebben met de chevrons. Maar daar zou ik graag meer bewijs over verzamelen bijvoorbeeld door gebruikersonderzoek.

Ik heb een keer een mini-onderzoek gedaan naar de verwachting van 'chevrons' vs 'arrows' tijdens het Design Open Hour. Ik deelde mijn scherm. Liet per keer 1 afbeelding zien. Vroeg de aanwezigen designers om op het moment dat ik 'go' riep, hun antwoord in de chat te plaatsen. Daarbij moet ik natuurlijk opmerken dat het geen lijstjes betrof maar 1 icoon met 1 tekst ernaast.

Je vindt de antwoorden onder de afbeeldingen. Zoals je ziet loopt het nogal uiteen.

Daar stond ik van te kijken trouwens. Zelf hanteer ik namelijk het volgende:

• Chevron: er klapt 'iets' open. De richting waar de chevron naar wijst geeft, indien mogelijk, aan op welke plek er 'iets' open gaat klappen.
• Arrow: biedt extra visuele ondersteuning om aan te geven dat je gaat navigeren. De richting waar de arrow's heeft ook nu weer een doen:
  • Rechts: Je navigeert verder.
  • Links: Je navigeert terug.
  • Beneden: Je navigeert binnen de pagina naar beneden (anker link)
  • Boven: Je navigeert binnen de pagina naar boven (back to top)

Maar zoals je in de voorbeelden in deze discussion ziet worden chevrons vaak eerder gebruikt dan arrows. Kortom we zullen eerst meer onderzoek moeten verzamelen of eindgebruikers ook de verwachting hebben dat er iets open klapt. Dus hierbij een oproep aan iedereen die dit leest. Mocht je dit tijdens je onderzoek vaker horen van eindgebruikers, deel dit dan vooral. Dat kan hier, of op https://gebruikersonderzoeken.nl/.

[jiromaykin]

In open-inwoner hebben we nog een ander component, dat we niet 'link list' hebben genoemd omdat het visueel meer lijkt op een verzameling Cards binnen een unordered list en het met meerdere iconen werkt.
Het gaat om het "Ga naar link" component dat gemeenten kunnen inzetten om door te linken naar andere externe platforms (zoals bijvoorbeeld financiële platforms zoals parkeervergunningen die nog niet in open-inwoner geïntegreerd zijn, of die een andere inlog vereisen).

Het icoon aan de linkerzijde is een custom icon dat gekozen kan worden, de pijl rechts is vast:

Code (HTML): https://github.com/maykinmedia/open-inwoner/pull/1996/files#diff-528d3b4a2ecb21e279c870cc028e40bbab265ebc56a4ad2a34099829b7b16053

design-tokens: https://github.com/maykinmedia/open-inwoner-design-tokens/pull/28/files