Email Updates RSS Subscribe
Line

This blog is created and maintained by the technical team at Hook in an effort to preserve and share the insights and experience gained during the research and testing phases of our development process. Often, much of this information is lost or hidden once a project is completed. These articles aim to revisit, expand and/or review the concepts that seem worth exploring further. The site also serves as a platform for releasing tools developed internally to help streamline ad development.

Launch
Line

Hook is a digital production company that develops interactive content for industry leading agencies and their brands. For more information visit www.byhook.com.

Line

Pie Menus: Tasty and Delicious

Line
Posted on January 6th, 2011 by Jake
Line

Adventures in Pie Menus
Identify as many of the ingredients as possible as fast as possible before the 30 seconds are up! (then please hit “submit stats” so we can start getting some real data)


Get Adobe Flash player

Stand Alone Downloads
Android APK
Android QR Code
Be sure to go to “Settings->Applications” and check “Unknown sources”. This will allow the app to be installed on the device, since its not being distributed through the Android Market.

Win/Mac/Linux Air File
You can download Adobe Air Here if needed.

Game Specifics
Once the game starts, try to match as many of the flying ingredients as possible with the correct word in the menu as fast as you can. The quicker you identify the object, the more points you get. The game takes place over a 30 second span. It records how many you got right, how long you spent in the menu, how many you got wrong, and how many times you clicked down missing an object all together. Once the game is over you will be presented with some stats.

The chart is broken up into groups that span a few seconds each. If you would be so kind as to click “Submit Stats” at the end of the game, those statistics will be uploaded to the server, and reflected in the other charts on this page for all to see.

No personally identifiable information is recorded. The option to put in a user name is there for the future charting options. We are thinking about expanding the charting a bit to allow for filtering by a user name, so you can track your own progress. The charting for this is currently not implemented, but the name is stored with the game session info on the server. If there is enough interest in this project we can make the charting updates. Please note that this does NOT require you to put in an email address or register or anything of the sort, and as mentioned before, the user name part is NOT even required.

If you are interested in these stats, please send this along to friends and family, so we can get a nice cross-section of data. You can direct them here or send them one of the stand alone versions above. If you can watch them while they play, please let us know what you observed in the comments below. We would love to make this a place for some real and useful data on the subject. I’m hoping that over a large enough cross section, we will see the reaction times drop over time (as people learn how to play) and that the total points per segment go up. Only time and data will tell.

Adventures in publicly generated stats
Usage Stats


Get Adobe Flash player

Now that you have had a chance to play around with the systems a bit, I will explain how each of the menu types work:

Tap Menu


Get Adobe Flash player

This is the “control” system. It uses the standard “click to select” behaviors. Click on the apple picture, then click again on the “Apple” option. The advantage to this is people already know how to use it, and there are no issues with being near the edge. The down side is that it (at least for me personally) is 4x-5x slower as measured by the average reaction times.

Standard Pie Menu


Get Adobe Flash player

This is the most traditional implementation. Touch down on a picture of the ingredient, and hold. Then swipe in a direction to make the selection. The menu appears around where you touched. For me this seems to be the most accurate, and the quickest to use (as measured by the average reaction times and average points per segment). However the down side is needing to select an option right against the edge of the device.

Relative Pie Menu


Get Adobe Flash player

This is an attempt at fixing the option visibility issue with the edge cases. The menu is initiated in the same manor at the “Standard Pie Menu”, but it appears in the center of the screen. A purple dot flows from the initial touch location to the center of the menu. When you move up with the pointer, the dot moves up at the same time with the same rate. The location of the dot determines which option is selected.

Gesture Pie Menu


Get Adobe Flash player

This is an attempt to fix the issue of making a selection near the edge of the device. This menu is initiated in the same manor as the others (long press, and drag). The difference is that it is based on the last user gesture instead. So if you are near the right edge and can’t select to the right, you can go left first and then swipe to the right and release. This will still select the option to the right.

Adventures in Preaching from a Soapbox
“I went to a pizzeria, I ordered a slice of pizza, the f@%ker gave me the smallest slice possible. If the pizza was a pie chart for what people would do if they found a million dollars, the f@%ker gave me the ‘donate it to charity’ slice. I would like to exchange this for the ‘keep it!’” - Mitch Hedberg.

The problem here is that the number of people who even know what a pie menu is can be represented by the “donate it to charity” slice. The goal of this project is to determine if we should try to find a way to exchange it for the “keep it” slice.

Love at First Slice
The romance between myself and the lovely Pie Menu System began quite a while ago, when I began using Alias|Wavefront’s Maya (yes Alias, from waaaay back, I’m old, I can’t help it). Technically Maya makes use of “Marking Menus” with gesture recognition. The ability to pick up gestures was a way around the problem of navigating sub menus in a traditional pie menu setup. There is a good early demo video here. For me, at first, the going was rough. The concept is just so very different from standard dropdown menus. There was all of this clicky, holdy, draggy stuff. The draggy bit (in a specific direction) is a key part of the concept. As any avid pie menu goer knows, you don’t actually need to mouse up over top of the option you want to select, you just head in that direction. This all sounds terribly confusing, I know. Worry not, they are amazing.

