Richtlijnen voor het ontwerpen van widgetinteractie

Dit artikel bevat gedetailleerde richtlijnen voor het ontwerpen van interactie voor Windows widgets.

Een widget moet in één oogopslag te begrijpen en gericht zijn, en één aspect van het primaire doel van de app weergeven. Widgets kunnen een of meer aanroepen naar actie bieden. Wanneer de gebruiker op een oproep om actie te ondernemen klikt, moet de widget de bijbehorende app of website starten in plaats van de actie in de widget zelf te implementeren. Een widget heeft slechts één primaire pagina die meerdere interacties kan bevatten. Als u op een item in de widget klikt, moet u nooit naar een volledig andere weergave van de widget gaan. In een weerwidget kunt u bijvoorbeeld het weer voor meerdere dagen weergeven, maar als u op een van de dagen klikt, worden de details niet inline uitgevouwen, maar wordt in plaats daarvan de app of het web gestart.

Hieronder ziet u het maximum aantal aanraakpunten dat wordt aanbevolen voor elke ondersteunde widgetgrootte.

Widgetgrootte Maximum aantal aanraakpunten
klein 1
Gemiddeld 3
groot formaat 4

De volgende navigatie-elementen worden niet ondersteund in Windows Widgets:

  • Pivots worden niet ondersteund in widgets
  • L2-pagina's worden niet ondersteund in widgets
  • Verticaal of horizontaal schuiven wordt niet ondersteund in Widgets

Containers

In de volgende afbeeldingen ziet u een voorbeeld van het gebruik van containerelementen in een widgetsjabloon. De containers groeperen visuele elementen in kolommen en rijen om een hiërarchische rasterstructuur te maken.

Vier afbeeldingen van widgets die containers illustreren. De widgets in de afbeeldingen hebben elementen onderverdeeld in rijen en kolommen om een hiërarchische rasterstructuur te bieden.

In de volgende afbeeldingen ziet u een voorbeeld van het gebruik van afbeeldingskoppelingselementen in een widgetsjabloon.

Twee afbeeldingen van widgets die afbeeldingskoppelingen illustreren. De afbeeldingen worden gerangschikt in kolommen en rijen die een raster maken.

Pagination

In de volgende afbeeldingen ziet u voorbeelden van paginering in een widgetsjabloon. De pagineringsbesturingselementen kunnen horizontaal of verticaal worden uitgelijnd. Navigatiepijlen worden weergegeven als reactie op een cursoraanwijzer.

Deze set met twee afbeeldingen toont horizontale paginering. In de eerste afbeelding wordt een kolom met puntjes aan de rechterkant uitgelijnd. Eén punt is groter om de huidige actieve pagina aan te geven. In de tweede afbeelding beweegt een cursor boven een pijl-omlaag onder aan de widget waarmee de gebruiker naar de volgende pagina kan gaan. Er is een overeenkomende pijl boven aan de widget om naar de vorige pagina te navigeren.

Deze set met twee afbeeldingen toont verticale paginering. In de eerste afbeelding wordt een rij met punten uitgelijnd langs de onderkant. Eén punt is groter om de huidige actieve pagina aan te geven. In de tweede afbeelding beweegt een cursor over een pijl naar rechts aan de rechterkant van de widget waarmee de gebruiker naar de volgende pagina kan gaan. Er is een overeenkomende pijl links in de widget om naar de vorige pagina te navigeren.

Deze twee afbeeldingen laten zien hoe de pagineringsbesturingselementen eruit zien wanneer de widget een achtergrondafbeelding heeft.

In de volgende afbeeldingen ziet u een voorbeeld van hyperlinks in een widgetsjabloon.

Twee afbeeldingen van widgets die hyperlinks illustreren. In de eerste afbeelding ziet u een hyperlinktekenreeks met tekst. De tekst is zonder opmaak. In de tweede afbeelding beweegt een muisaanwijzer over de hyperlink, waardoor de tekst wordt onderstreept.

Een afbeelding met een hyperlink gecentreerd onder aan de widget, net boven de horizontale rij met pagineringspunten. Een rode X geeft aan dat de pagineringspunten en de hyperlink niet in dezelfde ruimte mogen staan. Rechts ziet u een andere afbeelding met de hyperlink onderaan, maar de pagineringspunten worden verticaal uitgelijnd in een kolom aan de rechterkant. Een groene controle geeft aan dat deze plaatsing van de twee elementen juist is.

Twee afbeeldingen van widgets die vervolgkeuzemenu's illustreren. In de linker afbeelding is het vervolgkeuzemenu ingeklapt. In de rechter afbeelding is het vervolgkeuzemenu uitgeklapt en steekt het over de rand van de widget heen

Widgets kunnen tijdelijk iets verder gaan dan hun widgetgrootte als de gebruiker interactie heeft met een menu of vervolgkeuzelijst. Het menugedrag moet zo zijn dat het menu wordt gesloten wanneer de gebruiker buiten het menu-/dropdowngebied klikt.

  • Last updated on