Designing the User Experience for the Gadget 

  • Article

Because Windows SideShow-compatible devices vary widely in form, it's nearly impossible to predict what type of device your gadget will appear on. Therefore, the decisions you make when you design your gadget—such as navigation and information task flow, menu item inclusion, and button behavior—are critical to creating a good user experience on all devices.

Invest in good task flow design

Keep in mind that users are likely to have very limited control over their devices. You can design a good task flow on the device by streamlining the user's common navigation tasks.

On devices that run the Microsoft .NET Micro Framework firmware, the interface is optimized to navigate gadgets whose pages are organized as a tree structure. We recommend that you group similar information together as nodes in a hierarchal tree structure. For example, if you're writing a gadget that extends an e-mail application, you can first display a menu page populated with a list of e-mail messages. When the user chooses a message from the menu, open a content page to display the message text.

The following illustrations show how a user navigates to and reads an e-mail message by using the Windows Mail gadget for Windows SideShow.

Also consider what navigation model makes the most sense for the information in your gadget. Should users navigate laterally among menu pages and among content pages, or should users always go back to the index to get from one section to the next? The answer to this question will vary based in part on whether the information is all of the same type, whether the information comes from a single or multiple sources, and the quantity of information in question. For example, if you're writing a gadget that extends a calendar application, you can design the gadget so that the context menu or the RIGHT ARROW and LEFT ARROW buttons can be used to navigate laterally among days on the calendar (menu pages) and among individual appointments (content pages).

Glance content

Glance content is text-only content that typically contains the highest level of summary information for a gadget; this may be the temperature in selected cities for a weather gadget, track information about what is currently playing for a media player gadget, or recent mail headers from the user's inbox for a mail gadget.

Examples of glance content include:

  • 7 unread e-mail messages
  • Next Appointment: 11 A.M. at 123 Main

Glance content is a very important part of your gadget because it is available for nearly all of the different Windows SideShow-compatible devices, even devices that have only single-line displays and no buttons.

There are two types of glance content—summary and extended. The first two lines of glance content are the summary content. Any following lines constitute extended content. Most devices can display summary glance content and many devices can display extended glance content as well.

When determining what to include in your gadget's glance content, make sure that the most important information is in the summary glance content (the first two lines). Also be sure to put the most important information at the start of each line of glance content, because it may get truncated to fit the display. On devices running the .NET Micro Framework, glance content does not wrap to the next line; instead each line is truncated to fit the display. For example, for a mail gadget, consider whether it is most important to the user to know the sender of the mail or its subject.

If your gadget updates with new content regularly, or if the content is time-sensitive, the second line of glance content for your gadget should be a time and date stamp indicating when content was last updated. For example, in the Windows Mail gadget the second line of content reads "Last updated: [timestamp] [datestamp]."

For more information about glance content, see ISideShowContent::ContentId Property Property and ISideShowContentManager::Add Method Method.

Use the expected button behaviors

Though not all Windows SideShow-compatible devices have buttons, for devices that have buttons the button actions should be consistent across gadgets, to the extent possible. Devices that run the .NET Micro Framework will include all seven of the buttons referenced below. Other devices that support the Simple Content Format (SCF) endpoint will have a minimum of five buttons. (Devices that support SCF are not required to have LEFT ARROW and RIGHT ARROW buttons.)

ENTER button

The ENTER button chooses the selected item. When a user presses that button to choose the selected item in a menu page, the content page for that item generally opens.

Typically, the ENTER button performs the following action:

  • On the home page: Opens the gadget
  • In menu pages: Opens the selected item
  • In content pages:  No default behavior
  • In dialog boxes:  Chooses the highlighted button, or dismisses a notification without buttons
  • In context menus: Performs the highlighted action

BACK button

The BACK button returns the user to the previous menu page in the page stack. When there are no more menu pages in the page stack, the BACK button returns the user to the home page. If the default BACK button behavior doesn’t result in a logical task flow, gadgets can send the user to a more suitable page in the gadget.

UP ARROW and DOWN ARROW buttons

The behavior of the UP ARROW and DOWN ARROW buttons is fixed; these buttons cannot be overridden by gadgets. The UP ARROW and DOWN ARROW buttons perform the following actions:

  • On the home page: Change the selection
  • In menu pages: Change the selection
  • In content pages: Scroll within the content
  • In dialog boxes: Scroll within the content
  • In context menus: Change the selection

LEFT ARROW and RIGHT ARROW buttons

For the LEFT ARROW and RIGHT ARROW buttons, you can specify the behavior of your gadget within menu pages and content pages.

  • On the home page: Move between the first and second page of glance content for the selected gadget when available; otherwise no action
  • In menu pages: Specified by the gadget (examples below)
  • In content pages: Specified by the gadget (examples below)
  • In dialog boxes: Not applicable
  • In context menus: Not applicable

