Use the Wonder Bar

Important

This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here. The functionality and APIs described here are available in the emulator image and SDK version listed on the Get Windows dev tools page, but may not be available elsewhere.

What is the Wonder Bar?

Wonder Bar is a region available in the laptop posture that helps customers be more productive by offering additional input options to augment the keyboard. It also offers opportunities for customers to multi-task through tools, ambient info, or other app experiences that complement their task at hand.

illustration of dual-screen device with Wonder Bar

The Wonder Bar on Surface Neo

Wonder Bar offers elevated value in laptop posture

Dual-screen devices offer a variety of different postures, such as having two screens side by side like a book, or having one screen at an angle while the other lies flat — reminiscent of a traditional laptop. These postures increase productivity by letting the customer use the device in the way that best fits their needs at the time.

When customers put the device in the laptop posture, they have the option to magnetically attach a hardware keyboard to the bottom screen. This lets them perform focused tasks with the ease of typing that a physical keyboard brings. When the keyboard is snapped to the lower edge of the bottom screen, away from the middle seam, the strip of screen above the keyboard is what we call the Wonder Bar.

The Wonder Bar is also available when the on-screen keyboard is used, when the customer changes the on-screen keyboard mode to one with Wonder Bar. In that case, the Wonder Bar is above the on-screen keyboard on the bottom screen.

image that shows the variety of postures, with laptop posture highlighted

The Wonder Bar in laptop posture

Ergonomic advantages

When customers perform tasks that involve text input, they will likely have their hands near the keyboard. There are ergonomic advantages to having other types of input in the same area, such as the virtual touchpad, emojis, GIFs, and typing suggestions. This way, navigation, particularly with precision cursor input, as well as expressive input, are both at their fingertips when they switch between different types of activity to perform their task.

illustration of person interacting with Wonder Bar with hand on keyboard

Ergonomic advantages of the Wonder Bar

Multi-tasking as a key value

Wonder Bar supports the multi-tasking behaviors that customers typically do on traditional laptops. Whether it is keeping an eye on a sports game while working, quickly jotting down a thought on a sticky note while typing up an email, or navigating to the next song while focusing on a presentation, we see endless opportunities for Wonder Bar to be just the right space that supports this kind of peripheral multi-tasking.

Wonder Bar principles

There is great value in offering complementary tools and multi-tasking experiences to customers. However, what is put in the Wonder Bar should be intentional, to avoid overloading customers with distracting experiences. Customers should be given good reason to spread their attention when we promote multi-tasking, and the interaction between Wonder Bar experiences and the user's main focus must be thoughtful.

Here are some principles that guide the use of the Wonder Bar:

  • Precision input is always accessible

    For deeper productivity tasks, precision input is invaluable. Wonder Bar ensures that customers are always able to access the precision touchpad for finer navigation.

  • Wonder Bar behaviors are predictable

    Customers should feel empowered to enjoy the benefits of Wonder Bar to the extent they see fit for their scenarios. The different experiences that are available follow a consistent layering model (detailed later), and navigation between Compact Overlay windows is consistent with the overall navigation system of Windows 10X.

  • Experiences are not exclusive to Wonder Bar

    Wonder Bar is not offered in every posture, so customers should not feel that they will miss out on experiences if they are not in the laptop posture. Wonder Bar exposes certain experiences to elevate the user's productivity in that specific posture, but customers should still be able to access those functionalities in other postures.

  • The user's physical context is always considered

    The nature of Wonder Bar is inseparable from the physical posture of the device and the customer's behaviors in that posture. Ergonomics, and the user's gaze region and attention, are important considerations when crafting experiences for Wonder Bar. It's also important to consider the position of the device in relation to the position of the customer—they are most likely seated, with the device on their lap or on the table.

  • Simple experiences are best

    From key insights learned from research, we find that for multi-tasking scenarios, lightweight experiences that are low in complexity and involve only simple interactions are most successful. Wonder Bar is designed to prioritize the user's ease and peace of mind.

Note

Of course, we want to remain humble and continue to gain insights into the intent of customers and app developers for the Wonder Bar region. We expect to evolve our designs and model for Wonder Bar as we continue to get your feedback.

System and app integration points

In the following sections, we go into more detail about how the system uses Wonder Bar for general input functionalities, as well as app integration points you can leverage in order to build Wonder Bar experiences for your apps.

General input functionality

Windows 10X uses Wonder Bar to provide both a virtual touchpad and rich input.

Virtual touchpad

The system provides a familiar and precise touchpad to meet the productivity expectations of customers. Keyboard and precision input (mouse or touchpad) often go hand in hand. Customers will be able to use familiar gestures, including multi-finger gestures, on this touchpad, so it is natural to their existing workflow. The touchpad is the default experience in the Wonder Bar and shares the space with app experiences when they're present.

In addition, customers can ink anywhere within the touchpad region. This lets them jot a quick note while in the middle of other tasks, which is a common and intuitive multi-tasking scenario.

