Pie menus / Radial menus
Download as PPTX, PDF11 likes8,203 views
The document discusses the effectiveness of pie menus, also known as radial menus, compared to traditional line menus in user interface design. It highlights the advantages of each for novice and expert users, emphasizing that pie menus excel in navigation speed and efficiency for experts, while line menus are better for visual search and usability for novices. Ultimately, the choice between the two types of menus depends on user expertise, menu complexity, and the context of use.
Pie menus / Radial menus
- 1. PIE MENUS … Also known as “Radial” menus, but that’s not half as funny. Useful? Effective? Weird? Better than sliced bread?
- 3. 1969 – a program called PIXIE uses the first radial menu… No traces remain…
- 4. In 1986, Don Hopkins designs a fully functional radial menu for the all-time classic Sim City
- 5. Callahan, Hopkins, Weiser and Shneiderman (1988): first efficiency comparison between pie menus and line menus vs.
- 6. Command&Conquer 3 Mass Effect 3 Tabula Rasa Assassins Creed: Brotherhood
- 7. Twheel Path “Else” mobile operating system
- 9. Non-hierarchical Second Life
- 10. Different types of hierarchical Expand Outer rings Overlap And more… Replace Clock-wise: TechKnack, Kodu, Krystin Samp’s CRL, OneNote
- 11. Hybrids Maya
- 12. Position: Directly contextual or fixed Layout Path
- 14. Please welcome ... The NOVICE
- 15. The NOVICE They 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
- 16. And in the other corner ... The EXPERT
- 17. 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
- 19. Imagine we had two choices: Traditional: New: Cascading line menu Compact radial (CS) layout menu (CRL)
- 20. Let’s look at “Visual search” and “Navigation” separately. How will our two menus perform?
- 21. Visual search Cascading line menu wins every time. 14% - 31 % faster. The more items on each level, the clearer the lead.
- 22. 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
- 23. Navigation basics 1 Fitts’ Law The further something is away, and the smaller it is, the harder it is to hit it.
- 24. Navigation - calculation Fitts’ Law only
- 25. Navigation basics 2 Steering law OR In general For easy paths The longer and narrower a steering tunnel is, the more time it takes to navigate it
- 26. Navigation - calculation Fitts’ Law + Steering law
- 27. Navigation basics 3 Index of Difficulty + ID Fitts’ Law ID Steering Law Outcome: Pie menu (CRL) – ID of 1.18 – 6.06 Line menu (unfold on hover) – ID of 1 – 21.5 Maths say: line menus are harder to navigate than pie menus.
- 28. Navigation - results Pie menus win in every version. Up to 34% better on level 3
- 29. Navigation - results Because 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
- 30. 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.
- 31. 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: Pie menu Line menu 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.
- 32. Quick re-cap NOVICE EXPERT Decision Decision Navigation Line menus or Pie menus pie menus
- 34. Pie menus and shortcuts Imagine this… <click and hold> <wait> <pie menu pops up> Marking / mousing ahead <click and hold> <immediate move, only needs direction, not selection>
- 35. Pie menus and shortcuts Advantages 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
- 37. 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
- 38. 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
- 39. Pie menus need the human touch • Ideally no more than 8 items on first level: one every 45 degrees.
- 40. The problem of SIZE and SHAPE What 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
- 41. The problem of SIZE and SHAPE But at the same time, what if… BAD! GOOD!
- 42. 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
- 43. 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.
- 44. 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.