Besturingselementen voor progressieve openbaarmaking

Met een progressief openbaarmakingsbeheer kunnen gebruikers aanvullende informatie weergeven of verbergen, waaronder gegevens, opties of opdrachten. Progressieve openbaarmaking bevordert de eenvoud door zich te concentreren op de essentiële, maar zo nodig aanvullende details te onthullen.

Voorbeelden van progressieve besturingselementen voor openbaarmaking.

Is dit de juiste controle?

Houd rekening met deze vragen om te bepalen:

• Moeten gebruikers de informatie in sommige, maar niet alle scenario's of sommige, maar niet alle tijd zien? Zo ja, dan vereenvoudigt het weergeven van de informatie met behulp van progressieve openbaarmaking de basislijnervaring, maar biedt gebruikers eenvoudig toegang tot de informatie.

  

  In dit voorbeeld geeft de Windows-beveiligings-app de belangrijke beveiligingsstatus altijd weer, maar wordt gebruikgemaakt van progressieve openbaarmaking om details op aanvraag weer te geven.

• Als de informatie standaard wordt weergegeven, kunnen gebruikers deze waarschijnlijk verbergen? Zijn er scenario's waarin gebruikers meer ruimte nodig hebben? Zijn gebruikers voldoende gemotiveerd om de gebruikersinterface (UI) aan te passen? Zo niet, dan geeft u de informatie weer zonder progressieve openbaarmaking te gebruiken.

  Onjuist:

  

  In dit voorbeeld zijn gebruikers niet gemotiveerd om de informatie te verbergen.

• Is de aanvullende informatie geavanceerd, aanzienlijk, complex of gerelateerd aan een onafhankelijke subtaak? Zo ja, dan kunt u overwegen om de informatie in een apart venster weer te geven met behulp van opdrachtknoppen of koppelingen in plaats van een progressief openbaarmakingsbeheer te gebruiken. (Aanvullende informatie is geavanceerd als deze is bedoeld voor geavanceerde gebruikers. Het is complex als andere informatie moeilijk te lezen of in te delen is.)

  

  In dit voorbeeld is informatie over de naam en uitgever van de software zinvol voor geavanceerde gebruikers, zodat koppelingen naar afzonderlijke vensters worden gebruikt.

• Is de aanvullende informatie een zin of zinfragment dat beschrijft wat een item doet of hoe het kan worden gebruikt? Zo ja, dan kunt u een knopinfo of infotip gebruiken.

• Is de aanvullende informatie gerelateerd aan de huidige taak, maar onafhankelijk van de informatie die momenteel wordt weergegeven? Zo ja, kunt u in plaats daarvan tabbladen gebruiken. Samenvouwbare lijsten hebben echter vaak de voorkeur boven tabbladen, omdat ze flexibeler en schaalbaarder zijn.

• Wordt de aanvullende informatie in feite een gegevensfilter weergegeven of verborgen? Zo ja, dan kunt u overwegen om een vervolgkeuzelijst of selectievakjes te gebruiken om het filter toe te passen op de hele lijst.

Ontwerpconcepten

De doelstellingen van progressieve openbaarmaking zijn:

• vereenvoudig een ui- door u te concentreren op de essentiële, maar zo nodig aanvullende details te onthullen.
• Vereenvoudig het uiterlijk van een gebruikersinterface door de perceptie van onbelangrijke e-mail te verminderen.

Beide doelstellingen kunnen worden bereikt met behulp van progressieve besturingselementen voor openbaarmaking, waarbij gebruikers klikken om meer details te bekijken. U kunt echter het tweede doel bereiken om het uiterlijk te vereenvoudigen zonder expliciete besturingselementen voor progressieve openbaarmaking te gebruiken door:

• Contextuele details alleen weergeven in context. U kunt bijvoorbeeld automatisch contextuele opdrachten of werkbalken weergeven wanneer dit relevant is voor het geselecteerde object of de geselecteerde modus.

• het gewicht van de betaalbaarheid voor de secundaire gebruikersinterface verminderen.Affordances visuele eigenschappen zijn die voorstellen hoe objecten worden gebruikt. De trend is om gebruikersinterface te hebben waarmee gebruikers kunnen communiceren, maar om ervoor te zorgen dat al deze gebruikersinterface wordt getekend om te schreeuwen 'klik op mij!', leidt tot te veel visuele onbelangrijke e-mail. Voor de secundaire gebruikersinterface is het vaak beter om subtiele betaalbaarheid te gebruiken en de volledige effecten op de muis te geven.

  

  In dit voorbeeld is het veld Waardering interactief, maar wordt dit pas weergegeven als u de muisaanwijzer aanwijst.

