Your SlideShare is downloading. ×
0
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
Pie menus / Radial menus
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pie menus / Radial menus

2,441

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 …

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
2,441
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. PIE MENUS… Also known as “Radial” menus, but that’s not half as funny. Useful? Effective? Weird? Better than sliced bread?
  • 2. 1969 – a programcalled PIXIE uses thefirst radial menu…No traces remain…
  • 3. In 1986, Don Hopkins designs a fully functional radial menu for the all-time classic Sim City
  • 4. Callahan, Hopkins, Weiser and Shneiderman (1988): first efficiencycomparison between pie menus and line menus vs.
  • 5. Command&Conquer 3Mass Effect 3 Tabula RasaAssassins Creed: Brotherhood
  • 6. Twheel Path “Else” mobile operating system
  • 7. Non-hierarchical Second Life
  • 8. Different types of hierarchical Expand Outer rings Overlap And more… ReplaceClock-wise: TechKnack, Kodu, Krystin Samp’s CRL, OneNote
  • 9. HybridsMaya
  • 10. Position: Directly contextual or fixedLayout Path
  • 11. Please welcome ... The NOVICE
  • 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. And in the othercorner ... The EXPERT
  • 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. Imagine we had two choices:Traditional: New:Cascading line menu Compact radial(CS) layout menu (CRL)
  • 16. Let’s look at “Visual search” and “Navigation” separately. How will our two menus perform?
  • 17. Visual search Cascading line menu wins every time. 14% - 31 % faster.The more items on each level, the clearer the lead.
  • 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. Navigation basics 1Fitts’ Law The further something is away, and the smaller it is, the harder it is to hit it.
  • 20. Navigation - calculation Fitts’ Law only
  • 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. Navigation - calculationFitts’ Law + Steering law
  • 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. Navigation - resultsPie menus win in every version. Up to 34% better on level 3
  • 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. 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. 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. Quick re-capNOVICE EXPERT Decision Decision NavigationLine menus or Pie menuspie menus
  • 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. 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. 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. 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. Pie menus need the human touch• Ideally no more than 8 items on first level: one every 45 degrees.
  • 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. The problem of SIZE and SHAPEBut at the same time, what if… BAD! GOOD!
  • 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. 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. 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.

×