This is the second in a new series we’re doing here on SvN called Design Decisions. In this series we take one design decision, break it down, and explain why we made it.
In this installment we’re going to be talking about the new Backpack page blank slate. The blank slate is something we first started talking about in 2003. We’ve been trying to refine it ever since.
The blank slate is the first screen someone sees when they do something new. Where do you drop them right after they create a new account? What do you tell them on a screen that starts blank but will eventually be filled with content? That’s the blank slate.
The current blank slate when creating a new Backpack page looks like this:
We’ve never been thrilled with it, but it basically says “there’s nothing here so to add something click one of the buttons above.” Problems: The text is too small, too light, and too verbose. But we do have an arrow pointing up.
So for the new version of Backpack we’re working on right now we wanted to rethink the blank slate. We wanted to get to the point faster. Make a better connection between what you can do, how you can do it, and where you can do it.
We started here:
We weren’t settling on these words, but this is the direction we were starting to head. A highlighted call out and 1 or 2 lines of dark black readable text.
But then a strange thing happened. I came into the office at 6pm after working all day at home. No one was around. Then I heard the door chime ring. And Ryan walks in. He was feeling the same way—he wanted to get out of the house and put in a couple of hours at the office.
So two unexpected things happened. I went into the office at 6 and Ryan went into the office at 6. That’s never happened before. When things like that happen it’s a creative icebreaker. Unexpected behavior is a catalyst for creative thinking.
So as we were joking around about it a little I spotted the blank slate that Ryan was working on. We read it, we talked about it, we looked at it, and then we just knew it wasn’t right. We could do better than this.
So I grabbed a piece of paper and drew an arrow. The arrow was to demonstrate that this text was supposed to be referring to these links. This wasn’t a design exercise. It was a spatial exercise. It was “this stuff is about that stuff so let’s see if we can bring the stuff together.”
And then it hit me. Let’s cut through the abstraction and get real with it. Instead of trying to find the right words to explain something, let’s just point at it. Let’s put that arrow to work.
So Ryan took my 3rd grade level sharpie marker arrow sketch and put it into pixels. Then we looked at it:
It was too thin. Too unsure of itself. Too weak. We knew we had to give it some power. Some weight. And some direction besides just the arrow head. Let’s make the line as important as the arrow head. Ryan sketched some quick ideas on paper.
Then Ryan worked his design and HTML/CSS magic. And we had it ready to go in HTML.
The text is TBD, but this is it. A few words and then a bold arrow. “Add something to your blank page by using these tools.” Once you add the first thing to the page the arrow goes away. You only need to see it once and then it gets out of your way.
This entire process took about a couple of hours. From “hey, what the hell are you doing coming into the office at 6?” to the first sharpie sketch to the initial arrow comp to the final thing.