Blog

Windows Phone 7 Pie Menu Design Study

David Patrizi
David Patrizi
August 31st, 2010

In one of our previous blog articles we talked about the use of pie menus in touch screen interfaces and discussed pros and cons of this kind of interaction. In this article, we are going to show a concrete example of how a pie menu can be used.

Connecting Synapses

Our design study is showing how quick and easy the selection of contact entries of a touch screen mobile phone can become when using a pie menu. The target platform for our design study is Silverlight for Windows Phone 7 as it allowed us to rapidly prototype sophisticated animations and touch interactions using Expression Blend.

The menu and every submenu are presented as a pie menu. The users move their fingers across the entries to reach the desired menu items, drawing distinctive paths while doing so.
The more often users search for a specific item, the more accustomed they will get to drawing the respective path – in this way they learn to use a certain gesture that leads them to the desired menu item. By and by they don’t even need to think about how to find a specific contact entry, but simply re-draw the adopted gesture with their finger.

Of course, this interaction concept is transferable to other scenarios and is most suitable for menus with a maximum of five items per hierarchy level.

Staying in Flow

Another important aspect of the design study is the use of animations. In a related blog article we described a study that investigated some of the impacts of animations on the user experience, with an increased joy of use being one of the effects. Especially for lifestyle products such as mobile phones, joy of use is an important selling point and can be crucial for the product’s success.

Animations also can help novice users to understand specific functionalities of a GUI. One thing to keep in mind concerning the pie menu is to use quick animations to enable the fluid selection of menu items. Otherwise the user is slowed down and cannot perform a fluid gesture – which is crucial when designing natural user interfaces.

The video example shows a user who selects menu items with brief “thinking breaks” in between selections. Interaction would unfold like this when a user hasn’t yet learned the gesture to select a certain entry. To track each detail of the example animation, it is shown in real-time as well as in slow-motion. The visual style follows the Windows Phone 7 Design and therefore we used simple geometric shapes and typographic elements. For more details in this direction you should definitely have a look at the very well made UI Design and Interaction Guide for Windows Phone 7.

Functionality

To contact persons from their contact lists, users tap with their thumbs on the corresponding “favorites” icons. This opens the first level of a menu, which enables the user to choose between friends, family members and colleagues.

Design Study - Step 1 Design Study - Step 2

By sliding the thumb onto the desired entry, the next menu level is opened. The example shows the selection of the “Family” entry.

Design Stuy - Step 3

On the next level, the user can choose one contact from the “Family” group. In our case, the entries “Katie”, “Parents” and “Peter” are available. In the example, the user’s thumb slides to “Katie”.

Design Stuy - Step 4

As a result, the final menu level is opened, which offers different contact actions to perform for the selected person: send a mail, call or chat. By lifting the thumb from the display, the selected action is performed (“Call” in our case).

Design Study - Step 5

Every menu entry can be reached via a specific gesture. The gesture of our example is looking as follows:

Design Study- Gesture

The whole Animation:

The concept of our pie menu enables quick and intuitive handling for both novice and expert users. When it comes to designing natural user interfaces, it should therefore be considered as a central control element.

The design study aimed at illustrating an approach to improving interaction efficiency for touch screens by employing a pie menu, which allows making use of gestures. In order to implement the approach in a concrete context, the ideas would have to be detailed and concretized, e.g. regarding the physical limits of the screen or the influence of changing menu items (e.g. with new contacts). Even when considering these aspects and constraints, it can be expected that pie menus can contribute to improving interaction efficiency in particular and user experience in general.

Expression, Expression Blend and Windows are registered trademarks or trademarks
of Microsoft Corporation in the United States and/or other countries.

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Senior UX Manager
+49 681 959 3110

Before sending your request, please confirm that we may contact you by clicking in the checkbox above.