Tabs
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.
Tabbladen bieden een manier om gerelateerde informatie weer te geven op afzonderlijke gelabelde pagina's.
Een typische set tabbladen.
Tabbladen zijn meestal gekoppeld aan eigenschappenvensters (en omgekeerd), maar tabbladen kunnen in elk type venster worden gebruikt.
Tabbesturingselementen vertegenwoordigen de manillamappen met tabbladen die worden gebruikt om informatie te ordenen in archiefkasten die vaak in de Verenigde Staten worden gevonden. (Manilla mappen worden niet wereldwijd gebruikt.)
Notitie
Richtlijnen met betrekking tot indeling, tabbladmenu's, dialoogvenstersen eigenschappenvensters worden weergegeven in afzonderlijke artikelen.
Is dit de juiste controle?
Houd rekening met deze vragen om te bepalen:
- Kunnen de besturingselementen comfortabel op één pagina met een redelijk formaat passen? Zo ja, gebruik dan één pagina.
- Is er maar één tabblad? Zo ja, gebruik dan één pagina.
- Zijn de tabbladen op een duidelijke manier aan elkaar gerelateerd? Zo niet, dan kunt u de informatie opsplitsen in afzonderlijke vensters met gerelateerde informatie.
- Indien gebruikt voor instellingen, zijn instellingen op verschillende pagina's volledig onafhankelijk? Heeft het wijzigen van een instelling op de ene pagina invloed op de instellingen op andere pagina's? Als ze niet onafhankelijk zijn, gebruikt u in plaats daarvan taakpagina's of een wizard.
- Zijn de tabbladen voornamelijk peers van elkaar of is er een hiërarchische relatie? Als u hiërarchisch bent, kunt u overwegen om progressieve openbaarmaking of onderliggende dialoogvensters te gebruiken gerelateerde informatie weer te geven.
- Worden de tabbladen gebruikt om stappen in een taak weer te geven? U kunt tabs gebruiken om stappen binnen een taak alleen weer te geven als ze eruitzien als stappen en er is een duidelijke, alternatieve manier om naar de tekststap te gaan, zoals een knop Volgende. Als de stappen vereist zijn, gebruikt u pagina's in een paginastroom of een wizard. Als de stappen optioneel zijn, geeft u de optionele stappen weer met behulp van modale dialoogvensters in plaats daarvan.
- Zijn de tabbladen verschillende weergaven van dezelfde gegevens? Als dit het volgende is, kunt u overwegen om een splitsknop of vervolgkeuzelijst te gebruiken om weergaven te wijzigen. Hoewel tabbladen effectief kunnen worden gebruikt voor het wijzigen van weergaven, zijn de alternatieven lichter.
Gebruikspatronen
Tabbladen hebben verschillende gebruikspatronen:
Gebruik | Voorbeeld |
---|---|
dynamisch vensteroppervlak Net als schuifbalken kunnen tabbladen worden gebruikt om het oppervlak van het venster te vergroten om gerelateerde informatie weer te geven. |
Met dit patroon is het gebruik van tabs conceptueel vergelijkbaar met het plaatsen van alle informatie op de tabbladen lineair op één schuifbaar oppervlak, waarbij de tablabels als koppen worden weergegeven. ![]() In dit voorbeeld vergroten tabs het vensteroppervlak effectief. |
meerdere weergaven Zoals gesplitste knoppen of vervolgkeuzelijsten, kunnen tabbladen worden gebruikt om verschillende weergaven van dezelfde of gerelateerde informatie weer te geven. |
![]() In dit voorbeeld wijzigen tabbladen weergaven in een document. |
meerdere documenten Net als meerdere vensters kunnen tabbladen worden gebruikt om verschillende documenten in één venster weer te geven. |
![]() ![]() In deze voorbeelden worden op tabbladen verschillende documenten in één toepassingsvenster weergegeven. |
exclusieve opties Net als keuzerondjes kunnen tabbladen worden gebruikt om meerdere exclusieve keuzes te presenteren. in dit patroon wordt alleen het geselecteerde tabblad toegepast en worden alle andere tabbladen genegeerd. |
![]() In dit voorbeeld worden tabbladen gebruikt (onjuist) als vervanging voor keuzerondjes. Dit patroon wordt niet aanbevolen omdat er een niet-standaardgedrag wordt gebruikt. De tabbladen gedragen zich als een instelling in plaats van alleen een manier om in het venster te navigeren. |
Als u maar één ding doet...
Zorg ervoor dat de informatie op de tabbladen gerelateerd is, maar dat instellingen op verschillende pagina's onafhankelijk zijn. Het laatste tabblad dat is geselecteerd, mag geen speciale betekenis hebben.
Richtsnoeren
Algemeen
Horizontale tabbladen gebruiken als:
- Het venster heeft zeven of minder tabbladen.
- Alle tabbladen passen op één rij, zelfs wanneer de gebruikersinterface (UI) is gelokaliseerd.
Verticale tabbladen gebruiken als:
Het eigenschappenvenster heeft acht of meer tabbladen.
Voor het gebruik van horizontale tabbladen is meer dan één rij vereist.
In dit voorbeeld zijn verticale tabbladen geschikt voor acht of meer tabbladen.
Nest geen tabbladen of combineer horizontale tabbladen met verticale tabbladen. Verminder in plaats daarvan het aantal tabbladen, gebruik alleen verticale tabbladen of gebruik een ander besturingselement, zoals een vervolgkeuzelijst.
Schuif geen horizontale tabbladen. Horizontaal schuiven is niet gemakkelijk te vinden. U kunt echter wel verticale tabbladen schuiven.
Onjuist:
In dit voorbeeld worden de horizontale tabbladen gescrold.
Voor tabbladen in een formaatbaar venster of deelvenster plaatst u een schuifbalk, indien nodig, op de pagina, niet het venster of deelvenster. De tabbladen moeten altijd zichtbaar zijn en niet uit de weergave schuiven.
In dit voorbeeld heeft de tabpagina de schuifbalk, niet het deelvenster.
Zorg ervoor dat de tabbladen eruitzien als tabs en niet een ander type besturingselement.
Onjuist:
In dit voorbeeld zien deze tabbladen eruit als opdrachtknoppen.
Interactie
- Wanneer besturingselementen alleen van toepassing zijn op een pagina, plaatst u deze binnen de rand van de pagina met tabbladen.
- Wanneer besturingselementen van toepassing zijn op het hele venster, plaatst u deze buiten de pagina met tabbladen.
- Wijs geen effecten toe aan het wijzigen van tabbladen. Tabbladen moeten in elke volgorde toegankelijk zijn. Het wijzigen van het huidige tabblad mag nooit bijwerkingen hebben, instellingen toepassen of resulteren in een foutbericht.
- Wijs geen speciale betekenis toe aan het laatste geselecteerde tabblad. Tabselectie is bedoeld voor navigatie door de laatste tabselectie van de gebruiker is geen instelling.
- Maak de instellingen op een pagina niet afhankelijk van instellingen op andere pagina's. Plaats in plaats daarvan afhankelijke instellingen op dezelfde pagina.
- Als gebruikers waarschijnlijk beginnen met het laatste tabblad dat wordt weergegeven, moet u het tabblad behouden en deze standaard selecteren. Zorg ervoor dat de instellingen per venster per gebruiker behouden blijven. Anders selecteert u standaard de eerste pagina.
Pictogrammen
Zet geen pictogrammen op tabbladen. Pictogrammen voegen meestal onnodige onbelangrijke visuele elementen toe, verbruiken schermruimte en verbeteren gebruikersbegrip vaak niet. Voeg alleen pictogrammen toe die helpen bij begrip, zoals standaardsymbolen.
Onjuist:
In dit voorbeeld voegen de pictogrammen onbelangrijke e-mail toe en doen ze weinig om het begrip van de gebruiker te verbeteren.
Uitzondering: U kunt duidelijk herkenbare pictogrammen gebruiken als er mogelijk onvoldoende ruimte is om zinvolle labels weer te geven:
juist:
In dit voorbeeld is het venster zo smal dat pictogrammen de tabbladen beter communiceren dan de labels.
Gebruik geen productlogo's voor tabafbeeldingen. Tabbladen zijn niet bedoeld voor huisstijl.
Dynamisch patroon van vensteroppervlak
Gebruik geen schuifbalken op tabbladpagina's. Tabbladen werken op dezelfde manier als schuifbalken om het effectieve gebied van een venster te vergroten. Eén mechanisme moet voldoende zijn.
Gebruik beknopte tablabels. Gebruik een of twee woorden die de inhoud van de pagina duidelijk beschrijven. Langere labels verbruiken schermruimte, met name wanneer de labels zijn gelokaliseerd.
Gebruik specifieke, zinvolle tablabels. Vermijd algemene tabbladlabels die van toepassing kunnen zijn op elk tabblad, zoals Algemeen, Geavanceerd of Instellingen.
Als een tabblad niet van toepassing is op de huidige context en gebruikers dit niet verwachten, verwijdert u het. Dit vereenvoudigt de gebruikersinterface en gebruikers missen deze niet.
Onjuist:
In dit voorbeeld is het tabblad Bestandslocaties onjuist uitgeschakeld wanneer Microsoft Word wordt gebruikt als e-maileditor. In plaats van dit tabblad uit te schakelen, moet het worden verwijderd omdat gebruikers niet verwachten dat ze bestandslocaties in deze context kunnen bekijken of wijzigen.
Als een tabblad niet van toepassing is op de huidige context en gebruikers dit kunnen verwachten:
- Het tabblad weergeven.
- Schakel de besturingselementen op de pagina uit.
- Voeg tekst toe waarin wordt uitgelegd waarom de besturingselementen zijn uitgeschakeld.
Schakel het tabblad niet uit, omdat dit niet duidelijk is en verkenning verbiedt. Gebruikers die op zoek zijn naar een specifieke waarde, worden gedwongen om op alle andere tabbladen te zoeken.
In dit voorbeeld zijn geen van de weergaveopties van toepassing in de leesindeling. Gebruikers verwachten echter dat ze van toepassing zijn op basis van het tabbladlabel, dus de pagina wordt weergegeven, maar de opties zijn uitgeschakeld.
Patronen voor meerdere weergaven en documenten
- Gebruik de weergave- of documentnamen op tabbladlabels.
- Vermijd overmatig lange tabnamen. Indien nodig moet u een maximale naamgrootte hebben of het weergegeven tabbladlabel afkappen met behulp van weglatingstekens. Langere labels verbruiken schermruimte, met name wanneer de labels zijn gelokaliseerd.
- Als een tabblad niet van toepassing is op de huidige context, verwijdert u het tabblad.
Patroon exclusieve opties
Gebruik dit patroon niet. Gebruik in plaats daarvan keuzerondjes of een vervolgkeuzelijst.
Onjuist:
In dit voorbeeld worden tabbladen onjuist gebruikt als vervanging voor keuzerondjes.
juist:
In dit voorbeeld worden keuzerondjes correct gebruikt.
Labels
- Labeltabbladen op basis van hun patroon. Gebruik zelfstandige naamwoorden in plaats van werkwoorden, zonder interpunctie te beëindigen. Zie de voorgaande patroonrichtlijnen voor meer informatie.
- Gebruik hoofdlettergebruik in zinsstijl.
- Wijs geen toegangssleutel toe. Tabbladen zijn toegankelijk via hun sneltoetsen (Ctrl+Tab, Ctrl+Shift+Tab, Ctrl+PgUp, Ctrl+PgDn). Er is een tekort aan goede opties voor toegangssleutels, dus het niet toewijzen van toegangssleutels aan tabbladen maakt het gemakkelijker om ze toe te wijzen aan andere besturingselementen.
Documentatie
Wanneer u naar tabbladen verwijst:
- Gebruik de exacte labeltekst, inclusief hoofdlettergebruik, en neem het woordtab op.
- Als u de interactie van de gebruiker wilt beschrijven, klikt u op.
- Maak het label indien mogelijk op met vetgedrukte tekst. Anders plaatst u het label alleen tussen aanhalingstekens indien nodig om verwarring te voorkomen.
- Omdat meerdere toepassingen dubbelzinnig kunnen zijn, met name voor een wereldwijd publiek, gebruikt u alleen het zelfstandig naamwoordtabblad om alleen naar een tabblad te verwijzen. Voor andere toepassingen moet u de betekenis verduidelijken met een descriptor: de Tab-toets, een tabstop of een tabmarkering op de liniaal.
Voorbeeld: Klik in het menu Extra op Optiesen klik vervolgens op het tabblad Weergave.