Categorie: Componenten

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Een accordeon is perfect om veel content compact te presenteren. Het is een verzameling knoppen waarmee je content kunt tonen of verbergen. Met deze toon/verberg-knoppen kunnen gebruikers zelf kiezen welke informatie ze willen zien. Gebruik een accordeon: Belangrijke onderdelen: Technische opbouw Optioneel Component staten Toetsenbordbediening […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Een broodkruimelpad laat zien waar je bent op een website. Het is een lijst met links naar bovenliggende pagina’s. Gebruikers zien waar ze zijn en kunnen makkelijk terug naar vorige niveaus. Technische opbouw Optioneel Algemeen Content Bedieningselementen Voorbeeld broodkruimelpad See the Pen Broodkruimelpad by Niek […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Carousels zijn populair maar vaak een toegankelijkheidsnachtmerrie. Bewegende content, automatisch afspelen, onduidelijke navigatie: Het kan allemaal fout gaan. Maar het kan ook goed! De belangrijkste regel: gebruikers moeten de carousel kunnen pauzeren. Bewegende content is voor veel mensen storend of zelfs onmogelijk te lezen. Een […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Een combobox is een invoerveld met een bijbehorende popup. Gebruikers kiezen een waarde uit de popup. Deze popup kan een list, grid, tree of dialog zijn. In dit voorbeeld gebruik ik een lijst. Gebruik een combobox als: Er zijn twee hoofdtypen combobox: Technische opbouw Optioneel […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Een sorteerbare tabel laat gebruikers data sorteren op verschillende kolommen. Gebruikers klikken op kolomkoppen om de volgorde te wijzigen. Dit helpt bij het analyseren en vergelijken van informatie. Gebruik een sorteerbare tabel als: Technische opbouw Toetsenbordbediening Focus management Voorbeeld datatabel See the Pen Datatabel (sorteerbaar) […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Een dialoogvenster is een venster dat over de content van je pagina heen verschijnt. Vaak staat hier een melding waar de gebruiker meteen iets mee moet doen. Je blokkeert daarmee de achtergrond zodat bezoekers eerst de melding moeten afhandelen voordat ze verder kunnen. Technische opbouw […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Navigatie helpt gebruikers door je website bewegen. Het toont de structuur van je site en geeft toegang tot verschillende pagina’s. Een goede navigatie werkt voor iedereen: met muis, toetsenbord, touch en schermlezer. Belangrijke termen: Technische opbouw Navigatiemenu Mobile toggle Toetsenbordbediening Navigatiemenu Mobile toggle: Focus management […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Een switch is als een lichtknop: aan of uit. Het is direct duidelijk wat de huidige status is. Bij een switch gebeurt de actie direct als je schakelt. Zoals bij dark mode aan/uit, notificaties aan/uit, enz. Gebruik een switch: Technische opbouw Component staten Toetsenbordbediening Voorbeeld […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Tabs zijn een set gelaagde inhoudssecties. Je toont één inhoudspaneel tegelijk. Elk paneel heeft een bijbehorend tab-element. Als je een tab activeert, zie je het bijbehorende paneel. De lijst met tab-elementen staat meestal aan de bovenkant van het zichtbare paneel. Gebruik een tabpaneel: Belangrijke termen: […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Een toggle is als een schakelaar tussen verschillende toestanden. Je wisselt tussen opties zoals weergave, sortering of filters. Bij een toggle verander je de huidige toestand naar een andere toestand. Zoals bij lijst/raster weergave, oplopend/aflopend sorteren, enz. Gebruik een toggle: Technische opbouw Component staten Toetsenbordbediening […]

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk. Tooltips zijn een kleine informatievensters die verschijnen bij hover of focus van een element. Ze geven extra informatie zonder je interface vol te proppen. Gebruik een tooltip: Een goede tooltip: Technische opbouw Toetsenbord Voorbeeld tooltip See the Pen Tooltip by Niek (@niekd) on CodePen. Bronnen