Structuurweergaven

Met een structuurweergave kunnen gebruikers een hiërarchisch gerangschikte verzameling objecten bekijken en ermee werken met behulp van één selectie of meerdere selecties.

In een boomstructuur worden objecten die gegevens bevatten bladknooppunten genoemd en objecten die andere objecten bevatten, containerknooppunten genoemd. Eén van de meeste containerknooppunten wordt het hoofdknooppunt genoemd. Gebruikers kunnen containerknooppunten uitvouwen en samenvouwen door te klikken op de plus- en min-uitvouwknoppen.

Een typische structuurweergave.

Is dit de juiste controle?

Het gebruik van hiërarchische gegevens betekent niet dat u een structuurweergave moet gebruiken. Vaak is een lijstweergave een eenvoudigere, maar krachtigere keuze. Lijstweergaven:

• Ondersteuning voor verschillende weergaven.
• Ondersteuning voor het sorteren van gegevens op een van de kolommen in de detailweergave.
• Ondersteuning voor het organiseren van gegevens in groepen, waarbij een hiërarchie van twee niveaus wordt gevormd.

Als u een lijstweergave wilt gebruiken, kunt u hiërarchische gegevens platmaken met behulp van de volgende technieken:

• Verwijder het hoofdknooppunt indien aanwezig, omdat dit vaak niet nodig is.

• Gebruik lijstweergavegroepen, tabbladen, vervolgkeuzelijstenof uitbreidbare koppen om de containers op het hoogste niveau te vervangen.

  

  In dit voorbeeld worden lijstweergavegroepen gebruikt voor de containers op het hoogste niveau.

  

  In dit voorbeeld worden tabbladen gebruikt voor containers op het hoogste niveau

  

  In dit voorbeeld wordt een vervolgkeuzelijst gebruikt voor de containers op het hoogste niveau.

• Als een gekoppeld besturingselement de inhoud van de geselecteerde container weergeeft, kan dat besturingselement lagere niveaus van de hiërarchie weergeven.

  

  In dit voorbeeld worden containers op laag niveau weergegeven in het documentvenster.

U moet een structuurweergave gebruiken als u een hiërarchie van meer dan twee niveaus wilt weergeven (niet het hoofdknooppunt).

Als u wilt bepalen of een structuurweergave het juiste besturingselement is, kunt u de volgende vragen overwegen:

• Is de gegevens hiërarchisch? Als dat niet het is, gebruikt u een ander besturingselement.
• Heeft de hiërarchie ten minste drie niveaus (niet inclusief de hoofdmap)? Zo niet, overweeg dan alternatieven zoals lijstweergavegroepen, tabbladen, vervolgkeuzelijsten of uitbreidbare koppen.
• Hebben de items hulpgegevens? Zo ja, dan kunt u overwegen om een lijstweergave te gebruiken in de modus Detailsweergave om optimaal te profiteren van de hulpgegevens.
• Hebben de gegevens op een lager niveau betrekking op onafhankelijke subtaken? Zo ja, dan kunt u overwegen de informatie weer te geven in een gekoppeld besturingselement of in een afzonderlijk venster (weergegeven met behulp van opdrachtknoppen of koppelingen).
• Zijn de doelgebruikers geavanceerd? Geavanceerde gebruikers zijn meer bedreven in het gebruik van bomen. Als uw toepassing is gericht op beginnende gebruikers, vermijdt u het gebruik van structuurweergaven.
• Hebben de items één, natuurlijke, hiërarchische categorisatie die bekend is voor de meeste gebruikers? Zo ja, dan zijn de gegevens ideaal voor een structuurweergave. Als u meerdere weergaven of sortering nodig hebt, gebruikt u in plaats daarvan een lijstweergave.
• Moeten gebruikers de gegevens op een lager niveau in sommige, maar niet alle scenario's of sommige, maar niet alle tijd zien? Zo ja, dan zijn de gegevens ideaal voor een structuurweergave.

Ontwerpconcepten

Bomen zijn bedoeld om gegevens te ordenen en gemakkelijk te vinden, maar het is moeilijk om gegevens in een boom gemakkelijk te vinden. Houd rekening met de volgende principes bij het bepalen van structuurweergaven en hun organisatie.

Voorspelbaarheid en detectie

Een structuurweergave is gebaseerd op de relaties tussen objecten. Bomen werken het beste wanneer de objecten een duidelijke, bekende, wederzijds exclusieve relatie vormen waarin elk object wordt toegewezen aan één, eenvoudig te bepalen container.