• Opvolgende stappen worden alleen weergegeven nadat de vereisten zijn voltooid. Deze benadering wordt het beste gebruikt met vertrouwde taken, waar gebruikers de eerste stappen kunnen uitvoeren.

  

  In dit voorbeeld worden op de pagina gebruikersnaam en wachtwoord in eerste instantie alleen de gebruikersnaam en optionele wachtwoordvakken weergegeven. De bevestigings- en hintvakken worden weergegeven nadat de gebruiker een wachtwoord heeft ingevoerd.

Hoewel progressieve openbaarmaking een uitstekende manier is om UIS's te vereenvoudigen, heeft het deze risico's:

• Gebrek aan vindbaarheid. Gebruikers kunnen ervan uitgaan dat als ze iets niet kunnen zien, deze niet bestaat. Gebruikers kunnen de muisaanwijzer niet aanwijzen of klikken als ze niet zien wat ze zoeken. Er is altijd een kans dat gebruikers niet op dingen zoals Meer opties klikken.
• Gebrek aan stabiliteit. Progressieve openbaarmaking moet worden verwacht of in ieder geval natuurlijk voelen. Als besturingselementen onverwacht worden weergegeven en verdwijnen, kan de resulterende gebruikersinterface zich instabiel voelen.

Besturingselementen voor progressieve openbaarmaking

Progressieve besturingselementen voor openbaarmaking worden meestal weergegeven zonder directe labels die hun gedrag beschrijven, zodat gebruikers het volgende kunnen doen op basis van het uiterlijk van het besturingselement:

• Herkennen dat het besturingselement progressieve openbaarmaking biedt.
• Bepalen of de huidige status is uitgevouwen of samengevouwen.
• Bepaal of er aanvullende informatie, opties of opdrachten nodig zijn om de taak uit te voeren.
• Bepaal indien gewenst hoe u de oorspronkelijke staat herstelt.

Hoewel gebruikers het bovenstaande kunnen bepalen op basis van een proefversie en fout, moet u proberen om dergelijke experimenten onnodig te maken.

Progressieve openbaarmakingsmaatregelen hebben een redelijk zwakke betaalbaarheid, wat betekent dat hun visuele eigenschappen suggereren hoe ze worden gebruikt, zij het zwak. De volgende tabel vergelijkt het uiterlijk van de algemene besturingselementen voor progressieve openbaarmaking:

Beheersen	Doel	Uiterlijk	Glyph geeft aan
punthaken	Alles weergeven: de resterende items in volledig of gedeeltelijk verborgen inhoud weergeven of verbergen. Items worden op hun plaats weergegeven (met één punthaak) of in een snelmenu (met een dubbele punthaak).	Punthaakjes in de richting waar de actie plaatsvindt.	Toekomstige status
pijlen	Opties weergeven: Een snelmenu weergeven.	Pijlen wijzen in de richting waar de actie plaatsvindt.	Toekomstige status
Plus- en min-besturingselementen	Containers uitvouwen: containerinhoud uitvouwen of samenvouwen wanneer u door een hiërarchie navigeert.	Plus- en mintekens wijzen niet, maar de actie vindt altijd rechts plaats.	Toekomstige status
driehoeken draaien	Details weergeven: Aanvullende informatie voor een afzonderlijk item weergeven of verbergen. Ze worden ook gebruikt om containers uit te breiden.	Draaiende driehoeken lijken enigszins op roterende hendels, zodat ze in de richting wijzen waar de actie heeft plaatsgevonden.	Huidige status

Als u maar één ding doet...

Gebruikers moeten het gedrag van een progressief openbaarmakingsbeheer correct kunnen voorspellen door alleen te controleren. Hiervoor selecteert u de juiste gebruikspatronen en past u hun uiterlijk, locatie en gedrag consistent toe.

Gebruikspatronen

Progressieve besturingselementen voor openbaarmaking hebben verschillende gebruikspatronen. Sommige van deze zijn ingebouwd in algemene besturingselementen.

Punthaken

Dubbele punthaken tonen of verbergen de resterende items in volledig of gedeeltelijk verborgen inhoud. Meestal worden de items op hun plaats weergegeven, maar ze kunnen ook worden weergegeven in een snelmenu. Wanneer het is ingesteld, blijft het item uitgevouwen totdat de gebruiker het samenvouwen.

Dubbele punthaken worden op de volgende manieren gebruikt:

