pie menus / radial menus

PIE MENUS

Useful?

Weird?

Better than sliced bread?

Effective?

… Also known as “Radial” menus, but that’s not half as funny.

FIRST – SOME HISTORY…

1969 – a program called PIXIE uses the first radial menu…

No traces remain…

In 1986, Don Hopkins designs a fully functional radial menu for the all-time classic Sim City

Callahan, Hopkins, Weiser and Shneiderman (1988): first efficiency comparison between pie menus and line menus

vs.

Mass Effect 3

Command&Conquer 3

Assassins Creed: Brotherhood Tabula Rasa

Twheel “Else” mobile operating systemPath

TYPES OF PIE MENUS

Non-hierarchical

Second Life

Different types of hierarchical

Expand

Clock-wise: TechKnack, Kodu, Krystin Samp’s CRL, OneNote

OverlapOuter rings

Replace

And more…

Hybrids

Maya

Position: Directly contextual or fixed

Layout Path

THE AWESOMENESS OF PIE MENUS

TIME FOR A DETOUR…

Please welcome ... The NOVICE

The NOVICEThey don’t know the system Needs to see (recognize) stuff to select it Limited by cognitive load

Therefore...Not about speed, but rather about findability

How does a novice use a menu?

Visual search Decision Navigation

And in the other corner ... The EXPERT

The EXPERT

Knows where stuff is, only has to select it Limited by motor skills

Therefore…All about speed and effectiveness

How does an expert use a menu?

Decision Navigation

DETOUR OVER…

… SO …

WHAT DID THAT HAVE TO DO WITH PIE MENUS???

Imagine we had two choices:

Traditional:Cascading line menu (CS)

New:Compact radial layout menu (CRL)

Let’s look at “Visual search” and “Navigation” separately.

How will our two menus perform?

Visual search

Cascading line menu wins every time. 14% - 31 % faster.

The more items on each level, the clearer the lead.

Visual search results

Why is the Cascading line menu better?• Users are used to lists• A list has a beginning and an end• Usually just one established direction of

reading

• Cascading line menus are good for visual search and therefore good for novices, particularly when there are lots of options to choose from.

Navigation basics 1

Fitts’ Law

The further something is away, and the smaller it is,

the harder it is to hit it.

Navigation - calculation

Fitts’ Law only

Navigation basics 2

Steering law

The longer and narrower a steering tunnel is,

the more time it takes to navigate it

In general For easy paths

OR

Navigation - calculation

Fitts’ Law + Steering law

Navigation basics 3

Index of Difficulty

ID Fitts’ Law ID Steering Law

Outcome:Pie menu (CRL) – ID of 1.18 – 6.06Line menu (unfold on hover) – ID of 1 – 21.5

Maths say: line menus are harder to navigate than pie menus.

+

Navigation - results

Pie menus win in every version.Up to 34% better on level 3

Navigation - results

Why is the pie menu better?• Generally shorter navigation paths• No steering tunnels to worry about

Because pie menus are so good at “navigating”, they are a great solution for expert users.

Visual search + navigation

No clear winner.

Post-task questionnaire:Users felt the pie menu was more efficient and less error

prone ease of navigation has strong influence on perception.

Error rates

In terms of wrong clicks, both menu types perform quite well:• Pie menus: 1.6% error rate• Line menu: 3.7% error rate

But in terms of Navigation Time Variability:

This is why in the navigation experiment, the vast majority of participants found line menus more erroneous, frustrating, and harder to use. The errors they perceived were not click errors but navigation errors they had to correct.

Pie menuLine menu

Quick re-capNOVICE EXPERTVisual search

Decision

Navigation

Decision

Navigation

Line menus or pie menus

Pie menus

SO HOW TO TURN A NOVICE INTO AN

EXPERT?

Pie menus and shortcuts

Imagine this…

<click and hold> <immediate move, only needs direction, not selection>

<click and hold> <wait>

<pie menu pops up>

Marking / mousing ahead

Pie menus and shortcutsAdvantages of marking:• Learning by doing, at your own speed• Muscle memory helps you remember the direction• If you forget, easy to look it up again• Self-revealing, in context you don’t have to go looking up a

shortcut

Kurtenbach and Buxton

PIE MENUS NEED THE HUMAN TOUCH

Pie menus need the human touch

• Clustering items sensibly helps useless for dynamic menu items

• The easy learning with pie menus only works if the icons are in consistent positions, so don’t swap them around without good reason

Pie menus need the human touch• Humans need to sort the items sensibly:

– Level 1: most important item at 12 o’clock– Level 2: most important item close to level 1 parent item– Less important items: on both sides of most important item

Pie menus need the human touch

• Ideally no more than 8 items on first level: one every 45 degrees.

The problem of SIZE and SHAPEWhat to do if … … or if …

A LABEL IS

REALLY LARGE? AND

HAS LOTS OF WORDS

?MIGHT EVEN

HAVE TO CHANGE THE

LABELS

AND DOESN

’T REALLY

FIT?

The problem of SIZE and SHAPEBut at the same time, what if…

BAD!

GOOD!

Where does this leave us?

Pie menus are good if:• You anticipate having expert

users• You want to make the

transition from novice to expert easy

• The items in the menu are curated by humans

• You don’t have too many selectable items per level

• You design for touch

Pie menus are bad if:• Your menus get filled

dynamically• You have lots and lots of

selectable items• You need to work with

standard interface elements• You need to have very long

labels

References• Wikipedia: http://en.wikipedia.org/wiki/Pie_menu• Globalmoxie:

http://globalmoxie.com/blog/radial-menus-for-touch-ui.shtml

• Kurtenbach, G. & Buxton, W. (1994). User learning and performance with marking menus. Proceedings of CHI '94, 258-264.

• Hopkins, D (1991). The Design and Implementation of Pie Menus. Dr Dobb’s Journal, Dec 1991.

• Callahan, J. et al (1988). An Empirical Comparison of Pie vs. Linear Menu. ACM CHI’88, Washington.

• Samp, K. and Decker, S. (2011). Visual Search in Radial Menus. : INTERACT 2011, Part IV, LNCS 6949, pp. 248–255.

• Samp, K. (2011). The Design and Evaluation of Radial Menus, National University of Ireland, Galway.

Thank you!

Matthias “Matty” Schreck@sardionerak

Yes, this presentation will be on Slideshare ……once somebody told me about digital rights of images I stole via the Google Image search.