The behavior of the LEFT ARROW and RIGHT ARROW buttons should be determined by the context of the specific gadget:

  • On menu pages, RIGHT ARROW and LEFT ARROW buttons are sometimes used to move between lists or sections of a list. For example, in a calendar gadget there might be a "day view" menu page for which the RIGHT ARROW and LEFT ARROW buttons move to the next and previous days. Alternatively, in a contacts gadget the menu page might contain a partial list of contacts divided into sections, such as A-E and F-J, and the RIGHT ARROW and LEFT ARROW buttons on this page move to the next section of the contact list.
  • On content pages, RIGHT ARROW and LEFT ARROW buttons are often used to move between the next item and the previous item. Some examples: appointments in a calendar, pictures in a slideshow, songs in a playlist. Alternatively, the arrow buttons can be used to move right and left in the current view (on a map, for example).

Design context menus for a range of devices

Windows SideShow-compatible devices are often built with small screens to maximize their compactness. When designing for a small screen space, consider the following points:

  • List the menu items in a logical order—by importance or likelihood of first use—with the default item listed at the top of the list.
  • For menu items that occur in multiple menus, keep the order of menu items the same across all menus.
  • Disable items that don't apply in a particular circumstance, when your users can easily understand why the items don't apply. For example, disable Next Message in the case where a user is viewing the last message in a list of messages.
  • Include only items that apply to the given menu. Adding inapplicable menu items can result in context menus with too many items to fit on the screen. Users become confused when an item is available for selection but doesn't do anything when selected.

You cannot predict all the devices that your users may possess—or exactly which features are available on those devices. Because Windows SideShow technology is used on devices that have a wide range of capabilities, it is important to consider these variations when you design and test your gadget.

  • Open the context menu as the default action only if it's not clear what action users will expect when they press ENTER. For example, the Windows Media Player gadget opens a menu of possible actions when the user selects a song and then presses ENTER.
    The following screen shot shows the context menu that appears on a Windows SideShow-compatible device running the .NET Micro Framework when a user presses ENTER while a song is selected in the Windows Media Player gadget.
  • Replicate critical behaviors from the context menu in the RIGHT ARROW and LEFT ARROW buttons. Also do the converse, replicating the RIGHT ARROW and LEFT ARROW button actions in the context menu. Some devices do not have discoverable means of opening a menu (such as a MENU button), and some devices do not have RIGHT ARROW and LEFT ARROW buttons.

Use default text colors wherever possible

Although gadgets can send custom text color to the device, gadgets cannot detect the background color that is currently being displayed on the device. Therefore, it's possible for a gadget to send text color that matches the background color of the device screen, which would render the text unreadable.

You can avoid this situation by doing one of the following:

  • Rely on themes. The coordination of text and background colors in a theme ensures text legibility.
  • If your gadget must use specific colors, provide a background color or image to override the theme background and ensure sufficient contrast.

In the following screen shot, the e-mail gadget uses the default text colors of the theme as recommended.

Correct:

In the following screen shot, the e-mail gadget uses a custom text color and a custom background to ensure that the text is legible for all possible themes.

Incorrect:

In the following screen shot, the e-mail gadget uses a custom text color but not a custom background. As a result, the text is not legible when users select some themes.

Include an icon to brand your gadget

Because your icon will appear on the device and on the computer in Windows SideShow in Control Panel, a distinctive icon is one of the primary ways users will learn to recognize your gadget.

The following screen shot shows how gadget icons appear on the home page of a Windows SideShow-compatible device that is running the Microsoft .NET Micro Framework.

The following screen shot shows how gadget icons appear in the list of gadgets in Control Panel. Gadgets without a custom icon, like the Woodgrove Bank Customer List gadget, appear with the default Windows SideShow gadget icon.

Be sure to include an icon for your gadget in your installer. To ensure that the icon appears on the device and in Control Panel, provide an .ico file that includes at least the following sizes and corresponding color depths:

  • Pixel sizes: 16 × 16, 32 × 32, and 48 × 48. (You can include additional sizes for use in Windows, but these are the minimum required for Windows SideShow.)
  • Color depths: 32-bit with per-pixel alpha values (even if alpha is not used), 8-bit, and 4-bit. Each required size must be rendered in each of these color bit depths.

If you don't include an icon with all of the required sizes in your gadget's installer, your gadget will be represented in Control Panel and on the device by the default Windows SideShow gadget icon. For more information about creating icons for Windows Vista, see Icons in the Windows Vista User Experience Guidelines.