Redigeeri

Widget interaction design guidance

This article provides detailed guidance for designing interaction for Windows widgets.

A widget should be glanceable and focused, and should represent a single aspect of the app's primary purpose. Widgets may provide one or more calls to action. When the user clicks on a call to action, the widget should launch the associated app or website instead of implementing the action in the widget itself. A widget has only one primary page that can house multiple interactions. Clicking on an item in the widget should never take you to a completely different view of the widget. For example, in a weather widget you might show the weather for multiple days but clicking on one of the days will not expand details inline, but will instead launch the app or web.

The following are the maximum number of touch points recommended for each supported widget size.

Widget size Maximum touchpoints
small 1
medium 3
large 4

Don't design the widget around the following navigation patterns:

  • Pivots that switch between unrelated experiences.
  • Second-level pages for detailed tasks.
  • Vertical or horizontal scrolling to reach the widget's primary information.

These are design constraints for a glanceable experience, not a statement that HTML web content can't implement scrolling or navigation. For a web widget, keep content usable within each supported size and move detailed tasks to the app or website.

Containers

The following images show example uses of container elements in a widget template. The containers group visual elements into columns and rows to create a hierarchical grid structure.

Four images of widgets that illustrate containers. The widgets in the images have elements divided into rows and columns to provide a hierarchical grid structure.

The following images show example uses of image link elements in a widget template.

Two images of widgets that illustrate image links. The images are arranged in columns and rows making a grid.

Pagination

The following images show examples of pagination in a widget template. The pagination controls can be aligned horizontally or vertically. Navigation arrows appear in response to a cursor hover.

This set of two images show horizontal pagination. In the first image, a column of dots is aligned along the right side. One dot is larger to indicate the currently active page. In the second image a cursor mouses over an down-pointing arrow at the bottom of the widget that lets the user move to the next page. There is a matching up-pointing arrow on the top of the widget for navigating to the previous page.

This set of two images show vertical pagination. In the first image, a row of dots is aligned along the bottom. One dot is larger to indicate the currently active page. In the second image a cursor mouses over an right-pointing arrow on the right side of the widget that lets the user move to the next page. There is a matching left-pointing arrow on the left side of the widget for navigating to the previous page.

These two images demonstrate how the pagination controls look when the widget has an image background.

The following images show example of hyperlinks in a widget template.

Two images of widgets that illustrate hyperlinks. The first image shows a hyperlinked string of text. The text is plain. In the second image, a mouse cursor hovers over the hyperlink, which causes the text to be underlined.

An image showing a hyperlink centered at the bottom of the widget, just above the horizontal row of pagination dots. A red X indicates that the pagination dots and the hyperlink should not be in the same space. On the right another image shows the hyperlink at the bottom, but the pagination dots are in aligned vertically in a column on the right side. A green check indicates that this placement of the two elements is correct.

Two images of widgets that illustrate dropdown menus. In the left image the dropdown menu is collapsed. In the right image the dropdown is expanded and extends over the border of the widget

The illustration shows a host-rendered dropdown extending beyond the card boundary. Don't assume that custom HTML or a web widget's menus can render outside their content area. Test menu placement and clipping in the target host. Menus should dismiss when the user clicks outside them.

  • Viimati värskendatud