pie menus / radial menus
DESCRIPTION
I held a 15 minute presentation in front of the IxDA (Sydney Chapter) in August 2012 about pie / radial menus. I spent a little bit of time talking about their history, and about various classifications of this menu type, and then went into detail about the academic research that has been done in that field. I summarized about 10 articles in this field, but the main body of the academic part is based on an excellent research thesis by Krystian Samp. All references are on the second last slide, in case you are interested in the source material.TRANSCRIPT
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.