Aaron Bushnell's Blog β

Path’s Fly-out Navigation

Path recently updated their iOS application to a 2.0 release. The release brought numerous changes, including a very interesting user interface tweak. Thanks to Jared Hardy, who created a very impressive HTML/CSS version of it, I can easily demonstrate it.

Jared Hardy’s HTML/CSS recreation of Path’s fly-out menu

Path put great detail into this interface. In the normal state, the icon indicates you can “add” or “create” a story. In the active state, the icon rotates and the button changes from add/create to “cancel”.

A change in hue

Although it is obvious the button indicates these two things, I thought it could be improved further to change the color on each state as well.

A modified version of Path’s fly-out menu with green as the add/create state

However, since green isn’t part of Path’s color palette, I assume they decided to keep the states the same red color.

All in the details

The team at Path did a great job refining this part of the application. User interfaces are tricky and it takes time to make them worthwhile. Path nailed it.

♻ Please recycle me when you're done. Thank you!