Website met documentatie van NL Design system: componenten, patronen, richtlijnen etcetera. Development-versie: https://documentatie.vercel.app/
Home Page: https://www.nldesignsystem.nl/
License: European Union Public License 1.2
NOOT: samenvoegen met #97
Wees consistent bij het uitlijnen van labels of antwoordvelden
Referenties:
GOV.UK Design System. https://design-system.service.gov.uk
Forms that Work: Designing Web Forms for Usability](https://www.elsevier.com/books/forms-that-work/jarrett/978-1-55860-710-1)
On how to define requirements, how to write questions that users will understand and want to answer, and how to deal with instructions, progress indicators and errors. (Book: Caroline Jarrett & Gerry Gaffney, Elsevier Science & Technology, 2008)
• Gebruik slechts één vraag per scherm.
• Maak een goed onderbouwde keuze om
o een indicatie van de voortgang aan te geven (aangeven ven de voortgang kan afleiden van de vraag en druk veroorzaken);
o een ‘terug’-knop toe te voegen om terug te keren naar al eerder beantwoorde vragen (dit kan tot verdwalen en verwarring leiden);
o een ‘stop’-knop toe te voegen om het invullen van de vragenlijst af te breken (dit kan leiden tot verwarring over wat er met de tot dan toe ingevulde gegevens gebeurt).
• Beperk de lengte van de vragenlijst (dan is een indicatie van de voortgang overbodig en is de kans dat mensen tussendoor willen stoppen klein)
• Geef regelmatig een overzicht van de gegeven antwoorden en bied de mogelijkheid aan om de antwoorden aan de te passen (dan is een ‘terug’-knop niet nodig).
Cremers AHM, Welbie M, Kranenborg K, Wittink H (2015). Deriving guidelines for designing interactive questionnaires for low literate persons: development of a health assessment questionnaire. Universal Access in the Information Society, DOI 10.1007/s10209-015-0431-2.
Bij het ontwerpen van user interfaces moet je rekening houden met de cognitieve vaardigheden van gebruikers (Johnson, 2014). Naast bovenstaande algemene ontwerprichtlijnen zijn er ook specifieke richtlijnen voor personen die cognitief minder vaardig zijn. De volgende cognitieve vaardigheden zijn vooral van belang bij het gebruik van technologie: geheugen, probleem oplossen, aandacht, lezen, taalvaardigheid en -begrip, rekenvaardigheid en -begrip, en visueel begrip (http://webaim.org/articles/cognitive; Cremers et al., 2015).
Geheugen is de vaardigheid om je te herinneren wat je door de tijd heen hebt geleerd. Geheugen wordt meestal verdeeld in werkgeheugen (direct), korte termijn geheugen en lange termijn geheugen, gebruikers kunnen problemen hebben met één of meer geheugentypen. Voorbeelden van richtlijnen zijn:
• Geef op elke pagina inzicht in de context van de website.
• Vermijd lange interactieve processen.
• Geef informatie over de voortgang.
• Geef elke stap een label.
• Gebruik een consistente lay-out van het scherm.
Probleem oplossen is de vaardigheid om problemen op te lossen als die zich voordoen. Voorbeelden van richtlijnen zijn:
• Geef vooraf instructies om fouten te voorkomen.
• Geef altijd de mogelijkheid om fouten te herstellen.
• Leg in een foutmelding uit wat fout is gegaan en hoe het hersteld kan worden.
• Geef in een zoekfunctie suggesties voor alternatieve spelling van woorden.
• Waarschuw de gebruiker als een actie onomkeerbaar is.
• Alle functies moeten zo voorspelbaar mogelijk zijn.
Aandacht betekent je kunnen concentreren op de taak die je aan het uitvoeren bent. Voorbeelden van richtlijnen zijn:
• Geef visueel aan welke onderdelen belangrijk zijn. Geef bijvoorbeeld een duidelijke visuele hiërarchie aan, bv. door middel van tekstgrootte en een gekleurde balk als header.
• Groepeer bij elkaar behorende elementen.
• Minimaliseer het aantal functies en knoppen.
• Vermijd het gebruik van advertenties en gesponsorde links.
• Gebruik kopjes.
• Vermijd drukke achtergronden en plaatjes die afleiden.
• Gebruik knoppen die goed herkenbaar zijn als klikbare elementen qua grootte en vorm. De vorm moet zoveel mogelijk de functie weergeven (bv. een pijl die vooruit of achteruit aangeeft). Ook met duidelijk zijn of de knop actief of inactief is. Maak primaire knoppen (die het standaardpad aanduiden) opvallender dan secundaire knoppen.
• Gebruik zo min mogelijk items waaruit de gebruiker moet kiezen.
• Geef feedback over gebruikersacties.
Lezen, taalvaardigheid en -begrip behelst kunnen lezen en schrijven, verstaan, produceren en begrijpen. Het kan hier bijvoorbeeld gaan om laaggeletterden of tweede taalgebruikers. Ook kunnen mensen problemen hebben met het begrijpen van niet-letterlijke taal, zoals sarcasme, satire, parodie, allegorie, metaforen, jargon, alledaags taalgebruik, en met impliciete betekenissen in taal waarvoor achtergrondkennis nodig is. Voorbeelden van richtlijnen zijn:
• Gebruik aanvullende media, zoals illustraties, iconen, video en audio.
• Geef een duidelijke structuur aan de tekst, zoals titels, kopjes, lijstjes, quotes. Ondersteun de structuur ook visueel, bijvoorbeeld door inspringen en kleurgebruik. Gebruik korte paragrafen, een brede marge en veel witregels.
• Gebruik duidelijke en eenvoudige taal, vul deze aan met illustraties, bv. gebruik het woord ‘adres’ in plaats van ‘locatieomschrijving’ en het woord ‘opsturen’ in plaats van ‘verzenden’.
• Gebruik een zo groot mogelijk font.
• Tekst op knoppen moet duidelijk maken wat er gebeurt als je op de knop klikt.
Rekenvaardigheid en -begrip gaat erom dat bepaalde wiskundige uitdrukkingen lastig te begrijpen kunnen zijn, en het bijvoorbeeld lastig kan zijn om een bepaalde getalsmatige (statistische) inschattingen te maken. Voorbeelden van richtlijnen zijn:
• Vermijd wiskunde of leg het begrijpelijk uit.
• Voer rekenkundige bewerkingen automatisch uit.
Visueel begrip gaat om het overzien en begrijpen van bepaalde visuele informatie kan lastig zijn, bijvoorbeeld onderscheid kunnen maken tussen het geheel en details bij afbeeldingen, of begrijpen van schema’s, diagrammen en data visualisaties, zoals grafieken. Voorbeelden van richtlijnen zijn:
• Visuele middelen kunnen heel goed informatie overbrengen en zijn een alternatief voor tekst.
• Gebruikers kunnen problemen hebben met begrijpen van visuele middelen, gebruik ze daarom samen met tekst en andere media.
• Gebruik liever foto’s dan illustraties. Gebruik zo concreet mogelijke illustraties. Laat in illustraties alleen relevante onderdelen zien, op een neutrale achtergrond. Zorg ervoor dat alle illustraties dezelfde stijl hebben.
Cremers AHM, Welbie M, Kranenborg K, Wittink H (2015). Deriving guidelines for designing interactive questionnaires for low literate persons: development of a health assessment questionnaire. Universal Access in the Information Society, DOI 10.1007/s10209-015-0431-2.
Johnson J (2014). Designing with the mind in mind: simple guide to understanding user interface design guidelines. Amsterdam etc, Elsevier, 2nd edition.
http://webaim.org/articles/cognitive/activity.
Maar: sommige vragen zijn nodig zijn om fraude te voorkomen of om verwarring bij de gebruiker te vermijden. Overwegingen om te maken:
Geef aan waar het formulier voor is en wat de gebruiker allemaal nodig heeft.
plaats vragen onder elkaar, niet naast elkaar
Er zijn richtlijnen voor specifieke groepen met specifieke combinaties en niveaus van cognitieve vaardigheden, zoals ouderen (Carmien & Garzo Manzanares, 2014; Díaz-Bossini et al., 2014; Silva et al., 2014), laaggeletterden (Cremers et al., 2012), personen met een verstandelijke beperking (Kranenborg et al., 2012) en personen met beperkte digitale vaardigheden (Darejah & Sing, 2013).
Carmien S, Garzo Manzanares A (2014). Elders Using Smartphones – A Set of Research Based Heuristic Guidelines for Designers. HCII 2014, Heraklion, Crete, 22-27 June.
Cremers AHM, Welbie M, Kranenborg K, Wittink H (2015). Deriving guidelines for designing interactive questionnaires for low literate persons: development of a health assessment questionnaire. Universal Access in the Information Society, DOI 10.1007/s10209-015-0431-2.
Darejah A, Sing D (2013). A review on user interface design principles to increase software usability for users with less computer literacy. Journal of Computer Science 9 (11): 1443-1450.
Díaz-Bossini J-M, Moreno L, Martínez P (2014). Towards Mobile Accessibility for Older People: A User Centered Evaluation. HCII 2014, Heraklion, Crete, 22-27 June.
Kranenborg K, Cremers AHM, Paulissen RT, Van den Berg H, Tak SW, Van Gameren-Oosterom HBM, Schoonhoven BHA, Prins MJ (2012). Ontwerpen van gebruikersinterfaces voor cognitieve diversiteit: Toegang tot audiovisuele content voor gebruikers met een verstandelijke beperking. Soesterberg, TNO, TNO-rapport TNO 2013 R11341.
Silva PA, Holden K, Nii A (2014). Smartphones, Smart Seniors, But Not-So-Smart Apps: A Heuristic Evaluation of Fitness Apps. HCII 2014, Heraklion, Crete, 22-27 June.
NOOT: samenvoegen met #93
Combineer invoervelden, gebruik één veld voor antwoorden die als geheel worden gezien./ Gebruik één veld voor antwoorden die als één geheel worden gezien. (bijvoorbeeld straat en huisnummer)
Als informatie vooraf ingevuld wordt, gebruik daar dan de normale antwoordvelden voor en zorg dat gebruikers ze direct kunnen aanpassen / Vul vooraf bekende informatie in en zorg dat deze waar nodig te wijzigen is.
Maar: als het aantal vragen zeer groot is, of als vragen duidelijker worden door ze te groeperen kunnen er meer vragen op een pagina staan. De groepering van vragen moet logisch en betekenisvol zijn voor de gebruiker./ Groepeer vragen als het formulier lang is. Deel de vragen dan in logische brokken op, die aansluiten bij het mentale model van de gebruiker. (zie ook vragen en antwoorden)
Verschillende typen meldingen kunnen bijvoorbeeld door middel van foto’s met korte labels gepresenteerd worden. Foto’s zijn beter dan iconen, en het beste is een foto in combinatie met een tekstueel label. Voor de foto’s is het belangrijk dat er geen overbodige zaken in de achtergrond te zien zijn, die afleiden van het onderwerp.
Volgens mij staan jullie niet toe om te forken en een PR te maken. Hierbij een issue over een taalfout.
In order to make the Figma documentation scannable and better readable the documentation will be split up. The current top-level sections (sections starting with a heading 2) will be put in an own documentation page.
Maak alle antwoordopties meteen zichtbaar, deze kunnen context /hulp bieden bij de vraag.
bijvoorbeeld 2642HT bij Postcode
NOOT: deze kunnen we niet terugvinden
Een indicatie van de voortgang in het formulier kan prettig zijn voor sommige gebruikers. Geef daarbij het aantal stappen aan in plaats van een percentage. Maar: voor laaggeletterden kan een indicatie van de voortgang averechts werken. Het leidt de aandacht af van de vraag en kan leiden tot een gevoel van extra druk.
Bv. Melding openbare ruimte
De pagina’s van het ontwerp verschijnen in de volgende volgorde:
• Categorie en subcategorie kiezen
• Kaart - plek kiezen
• Eerdere meldingen
• Beschrijving melding
• Gegevens invullen
• Samenvatting melding
• Bevestiging
De pagina ‘Eerdere meldingen’ verschijnt bijvoorbeeld vóór ‘Beschrijving melding’. Op deze manier wordt bereikt dat de gebruiker niet eerst onnodig een beschrijving hoeft in te vullen, waarna blijkt dat de melding al eerder gedaan is. Voor de gemeente draagt het hopelijk ook bij aan een betere clustering van meldingen.
Zorg voor de mogelijkheid om tussentijds te stoppen en later verder te gaan. Geef dan wel duidelijk aan wat er met de reeds ingevulde gegevens gebeurt
Maar: vragen moeten wel specifiek genoeg aangeven wat er als antwoord verwacht wordt.
NOOT: samenvoegen met #97
NOOT: deze kunnen we niet terugvinden. wel richtlijnen over groeperen (#91) en volgorde (#Bied de vragen in een logische volgorde aan) van elementen
hallo
Algemene ontwerprichtlijnen voor technologie zijn op iedereen van toepassing. Het overkoepelende doel van deze richtlijnen is om met een product, dienst of technologie aan de gebruiker een goede user experience (gebruikerservaring) te bieden. Technologie moet daarvoor useful (nuttig/functioneel), usable (bruikbaar) en desirable (begeerlijk) zijn (Kreitzberg & Little, 2009). Daarnaast is er ook nog een vierde kenmerk van belang: persuasive (overtuigend) (Fogg, 2003). De volgorde van de genoemde kenmerken is betekenisvol; elk volgend kenmerk kan gezien worden als aanvulling op het voorafgaande en soms is er ook overlap.
Usefulness (Functioneel) is het uitgangspunt. Het gaat hierbij over het nut van het product of de dienst, in termen van kwaliteit, controle, snelheid, ondersteuning, productiviteit, werkprestatie, werkomvang, effectiviteit, gemak en algehele bruikbaarheid.
Usability (Bruikbaar) heeft betrekking op de interactie van de gebruiker met het product of de dienst. Bij producten gaat het vaker om fysieke interactie, bij diensten om cognitieve interactie. Bij beide spelen aspecten een rol zoals consistentie, zichtbaarheid, affordance (uiterlijk moet mogelijke acties duidelijk maken), mapping (functie of effect moet duidelijk zijn), feedback over acties, voorkomen van fouten, begrijpelijke en constructieve foutmeldingen, controle bij de gebruiker, flexibiliteit van gebruik, beschikbaarheid van hulp en documentatie, ‘undo’-functionaliteit, relevantie van informatie, elementen en stappen in processen, taalgebruik, ondersteuning bij leren.
Desirability (Begeerlijk) heeft betrekking op de kenmerken van een product of dienst die een affectieve reactie teweeg kunnen brengen bij de gebruiker (kleur, deskundigheid, textuur, weelderigheid, aantrekkelijkheid, eenvoud) en bijdragen aan de waarden van de gebruiker (tevredenheid, plezier, behoefte, gezelligheid, gehechtheid).
Persuasiveness (Overtuigend) richt zich op het gebruik van technologie om het menselijk gedrag te veranderen, op drie niveaus: functionaliteit en ondersteuning (simplificeren, begeleiden, personaliseren, timing, doelen bereiken, gedrag van anderen observeren, positieve feedback), interactie (aantrekkelijkheid, gelijkenis met de gebruiker, beloning, wederkerigheid, autoriteit) en kenmerken van leer- en oefenomgevingen (effect van gedrag, oefenen mogelijk maken, belonen, geschiktheid voor dagelijks gebruik).
Fogg BJ (2002). Persuasive technology: using computers to change what we think and do. San Francisco, Morgan Kaufmann.
Kreitzberg CB & Little A (2009). Useful, usable and desirable: usability as a core development competence. Online: http://msdn.microsoft.com/en-us/magazine/dd727512.aspx.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
