PIE MENUS… Also known as “Radial” menus, but that’s not half as funny.                         Useful?          Effective?...
1969 – a programcalled PIXIE uses thefirst 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 efficiencycomparison between pie menus and line menus        vs.
Command&Conquer 3Mass Effect 3                               Tabula RasaAssassins Creed: Brotherhood
Twheel   Path   “Else” mobile operating system
Non-hierarchical                   Second Life
Different types of hierarchical       Expand                                                Outer rings                   ...
HybridsMaya
Position: Directly contextual or fixedLayout                                    Path
Please welcome ...   The NOVICE
The NOVICEThey don’t know the system Needs to see (recognize)stuff to select it  Limited by cognitive loadTherefore...No...
And in the othercorner ... The EXPERT
The EXPERTKnows where stuff is, only has to select it Limited by motor skillsTherefore…All about speed and effectivenessH...
Imagine we had two choices:Traditional:          New:Cascading line menu   Compact radial(CS)                  layout menu...
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 c...
Visual search results• Cascading line menus are good for visual  search and therefore good for novices,  particularly when...
Navigation basics 1Fitts’ 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 2Steering law                OR               In general        For easy paths     The longer and narrow...
Navigation - calculationFitts’ Law + Steering law
Navigation basics 3Index ofDifficulty                      +               ID Fitts’ Law            ID Steering LawOutcome...
Navigation - resultsPie menus win in every version.  Up to 34% better on level 3
Navigation - resultsBecause pie menus are so good at “navigating”,  they are a great solution for expert users.Why is the ...
Visual search + navigation                    No clear winner.                 Post-task questionnaire:Users felt the pie ...
Error ratesIn terms of wrong clicks, both menu types perform quite well:• Pie menus: 1.6% error rate• Line menu: 3.7% erro...
Quick re-capNOVICE                EXPERT  Decision              Decision NavigationLine menus or        Pie menuspie menus
Pie menus and shortcutsImagine this…   <click and hold>      <wait>                                                 <pie m...
Pie menus and shortcutsAdvantages of marking:• Learning by doing, at your own speed• Muscle memory helps you remember the ...
Pie menus need the human touch• Clustering items sensibly helps  useless for  dynamic menu items• The easy learning with ...
Pie menus need the human touch• Humans need to sort the items sensibly:   – Level 1: most important item at 12 o’clock   –...
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                             ...
The problem of SIZE and SHAPEBut at the same time, what if… BAD!                                 GOOD!
Where does this leave us?Pie menus are good if:           Pie menus are bad if:• You anticipate having expert   • Your men...
References• Wikipedia: http://en.wikipedia.org/wiki/Pie_menu• Globalmoxie: http://globalmoxie.com/blog/radial-  menus-for-...
Thank you!Matthias “Matty” Schreck@sardionerakYes, this presentation will be on  Slideshare …  …once somebody told me  abo...
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Upcoming SlideShare
Loading in …5
×

Pie menus / Radial menus

3,238 views

Published on

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.

Published in: Design, Technology, Business
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
3,238
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Pie menus / Radial menus

  1. 1. PIE MENUS… Also known as “Radial” menus, but that’s not half as funny. Useful? Effective? Weird? Better than sliced bread?
  2. 2. 1969 – a programcalled PIXIE uses thefirst radial menu…No traces remain…
  3. 3. In 1986, Don Hopkins designs a fully functional radial menu for the all-time classic Sim City
  4. 4. Callahan, Hopkins, Weiser and Shneiderman (1988): first efficiencycomparison between pie menus and line menus vs.
  5. 5. Command&Conquer 3Mass Effect 3 Tabula RasaAssassins Creed: Brotherhood
  6. 6. Twheel Path “Else” mobile operating system
  7. 7. Non-hierarchical Second Life
  8. 8. Different types of hierarchical Expand Outer rings Overlap And more… ReplaceClock-wise: TechKnack, Kodu, Krystin Samp’s CRL, OneNote
  9. 9. HybridsMaya
  10. 10. Position: Directly contextual or fixedLayout Path
  11. 11. Please welcome ... The NOVICE
  12. 12. The NOVICEThey don’t know the system Needs to see (recognize)stuff to select it  Limited by cognitive loadTherefore...Not about speed, but rather about findabilityHow does a novice use a menu?Visual search  Decision  Navigation
  13. 13. And in the othercorner ... The EXPERT
  14. 14. The EXPERTKnows where stuff is, only has to select it Limited by motor skillsTherefore…All about speed and effectivenessHow does an expert use a menu?Decision  Navigation
  15. 15. Imagine we had two choices:Traditional: New:Cascading line menu Compact radial(CS) layout menu (CRL)
  16. 16. Let’s look at “Visual search” and “Navigation” separately. How will our two menus perform?
  17. 17. Visual search Cascading line menu wins every time. 14% - 31 % faster.The more items on each level, the clearer the lead.
  18. 18. Visual search results• Cascading line menus are good for visual search and therefore good for novices, particularly when there are lots of options to choose from.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
  19. 19. Navigation basics 1Fitts’ Law The further something is away, and the smaller it is, the harder it is to hit it.
  20. 20. Navigation - calculation Fitts’ Law only
  21. 21. Navigation basics 2Steering law OR In general For easy paths The longer and narrower a steering tunnel is,the more time it takes to navigate it
  22. 22. Navigation - calculationFitts’ Law + Steering law
  23. 23. Navigation basics 3Index ofDifficulty + ID Fitts’ Law ID Steering LawOutcome: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 navigatethan pie menus.
  24. 24. Navigation - resultsPie menus win in every version. Up to 34% better on level 3
  25. 25. Navigation - resultsBecause pie menus are so good at “navigating”, they are a great solution for expert users.Why is the pie menu better?• Generally shorter navigation paths• No steering tunnels to worry about
  26. 26. 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.
  27. 27. Error ratesIn terms of wrong clicks, both menu types perform quite well:• Pie menus: 1.6% error rate• Line menu: 3.7% error rateBut in terms of Navigation Time Variability: Pie menu Line menuThis is why in the navigation experiment, the vast majority of participants found linemenus more erroneous, frustrating, and harder to use. The errors they perceivedwere not click errors but navigation errors they had to correct.
  28. 28. Quick re-capNOVICE EXPERT Decision Decision NavigationLine menus or Pie menuspie menus
  29. 29. Pie menus and shortcutsImagine this… <click and hold> <wait> <pie menu pops up> Marking / mousing ahead <click and hold> <immediate move, only needs direction, not selection>
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. Pie menus need the human touch• Ideally no more than 8 items on first level: one every 45 degrees.
  34. 34. The problem of SIZE and SHAPEWhat to do if … … or if … A LABEL IS REALLY AND AND LARGE? HAS DOESN LOTS OF ’T WORDS ? REALLYMIGHT EVEN FIT? HAVE TO CHANGE THE LABELS
  35. 35. The problem of SIZE and SHAPEBut at the same time, what if… BAD! GOOD!
  36. 36. Where does this leave us?Pie menus are good if: Pie menus are bad if:• You anticipate having expert • Your menus get filled users dynamically• You want to make the • You have lots and lots of transition from novice to selectable items expert easy • You need to work with• The items in the menu are standard interface elements curated by humans • You need to have very long• You don’t have too many labels selectable items per level• You design for touch
  37. 37. 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.
  38. 38. Thank you!Matthias “Matty” Schreck@sardionerakYes, this presentation will be on Slideshare … …once somebody told me about digital rights of images I stole via the Google Image search.

×