Reeder for Mac Beta UI Design: My 2 Cents

The beta release of Reeder for Mac has caused a bit of a stir in the Apple blogosphere. The app has generally been positively received, but has been criticised for not following Apple’s Human Interface Guidelines. I use Reeder on my iPhone and iPad a lot so I’ve been looking forward to the desktop version. Overall I think the app is excellent, buy I do have a few criticisms.

Firstly, the stared/unread/all switch suffers from poor affordance. It seems to be inspired by the iOS switch:

Reeder’s stared/unread/all switch

iOS switch

Reeder’s switch works by clicking on one of the two unselected options. (This is different from the iOS switch which works by tapping anywhere on the control. The standard iOS switch is affectively a simple toggle, like a checkbox, but the metaphor of a mechanical switch has a permanent feel compared to the transient feel of a checking a box.) When I first interacted with Reeder’s switch I clicked on the selected item and became confused by the lack of feedback. I had interpreted the selected option as a button and the unselected options as being disabled buttons; the switch metaphor was not clear to me. The button metaphor is a better fit with the mechanics of a mouse/trackpad than flicking a switch. I would fix this by using the radio button metaphor where the selected item is depressed and the unselected items are pronounced and beg to be pressed.

Reeder takes a non-standard approach to keyboard interaction. The active control is not clearly highlighted, (in a ‘normal’ OS X app this is done with a blue halo effect on the active control), this makes it harder to navigate the main window with the keyboard. Also, the keyboard shortcuts do not follow the OS X convention. The OS X keyboard shortcuts convention is a combination of one or more modifier keys (i.e. command, option, control & shift) and a character key. Reeder mimics the Google Reader web app and uses single key shortcuts for common commands. I think this is misguided. Reeder is a native OS X app so it is within the context of OS X that the keyboard shortcuts should be considered. Breaking with the OS X keyboard conventions increases Reeder’s modalness (modes are generally a bad thing) in relation to other OS X apps without adding contextual value.

When switching between article categories the list of articles animates with a slides from left to right or right to left. Which animation occurs depends on whether the newly selected article category is above or below the currently selected category. Animation is a powerful communication tool, in this case however, I think the animation is poorly chosen. iOS users navigate through hierarchies by tapping an item to see more details (i.e. they are descending the hierarchy). When they do this the screen slides in from the right, when they go back the previous screen slides in from the left; the animation communicates the hierarchical relationship. The left/right animations in Reeder imply a hierarchy which does not exist. If the animations where performed vertically (as they are on the iPhone version of Reeder) then the animation would simply provide additional feedback that the selected article category changed and would not imply a hierarchy. (Off topic: writing this paragraph reminded me of an interesting article about how the iOS navigation transition uses relative speeds to create a more engaging interface.)

As I said, Reeder has attracted attention in the Apple blogosphere, and rightly so. The beautiful visuals and focused feature set (I really hope it doesn’t become infected with feature creep)  increase usability and make a rather pedestrian task into an enjoyable experience - I just hope the little quirks are fixed. The fact that Reeder breaks the HIG is not important; in general Reeder exhibits better design than the majority of other apps. As Frank Zappa said: “without deviation from the norm, progress is not possible”.