Dialoogvensters en uitklapmenu's

Dialoogvensters en flyouts zijn tijdelijke UI-elementen die worden weergegeven wanneer er iets gebeurt waarvoor melding, goedkeuring of aanvullende informatie van de gebruiker is vereist.

Dialogen

Dialoogvensters zijn modale UI-overlays die contextuele app-informatie bieden. Dialoogvensters blokkeren interacties met het app-venster totdat ze expliciet worden gesloten. Ze vragen vaak om een actie van de gebruiker.

Flyouts

Een flyout is een lichtgewicht contextuele pop-up waarin de gebruikersinterface wordt weergegeven met betrekking tot wat de gebruiker doet. Het bevat plaatsings- en formaatlogica en kan worden gebruikt om een secundair besturingselement weer te geven of meer details over een item weer te geven.

In tegenstelling tot een dialoogvenster kan een uitklapmenu snel worden gesloten door ergens buiten het uitklapmenu te tikken of te klikken, op de Esc-toets of de knop Vorige te drukken, het formaat van het app-venster te wijzigen of de oriëntatie van het apparaat te wijzigen.

Is dit de juiste controle?

Dialoogvensters en flyouts zorgen ervoor dat gebruikers op de hoogte zijn van belangrijke informatie, maar ze verstoren ook de gebruikerservaring. Omdat dialoogvensters modaal (blokkerend) zijn, onderbreken ze gebruikers, waardoor ze niets anders kunnen doen totdat ze met het dialoogvenster communiceren. Uitklapvensters bieden een minder schokkende ervaring, maar het weergeven van te veel uitklapvensters kan storend zijn.

Nadat u hebt vastgesteld dat u een dialoogvenster of flyout wilt gebruiken, moet u kiezen welke u wilt gebruiken.

Aangezien dialoogvensters interacties blokkeren en flyouts dit niet doen, moeten dialoogvensters worden gereserveerd voor situaties waarin u wilt dat de gebruiker alles laat vallen om zich te concentreren op een specifiek stukje informatie of een vraag beantwoordt. Flyouts kunnen daarentegen worden gebruikt wanneer u de aandacht wilt vestigen op iets, maar het is in orde als de gebruiker deze wil negeren.

Een dialoogvenster gebruiken voor...

• Het uitdrukken van belangrijke informatie die de gebruiker moet lezen en bevestigen voordat u doorgaat. Voorbeelden zijn:
  • Wanneer de beveiliging van de gebruiker mogelijk is aangetast
  • Wanneer de gebruiker op het punt staat om een waardevol activum permanent te wijzigen
  • Wanneer de gebruiker op het punt staat een waardevol activum te verwijderen
  • Een aankoop in de app bevestigen
• Foutberichten die van toepassing zijn op de algemene app-context, zoals een verbindingsfout.
• Vragen wanneer de app een blokkeringsvraag moet stellen aan de gebruiker, bijvoorbeeld wanneer de app niet namens de gebruiker kan kiezen. Een blokkerende vraag kan niet worden genegeerd of uitgesteld en moet de gebruiker een goed gedefinieerde keuze bieden.

Een uitklapmenu gebruiken voor...

• Aanvullende informatie verzamelen die nodig is voordat een actie kan worden voltooid.
• Het weergeven van informatie die slechts een deel van de tijd relevant is. Wanneer de gebruiker bijvoorbeeld in een app voor de fotogalerie op een miniatuur van een afbeelding klikt, kunt u een flyout gebruiken om een grote versie van de afbeelding weer te geven.
• Meer informatie weergeven, zoals details of langere beschrijvingen van een item op de pagina.

Manieren om dialoogvensters en flyouts te vermijden

Houd rekening met het belang van de informatie die u wilt delen: is het belangrijk genoeg om de gebruiker te onderbreken? Bedenk ook hoe vaak de informatie moet worden weergegeven; Als u om de paar minuten een dialoogvenster of melding weergeeft, kunt u ruimte voor deze informatie toewijzen in de primaire gebruikersinterface. In een chatclient, in plaats van een flyout weer te geven telkens wanneer een vriend zich aanmeldt, kunt u bijvoorbeeld een lijst met vrienden weergeven die op dit moment online zijn en vrienden markeren terwijl ze zich aanmelden.

Dialoogvensters worden vaak gebruikt om een actie te bevestigen (zoals het verwijderen van een bestand) voordat u het uitvoert. Als u verwacht dat de gebruiker een bepaalde actie regelmatig uitvoert, kunt u overwegen om de actie ongedaan te maken als dit een fout was, in plaats van dat gebruikers elke keer de actie moeten bevestigen.

Voorbeelden

• Als u de WinUI 3 Gallery-app hebt geïnstalleerd, klikt u hier om de app te openen en de ContentDialog of Flyout in actie te zien. Download de app uit de Microsoft Store of bezoek GitHubvoor de broncode.

Hoe een dialoogvenster te maken

Zie het artikel Dialogen.

Hoe een flyout te maken

Zie het flyout-artikel.