SlideShare a Scribd company logo
1 of 44
PIE MENUS
… Also known as “Radial” menus, but that’s not half as funny.




                         Useful?



          Effective?                   Weird?


                       Better than
                      sliced bread?
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.
Command&Conquer 3




Mass Effect 3




                               Tabula Rasa
Assassins Creed: Brotherhood
Twheel   Path   “Else” mobile operating system
Non-hierarchical




                   Second Life
Different types of hierarchical




       Expand                                                Outer rings
                                              Overlap




                                                           And more…




                          Replace

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




Maya
Position: Directly contextual or fixed




Layout                                    Path
Please welcome ...
   The NOVICE
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
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
Imagine we had two choices:




Traditional:          New:
Cascading line menu   Compact radial
(CS)                  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
• 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
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                OR

               In general        For easy paths




     The longer and narrower
       a steering tunnel is,
the more time it takes to navigate it
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.06
Line 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
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
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:



         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.
Quick re-cap
NOVICE                EXPERT


  Decision              Decision


 Navigation
Line menus or        Pie menus
pie menus
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>
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
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 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
The problem of SIZE and SHAPE
But 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 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
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.

More Related Content

Similar to Pie menus / Radial menus

Kadir Akdeniz - Dynamic, Adaptive and Personalized User Interface for Communi...
Kadir Akdeniz - Dynamic, Adaptive and Personalized User Interface for Communi...Kadir Akdeniz - Dynamic, Adaptive and Personalized User Interface for Communi...
Kadir Akdeniz - Dynamic, Adaptive and Personalized User Interface for Communi...Kadir Akdeniz
 
Responsive Navigation Patterns | نویگیشن در طراحی ریسپانسیو
Responsive Navigation Patterns | نویگیشن در طراحی ریسپانسیوResponsive Navigation Patterns | نویگیشن در طراحی ریسپانسیو
Responsive Navigation Patterns | نویگیشن در طراحی ریسپانسیوMohsen Hosseinian
 
نویگیشن‌ در طراحی واکنش‌گرا
نویگیشن‌ در طراحی واکنش‌گرانویگیشن‌ در طراحی واکنش‌گرا
نویگیشن‌ در طراحی واکنش‌گراWeb Standards School
 
Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...
Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...
Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...Heather Staudt
 
Best Mobile UI Practices - FITC Mobile 2010
Best Mobile UI Practices - FITC Mobile 2010Best Mobile UI Practices - FITC Mobile 2010
Best Mobile UI Practices - FITC Mobile 2010Boris Chan
 
Introduction to Web Survey Usability Design and Testing
Introduction to Web Survey Usability Design and TestingIntroduction to Web Survey Usability Design and Testing
Introduction to Web Survey Usability Design and TestingJennifer Romano Bergstrom
 
12000 Years Playing Ocarina
12000 Years Playing Ocarina12000 Years Playing Ocarina
12000 Years Playing Ocarinafilipais
 
Access to technology presentation
Access to technology presentationAccess to technology presentation
Access to technology presentationmountain2009
 
Ovenbot the real kitchen of the future
Ovenbot the real kitchen of the futureOvenbot the real kitchen of the future
Ovenbot the real kitchen of the futureshawn212
 
I go8 usermanual_eng
I go8 usermanual_engI go8 usermanual_eng
I go8 usermanual_engKodok Ngorex
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture HeuristicsAbby Covert
 
Andrey Khlopotin accessibility iOS
Andrey Khlopotin accessibility iOSAndrey Khlopotin accessibility iOS
Andrey Khlopotin accessibility iOSWey Wey Web
 
Remote interface design
Remote interface designRemote interface design
Remote interface designPrabuddha Vyas
 
Are Mega Menus Really Heroic?
Are Mega Menus Really Heroic?Are Mega Menus Really Heroic?
Are Mega Menus Really Heroic?Heather Staudt
 
Guiding UX Principles 3/20/12
Guiding UX Principles 3/20/12Guiding UX Principles 3/20/12
Guiding UX Principles 3/20/12Rob Surrency
 
Idea trees correction
Idea trees correctionIdea trees correction
Idea trees correction_poojithalal
 
Visualizing User Feedback
Visualizing User FeedbackVisualizing User Feedback
Visualizing User FeedbackEva Kaniasty
 
Comp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsComp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsMark Billinghurst
 
Usable Government Forms and Surveys: Best Practices for Design (from MoDevGov)
Usable Government Forms and Surveys: Best Practices for Design (from MoDevGov)Usable Government Forms and Surveys: Best Practices for Design (from MoDevGov)
Usable Government Forms and Surveys: Best Practices for Design (from MoDevGov)Jennifer Romano Bergstrom
 

