You are currently using a browser that is no longer supported and may therefore cause display errors. Feel free to switch to another browser to experience a better design.

Cookies help us in providing our services. By using our services, you agree that we save Cookies. Learn more.


Thinking Out of the Box

Windows Phone 7 Pie Menu Design Study

David Patrizi

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.


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:
Animation - Normal Speed

Animation - Normal Speed

Animation - Slow -Motion
Animation - Slow-Motion

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.

Corporate Experience Manager
+49 681 959 3110
Contact form

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

    Science Park Saar, Saarbrücken

    South West Location

    Headquarter Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    On the map

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    North West Location

    Office Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    North Rhine-Westphalia
    On the map

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · Munich

    Haar / München

    South Location

    Office Munich
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · Munich
    On the map

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Central Location

    Office Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    On the map

    +49 69 241 827 91

    +49 681 959 3119