I just wrapped up a new UI for sharing pages in Backpack. Each Backpack page has a ‘Share this page’ link in the footer.
We decided that a block should appear above the footer when the page is being shared. The mockup will show the most complex state, where someone is sharing the page with their friends and sharing it via a public URL. People normally do one or the other, but we must accomodate the ‘both’ case.
This first take is rough. But right away there is good news. The elements are on the page, and I’m confident that the sentence approach (‘This page is shared with…’) will work well. However there are problems too.
The font size is small and the spacing awkward. The typical case will have only one line of text, and there will be too much negative space. The icon is bad, but that’s a placeholder for now. I’ll make a new icon when the HTML is right. The biggest problem is the block as a whole. It doesn’t hold together with a single identity. Whenever I run into this problem, I apply a casual design pattern. I think of it as the ‘handle’ pattern.
‘Handle’ is just my mental nickname for an element on the page with a double job. First, it works as a focal point in the visual hierarchy. That’s a fancy way of saying that some road leads the eye there. Second, it groups some lesser elements together and holds them as a unit. A black header reading “This page is shared” works great on both counts:
Now the block holds together with clear purpose. It will look even better in the typical case of one line instead of two. Since I liked the sentence style of the first design, I took it further. Rails has a helper called to_sentence that will easily cook out the first line, even with the ‘and’ at the end.
The last thing is a better icon. That tiny text has got to go. And sharing isn’t really about broadcasting, it’s more about agreement right?
Every screen and block takes an interesting path from concept to fruition. We plan to share more of these Design Decisions, and would love to see more processes from you as well. If you should post something, link me up at ryan at 37signals dot com.