Concentric Radial Menu

Why we built it

 

Use The Screen

 
menu_controller.png

UIMenuController

 
menu_controller_radial.png

Concentric Radial Menu

 

Standard context menus seen throughout iOS only utilize a small portion of the available screen. These menus are attached to a given item on screen, but can be difficult to see in certain circumstances. Worse, they have very small tappable regions, making it easy to tap the wrong option or miss it entirely.

The CRM is designed to be effectively modal; it momentarily takes over the entire screen of the device. Visibility is no longer an obstacle.


Give Context

 
standard_glyph_radial.png

Typical Radial Menu

 
standard_glyph_crm.png

Concentric Radial Menu

 

Many popular radial menu implementations only show a glyph on each button. While this is often sufficient, it can be overwhelming to new users that aren't familiar with what each button does.

The CRM is designed to show the best of both worlds. By default, you see labels on each ring, which is comparable to a UIMenuController. When you drag your finger over a ring, the center darkens and shows the user a corresponding glyph. This acts as a reinforcement for when something is unclear.


Respect The User's Hands

 
thumb_standard_comfort.png

Approximated Comfortable Thumb Region

 
thumb_standard_crm.png

Maneuverability of CRM

 

It doesn't take a left-handed person to understand that the majority of apps in existence tend to favor the right hand. This unfortunate bias is hard to overcome when designing a UI, but it was a huge part of our considerations in building the CRM. By using symmetry as the primary design guide, and allowing free movement in any desirable direction, we've made this practically a non-issue.

As illustrated, this also helps create a more thumb-friendly experience. Reaching across the screen is uncomfortable, so we made sure you could make the return trip part of the interaction. The result is something that feels much better than doing multiple taps for the same action.


This Won't Work for Everything

We want to make that very clear. It will work for a lot of circumstances, but not all. This is something we will be pondering after we see what the rest of our community says. Internally, there's a crude human interface guideline but there's no need to post that here yet.

 

A Good CRM is an Adaptive CRM

We try to make sure that no matter where the menu is presented on screen, the menu options are visible. So if you're thinking "But what if it's not positioned in the center of the screen?!" don't worry, it's built to handle all on-screen positions as best it can.

 

Will This Be Open Sourced?

Yes. But it's hard to say when. Read "our" About page to see why it may be difficult to get there (busy summer!). The menu was built with open source in mind, but it still needs a fair amount of work to fully decouple from Pictorian and make portable for all circumstances. There are a large number of developers in the Cocoa community and we're sure this will be cloned in a matter of days. If someone is interested in helping prep it for open source, please drop us a line.


Can I Play With This?

Of course! Check out our new app, Pictorian, which facilitated the CRM's creation.