Bestanden toevoegen - Meerstappenformulier

[jeffreylauwers]

Note

• In deze GitHub Discussion verzamelen we informatie over het patroon: Bestanden toevoegen - Meerstappenformulier.
• We zijn op zoek naar best practices en inzichten uit onderzoek. Zo kunnen we toewerken naar patronen en templates die gebruiksvriendelijk en toegankelijk zijn. Vul deze GitHub Discussion vooral aan.
• Er is ook een overkoepelende GitHub Discussion voor Formulier patronen en templates. Daar vind je alle gerelateerde discussions op een rijtje. Maar ook meer achtergrond over de onderzoeken die in deze discussion worden aangehaald.

Bestand toevoegen

In een formulier kan een functionaliteit zitten waarmee men bestanden kan toevoegen. Hieronder verzamelen we informatie rondom dit patroon.

Gerelateerde richtlijnen van het NL Design System

Plaats descriptions tussen label en formulierveld.

Gerelateerde componenten

• File Input
• File

[jeffreylauwers]

Workshop: Forms, Forms, Forms

Tijdens de Forms, Forms, Forms workshop probeerde we als designers tot een antwoord te komen op de volgende vragen:

• In welke vorm willen we de upload functie aanbieden?
• Hoe gaan gebruikers documenten verwijderen/vervangen?

Bekijk het Forms, Forms Forms, Miro board voor antwoorden, aanvullende vragen, inspiratie en schetsen.

[jeffreylauwers]

Tekstaanpassing

In een eerder ontwerp hanteerde we de termen 'Bijlage' en 'Uploaden. Deze hebben we later vervangen voor de term 'Bestand' al is deze term geen B1-woord.

[jeffreylauwers]

Onderzoek: WMEBV

Inzichten uit onderzoek

Wat gaat goed

• Het woord 'Bestand' rondom de upload functionaliteit wordt begrepen. Ondanks dat dit geen B1-woord is.
• De opsomming vooraf aan de upload functionaliteit wordt opgemerkt en gelezen.
• De button 'Bestand kiezen' wordt gevonden en gebruikt.

Verder onderzoeken

Het uploaden zelf is nog niet uitgewerkt. We leren graag welke wat de beste manier is om het uploaden van bestanden weer te geven. Inclusief het kunnen verwijderen en foutmeldingen. Dit geldt ook voor de controlepagina. Wat is de beste manier om bestanden, die zijn geupload, hier weer te geven?

[jeffreylauwers]

Upload patroon met Voorbeeld thema

We hebben een ontwerp gemaakt op basis van de File uploader component van IBM’s Carbon design system. Deze staat in het Figma Schetsbook van NL Design System.

Dit ontwerp is bedoelt voor als men meerdere bestanden tegelijk kan uploaden. Om die reden wordt het in het ontwerp ook elke keer gesproken over 'bestanden'.

[jeffreylauwers]

Onderzoek: Vergunning aanvragen - Gemeente Den Haag

Tijdens dit onderzoek werd een andere opzet gebruikt. Er was een specifieke stap voor 'Bijlagen'. Criteria over aantal bestanden, maximale bestandsgrootte en toegestane bestandstype werden 1 keer genoemd waarna er per benodigd document een bestand kon worden toegevoegd. De Button om een bestand te kiezen werd omlijnd door een grotere container met daarbinnen een tekst die aangeeft dat men bestanden ook kan slepen naar dat vlak.

Inzichten

Wat gaat er goed

• Respondenten vonden het fijn om te zien dat er zoveel verschillende soorten bestand types worden geaccepteerd omdat dit het proces om de documenten aan te leveren vereenvoudigd.
• Door elk documenten eigen uploadvak te geven, ontstaat er een soort checklist waarbij je visueel duidelijk kan zien of je alle documenten hebt geüpload, of dat je nog bepaalde bestanden mist.
• Ook de vorm van bestanden uploaden vonden ze fijn; de keuze tussen bestanden van de computer kiezen of het slepen van bestanden.
• De visuele weergave van geüpload bestanden was duidelijk en overzichtelijk. Door de bestandsnaam van de computer aan te houden was het goed terug te zien of de juiste documenten waren geüpload.

Wat kan er beter

• Er was wat verwarring over het aantal documenten. Alhoewel er maar een document tegelijk kan worden geüpload, kunnen er wel meerdere bestanden per onderwerp worden geüpload. Dit riep vragen op bij 'uw identiteitskaart of paspoort'.
• Ook zorgde de tekst voor verwarring over het aantal bestanden wat geüpload mag worden. Dit komt doordat er staat 'sleep uw bestanden hierheen'.
• Het was niet duidelijk dat er 10 MB per uploadvak beschikbaar was. Dit riep bij veel respondenten vragen op. Het is erg belangrijk om te zorgen dat er voldoende ruimte beschikbaar is om grote bestanden zoals plattegronden te uploaden. Ook moet dit anders verwoord worden, zodat het duidelijk is dat er 10 MB per uploadvlak beschikbaar is.
• Het is belangrijk om volledig informatie te geven. Als er zowel een voor als achterkant van het identiteitsbewijs nodig is, dan moet dat in de tekst benoemd worden. Respondenten gingen hier wel vanuit, maar toch riep het verwarring op.
• Respondenten zouden graag de mogelijkheid hebben om hun geüpload documenten te kunnen openen om een laatste check te doen of ze echt het juiste document hebben geüpload.

[jeffreylauwers]

Onderzoek: Generiek Klachtenformulier - Ronde 1 & 2

Het ontwerp van 'Upload patroon met Voorbeeld thema' heeft een rol gespeeld in het prototype rondom een klachtenformulier.

Inzichten

• Men heeft niet altijd een beeld bij het aantal MB's en de verschillende bestandstypen zoals doc, docx, etc.
• Men wil graag controleren wat zij hebben geupload.

[jeffreylauwers]

Toegevoegd bestand kunnen bekijken

Uit het onderzoek van Den Haag om een vergunning aan te vragen werd duidelijk dat men het toegevoegde bestand graag nog even zou willen controleren. Daarom hebben we de bestandsnaam in het ontwerp interactief gemaakt. Bij het onderzoek rondom het Generieke Klachtenformulier werd zelfs benoemd dat men graag een kleine thumbnail zou willen zien. Dit is nog niet verwerkt.

[jeffreylauwers]

Handig: Schrijfwijze bestandsgrootte

Schrijfwijze grootheden en eenheden zoals MB en kB.

[jeffreylauwers]

Overweging: Criteria weglaten?

Als we invloed hebben om zoveel mogelijk te accepteren qua bestandsgrootte en bestandsformaten zou de informatie over MB's en bestandstypen weglaten kunnen worden. Let wel, als deze restricties er wel zijn kunnen daar uiteindelijk toch foutmeldingen uit voortkomen. Krijgt men dan niet het gevoel van "Had mij dat dan eerder verteld"?

[jeffreylauwers]

Overweging: Extra stap?

Als het toevoegen van bestanden optioneel is, zouden we ook eerst kunnen uitvragen of men überhaupt een bestand wil toevoegen. Doormiddel van Radio Button Groep met de opties 'Ja' of 'Nee'. Bij de conditionele stap die volgt als men kiest voor 'Ja' kan dan alle ruimte genomen worden om uit te leggen welke criteria er zijn. Zo kan de gebruiker zich puur en alleen op deze tekst concentreren.