User experience love: "starburst" mobile navigation

Every so often, I see a little something on the web or in an app that makes me think: “wow that’s smart – I wish I’d thought of that.”  Just a little detail that somehow elevates the usability or usefulness of a feature, pushes the medium forward, and makes the experience something special. I’d like to start sharing some of these examples with our audience so you can get a sense of what inspires us and how we think. Here’s the first in a series:

The Path iPhone app was one of the first to implement this “starburst” menu concept in their navigation. When a user taps on the “+” sign in the lower left corner of the app, six small icons expand out from behind the button. Tapping on any of the icons takes users to a different area of the app. Tapping on the “X” button collapses the menu in a snappy and elegant manner.

What’s so great about it?

1. Great use of space – the red “+” button is unobtrusive yet practically unmissable in it’s collapsed state. The expanded menu icons enable users to “see through” the menu instead of the traditional screen blocking that can happen with dropdown menus on a mobile device

2. Great affordance - the red “+” icon is a familiar symbol that means “expand” to both Mac and Windows users (think Windows Explorer or Apple’s Finder)

3. Delight – the spinning icons quickly assemble into a satisfying circular formation and collapse just as elegantly, increasing the production value and “cool factor” of the app while simultaneously offering great usability

Hope you enjoyed this first post in an ongoing series from your friends in User Experience at Klick Health! Do you have a recent UX Love you’ve experienced? Let us know below…