Contact Timeline

[ux-fran]

We willen graag meer leren over de Contact Timeline 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 de 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

Contact Timeline

Doel

Een Contact Timeline is een visuele weergave van de interacties (of contactmomenten) tussen een gebruiker en de gemeente. Het stelt de gebruiker in staat om snel en eenvoudig de geschiedenis van hun contactmomenten met een medewerker te begrijpen en te doorlopen.

Onderzoek

Generieke Services schetsboek - Gemeente Den Haag
In dit Figma schetsboek is inspiratie en schetsen te vinden die het ontwerpproces van de Contact Timeline component weergeven. Het bevat verschillende use cases, zoals 'contact button', ‘reactie medewerker’ en ‘verstreken deadline’.

Generieke Services onderzoek - Gemeente Den Haag
In Figma is informatie verzameld vanuit verschillende organisaties, die inzichten bieden in manieren van notificeren. Dit omvat onder andere hoe een ‘contactmoment’ (oftewel de Contact Timeline component) technisch geïmplementeerd.

Generieke Services concept - Gemeente Den Haag
In Figma is uitgebreide informatie beschikbaar over het contactmoment: hoe deze eruitziet, hoe deze werkt, en verschillende scenario’s waarin de Contact Timeline component wordt gebruikt. Denk bijvoorbeeld aan de inhoud van de Contact Timeline, en waar deze zich bevindt in de 'Mijn omgeving'.

Rapport Generieke Services 2023 - Gemeente Den Haag (PDF, 9 MB)
Uit dit gebruikersonderzoek blijkt dat de Contact Timeline goed functioneert. Enkele inzichten:

• Het overzicht van contactmomenten wordt als erg waardevol ervaren.
• Er is behoefte om eerdere contactmomenten eenvoudig terug te kunnen vinden.
• De iconen bij contactmomenten die het kanaal van contact aanduiden, zijn vervangen door woorden, aangezien niet alle iconen begrepen werden.
• Door het onderwerp van het contactmoment te verrijken met informatie die ook in de notificatiemail staat, is het nu nog duidelijker waar het contactmoment over gaat.
• Op mobiel is het niet meteen duidelijk wat het overzicht van contactmomenten inhoudt; op desktop lijkt dit makkelijker te interpreteren.
• Men verwijst naar het overzicht als een ‘omgekeerde tijdlijn’, wat in tegenstelling staat tot het statusoverzicht dat bovenaan de pagina wordt weergegeven.

Onderzoek Generieke Services - Miro
Miro board dat is gebruikt tijdens het gebruikersonderzoek waarin inzichten te vinden zijn over de Action.

Timeline - Ant Design
Timeline component bij Ant Design.

Timeline - Material UI
Timeline component bij Material UI gemaakt in React.

Activity Timeline - Salesforce
Activity Timeline component bij Saleforce Design System.

[ux-fran]

Research nov 2024

Gekeken in diverse files van Amsterdam, DSO, Open formulieren, Open Gemeenten, Gemeente Rotterdam, RVO, Gemeente Utrecht en daar verder iets vergelijkbaars gevonden.

Heb ik wat gemist of weet jij (de lezer) misschien nog een organisatie of andere gemeente met een vergelijkbaar component, vul gerust aan!

[ux-fran]

DUO

Documentatie website

---

Screenshots / Varianten

Standaard tijdlijn
Gebruik de standaard tijdlijn als je per gebeurtenis slechts een datum en een actie wilt tonen. Deze tijdlijn biedt de gebruiker snel inzicht in het gehele proces, met eventueel doorklikmogelijkheid tot meer informatie. Deze variant kan inactieve items bevatten.

Compacte tijdlijn
Gebruik de compacte tijdlijn als je de huidige status van de gebruiker in een proces wilt tonen. De gepasseerde en toekomstige gebeurtenissen worden ook meegenomen in de tijdlijn, maar worden anders opgemaakt. Deze tijdlijn is niet interactief.

Grote tijdlijn
Wil je meer informatie kwijt dan in de standaard tijdlijn? Overweeg dan een grote tijdlijn. Hierin is ruimte voor een datum, een titel, een uitleg en een “Lees meer” link. Deze tijdlijn kan echter geen inactieve items bevatten.

Responsive gedrag

---

Notities

• Onder de naam: Timeline.
• Nieuwste datum staat bovenaan.
• Als de huidige status wordt aangegeven, dan staat het meest recente item bovenaan en het oudste onderaan.
• De datum bevat zowel een dag en maand, genoteerd als: 12 december, maar kan ook een reeks weergeven, zoals ‘1 mei t/m 30 augustus’.
• Niet duidelijk of het jaar wordt vermeld wanneer de datum zich over twee jaren uitstrekt.
• De datum is in code een header. Welke dat moet zijn is afhankelijk van waar in de hiërarchie je zit.
• Standaard tijdlijn: onder iedere datum staat een Link, tenzij deze 'uitgeschakeld' (disabled) is.
• Kan uit Badges bestaan.
• Compacte tijdlijn: bevat enkel Headings. Vertoont een status.
• Grote tijdlijn: bevat data, een Link met daaronder een mogelijke description.
• Headings of Links zijn redelijk kort beschreven.
• Richtlijnen beschikbaar.

[ux-fran]

Den Haag

• Storybook
• Figma
• GitHub

---

Screenshots / Varianten

Default

Collapsible

Collapsible with expanded item

Without sender

With file

Responsive gedrag

---

Notities

• Onder de naam: Contact Timeline.
• De contactmomenten zijn gesorteerd op datum, met het meest recente contactmoment bovenaan en het oudste onderaan.
• Elk contactmoment bevat een titel, datum en kanaal, en kan bestaan uit een afzender, bestand en (tekstuele) inhoud.
• De datum bestaat uit de dag, maand en jaar, genoteerd als: 12-12-2024.
• Wanneer de datum gisteren of vandaag is, wordt in plaats van een exacte datum de term ‘gisteren’ of ‘vandaag’ gebruikt.
• Kan worden uit- en ingeklapt. Bij het uitklappen zie je de afzender, het bestand en de tekstuele inhoud.
• Titels zijn redelijk kort beschreven.
• Richtlijnen beschikbaar (Figma).