Gebruik	Voorbeeld
in-place ui- het bijbehorende object ontvangt de invoerfocus en de enkele dubbele punthaak wordt geactiveerd met de spatiebalk.	In deze voorbeelden worden de in-place dubbele punthaken rechts van het bijbehorende besturingselement weergegeven.
opdrachtknoppen met externe labels de opdrachtknop ontvangt de invoerfocus en de enkele dubbele punthaak wordt geactiveerd met de spatiebalk.	In dit voorbeeld wordt de knop met één dubbele punthaak gelabeld en links van het label weergegeven. Met dit patroon zou de knop moeilijk te begrijpen zijn zonder het label.
opdrachtknoppen met interne labels de opdrachtknop ontvangt de invoerfocus en wordt geactiveerd met de spatiebalk.	In deze voorbeelden hebben normale opdrachtknoppen de dubbele dubbele punthaak om hun betekenis voor te stellen.

Pijlen

Pijlen geven een snelmenu weer. Het item blijft uitgevouwen totdat de gebruiker een selectie maakt of ergens op klikt.

Als de pijlknop een onafhankelijk besturingselement is, ontvangt deze de invoerfocus en wordt deze geactiveerd met de spatiebalk. Als de pijlknop een bovenliggend besturingselement heeft, ontvangt het bovenliggende element de invoerfocus en wordt de pijl geactiveerd met Alt+pijl-omlaag en Alt+pijl-omhoog, net als bij het besturingselement voor de vervolgkeuzelijst.

Pijlen worden op de volgende manieren gebruikt:

Gebruik	Voorbeeld
Knoppen scheiden de pijl zich in een afzonderlijk knop besturingselement bevindt.	In deze voorbeelden geven afzonderlijke pijlknoppen aan de rechterkant een opdrachtmenu aan.
opdrachtknoppen de pijl maakt deel uit van een opdrachtknop.	In deze voorbeelden hebben menuknoppen en splitsknoppen de pijlen rechts van de tekst geplaatst.

Plus- en min-besturingselementen

Plus- en min-besturingselementen uitvouwen of samenvouwen om containerinhoud weer te geven wanneer u door een hiërarchie navigeert. Het item blijft uitgevouwen totdat de gebruiker het samenvouwen. Hoewel deze er als knoppen uitzien, is hun gedrag in-place.

Het bijbehorende object ontvangt de invoerfocus. Het plusteken wordt geactiveerd met de pijl-rechts en het minteken met de pijl-links.

Plus- en min-besturingselementen worden op de volgende manieren gebruikt:

Gebruik	Voorbeeld
samenvouwbare bomen een hiërarchie met meerdere niveaus om containerinhoud weer te geven.	In dit voorbeeld worden de plus- en min-besturingselementen links van de gekoppelde container geplaatst.
samenvouwbare lijsten een hiërarchie met twee niveaus om containerinhoud weer te geven.	In dit voorbeeld worden de plus- en min-besturingselementen links van de gekoppelde lijstkop geplaatst.

Draaibare driehoeken

Draaiende driehoeken geven aanvullende informatie weer of verberg deze voor een afzonderlijk item. Ze worden ook gebruikt om containers uit te breiden. Het item blijft uitgevouwen totdat de gebruiker het samenvouwen.

Het bijbehorende object ontvangt de invoerfocus. De samengevouwen driehoek (rechts wijst) wordt geactiveerd met de pijl-rechts en het uitgevouwen (omlaag wijzende) driehoekje met de pijl-links.

Draaiende driehoeken worden op de volgende manieren gebruikt:

Gebruik	Voorbeeld
samenvouwbare bomen een hiërarchie met meerdere niveaus om containerinhoud weer te geven.	In dit voorbeeld worden de draaidriehoeken links van de gekoppelde container geplaatst.
samenvouwbare lijsten een hiërarchie op twee niveaus om aanvullende informatie weer te geven.	In dit voorbeeld worden de draaidriehoeken links van de bijbehorende lijstitems geplaatst.

Voorbeeldpijlen

Net als dubbele punthaken wordt aanvullende informatie weergegeven of verborgen. Het item blijft uitgevouwen totdat de gebruiker het samenvouwen. In tegenstelling tot punthaken hebben de glyphs een grafische weergave van de actie, meestal met een pijl die aangeeft wat er gebeurt.

In deze voorbeelden van Microsoft Windows Media Player hebben de glyphs pijlen die de actie voorstellen die zal plaatsvinden.

