Premier Support Services
PSfD (Premier for Developers)
Premier Field Engineers
One of the design goals for Windows® 8 is that all of the new experiences being created for Windows are designed to be "Touch First." You will see this theme throughout the new features introduced with this version of Windows. Being "Touch First" means that the first and best method of interacting with these new interfaces in Windows is using touch-based gestures on a multi-touch display. Using the mouse and keyboard will still work in the majority of scenarios, but in most cases, these inputs are considered to be secondary.
It is with this concept of "Touch First" in mind that Microsoft created the new Windows Experience for Windows 8. The new Windows UI represents the largest change to the interface of Windows since Windows 3.11 and affects the majority of the Windows user experience. New versions of many of the apps and features using the new Windows UI have been introduced, including the Start screen, PC Settings, and Internet Explorer®, just to name a few.
The theme behind the look and feel of the new user experience in Windows 8 is our design language, which we refer to as the Microsoft design style. The Microsoft design style is very clean and relies heavily on motion, images, and typography using the Segoe font family. You may have seen other examples of other products using the Microsoft design style, such as Zune®, Windows Phone, and Xbox 360®.
Note: During the development of Windows 8, you likely heard the new Windows UI referred to as the Windows Metro style UI, or apps using the new model referred to as Windows Metro style apps. The term Metro is no longer being used by Microsoft, and care should be taken not to use this term when speaking with customers or posting information publicly. The Windows Metro style UI is now referred to as the new Windows UI or the new Windows Experience, and Windows Metro style apps are now referred to as Windows Store apps.
The first thing that you will see after signing into a Windows 8 PC is the Start screen.
Figure 1: Windows 8 Start screen
The Start screen completely replaces the Start menu that existed in previous versions of Windows. Almost all of the functionality from the old Start menu has been replaced and moved to the new Start screen. Instead of each app being exposed to the user as an individual icon, those apps will be represented as tiles instead, which we will go into more detail about in the section below.
Another major change in Windows 8 is in the way that the Start screen is accessed. Since Windows 95, every version of Windows has had a Start button on the taskbar in one form or another, but that is no longer the case for this release. The screenshot below shows the left side of the desktop taskbar, and as you can see, the first icon is a pinned app icon instead of the Start button.
Figure 2: No Start button
There are still two possible ways to get back to the Start screen using only the mouse:
Figure 3: Start screen overlay
In the traditional desktop interface, apps are launched using icons that are not much more than a small picture and a link to an executable. In the new Start screen, the concept of icons has evolved into a new concept for representing apps called Tiles. Tiles do far more than act as just a pointer to the EXE for an app. Tiles are an improvement over icons in several ways.
Figure 4: Live tiles
This ability to display additional information in a tile on the Start screen is only available to Windows Store apps, which is the new type of app introduced with Windows 8. We will go into more detail about Windows Store apps in the Windows Store apps module, but for now you should know that Windows Store apps are written explicitly for the new Windows UI in Windows 8.
The other type of apps that are supported in Windows 8 are desktop apps. Desktop apps are basically every Windows apps that existed before Windows 8, including apps like Adobe Photoshop and Microsoft Outlook 2010. Desktop apps can still have tiles on the Start screen, but they will be static, and consist of only the app's icon and title. The tiles for the Office apps in the screenshot below are examples of desktop app tiles.
Figure 5: Desktop app tiles
When a new Windows Store or desktop app is installed, it will get its own tile on the Start screen. These tiles can be unpinned however, and unpinning the tile does not uninstall the app. Similar to the older Start menu, tiles for desktop apps represent shortcuts to the app, and removing the shortcut does not remove the app.
If you want to unpin a tile from the Start screen, you can do this with either touch or a mouse and keyboard, and detailed in the table below.
Table 1: Accessing app commands for a tile
Place one finger on the tile and slide it down about half an inch (or one centimeter), and then raise your finger This is a flick gesture.
Mouse and Keyboard
Right-click on the tile.
Both actions reveal a pane at the bottom of the screen with actions that can be performed against the tile. To remove the tile, select the Unpin
from Start option. Doing this removes the tile from the Start screen, but does not uninstall the app it points to.
Figure 6: Unpin from Start
You can also select multiple tiles simultaneously, which allows you to quickly unpin several tiles from the Start screen at once. You can do this with the mouse and keyboard two different ways.
Figure 7: Select multiple tiles
Unpinning multiple tiles at once can be useful if you are personalizing your Start screen, or immediately after installing a desktop app, since many of them add numerous shortcuts to the Start Menu. This makes it easy to select all of the new tiles that aren't the main tile for that app that you installed, and then unpin them all at once.
Rearranging the tiles on your Start screen is a very simple process. Just use the mouse or your finger to drag the tile to the new location.
The tiles on the Start screen are arranged into columns and groups.
The Start screen gives you several choices for customizing your tile layout:
Figure 8: Change tile size
Note: Only Windows Store apps for which the developer has provided both small and large tiles can change tile sizes. Desktop apps cannot have large tiles.
Note: if you are trying to move a tile to the far end of your screen, you can do this quickly by dragging a tile to the top of the screen, at which point the Start screen will zoom out. From there, wherever you drag the tile to will zoom back in to that area of the Start screen.
In addition to rearranging tiles, the Start screen also provides for the ability to rearrange whole groups at once.
Figure 9: Zoom button
After zooming out from the Start screen, you can then rearrange groups the same way that you would tiles. From this view, you can also give groups a name using the app command for Name group.
Figure 10: Name group
The name you enter will be displayed above the group.
Figure 11: Group name
When you swipe up from the bottom edge or right-click in an app or on the Start screen, you will see a bar appear with the actions that are relevant for the current selection. These actions are referred to as app commands. The app commands that appear will change related to the view you are in or the tile or item that is selected. The concept is similar to the context menu that you see when you right-click in a desktop app.
Tip: You can access the app commands in an app or on Start with <Windows Key>+Z
For example, on Start, right-clicking on a tile will display app commands related to manipulating the tile or launching the app. Selecting multiple tiles changes the app commands displayed to only those related to manipulating multiple tiles. The sections below walk through the various commands that are available for tiles on Start.
Figure 12: App commands for a desktop app
Table 2: Description of app commands for desktop apps
Pin/Unpin from Start
Removes the app tile from the Start screen, but does not uninstall it.
Pin/Unpin to taskbar
Pins the app icon to the taskbar on the Windows desktop.
Opens the Programs and Features Control Panel.
Open new window
Opens a new instance of the app.
Run as administrator
Opens the app with administrator privileges.
Open file location
Opens Windows Explorer to the location where the app shortcut is stored.
Figure 13: App commands for a Windows Store app
Table 3: Description of app commands for Windows Store apps
Unpin from Start
Removes the tile for the app from the Start screen, but does not uninstall it.
Removes the app from the PC.
Note: Windows Store apps are uninstalled through their tiles, and do not appear in the Programs Control Panel.
Smaller (or Larger)
Displays either a small or large icon for the app. Most Windows Store app tiles have this ability. The app developer must provide both tile sizes to be able to toggle between large and small tiles.
Turn live tile on (or off)
Enables or disables live tiles, causing the tile to switch between displaying dynamic content based on the app and a static tile with a graphic and text. Not all tiles are capable of being Live Tiles.
Note: Some tiles, especially the inbox tiles, may have different options than those described above.
The app commands you see will be completely different than those shown above when you are in a Windows Store app. These options will be specific to the app in question.
Also, with Windows Store apps, you may see app commands appear on both the top and the bottom edge of the screen.
The Start screen is the place where you can pin tiles for your most commonly used apps, but how do you access the apps that are not pinned to Start? That is what the All apps page provides. You can think of the All apps page as the replacement for the All Programs section of the old Start Menu. You can access All apps through the app command that appears when you right-click on the background of the Start screen, where you will see an option for All apps. When you toggle this command, the All apps page is shown.
Figure 14: All Apps menu
In addition, the All Apps menu supports a Windows 8 feature called semantic zoom, which changes the view as you zoom out to show high-level groupings of your data. In this case, the data is your Start screen tiles in the apps view. You can use this zoomed-out view to quickly navigate to another location in on the Apps page.
Figure 15: Semantic view on Start screen
Charms provide a consistent way to access the key Windows features, enabling you to either perform actions against the app that is currently running or get back to the Start Screen. There are 5 charms:
You can access charms in a few different ways:
Note: A bezel is the thin strip of plastic surrounding a LCD screen on things like tablets, monitors, and laptop displays.
Figure 16: Accessing charms with your mouse
Accessing the charms displays a large clock floating on the left side of the screen. In addition to the time, the clock will display the date, network status, and battery status.
Figure 17: Clock displays with the charms
The Start charm is used to open the Start page from wherever you are in Windows. Pressing the Start charm a second time will take you back to the app that you were previously using. Pressing Start repeatedly will cycle back and forth between Start and the last app you were using.
Tip: The keyboard shortcut for the Start charm is just <Windows Key>.
The Search charm provides a quick way to search from anywhere. Search from this charm utilizes the Windows Search service, and the results returned when searching using the Search charm will depend on the scope that you have selected: Apps, Settings, or Files.
Figure 18: Search Apps
Figure 19: Search Settings
Figure 20: Search app using Share charm
The Start menu in Windows provided the ability to click Start and immediately begin typing, which made it very easy to find and launch new apps. This same feature is available in Windows 8. When you open the Start screen and begin typing, whatever you are typing is immediately sent to the text field in the Search charm, and then filtered to Searching Apps. If you know the name of the app, in most cases, you can just type in the name and press Enter and the app will launch.
The Share charm is intended to provide an easy way to share content. In order to share content, a Windows Store app must tell Windows that it supports the Sharing contract, meaning that other apps can share content using that app. For example, a Facebook app may register with the Share charm so that when you are in any other app, like watching a TV show in a Hulu app, you can share what you are watching on Facebook directly by using the Share charm without having to open the Facebook app. Other scenarios that the Share charm could be used for include the following:
Table 4: Sharing with the Share Charm
Select the Share charm.
Click the app you would like to use to share from the list.
A portion of the app may open allowing you to do things like enter a description. This interface is provided by the app used to share.
Figure 21: Select Share
Figure 22: Select app for sharing
Figure 23: Sharing interface of app displayed
The Settings charm will open a settings bar on the right that shows settings for the specific app that is currently in focus. For example, opening the Settings charm while in Internet Explorer will reveal settings that allow you to configure Internet Explorer‒specific settings.
The fact that the Settings charm applies to the app that is currently in focus is an important one. Within the new Windows UI, Microsoft is recommending that all Windows Store apps use the Settings charm as the main entry point for settings within the app. This should prevent situations where each app has its own implementation of a settings or options page, creating confusion for the user. Now the settings for any app that uses the new model should always be accessible through the Settings charm.
Figure 24: Settings pane for Internet Explorer
The Settings charm will also display additional information and options specifically related to Windows. This view will persist no matter where you open the Setting charm from. The Settings charm displays the following information:
Tip: Pressing <Windows Key>+I will open the Settings charm bar.
The Device charm enables to you send the content you are viewing to certain attached devices. If you are in an app that supports printing, you can print the content you are viewing from the Device charm.
The Device charm will show devices that can perform tasks relevant to the app that you are currently using. For example, Internet Explorer can use the Devices charm to print a webpage, display it on another screen, or share it with another PC using Near Field Communication (NFC).
Figure 25: Devices pane for Internet Explorer
The Device charm can also be used to change your multiple monitor configuration by selecting the Device Charm > Second screen from the desktop. The options that are shown are the same as those shown in the <Window Key>+P interface in Windows 7.
This also provides an easy way to connect your mobile PC to a projector in a meeting or presentation scenario.
It is important to understand that charms are context-specific. What this means is that the options that are displayed when you select a given charm will be different, depending on which app you are in. Opening the Settings charm will show the settings that are available for the app you have open at the time (or for the Start screen if you do not have an app open). Opening the Device charm in Internet Explorer will only show you devices that are relevant to tasks that can be performed by Internet Explorer. This includes things like printing to a printer or sharing via NFC.
Charms will make the experience of using Windows Store apps more consistent from app to app. Microsoft is recommending to app developers that they use these charms instead of creating separate functionality for tasks that are possible with charms:
While these are the recommendations that we are giving to app developers, these are not requirements, so you may see some apps implement this functionality on their own. All of the Microsoft apps strive to follow the guidance for using charms properly, so they should be the best examples of charms in action.
Windows Store apps are launched from and run in the new Windows UI. Selecting the tile for a Windows Store app causes it to immediately open full screen. Full screen is the default view. Switching back to Start and launching another Windows Store app moves the first app into the background. To bring the first app back, the user can do one of the following:
There are several new methods for getting into and out of apps and switching between them. This section will walk though some of those.
Using your finger, swipe from the left side of the screen. As you complete this gesture, you will see a large thumbnail for the previous app slide in and fill the screen, bringing that app back into the foreground. Repeat this swipe gesture from the left to cycle through all of your currently running Windows Store apps.
The action for switching apps using the mouse is to move your mouse to the top left corner of the screen and click the thumbnail that appears. This will open the previous app that you had open. The desktop is treated as a single app in this case, so individual running desktop apps will not be shown here.
Figure 26: Switching to previous app using corner
Table 5: App switching bar
After moving the mouse into one of the left corners, moving it toward the middle will show the App Switching bar. This bar will show you thumbnails of the apps that you had open previously. Selecting any of the apps in the bar will switch to the app.
You can also open this App Switching bar by placing your mouse pointer in the lower-left corner of the screen, which opens the Start flyout, and then moving your mouse pointer up towards the center of the screen.
Note: You can also right-click on these thumbnails to either close the app or snap it to the left or ride side of the screen.
Figure 27: Control app from app switching bar
Figure 28: App switching bar
The Alt-Tab and <Windows Key>+Tab keyboard shortcuts still function in Windows 8 but with slightly different results:
If a Windows Store app is already running in the background, clicking its tile on Start will switch back into that app where you left off.
Although the default view for Windows Store apps is full screen, the user does have the ability to view two apps next to each other using Snap. Snap allows the user to show two Windows Store apps or the desktop on the screen at the same time. In this mode, one app is a main app and takes up the majority of the screen. The other app is the snapped app and takes only a narrow strip on the left or right side of the screen. There is no mechanism for viewing the apps split evenly on the screen.
Figure 29: Snapped app
To snap an app, that app must be open:
Tip: You can control which snap using keyboard shortcuts.<Windows Key>+. (period) moves the split to the right.<Windows Key>+Shift+. (period) moves the split to the left.<Windows Key>+' (single-quote) changes focus between the apps.
In order to open a Windows Store app, your screen resolution must meet certain minimum requirements:
Windows Store apps are designed so that the user does not ever have to think about closing apps. When users are finished with apps, Windows 8 just does the right thing related to handling resources and saving state. However, there may be scenarios where a user wants to close an app on their own, such as if the app has hung or stopped running properly. With Windows 8, they can do that with both mouse and touch.
With the mouse, they can place the pointer against the top edge of the screen. From there, the pointer will switch to a closed hand.
Figure 30: Mouse pointer switches to a hand
Pulling down while holding down the left mouse button will shrink the app to a thumbnail. Releasing the app will return the app its previous state.
Figure 31: Pulling the app down from the top edge of the screen
Moving that thumbnail to the left or right edge of the screen will snap the app on that side.
Figure 32: Using the close gesture to snap
Moving the medium-sized thumbnail down to the bottom of the screen will close the app and take the user back to the Start screen.
Figure 33: Drag to the bottom to close
With touch, the experience is much the same, except you are swiping down starting from the top bezel past the top edge of the screen.
Note: When the app is closed, it is also removed from the list of previous apps in the App Switching bar.
Additionally, you can close apps by right-clicking on them in the App Switching bar on the left edge of the screen. Simply open the bar and right-click on the thumbnail for the app that you would like to close.
Figure 34: Close app from App Switching bar
Tip: Like desktop apps, you can also use Alt+F4 to close a Windows Store app. Of course, you can also use Task Manager to close an app.
The four corners of the screen are given new significance in Windows 8. For the majority of Windows users who have a single monitor, the corners of the screen are the easiest places to quickly target with a mouse without having to be very accurate. You can throw the mouse pointer into a corner and trust that the pointer will likely make it all the way to the corner you are aiming for. Windows 8 makes it easy to perform some of the most commonly used actions by just moving the mouse to the corner of the screen and clicking.
The exact behavior that occurs when you click the corner will depend on the specific corner that you are clicking.
The diagram below shows this in more detail.
Figure 35: Navigating with corners
On a touch device, the focus moves from the corners to the edges. Swiping in from the edges of the screen performs a consistent action regardless of where you are in Windows.
Note: Right-clicking in the bottom-left corner reveals a menu that you can use to quickly access many of the tools and system settings that we commonly use in support, as shown in the screenshot below. This menu can also be accessed using the keyboard shortcut Win+X.
Figure 36: Win+X menu
Windows 8 also includes a new mechanism for communicating information and status updates to users in an unobtrusive manner. This mechanism is referred to as Notifications. Notifications display in a small pane on the upper-right portion of the screen and communicate information such as new mail alerts and can ask questions of a user, such as how they would like to handle a USB flash drive that they inserted.
Figure 37: Notification from the Store app
Notifications are an improvement over previous methods of displaying alerts on the desktop in many ways. Desktop alerts are implemented using many different methods including balloon notifications in the system tray, alert windows or dialog boxes, or even opening a whole new instance of an app in order to get the user's attention. The issue with this beyond just the inconsistency in their implementation is that there was no clear single place to disable these notifications.
Windows 7 provided a mechanism for hiding things like tray icons and balloon prompts from the user, but apps that used a dialog box or some other mechanism to get the users attention would be unaffected. These dialog boxes were distracting to the user and in many cases could take focus away from the window that the user was interacting with. For example, a user might be mid-sentence in typing an email message while looking at the keyboard, and when they look up they see that the last several words they were typing were either lost or had been entered into an unintended window.
Notifications in Windows 8 address these issues on many levels:
Windows 8 has relocated many of the most commonly used Windows settings to a new PC Settings app that can be thought of as a Control Panel within the new Windows Experience. PC Settings is not a complete replacement for the desktop Control Panel, and both will continue to exist. The interface for the PC Settings is much simpler than the desktop Control Panel, works better with touch, and in general, there are far fewer options, which makes for less complexity for the user:
Figure 38: PC settings
PC Settings does not have its own tile on the Start Screen. Instead, you access PC Settings using the Change PC settings link in the Settings charm.
Figure 39: Change PC settings link in Settings charm
The Lock screen is a new interface that covers the Sign in screen in Windows 8. The Lock screen shows a full screen image and other information that is customizable by the user.
Figure 40: Lock screen
The following are some features of the Lock screen:
Figure 41: Lock screen apps
Windows 8 also includes a new touch keyboard optimized for the new Windows UI. The touch keyboard is designed to make text entry on a touch screen fast and fluid, and the experience is customizable based on your specific needs.
The default view of the keyboard shows the most commonly used keyboard keys and fills the entire width of the screen.
Figure 42: Default touch keyboard view
The touch keyboard has the following features:
Several different touch keyboards are available, allowing you to pick the input experience that works best for you. You can quickly switch between all of the available touch keyboards using the Keyboard Switcher button on the lower-right corner of the keyboard.
Figure 43: Switching keyboard views
The various keyboards offer the following features:
Figure 44: Split keyboard
Figure 45: Split keyboard size
Figure 46: Full touch keyboard
Figure 47: Handwriting panel
Figure 48: Alternate language keyboard
You have multiple options for opening the touch keyboard on a touch device:
Figure 49: Open keyboard from Settings charm
Figure 50: Open keyboard from taskbar
Note: Most desktop apps do not report the necessary status to Windows to indicate that a text field is selected, so in most cases, it will be necessary to manually bring up the keyboard for these desktop apps. Desktop apps are given the ability to add functionality that reports this info to Windows so that the keyboard opens seamlessly when needed, but this is not guaranteed across all apps.
If Windows 8 detects that the PC is not touch enabled, the touch keyboard will not be exposed to the user:
Index of UX guidelines for Windows Store apps