Een belangrijk probleem is dat een object in verschillende knooppunten kan worden weergegeven. Waar verwachten gebruikers bijvoorbeeld een hardwareapparaat te vinden dat muziek afspeelt, een grote harde schijf heeft en een USB-poort gebruikt? Misschien in een van de verschillende containerknooppunten, zoals Multimedia, Opslag, USB en mogelijk in hardwarebronnen. Eén oplossing is om elk object onder de ene meest geschikte container te plaatsen, ongeacht de omstandigheden; een andere methode is om elk object onder alle containers te plaatsen die van toepassing zijn. De eerste bevordert een eenvoudige, schone hiërarchie en de laatste bevordert de vindbaarheid elk voordelen en potentiële problemen.

Gebruikers begrijpen de indeling van de structuur mogelijk niet volledig, maar ze vormen een mentaal model van de relaties na een tijdje interactie met de boomstructuur. Als dat mentale model onjuist is, leidt dit tot verwarring. Stel dat een muziekspeler te vinden is in de multimedia-, opslag- en USB-containers. Deze regeling verbetert de zichtbaarheid. Als een gebruiker het apparaat eerst vindt in Multimedia, kan de gebruiker concluderen dat alle apparaten, zoals muziekspelers, worden weergegeven in de multimediacontainer. De gebruiker verwacht dan vergelijkbare apparaten, zoals digitale camera's, die worden weergegeven in de multimediacontainer en wordt verward als dat niet het geval is.

De uitdaging bij het ontwerpen van een boomstructuur is om de zichtbaarheid te verdelen met een voorspelbaar gebruikersmodel dat verwarring minimaliseert.

Breedte versus diepte

Bruikbaarheidsstudies hebben aangetoond dat gebruikers meer succesvol zijn bij het vinden van objecten in een boom die breed is dan in een boom die diepis, dus bij het ontwerpen van een boom moet u de voorkeur geven aan breedte over diepte. In het ideale geval moet een structuur niet meer dan vier niveaus hebben (waarbij het hoofdknooppunt niet wordt geteld) en moeten de meest gebruikte objecten in de eerste twee niveaus worden weergegeven.

Andere principes

• Wanneer gebruikers vinden wat ze zoeken, stoppen ze met zoeken. Ze zien niet waar een object anders kan worden gevonden, omdat ze dat niet nodig hebben. Deze gebruikers kunnen ervan uitgaan dat het eerste pad dat ze vinden het enige pad is.
• Gebruikers kunnen geen objecten vinden in grote, complexe bomen. Gebruikers voeren geen volledige, handmatige zoekopdrachten uit om objecten in dergelijke structuren te vinden; ze stoppen zodra ze denken dat ze een redelijke inspanning hebben gedaan. Daarom moeten grote, complexe bomen worden aangevuld met andere toegangsmethoden, zoals zoeken in woorden, een index of filteren.
• In sommige programma's kunnen gebruikers hun eigen bomen maken. Hoewel dergelijke zelf ontworpen bomen mogelijk zijn afgestemd op het mentale model van een gebruiker, worden ze vaak onhaalbaar en slecht onderhouden. Bijvoorbeeld, terwijl een bestandssysteem, e-mailprogramma en favorietenlijst meestal vergelijkbare soorten informatie opslaan, gebruikers hebben zelden de moeite om ze op dezelfde manier te ordenen.

Als u maar één ding doet...

Weeg zorgvuldig de voordelen en nadelen van het gebruik van structuurweergaven. Als u hiërarchisch gerangschikte gegevens hebt, betekent dit niet dat u een structuurweergave moet gebruiken.

Gebruikspatronen

Structuurweergaven hebben verschillende gebruikspatronen:

Gebruik	Voorbeeld
structuurweergaven met alleen containerknooppunten gebruikers kunnen één container tegelijk bekijken en ermee werken.	Deze structuurweergaven hebben doorgaans een gekoppeld besturingselement waarmee de inhoud van de geselecteerde container wordt weergegeven, zodat gebruikers slechts één container tegelijk kunnen gebruiken. In dit voorbeeld heeft de structuurweergave alleen containerknooppunten. De inhoud van het geselecteerde knooppunt wordt weergegeven in het bijbehorende besturingselement voor de lijstweergave.
structuurweergaven met container- en leaf-knooppunten gebruikers kunnen containers en bladeren bekijken en ermee werken.	Deze structuurweergaven hebben doorgaans een gekoppeld besturingselement waarmee de inhoud van de geselecteerde container of het bladblad wordt weergegeven. gebruikers toestaan om met bladeren te communiceren, maakt het vaak noodzakelijk om meerdere selecties te ondersteunen. in dit voorbeeld bevat de structuurweergave zowel container- als leaf-knooppunten. omdat meerdere selecties worden ondersteund, wordt de inhoud van de geopende items weergegeven met behulp van tabbladen in het bijbehorende besturingselement. De structuurweergave kan ook een georganiseerde lijst hebben, waarbij de containers koppen zijn en de bladeren opties zijn. In dit voorbeeld zijn de boombladeren opties en de containers zijn optiecategorieën.
structuurweergaven van selectievakjes gebruikers kunnen een willekeurig aantal items selecteren, inclusief geen.	De selectievakjes geven duidelijk aan dat meerdere selecties mogelijk zijn. gebruik dit structuurpatroon wanneer meerdere selecties essentieel of vaak worden gebruikt. In dit voorbeeld kunt u in een structuurweergave van selectievakjes de selectie van functies in- of uitschakelen.
opbouwfuncties voor structuurweergaven gebruikers kunnen een structuur maken door één container of leaf tegelijk toe te voegen en eventueel de volgorde in te stellen.	Veel bomen kunnen door gebruikers worden gemaakt of gewijzigd. sommige bomen zijn gebouwd met contextmenu's en slepen en neerzetten (zoals de mappen in Windows Verkenner), terwijl andere bomen zijn gebouwd met behulp van een speciaal dialoogvenster (zoals de lijst favorieten in Windows Internet Explorer). In dit voorbeeld van Internet Explorer kunnen gebruikers hun eigen lijst met favorieten maken met behulp van een dialoogvenster.
Structuurweergaven met alternatieve toegangsmethoden gebruikers kunnen objecten vinden op andere manieren dan het gebruik van een hiërarchische structuur.	Zoals eerder vermeld, hebben gebruikers problemen bij het vinden van objecten in grote, complexe bomen, zodat dergelijke bomen moeten worden aangevuld met andere toegangsmethoden, zoals een woordzoekopdracht, een index of filteren. in dit voorbeeld hebben gebruikers ook toegang tot informatie met behulp van een inhoudsopgave, een index en favorieten. voor sommige gebruikers kunnen de index- en zoektabbladen nuttiger zijn dan het tabblad Inhoud. In dit voorbeeld kunnen gebruikers in het menu Start van Windows ook toegang krijgen tot programma's, bestanden en webpagina's door een deel van de naam in het zoekvak te typen.

Richtsnoeren

Presentatie

• Sorteer de items in een logische volgorde in een container. Sorteer namen in alfabetische volgorde, getallen in numerieke volgorde en datums in chronologische volgorde.

• Het kenmerk Selectie altijd weergeven gebruiken, zodat gebruikers het geselecteerde item gemakkelijk kunnen bepalen, zelfs als het besturingselement geen invoerfocus heeft.

• Als de structuur fungeert als een inhoudsopgave, gebruikt u het kenmerk Single Expand om het beheer van de structuur te vereenvoudigen. Op deze manier wordt alleen het relevante gedeelte van de boom uitgevouwen.

• Vermijd het presenteren van lege bomen. Als een gebruiker een boomstructuur maakt, initialiseert u de structuur met instructies of voorbeelditems die gebruikers mogelijk nodig hebben.

  

  In dit voorbeeld wordt de lijst in eerste instantie weergegeven met voorbeelden.

• Maak de containerknooppunten niet samen als gebruikers geen reden hebben om ze samen te vouwen. Hierdoor wordt onnodige complexiteit toegevoegd.

• Als de belastingprestaties een probleem zijn, geeft u standaard alleen de containers op het eerste en tweede niveau van de structuur weer. Vervolgens kunt u aanvullende gegevens op aanvraag laden wanneer een gebruiker vertakkingen in de structuur uitbreidt.

• Als gebruikers een container uitvouwen of samenvouwen, moet u deze status behouden, zodat deze van kracht wordt wanneer de structuurweergave de volgende keer wordt weergegeven, tenzij gebruikers waarschijnlijk liever beginnen met de standaardstatus. Persistentie moet per structuurweergave per gebruiker zijn.

• Als containers op hoog niveau vergelijkbare inhoud hebben, kunt u visuele aanwijzingen gebruiken om deze te onderscheiden.

  Onjuist:

  

  In dit voorbeeld hebben de mappen Postvak en Archief vergelijkbare inhoud. Zodra de bomen verder zijn uitgebreid, is het erg moeilijk voor gebruikers om te weten waar ze zich in de boom bevinden, wat tot verwarring leidt. Als u iets verschillende pictogrammen in de verschillende secties gebruikt, kan dit probleem worden opgelost.