The goal of a Pie Menu System is to reduce the amount of time spent hunting for things in a menu. So for instance in Maya, if you want to select a face and then do an extrude, you just shift-RMB on the face, and drag down, then release. At first this sounds and feels very cumbersome. However once you’ve done it a few times in a row, you start to become very very fast at it (like 100 milliseconds or less fast). So fast in fact that you no longer have to wait for the menu to draw, you can just click and drag and get on with your life. Imagine that, just “knowing” what you are selecting without needing to see it, with near perfect accuracy.

Eventually other 3D packages started doing similar things. However I think many of them missed the point. For instance if you remember “Nendo” from Nichimen Graphics, (I know, I know, I’m still old) it used these context sensitive pop up menus. The trouble was, it was just a drop down style menu near your mouse. While that helped a bit because the distance between your mouse click and the menu was reduced (see Fitts’s law), you still needed to hunt around for the option you wanted. Autodesk took that a step further in the wrong direction (with Studio Max) in my opinion. They started using what they dubbed as “Quad Menus”. This did essentially what Nendo was doing, but they brought up four menus at once. FOUR! Now you had that much more to hunt through before you could pick what action you wanted to perform. Also, to make it worse, the menus changed a bit based on recent actions, and circumstances. This meant that the menus were constantly shifting, which made it difficult for muscle memory to develop.

Pros and Cons
Pie Menus have their strengths and weaknesses, like all other things in the universe. The obvious strengths have pretty much been covered. The main point being very fast access to often used actions. Unfortunately there are some strong downsides as well. Things will most likely break down pretty fast if you start having too many options. Just imagine how small the difference between a flat swipe to the right and a swipe that is on a 15deg incline. Its seems to start getting tough to be fast and accurate when the options are too close. Additionally, sub menus tend to feel a bit awkward to navigate as well. So Pie Menus shouldn’t really replace all menu types in an application, but I feel as though they could be used more often.

There is one other major drawback to using this type of system, that I had the recent pleasure of discovering (and by pleasure, I mean the kind of suffering brought upon by taking a shiv to the eye).

I was working on another application where I thought I had the perfect circumstances to make use of a pie menu system. There were limited and consistent options, based solely on what object the user clicked on. Additionally the application runs on small, low resolution screen devices such as phones. This presented two non-obvious problems.

Once the menus were finished, we found some people to test the app. It was one of the most excruciating test sessions I’ve ever been through.

The two issues broke down like this:

  • Discoverability (I might just be making up words here…)
  • Edge Cases (literally near the edge of the device)

The near complete lack of discoverability was the first blatant issue. The players had a tendency to simply touch down and then lift their finger. The caused the menu to briefly show up and then immediately disappear. They would just keep tapping and tapping and tapping before giving up with the assumption that the app was broken. In almost every case we had to explain to the player they needed to hold their finger down and drag to an option. Even once they knew what to do, their reflex was to “click” to select.

The other major issue was the location of the menu, and the fact that it had to be of decent size to be properly seen on the small screens. Traditionally pie menus show up around the initial touch location. This work pretty well in most cases. However when you touch near an edge, the menu is displayed off screen and the player has limited room to drag in that direction.

These two issues lead to immediate frustration, which means players will put the app down or in some cases, chuck the device across the room in frustration.

The fact that pie menu usage rules are hard to discover, is a tough problem to solve. There really needs to be a bit of a paradigm shift on a massive scale, so that a large number of users are almost forced to learn about these menus all at once. Its possible to do tutorials and such before the app starts, but it would be better if people just expected things to work this way. Until Android caught on, the long press wasn’t well known either and that is only half of the technique. I mean people have really just (finally) become used to right-clicking for goodness sake. Its tough to expect a very different menu system to catch on over night.

Recently in the news, Peter Warner (seemingly of Apple?) was awarded a patent on what he calls “radial menus”. Here for the patent, and here for the pdf. How that happens I’ll never know, but that is a topic for a very different discussion. The upside is if a company with a far reaching user influence implements a pie menu system, that paradigm shift becomes a possibility, assuming anyone else is allowed to implement them.

I don’t think we are even close to being done with new ways of dealing with menus. There are so many ideas out there to explore:
BumpTop
Tilt Menu
Tracking Menus
Wave Menus

As stated before though, its tough to get people away from the old Linear List, Clicky Clicky interaction habits. But with the advent of all of the recent motion and touch control systems, its seems like the masses might be finally ready to move on, and learn to explore other methods of interaction… so lets start trying some stuff, and just say no to lists :) (wow that was preachy, my bad)

Line
2 Responses to “Pie Menus: Tasty and Delicious”
  1. Alex says:

    If the pie-menu fades in or unfolds to indicate that holding prepares the action, it may be discoverable after a few tries. The user may hold her finger down for diff lengths of time, each time the animation progresses a different amount, showing that theres a relationship there.

    As for the let-go-and-tap, I’ve seen that sooo much.. I think outward-animating gradients can help direct the action there.

    What if the pie-menu looked like you had to trace your finger through it rather than push on beveled-looking-possibly-button-things?

  2. Michael says:

    mmm. Yummy pies!


Leave a Reply

*

Line
Line
Pony