A Critique of the Jawbone UP App User Interface
/The Jawbone UP is a great device and I've really enjoyed using it the past few months. The data collection is impressive and it's a well designed band for comfortable usability. However, there are some pretty obvious issues with the UP app (the iPhone version) UI that I think really need to be addressed.1
The app's navigation is based on a sliding panel. Swiping right from most screens reveals the top level navigation.2 However, users will be spending most of their time on the Home screen and because this is where the UP displays its collected data and allows the user to edit the settings for the band itself. On this screen, the sliding panel goes in both diresctions. Swiping right will reveal the main navigation, but swiping left reveals the alarm(s), Idle Alert, Power Nap, and stopwatch settings for the band.

This app is a great example of good sliding panel design. You want to have your band plugged in as briefly as possible and the sliding panels allow you full access to all band-related functionality quickly and easily. Here's the problem: in addition to swiping to reveal these settings, there are also buttons in the top corners. Now, an argument can be made that this is to aid discoverability, but the issue is magnified by the icon choices for the buttons. The left settings are indicated by the standard hamburger button (hotdog button?). However, the right side uses a '+' button to indicate the sliding panel. Arguments about the design utility of the hamburger button aside, that plus sign really fails to communicate the functionality to the user. But, what else could be used there? A second hamburger button?
How about no hamburger buttons? I'm a proponent of the idea that users really don't need buttons to understand and navigate sliding panel based apps. Once we know that an app works this way, the buttons and the bar housing them become wasted space. A great example of how space really opens up one you assume that people can figure out sliding panels is Riposte, for App.net. This kind of design also solves the problem of dealing with the second button in the UP app. If going this far just is not an option for some reason, look at how The Magazine deals with it. Sure, it's effectively a hamburger in a bar but at least it's a less obtrusive hamburger in a less obtrusive bar.
The other great offender in the app is the Notifications screen. You won't really use this screen much unless you have what Jawbone calls Teammates, but there is a button in Notifications that doesn't appear to do anything like what its icon indicates. I'm referring to the button with the standard 'compose' icon in the top right of the screen. When tapped, it changes to a check mark. When you tap it again, it changes back to a compose button.


That's all it does when there are no notifications. Now, I don't get any notifications in this box because I have no teammates, so this button's functionality may be evident to people who receive notifications, but there is no communication to the user what this button does other than toggle its display. Also, swiping left to reveal the top level settings does not work from the Notifications screen. You must use the UI button, which is very confusing for the user and breaks the flow of the app entirely. I imagine that this is particularly frustrating for people with large Teams and many notifications.
As you've seen from these images, most of the UI of this app is beautifully designed. The animations add a little bit of joy to the interface and the data presentation is some of the best in the business. The app is very impressive, but these few problems with the interface really stand out among such great graphical design. Luckily for Jawbone, these issues I've pointed out can be fixed relatively easily. The data collection and presentation that is the core of the app really shine and the UP band itself impresses me every day.