illustration of hand using gestures in touchpad

Virtual touchpad in the Wonder Bar

Rich input

The system lets customers input text suggestions, emojis, GIFs, and other types of expressions.

When customers enter text while Wonder Bar is visible, using either the physical or on-screen keyboard, the candidate bar populates with intelligent typing suggestions that help customers type more effectively. The candidate bar also contains the entry point into the rich input panel, where emojis, GIFs, and other types of expressions are housed. Customers can also easily access text from their clipboard.

illustration of rich input

Rich input using the Wonder Bar

App integration overview

Wonder Bar is a surface for apps to show simple information or controls that the user can consume or interact with alongside the content on their main screen. To enable this, we've enhanced two existing Windows concepts to work automatically with the Wonder Bar and serve as integration points for your app: System Media Transport Controls and Compact Overlay mode.

When you use either of these features on Windows 10X while the Wonder Bar is present, content from your app will be presented in the Wonder Bar—there's no additional work to do!

System Media Transport Controls

The SystemMediaTransportControls class lets you hook into a system-wide transport control for media. These controls provide a consistent way for users to control media playback for all running media apps that use MediaPlayer for playback.

  • When the Wonder Bar is present, the transport controls are surfaced in the Wonder Bar. Outside of Wonder Bar, the transport controls are also available in the Action Center.

illustration of MTC in Wonder Bar

System Media Transport Controls in the Wonder Bar

  • When the Wonder Bar is not present, the transport controls appear only in the Action Center.

illustration of MTC in Windows 10X Action Center

System Media Transport Controls in the Action Center

For more info about how to use these controls, see Integrate with the System Media Transport Controls and the SystemMediaTransportControls sample.

Compact Overlay

Compact Overlay (also known as Picture-in-Picture) is a minimal version of your app window. Typically, Compact Overlay results in a floating, always-on-top window that contains the content of your app. The most common use for this is to create a floating video window, so you can watch something while interacting with other apps and not have the video be occluded.

illustration of media playing

Media in mini always-on-top mode on Windows 10

Beyond media, there are other uses as well, where an intentional reduction of your app content into a mini view can help customers multi-task. For example, Window's Calculator app has an always-on-top mode that gives you a small, always-available version of the standard calculator layout.

illustration of calculator

Calculator in mini always-on-top mode on Windows 10

Similar to the System Media Transport Controls, when the Wonder Bar is present, your Compact Overlay window is displayed in the Wonder Bar (based on the interaction model). When it is not present, your Compact Overlay window is placed in one of the available corners of the screen, and a user can move it between any of the available corners.

illustration of media playing

Media in Wonder Bar vs. in mini always-on-top mode on Windows 10X

If you have multiple Compact Overlay windows, the most recently created one is shown in the Wonder Bar by default. Customers can select which they want to be visible (as described in the interaction model section), but they can't show more than one at a time in the Wonder Bar.

You can show a window in Compact Overlay mode using either the AppWindow or ApplicationView APIs. At a high level, these are the steps to use Compact Overlay:

Using AppWindow

For more info, see Show multiple views with AppWindow.

Using ApplicationView

For more info, see Show multiple views with ApplicationView.

Interaction model

The interaction model describes how your app content interacts with the Wonder Bar.

Available app region

For both app integration points (System Media Transport Controls or Compact Overlay), the available app region takes up half the width of the Wonder Bar. The following image illustrates the minimum effective pixel dimensions for your app's Compact Overlay window in Wonder Bar—specifically on Surface Neo—with both hardware and on-screen keyboards.

Important

The size of the Wonder Bar region may vary on different Windows 10X devices. We expect it to be at its minimum size on Surface Neo. It's important to design your experiences to be responsive, so they will scale across different device sizes.

The height of the app region might be different depending on whether a hardware or on-screen keyboard is in use, due to varying behavior of the candidate bar. With a hardware keyboard, the candidate bar will come up only when there is text in focus in the top screen—the candidate bar will temporarily occlude the bottom region of any app experience and the touchpad. It's good to be aware of this behavior when you plan to integrate with the Wonder Bar through Compact Overlay.

Customers can also switch the app region from left to right with the built-in affordance in Wonder Bar, so it's important to consider that—especially if you are designing interactions that are directional or leverage the physical edge.

illustration available app region with a hardware keyboard vs on-screen keyboard

Available app region with a hardware keyboard vs. on-screen keyboard

Z-order hierarchy

Some of the surfaces within Wonder Bar, such as the candidate bar, may only be relevant at certain times, like when there is text input. Therefore, we use a Z-order stacking hierarchy to determine what experiences are in view at a given time.

For Compact Overlay windows, the most recent one is stacked on top of the others, and customers are able to switch focus between the two windows via Taskview and Taskbar.

illustration of 3D layering of the experiences

Layering of experiences in the Wonder Bar