When our mobile team was tasked with implementing the labels and rollups feature from the New Relic APM and New Relic Servers products, we were excited to be able to take this great feature and optimize it for use on mobile devices.
Labels and rollups are designed to let users filter down a list of hundreds or thousands of servers and apps to a smaller and more easily digestible subset, and to be able to quickly drill down to the server or app that they care about.
A secondary goal is to let users group—or “roll up”—a specific set of applications and servers to be able to see the health of the entire group at a glance.
Moving to mobile
One of the first things to tackle in moving this functionality to a mobile device is where and how to display these filters and rollups. On the Web implementation, labels and rollups are accessible by tapping in the search bar, and the pop down from that action displays a subset of the available labels and rollups.
We explored adding them below the existing search bar, above the table view on the list views, similar to the way they’re implemented on the Web. We also looked at adding them as a full-screen modal type popover. But neither of these approaches seemed as usable as the solution we choose: a slide-from-the-right popover list that is accessible by tapping on a button. This implementation lets you tap on a filter or roll up and see the number of rows change as you filter the items:
Another hurdle was deciding where these selected filters/rollups should live. On the Web, these filter boxes live below the search bar, and above the list of filtered applications and servers:
Given the limited real estate of mobile device screens, however, we determined that putting them in this spot would take up too much space, and ultimately make this feature unusable. Instead we put them above the labels and rollups list in the slide-from-the-right popover, and added a small indicator icon to the button that opens the popover list. This allows a good trade-off between displaying the selected rollups and/or labels while also preserving the screen real estate of the app/server list:
The last item we wanted to tackle was a reworking of the Web version of labels and rollups. Selecting the filters and rollups that a user wants can take time. We decided it would be neat to let users save this filtered view into the menu list, similar to how we show individual plugins, and allow users to quickly navigate back to a saved view:
Since it might not be immediately obvious where the saved view would live, we added in a little animation of the saved view name traveling to the menu, so that a user would see where to access this labels and rollups filtered view.
Finally, we felt that it would be nice if users had the ability to reopen the app and have it navigate back to the last saved labels and rollups view so that they could quickly get back to seeing the applications and servers that they are interested in.