• Bedenk de verbindingslijnen. Hoewel deze lijnen duidelijk relaties tussen container- en leaf-knooppunten tonen, voegen ze visuele onbelangrijke e-mail toe zonder begrip aanzienlijk te helpen. Ze helpen met name niet wanneer knooppunten dicht bij elkaar staan, en helpen ze ook niet wanneer knooppunten tot nu toe uit elkaar liggen dat schuiven vereist is.

  juist:

  

  Beter:

  

  De verbindingslijnen doen weinig om begrip te helpen.

Interactie

• Overweeg om dubbelklikgedrag op te geven. Dubbelklikken moet hetzelfde effect hebben als het selecteren van een item en het uitvoeren van de standaardopdracht.

• Dubbelklikgedrag redundant maken. Er moet altijd een opdrachtknop of contextmenuopdracht zijn die hetzelfde effect heeft.

• Als voor een item verdere uitleg is vereist, de uitleg in een infotip.

  

  In dit voorbeeld bevat een infotip meer informatie.

• Geef contextmenu's van relevante opdrachten op. Dergelijke opdrachten omvatten Knippen, Kopiëren, Plakken, Verwijderen of Verwijderen, Naam wijzigen en Eigenschappen.

• Bij het uitschakelen van een structuurweergave schakelt u ook de bijbehorende labels en opdrachtknoppen uit.

Structuurorganisatie

• Gebruik een natuurlijke hiërarchische structuur die bekend is voor de meeste gebruikers.
• Als u een dergelijke structuur niet kunt gebruiken, probeert u de detectie te verdelen met een voorspelbaar gebruikersmodel dat verwarring minimaliseert.
• Als u de detectie veilig wilt verbeteren, plaatst u een item in meerdere containers wanneer:
  • Het item is niet gerelateerd aan andere vergelijkbare items (zodat gebruikers niet worden verward door onjuiste koppelingen).
  • Er zijn slechts een paar van dergelijke redundante items (dus de structuur wordt niet bloed).
• Gebruik de eenvoudigste hiërarchische structuur die goed werkt. Ga hiervoor als volgt te werk:
  • Plaats de meest gebruikte objecten in de eerste twee niveaus van de structuur (waarbij het hoofdknooppunt niet wordt geteld) en plaats minder vaak geopende objecten verderop in de hiërarchie.
  • Overbodige containers op tussenliggend niveau verwijderen of combineren.
• Geef de voorkeur aan breedte over diepte. In het ideale geval mag een structuur niet meer dan vier niveaus hebben en moeten de meest gebruikte objecten in de eerste twee niveaus worden weergegeven.
• Bepaal of u echt een hoofdknooppunt nodig hebt. Geef een hoofdknooppunt op als gebruikers de mogelijkheid nodig hebben om opdrachten uit te voeren in de hele structuur (mogelijk met behulp van een contextmenu op het hoofdknooppunt). Anders is de structuur eenvoudiger en gemakkelijker te gebruiken zonder deze.
• Als de structuur alternatieve toegangsmethoden heeft, zoals een woordzoekopdracht of een index, optimaliseert u de structuur voor bladeren door u te concentreren op de nuttigste inhoud. Met alternatieve toegangsmethoden hoeft de inhoud van de structuur niet uitgebreid te zijn. Door de structuur te vereenvoudigen, kunnen gebruikers gemakkelijker de nuttigste inhoud vinden.

Structuurweergaven van selectievakjes

• Het aantal geselecteerde items onder de lijst weergeven, met name als gebruikers waarschijnlijk verschillende items selecteren. Met deze feedback kunnen gebruikers bevestigen dat hun selectie juist is.

  

  In dit voorbeeld wordt het aantal geselecteerde items onder de structuur weergegeven. Het is duidelijk dat er geen twee items zijn geselecteerd.

• Als er mogelijk veel items zijn en alle items waarschijnlijk worden geselecteerd of gewist, voegt u alle opdrachtknoppen selecteren en wissen toe.

• Schakel selectievakjes met gemengde status in om gedeeltelijke selectie van de items in een container aan te geven.

  juist:

  

  In dit voorbeeld worden de selectievakjes met gemengde status gebruikt om gedeeltelijke selectie aan te geven.

Aanbevolen grootte en afstand

Aanbevolen grootte en afstand voor besturingselementen voor structuurweergaven.

