SlideShare une entreprise Scribd logo
1  sur  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.

Contenu connexe

Similaire à 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
 
Fixing the program my computer learned: End-user debugging of machine-learned...
Fixing the program my computer learned: End-user debugging of machine-learned...Fixing the program my computer learned: End-user debugging of machine-learned...
Fixing the program my computer learned: End-user debugging of machine-learned...City University London
 
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
 

Similaire à 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
 
Fixing the program my computer learned: End-user debugging of machine-learned...
Fixing the program my computer learned: End-user debugging of machine-learned...Fixing the program my computer learned: End-user debugging of machine-learned...
Fixing the program my computer learned: End-user debugging of machine-learned...
 
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
 

Dernier

ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case StudySophia Viganò
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一Fi L
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一F dds
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRCall In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRdollysharma2066
 
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一Fi L
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degreeyuu sss
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubaikojalkojal131
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 

Dernier (20)

ARt app | UX Case Study
ARt app | UX Case StudyARt app | UX Case Study
ARt app | UX Case Study
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
 
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCRCall In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
 
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
 
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services DubaiDubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
Dubai Calls Girl Tapes O525547819 Real Tapes Escort Services Dubai
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 

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.