Hello! I'm Brad Jasper, an independent software developer (Web/iOS/Mac), follow me on Twitter at @bradjasper.

Recreating the radial menu from iMessage in iOS 8

This year Apple released a lot of new shiny toys at the World Wide Developers Conference (WWDC).

One that caught my eye in particular was the new radial menu (aka circle or pie menu) in iMessage. Apple mentioned iMessage is the most used app on the iPhone. Which is why when they created a new high-profile feature to record short audio and video messages, I was intrigued that they implemented it by introducing a new custom control.

Example of new radial menu control in iMessage from iOS 8
 

The radial menu is interesting because it's essentially a context menu (the "right-click" on a desktop).

Context menus can be a UI smell, a hint that your design isn't quite right, so you have to be careful when using them. They can hide important actions and when used improperly, make your user experience worse.

In this case, however, I think the radial menus are a good choice (but still need some usability work). Why?

In the new iMessage, recording an audio or video file accidentally could be a catastrophe (like accidentally sending your boss a discussion he wasn't supposed to hear).

But at the same time, when you do want to record a quick message, it needs to be fast and efficient.

The radial menu (with its long press + slide gesture) makes accidental actions unlikely and intentional actions easy.

And I think that's the point of iMessage's radial menu. It's a risky action that needs to be done easily. This isn't usually a good combo, but in this context, a radial menu seems like a good solution.


Problems with radial menus

As mentioned, radial menus should be used carefully.

They're new, and will need to be learned by a large part of the population. Apple introducing this as a standard control will help.

They're easy to mess up and poor usability can be frustrating. In iMessage the initial tap area is too small. This is especially bad for long-press gestures because the miss doesn't register for 1 or 2 seconds—much longer than a regular button.

They can be confusing if they're not extremely simple. For example, iMessage changes the menu actions depending on your current state (newly opened or recording). If this happens too much, a user can get confused because it's not clear how to undo or cancel. Radial menus should be simple and have minimal changes to the underlying structure when they're being used.


Recreating the iMessage radial menu control

I had actually been working on a custom radial menu control and finished it up the Sunday before WWDC. I decided to hold the release to see if anything interesting was introduced.

It turned out WWDC 2014 was a huge year, and in addition to releasing the radial menu from iMessage as discussed above, Apple also introduced Swift, their new programming language.

So I did what any rational Cocoa developer would do, I rewrote everything from Objective-C to Swift and recreated the new iMessage radial menu.


 

The control was built with usability in mind, but was also built to be flexible.

You can customize almost everything, including the animations (built using POP, Facebook's incredible animation library for iOS).



 

There's still a lot of work to be done, but it's close enough to start testing in your apps now. Pull-requests & feedback welcome!

It's become clear as touch-based apps become more complex we're going to need to find better ways to express the UI's. Radial menus, when done properly, can be a great step in that direction.

Download the RadialMenu control on GitHub.







Send feedback to @bradjasper






Links