Similar to Pie menus / Radial menus (20)

Kadir Akdeniz - Dynamic, Adaptive and Personalized User Interface for Communi...
Kadir Akdeniz - Dynamic, Adaptive and Personalized User Interface for Communi...Kadir Akdeniz - Dynamic, Adaptive and Personalized User Interface for Communi...
Kadir Akdeniz - Dynamic, Adaptive and Personalized User Interface for Communi...
 
Responsive Navigation Patterns | نویگیشن در طراحی ریسپانسیو
Responsive Navigation Patterns | نویگیشن در طراحی ریسپانسیوResponsive Navigation Patterns | نویگیشن در طراحی ریسپانسیو
Responsive Navigation Patterns | نویگیشن در طراحی ریسپانسیو
 
نویگیشن‌ در طراحی واکنش‌گرا
نویگیشن‌ در طراحی واکنش‌گرانویگیشن‌ در طراحی واکنش‌گرا
نویگیشن‌ در طراحی واکنش‌گرا
 
Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...
Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...
Form and Function for Menus: How to get IA and Navigation Right UXPA Boston 2...
 
Best Mobile UI Practices - FITC Mobile 2010
Best Mobile UI Practices - FITC Mobile 2010Best Mobile UI Practices - FITC Mobile 2010
Best Mobile UI Practices - FITC Mobile 2010
 
Introduction to Web Survey Usability Design and Testing
Introduction to Web Survey Usability Design and TestingIntroduction to Web Survey Usability Design and Testing
Introduction to Web Survey Usability Design and Testing
 
12000 Years Playing Ocarina
12000 Years Playing Ocarina12000 Years Playing Ocarina
12000 Years Playing Ocarina
 
Access to technology presentation
Access to technology presentationAccess to technology presentation
Access to technology presentation
 
Ovenbot the real kitchen of the future
Ovenbot the real kitchen of the futureOvenbot the real kitchen of the future
Ovenbot the real kitchen of the future
 
I go8 usermanual_eng
I go8 usermanual_engI go8 usermanual_eng
I go8 usermanual_eng
 
Information Architecture Heuristics
Information Architecture HeuristicsInformation Architecture Heuristics
Information Architecture Heuristics
 
Andrey Khlopotin accessibility iOS
Andrey Khlopotin accessibility iOSAndrey Khlopotin accessibility iOS
Andrey Khlopotin accessibility iOS
 
Remote interface design
Remote interface designRemote interface design
Remote interface design
 
Are Mega Menus Really Heroic?
Are Mega Menus Really Heroic?Are Mega Menus Really Heroic?
Are Mega Menus Really Heroic?
 
Guiding UX Principles 3/20/12
Guiding UX Principles 3/20/12Guiding UX Principles 3/20/12
Guiding UX Principles 3/20/12
 
Idea trees correction
Idea trees correctionIdea trees correction
Idea trees correction
 
Visualizing User Feedback
Visualizing User FeedbackVisualizing User Feedback
Visualizing User Feedback
 
Idea trees
Idea treesIdea trees
Idea trees
 
Comp4010 lecture11 VR Applications
Comp4010 lecture11 VR ApplicationsComp4010 lecture11 VR Applications
Comp4010 lecture11 VR Applications
 
Usable Government Forms and Surveys: Best Practices for Design (from MoDevGov)
Usable Government Forms and Surveys: Best Practices for Design (from MoDevGov)Usable Government Forms and Surveys: Best Practices for Design (from MoDevGov)
Usable Government Forms and Surveys: Best Practices for Design (from MoDevGov)
 

Recently uploaded

💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...sonalitrivedi431
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxTusharBahuguna2
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756dollysharma2066
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Call Girls in Nagpur High Profile
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation decktbatkhuu1
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja Nehwal
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
 
Pastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. XxxPastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. XxxSegundoManuelFaichin1
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...amitlee9823
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...Call Girls in Nagpur High Profile
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxjeswinjees
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the FunnelTapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funneljen_giacalone
 

Recently uploaded (20)

💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
 
Pastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. XxxPastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. Xxx
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptx
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the FunnelTapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funnel
 

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?
  • 2.
  • 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
  • 8.
  • 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
  • 12. Position: Directly contextual or fixed Layout Path
  • 13.
  • 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
  • 18.
  • 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
  • 33.
  • 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
  • 36.
  • 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.