Voorbeeldpijlen zijn het beste gereserveerd voor situaties waarin een standaardhaak niet voldoende communiceert over het gedrag van het besturingselement, bijvoorbeeld wanneer de openbaarmaking complex is of er meer dan één type openbaarmaking is.

Richtsnoeren

Algemeen

• Selecteer het patroon voor progressieve openbaarmaking op basis van het gebruik ervan. Zie de vorige tabel voor een beschrijving van elk gebruikspatroon.

• Gebruik geen koppelingen voor progressieve besturingselementen voor openbaarmaking. Gebruik alleen de progressieve besturingselementen voor openbaarmaking die worden weergegeven in de sectie Gebruikspatronen. Gebruik echter koppelingen om naar Help-onderwerpen te navigeren.

  juist:

  

  Onjuist:

  

  In het onjuiste voorbeeld wordt een koppeling gebruikt om meer opties weer te geven. Dit gebruik zou juist zijn als de koppeling naar een andere pagina of dialoogvenster is genavigeerd of een Help-onderwerp heeft weergegeven.

Interactie

• Voor punthaken en pijlen die niet rechtstreeks zijn gelabeld, gebruikt u knopinfo om te beschrijven wat ze doen.

  

  In dit voorbeeld geeft de knopinfo het effect aan van een niet-gelabeld punthaak besturingselement.

• Als een gebruiker een item uitvouwt of samenvouwt, blijft de status behouden, zodat dit van kracht wordt wanneer het venster de volgende keer wordt weergegeven, tenzij gebruikers waarschijnlijk liever beginnen met de standaardstatus. De status behouden per venster, per gebruiker.

• Zorg ervoor dat alle uitgevouwen inhoud kan worden samengevouwen en omgekeerd, en dat de inverse bewerking duidelijk is. Dit moedigt verkenning aan en vermindert frustratie. De beste manier om de inverse bewerking duidelijk te maken, is door het beheer op dezelfde vaste locatie te houden. Als u het besturingselement wilt verplaatsen, houdt u het op dezelfde relatieve locatie binnen een visueel uniek gebied.

  Onjuist:

  

  

  Als u in dit voorbeeld op de knop Vervangen klikt met de dubbele punthaak, wordt de Vervangen door tekstvak weergegeven. Zodra dit is gebeurd, wordt de uitvouwfunctie Vervangen de opdracht Vervangen, zodat u de oorspronkelijke staat niet kunt herstellen.

• Gebruik alleen de toegangssleutels die geschikt zijn voor het progressieve openbaarmakingspatroon, zoals vermeld in de sectie Gebruikspatronen. Gebruik Enter niet om progressieve openbaarmaking te activeren.

Presentatie

• Gebruik geen driehoekige pijlpunten voor een ander doel dan progressieve openbaarmaking.

  Onjuist:

  

  Hoewel dit voorbeeld geen progressief openbaarmakingspatroon is, suggereert het gebruik van een pijl hier dat opdrachten worden weergegeven in een pop-upvenster.

  juist:

  

  In dit voorbeeld wordt een opsommingsteken correct gebruikt.

• Verwijder progressieve besturingselementen voor openbaarmaking (niet uitschakelen) die niet van toepassing zijn in de huidige context. Progressieve besturingselementen voor openbaarmaking moeten altijd hun belofte leveren, dus verwijder ze wanneer er geen meer informatie beschikbaar is.

  Onjuist:

  

  In dit voorbeeld is een progressief openbaarmakingsbeheer dat niet van toepassing is, onjuist uitgeschakeld.

Punthaken

• Gebruik enkele punthaken om op de plaats weer te geven of te verbergen. Gebruik dubbele dubbele punthaken om weer te geven of te verbergen met behulp van een snelmenu. U moet echter altijd dubbele punthaken gebruiken voor opdrachtknoppen met interne labels.

  juist:

  

  Onjuist:

  

  In het onjuiste voorbeeld wordt een dubbele dubbele punthaak gebruikt voor in-place progressieve openbaarmaking.

  juist:

  

  In dit voorbeeld wordt een dubbele dubbele punthaak gebruikt voor in-place progressieve openbaarmaking, omdat het een opdrachtknop met een intern label is.

