A few months ago we launched the Items Anywhere feature in Backpack. This allowed you to move content anywhere on the page. You could have a file then a to-do list then a note then another to-do list, etc.

Good, but…

People loved this new functionality, but it introduced some new behavior into Backpack that turned out to be more frustrating than we thought. The issue was this: As part of the new Items Anywhere feature, you had to add new content from the top of the screen. You could move anything anywhere you liked, but it had to be added at the top first. Then you could move it somewhere else. This made adding and positioning a two-step process. Annoying, yes.

So now what?

We started brainstorming, sketching, and considering some options. How could we keep the Items Anywhere feature but also allow you to add content anywhere? How could we do this without making things more complicated or without adding a lot of interface overhead?

First idea: Add from the bottom too

We had a fair number of requests from people who didn’t mind adding content at the top of the screen, but they also wanted to add content to the bottom of the screen. This seemed like a reasonable request, but it didn’t solve the more common problem: How to add content to the middle of a page. Adding content to the top or bottom still required you to move the content after you created it. So we passed on that solution.

Eureka in a chat

I pinged Sam regarding this “widgets to add content under a page separator” feature we’d been loosely discussing. We tossed around a couple of options: Adding content from a divider and adding content anywhere via a hover in the gutter between items. Sam’s “add anywhere via a hover in the gutter” concept seemed like the best idea, but we tried the divider option first since it was the easiest (“Judo”). Here’s the chat transcript:


I’m on the left, Sam is on the right

Second idea: Using dividers

New in the Items Anywhere release were page dividers. Page dividers let you divide a page into different labeled segments. They felt like a natural fit for adding content anywhere on the page. If you wanted to keep your notes together and your to-dos together and your files together you could just create page dividers and then add new content directly to those sections.

So we got real and mocked up a couple versions of this:


This was a version that revealed the add content links when you hovered over a divider.


This was a version that always displayed the add content links below the divider.

We weren’t happy with either of these solutions. First, it required you to add a divider. If you wanted to add content in a lot of places your page would be littered with dividers. Second, it just didn’t feel right. The feature was hidden behind a hover on another feature. It wasn’t discoverable enough. It was too much to ask.

Third and final idea: Add Here

After dismissing the add-via-divider idea, we moved on to the “add anywhere via a hover in the gutter” idea. We quickly mocked it up:

We liked it. A lot. It felt right, it made sense, it solved a couple of problems at once. Then we started thinking about where the hover target would be. How would someone initiate the feature?


Mousing over the red area would flip on the hover.

Sam got to work hooking up the Javascript and Rails code to make it work. Then we polished it up so it looked nice:

Watch this Quicktime movie to see it in action.

So far the feedback has been great. We’ve gotten plenty of feedback via email too. We’re really happy with the solution and are thrilled to see our customers are too.

If you haven’t tried Backpack maybe it’s time to give it a shot. Or, if you tried it before maybe it’s time to try it again. It’s gotten a lot better. Thanks!