The gestures of Windows 8 (Consumer preview): part 1

Technical stuff, Touch, UX, Windows 8, Work
No Comments

This post was imported from my old blog and had 2 comments which are included as a screenshot at the end of this post.

This blog post started as a simple one, but grew to be quite large and time consuming. I am splitting it, because I really want to publish the first findings already. Stay tuned for more!

I am sure that you heard that Windows 8 was released last week in an early although quite stable stage called “consumer preview”. Windows 8 is an interesting mix of touch-based and mouse/keyboard based system. Some aspects are a bit annoying (see my post about the “split personalities” in Win8 to see what I mean!) but others are really interesting from a user experience point of view. In this post, I want to list various gestures I discovered in Windows 8, and ask for your feedback if you have more.


Optimizing touch and keyboard/mouse, the learning curve

Windows 8 has two sides: the Metro side of Windows 8 (the side which is primarily made for touch) and the desktop side (the side which is quite usable with touch (and in fact much better than Windows 7 in that regard), but primarily made for keyboard/mouse usage. We will see in this post that a lot of thought has been put in optimizing both sides of the experience. You can use your fingers to work the gestures, but you can also use keyboard/mouse and never have to touch your screen. This is a good thing because having to raise the arm to touch the screen when using a PC/laptop is either useless (if the screen is not touch enabled) or at least tiring and disrupts the flow of work.

A consistent experience

As far as I can see, the gestures used in Windows 8 are very consistent throughout the operating system and all the applications. It is very important that Windows 8 “Metro style” app developers comply with these guidelines in order to provide a consistent experience to the user. For example, you will see later that each application can expose setting dialogs through the “charms bar” (more about that in a moment). If an app provides another way to change settings (for instance through a button in the application bar leading to a Settings page), it introduces a different experience that the user has to learn. By not using the gestures and UX concepts that Microsoft recommends, you force the user to think. Please consider this when you create your apps!

What about beveled screens?

Some touch-enabled computers, especially older ones, have a slightly elevated frame around the screen, which makes swiping from the side a bit difficult at times. The “hot spot” for the gesture detection is a thin invisible line on the side of the screen. If the frame around the screen is to high, activating this thin line can be a bit tricky. I found on one of my old laptops that I need to press the finger a bit harder against the screen for the gesture to be successful. Of course, new slate computers like the Samsung Slate 7 have a completely flat glass screen which is a delight to touch and swipe.

Unlocking the screen

When the slate is powered on, a lock screen is displayed, very similar to what Windows Phone 7 offers. The screen has a clock for date/time, indications such as battery level as well as potential notifications by applications. To unlock the screen, simply drag it up and let go. Note that this doesn’t give you access yet to the computer: there is an identity check, either through a password, a pin or my personal favorite, the picture password.

3-3-2012 11-12-00 AM
Unlocking the screen, dragging up

Keyboard

You can also unlock the screen with the keyboard, by pressing any key.

Mouse

If you use the mouse, simply click, hold and drag up.

The charms bar

The charms are a set of shortcuts that are available in every application. In order to show these, you swipe your finger from the far right edge of the screen towards the middle of the screen, horizontally.

3-3-2012 11-13-13 AM 
Displaying the charms bar

 
The charms bar

Keyboard

You can reveal the charms bar with the keyboard by using Win-C.

Mouse

Revealing the charms bar with the mouse only is interesting: Move the mouse cursor to the top-right corner (or bottom-right) of the screen and wait for a short moment. You will see the charms appearing, but the bar has a transparent background. Then, move the mouse down (or up) until you reach the first charm. The bar will display its background and you can click the charm you want to use.

Search charm

The first charm is a system and application wife search. Tapping it reveals a search dialog which can be used to search in the Applications, the Settings or the Files (file name or content). Metro style apps can also register for a Search contract, and be notified when the user enters a search string and then taps an app displayed in the Search dialog.

A few useful keyboard shortcuts:

  • Win-Q will open the Search with the list of apps preselected.
  • Win-W will open the Search with the Settings preselected.

Share charm

The second charm is used to share content between Metro style apps. Note that both the sender and the receiver need to support this contract for the interaction to be successful.

Useful keyboard shortcuts:

  • Win-H will open the Share fly out menu.

Start button

This gives access to the Start menu.

Devices

The fourth charm expands a “Devices” dialog. I am not 100% sure what this does: for instance my Bluetooth devices are not shown there. Right now on my slate, the only device displayed is a second screen.

Useful keyboard shortcuts:

  • Win-K will open the Devices fly out menu.

Settings

The fifth and last charm is the Settings. On the bottom, it displays a series of buttons used to control the network connection, the volume and brightness, notifications, display language and to switch off or restart the device.

On the top part, there is an area which an app developer can customize to display the app’s settings. It is a good practice to use this “fly out” area for the app’s settings, in order to create a consistent experience.

Useful keyboard shortcuts:

  • Win-I opens the Settings fly out menu,

Getting to the Start menu

In order to display the Start menu, there are different gestures that can be used.

Touch

With fingers, you can pull the charms bar out (see above) and press the Windows button. If your slate has a Windows button (like the Samsung Slate 7), you can of course use this to show the Start menu too.

Keyboard

On Windows keyboard, press the Windows button to show the Start menu. Note that as soon as the Start menu is displayed, you can start typing to search through applications.

Selecting items

The selection in Windows 8 Metro is different than it used to be in Windows 7. Since one single tap on an item is actuating the item (for example starting an application), we need a different gesture to select. Once an item is selected, the application bar opens up and you can use the buttons to perform operations.

Touch

When using the fingers, press an item and drag it down slightly. The item will spring back into place and show a selection mark.

FliDA34

Mouse

To select an item with the mouse, simply right click on it.

Keyboard

With the keyboard, use the arrow keys to move to the item you want to select, then press the Space bar.

Reordering items

To reorder items in the Start menu, pull them up or down with a long pull, until you “pull them out” of their group. Then, you can move them to the new place.

Touch

Pull the item you want to reorder with your finger. Note that if you need to scroll horizontally to a different item group, you can hold the item with one finger, and scroll with another finger. It is truly multitouch.

Mouse

Click, hold and drag the item to pull it out of the item group, then move it left or right to add it to a different group. Note that if you need to scroll, you can use the mouse wheel while holding the item with the left button down.

Keyboard

As far as I can say, you cannot reorder items with the keyboard only.

More to follow…

That’s all for the first post in this series. More to follow soon!

GalaSoft Laurent Bugnion
Laurent Bugnion (GalaSoft)
Share on Facebook

This post was imported from my old blog. Original comments screenshot: 12-2-2013 12-31-05 PM

Leave a Reply