• Geef een visuele relatie op tussen de dubbele punthaak en het bijbehorende besturingselement. Omdat in-place punthaken rechts van de bijbehorende gebruikersinterface worden geplaatst en rechts zijn uitgelijnd, kan er een behoorlijke afstand zijn tussen een dubbele punthaak en het bijbehorende besturingselement.

  juist:

  

  In dit voorbeeld is er een duidelijke relatie tussen de in-place dubbele punthaak en de bijbehorende gebruikersinterface.

  Onjuist:

  

  In dit voorbeeld is er geen duidelijke visuele relatie tussen de in-place dubbele punthaak en de bijbehorende gebruikersinterface, dus lijkt het in de ruimte te zweven.

Pijlen

• Gebruik geen pijlafbeeldingen die kunnen worden verward met Back, Forward, Go of Play. Gebruik eenvoudige driehoekige pijlpunten (pijlen zonder stengels) op neutrale achtergronden.

  juist:

  

  Deze pijlen zijn duidelijk progressieve besturingselementen voor openbaarmaking.

  Onjuist (voor progressieve openbaarmaking):

  

  Deze pijlen lijken niet op progressieve besturingselementen voor openbaarmaking.

  Onjuist (voor Terug, Doorsturen):

  

  Deze pijlen zien eruit als progressieve besturingselementen voor openbaarmaking, maar dat zijn ze niet.

Aanbevolen grootte en afstand

Aanbevolen grootte en afstand voor progressieve besturingselementen voor openbaarmaking.

Labels

• Voor dubbele punthaken op een opdrachtknop met een extern label:
  • Wijs een unieke toegangssleutel toe. Zie Toetsenbordvoor richtlijnen.
  • Gebruik hoofdlettergebruik inzinsstijl.
  • Schrijf het label als een woordgroep en gebruik geen eindpunctie.
  • Schrijf het label zodat het effect van het klikken op de knop wordt beschreven en wijzig het label wanneer de status wordt gewijzigd.
  • Als op het oppervlak altijd enkele opties, opdrachten of details worden weergegeven, gebruikt u de volgende labelparen:
    • Meer/minder opties. Gebruik deze optie voor opties of een combinatie van opties, opdrachten en details.
    • Meer/minder opdrachten. Alleen gebruiken voor opdrachten.
    • Meer/minder details. Alleen gebruiken voor informatie.
    • Meer/minder <objectnaam>. Gebruiken voor andere objecttypen, zoals mappen.
  • Anders:
    • Opties weergeven/verbergen. Gebruik deze optie voor opties of een combinatie van opties, opdrachten en details.
    • Opdrachten weergeven/verbergen. Alleen gebruiken voor opdrachten.
    • Details weergeven/verbergen. Alleen gebruiken voor informatie.
    • >objectnaam <weergeven/verbergen. Gebruiken voor andere objecttypen, zoals mappen.
• Voor dubbele punthaken op een opdrachtknop met een intern label volgt u de standaardknop opdrachtknop richtlijnen.

Documentatie

Wanneer u verwijst naar progressieve besturingselementen voor openbaarmaking:

• Als het besturingselement een vast label heeft, raadpleegt u het besturingselement alleen met het bijbehorende label; probeer het besturingselement niet te beschrijven. Gebruik de exacte labeltekst, inclusief hoofdlettergebruik, maar neem het onderstrepingsteken van de toegangssleutel niet op.

• Als het besturingselement geen label heeft of niet is opgelost, raadpleegt u het besturingselement op basis van het type: dubbele punthaak, pijl, driehoek of plus-/min-knop. Beschrijf indien nodig ook de locatie van het besturingselement. Als het besturingselement dynamisch wordt weergegeven, zoals de paginaruimte besturingselement, start u de verwijzing door te beschrijven hoe het besturingselement wordt weergegeven.

  voorbeeld: Als u de bestanden in een map wilt weergeven, verplaatst u de aanwijzer naar het begin van de mapnaam en klikt u vervolgens op het driehoekje naast de map.

• Verwijs niet naar het besturingselement als een knop, tenzij u contrasteert met andere progressieve besturingselementen voor openbaarmaking die geen knoppen zijn.

• Als u de interactie van de gebruiker wilt beschrijven, klikt u op. Indien nodig voor duidelijkheid, klikt u op... om uit te vouwen of samen te vouwen.

• Maak het label indien mogelijk op met vetgedrukte tekst. Anders plaatst u het label alleen tussen aanhalingstekens indien nodig om verwarring te voorkomen.

Voorbeelden:

• (Voor een dubbele punthaak) Als u de bestandsgrootte wilt bepalen, klikt u op Details.
• (Voor een pijl) Als u alle opties wilt zien, klikt u op de pijl naast het vak Zoeken.
• (Voor plus/min) Als u de afbeelding wilt weergeven, klikt u op Afbeeldingen.