Groepsvakken
Notitie
Deze ontwerphandleiding is gemaakt voor Windows 7 en is niet bijgewerkt voor nieuwere versies van Windows. Veel van de richtlijnen zijn in principe nog steeds van toepassing, maar de presentatie en voorbeelden weerspiegelen niet onze huidige ontwerprichtlijnen.
Een groepsvak is een gelabeld rechthoekig kader dat een set gerelateerde besturingselementen omsluit. Een groepsvak is een manier om relaties visueel weer te geven; Afgezien van het mogelijk bieden van een toegangssleutel voor een groep besturingselementen, biedt het geen functionaliteit.
Een typisch groepsvak.
Notitie
Richtlijnen met betrekking tot indeling worden weergegeven in een afzonderlijk artikel.
Is dit de juiste controle?
Hoewel groepsvakken een sterk visueel middel zijn om relaties aan te geven, worden deze extra overzichtelijk en wordt de ruimte die beschikbaar is op een oppervlak aanzienlijk verminderd. Ze zijn visueel zwaar en moeten spaarzaam worden gebruikt, alleen als er geen betere oplossing is.
Een ontwerptrend in Windows is een eenvoudiger, schoner uiterlijk door onnodige lijnen te elimineren.
Als u wilt bepalen of een groepsvak nodig is, moet u rekening houden met de volgende vragen:
- Is er meer dan één besturingselement in de groep? Als dat niet het is, gebruikt u in plaats daarvan een label voor tekst zonder opmaak. Een zeldzame uitzondering is het gebruik van een groepsvak met één besturingselement om consistentie met andere groepsvakken op hetzelfde oppervlak te behouden.
Onjuist:
In dit voorbeeld heeft het groepsvak slechts één besturingselement.
- Zijn de besturingselementen gerelateerd? Voegt het weergeven van de relatie duidelijkheid toe? Zo niet, presenteert u de besturingselementen afzonderlijk buiten een groepsvak.
- Zijn alle besturingselementen in de groep? Zo ja, geeft u de relatie op het grotere oppervlak aan, zoals het bovenliggende dialoogvenster of de bovenliggende pagina.
Onjuist:
In dit voorbeeld bevinden alle besturingselementen (afgezien van de doorvoerknoppen) in het dialoogvenster zich in het groepsvak.
- Kunt u de relaties effectief communiceren met behulp van de indeling alleen? Als dat het zo is, gebruikt u in plaats daarvan indeling. U kunt gerelateerde besturingselementen naast elkaar plaatsen en extra afstand tussen niet-gerelateerde besturingselementen plaatsen. U kunt ook koppen en inspringen gebruiken om hiërarchische relaties weer te geven.
In dit voorbeeld wordt alleen de indeling gebruikt om besturingsrelaties weer te geven.
- Kunt u de relaties effectief communiceren met behulp van een scheidingsteken? Gebruik in plaats daarvan een scheidingsteken. Een scheidingsteken is een horizontale lijn waarmee de besturingselementen eronder worden gesamend. Scheidingstekens bieden een eenvoudigere, schonere uitstraling. In tegenstelling tot groepsvakken werken ze echter het beste wanneer ze de volledige breedte van het oppervlak omvatten.
- Ontwikkelaars: U kunt een scheidingsteken implementeren met een geëtste rechthoek met een hoogte van één.
In dit voorbeeld worden gelabelde scheidingstekens gebruikt om besturingsrelaties weer te geven.
In dit voorbeeld worden niet-gelabelde scheidingstekens gebruikt om besturingsrelaties weer te geven.
- Kunt u de relaties effectief communiceren zonder tekst? Zo ja, overweeg dan grafische elementen zoals achtergronden of aggregators te gebruiken.
Richtsnoeren
- Nest geen groepsvakken. Gebruik de indeling om relaties in een groepsvak weer te geven.
Onjuist:
In dit voorbeeld leiden de geneste groepsvakken tot onnodige onbelangrijke visuele elementen.
Juist:
In dit voorbeeld wordt dezelfde besturingselementrelatie weergegeven met behulp van indeling.
- Plaats geen besturingselementen in groepsvaklabels.
- Uitzondering: U kunt een selectievakje als groepsvaklabel gebruiken als alle besturingselementen in het vak zijn ingeschakeld en uitgeschakeld door het selectievakje.
Onjuist:
In dit voorbeeld wordt een vervolgkeuzelijst onjuist in een groepsvak geplaatst. In dit voorbeeld moeten tabbladen worden gebruikt.
- Schakel groepsvakken niet uit. Als u wilt aangeven dat een groep besturingselementen momenteel niet van toepassing is, schakelt u alle besturingselementen in het groepsvak uit, maar niet het groepsvak zelf. Deze benadering is toegankelijker en kan consistent worden ondersteund door alle UI-frameworks.
Labels
- Label alle groepsvakken.
- Wijs geen toegangssleutel toe aan het label. Dit is onnodig en maakt de andere toegangssleutels moeilijker toe te wijzen. Wijs in plaats daarvan toegangssleutels toe aan de besturingselementen in het groepsvak.
- Uitzondering: Als een oppervlak veel besturingselementen heeft, zijn er mogelijk onvoldoende toegangssleutels beschikbaar. Zo ja, vermindert u het aantal toegangssleutels door ze toe te wijzen aan groepsvakken in plaats van de besturingselementen in de groepsvakken.
- Gebruik hoofdlettergebruik inzinsstijl.
- Schrijf het label met behulp van een zelfstandig naamwoord of een zelfstandig naamwoordzin, niet als zin en gebruik geen eindetekens, inclusief dubbele punten.
- Gebruik parallelle formulering voor groepsvaklabels binnen hetzelfde oppervlak.
- Houd groepsvaklabels beknopt. Gebruik geen instructietekst als label. U kunt echter instructietekst in het groepsvak hebben.
- Herhaal het groepsvaklabel niet in besturingslabels in het vak. Als het groepsvak bijvoorbeeld het label Uitlijning heeft, labelt u de keuzerondjes Links, Rechts, enzovoort, niet links uitlijning of Uitlijning rechts.
- Verwijs niet naar groepsvakken in tekst van de gebruikersinterface.
Documentatie
Wanneer u verwijst naar groepsvakken:
- Raadpleeg groepsvakken alleen in programmeurs en andere technische documentatie. Gebruik voor groepsvak twee kleine letters.
- Overal anders is het niet nodig om de naam van het groepsvak in een procedure op te nemen, tenzij een dialoogvenster meer dan één optie met dezelfde naam bevat. Gebruik in dergelijke gevallen onder de naam van het groepsvak.
- Maak het label indien mogelijk op met vetgedrukte tekst. Anders plaatst u het label alleen tussen aanhalingstekens indien nodig om verwarring te voorkomen.
Voorbeeld: Selecteer onder EffectenVerborgen.