• Kies een breedte van de structuurweergave die de noodzaak voor horizontaal schuiven voor de meeste items vermijdt wanneer de structuur volledig is uitgevouwen.

• Neem nog eens 30 procent op om lokalisatie mogelijk te maken.

• Kies een hoogte van de structuurweergave die onnodig verticaal schuiven elimineert. Overweeg om een structuurweergave iets langer te maken (of zelfs meer, als er ruimte beschikbaar is) als u dit doet, de behoefte aan een verticale schuifbalk vermindert.

  Onjuist:

  

  In dit voorbeeld, waardoor de structuurweergave iets breder en langer zou worden de schuifbalken in de meeste gevallen geëlimineerd. In deze specifieke structuur kan slechts één container tegelijk worden geopend.

• Als gebruikers profiteren van het groter maken van de structuurweergave, kunt u de structuurweergave en het bovenliggende venster vergroten. Hierdoor kunnen gebruikers de grootte van de structuurweergave naar behoefte aanpassen.

Labels

Besturingslabels

• Alle structuurweergaven hebben labels nodig. Schrijf het label als een woord of woordgroep, niet als een zin, eindigend met een dubbele punt en gebruik statische tekst.

• Wijs een unieke toegangssleutel toe. Zie Toetsenbordvoor richtlijnen voor toewijzingen.

• Gebruik hoofdlettergebruik in zinsstijl.

• Plaats het label boven het besturingselement en lijn het label uit met de linkerrand van het besturingselement.

• Schrijf het label voor weergaven met meerdere selectiestructuurweergaven, zodat het duidelijk is dat meerdere selecties mogelijk zijn. Labels in de structuurweergave van selectievakjes kunnen minder expliciet zijn.

  Onjuist:

  

  In dit voorbeeld bevat het label geen informatie over meerdere selecties.

  Beter:

  

  In dit voorbeeld geeft het label duidelijk aan dat meerdere selecties mogelijk zijn.

  Beste:

  

  In dit voorbeeld geven de selectievakjes duidelijk aan dat meerdere selecties mogelijk zijn, zodat het label niet expliciet hoeft te zijn.

Gegevenstekst

• Gebruik hoofdlettergebruik in zinsstijl.

Instructietekst

• Als u instructietekst over een structuurweergave wilt toevoegen, voegt u deze toe boven het label. Gebruik volledige zinnen met eindepunctie.

• Gebruik hoofdlettergebruik in zinsstijl.

• Aanvullende verklaringen die nuttig maar niet nodig zijn, moeten kort worden gehouden. Plaats deze informatie tussen haakjes tussen het label en de dubbele punt, na de hoofdinstructie als deze wordt gebruikt in plaats van een label, of onder het besturingselement.

  

  In dit voorbeeld is de aanvullende uitleg onder het besturingselement.

Documentatie

Wanneer u naar structuurweergaven verwijst:

• Gebruik de exacte labeltekst, inclusief hoofdlettergebruik, maar neem het onderstrepingsteken of dubbele punt niet op. Neem de woordenlijst of hiërarchische lijst op als voor de context een onderscheid moet worden gemaakt tussen gewone lijsten.
• Gebruik voor boomstructuuritems de exacte itemtekst, inclusief het hoofdlettergebruik.
• Raadpleeg structuurweergaven als structuurweergaven alleen in programmering en andere technische documentatie. Overal anders kunt u een lijst of hiërarchische lijst gebruiken, omdat de termenstructuur verwarrend is voor de meeste gebruikers.
• Als u gebruikersinteractie wilt beschrijven, selecteert u de gegevens en vouwt u deze uit voor de plus- en minknoppen.
• Maak indien mogelijk het label en de structuuritems op met vetgedrukte tekst. Anders plaatst u het label en de items alleen tussen aanhalingstekens als dat nodig is om verwarring te voorkomen.

Voorbeeld: Selecteer in de lijst InhoudOntwerp van gebruikersinterface.

Wanneer u verwijst naar selectievakjes in een structuurweergave:

• Gebruik de exacte labeltekst, inclusief hoofdlettergebruik, en schakel het selectievakje woorden in. Neem het onderstrepingsteken van de toegangssleutel niet op.
• Als u gebruikersinteractie wilt beschrijven, gebruikt u Selectie en Wissen.
• Maak het label indien mogelijk op met vetgedrukte tekst. Anders plaatst u het label alleen tussen aanhalingstekens indien nodig om verwarring te voorkomen.

Voorbeeld: Schakel in de Items om een back-up te maken van lijst het selectievakje Mijn documenten in.