Design Decisions: Sharing in Backpack Oct 23
35 comments Latest by Alvin
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.
Got a web design project in mind? Find a web designer on Haystack. Browse by visual style, portfolio, budget, and geographic location.
Over 1 million people use 37signals' simple web-based software to collaborate on projects, track contacts, and organize their business with an intranet.
35 comments so far
Dan Boland 24 Oct 06
Glad to hear that Design Decisions will become part of your regularly scheduled programming.
Shaun Andrews 24 Oct 06
Ah, now I remember why I read this blog. Great post!
Carson 24 Oct 06
Ryan, love this stuff, thanks for sharing, glad to hear there’s more coming.
Daniel Elessedil Kjeserud 24 Oct 06
One of the best posts I’ve read in a while on SVN ! Great job Ryan, keep it up!
Jean Moniatte 24 Oct 06
Thanks for sharing. Please keep doing so. It is VERY helpful.
Robert Simplicio 24 Oct 06
This is extremely helpful, and is reminiscent of the 37s/SvN 1.0 (e.g. before Basecamp).
Keep up the good stuff! It’s really all good stuff in my opinion, but this is the kind of stuff that’s just plain rare in my opinion. I know I’d love if this became a regular feature like the Sunspots, Fireside Chats, Screens Around Town, Fly on the Wall, etc.
JF 24 Oct 06
We’re glad you like it!
We decided last week that we’ll be making “Design Decisions” a regular feature on SvN. Stay tuned for a lot more like this.
We’re going to be sharing a lot of the little things that we think make a big difference in UI design.
Ben Lundquist 24 Oct 06
You might want to take a look at the way that this reads. With the bold header it seems that both lines of text are clauses for the statement “This page is shared” If I didn’t know better I would think that all shared pages are public. I know its a weird exception case but your approach might be locking people into that behavior instead of guiding them out?
“sharing isn’t really about broadcasting, it’s more about agreement right?” Well, sharing in Backpack is either of these, or both. Maybe both icons could be used, to help draw this distinction?
forrestRain 24 Oct 06
What a great post. This blog is reaching the stage of “educational”
Wesley Walser 24 Oct 06
Great post guys, glad to see some design related content. The other stuff is nice, but this is what I come here for.
Glen C. 24 Oct 06
I like these types of “DVD commentary” things. They did it in Half Life 2: Episode 1 and now you’re doing it in design decisions. Excellent.
Jason Beaird 24 Oct 06
I too like this style of post. It’s great to see another designers train of thought in motion. Look forward to seeing more.
Noel Hurtley 24 Oct 06
Great post. I really enjoyed seeing the process of how you came to this decision.
I think this small change will certainly add more clarity to the Sharing feature.
Jeff 24 Oct 06
Ben’s right.
My assumption was that the three people have the same access as the public, but perhaps with editing capability. But I had to guess that.
This is actually a good case study in focusing on the details to the exclusion of the big picture.
JF 24 Oct 06
Ben/Jeff—this is made clear when you actually set up sharing. What you are looking at is the result of the set up, not the actual setup itself. It’s very clear what people can do when you set it up.
Matt 24 Oct 06
To make the distinction clearer, perhaps replacing “You are sharing with X…” for “You are collaborating with…” would make the subtle distinction that, with X specific people, you are sharing with greater privledges (i.e. editing/modifying the page).
Mathias Stjernstrom 24 Oct 06
Great post, i think we all love to see how you think, we want your brains browsable :-)
Where do you unshare a page? How about letting “Share this page” become “Unshare this page” when sharing?
Don Wilson 24 Oct 06
I think I’ll become a regular reader again now that these Design Decisions are going to be frequent
Mr Funk 24 Oct 06
Very nice. Good to see some of the iterative development, and the end result is concise and pleasing to the eye.
Jake Ingman 24 Oct 06
Agreed with everyone—these are exactly the posts I look forward to.
Also what zhongyao said is pretty much right on.
Andy Crouch 24 Oct 06
So how do you unshare with someone? Right now a little trash can appears when you rollover a name in the list of people who the page is shared with. That looks harder to do with the “sentence” approach.
Booga 24 Oct 06
The new sharing logo reminds me of the “Socialist Unity Party Germany” logo. It was the former leading party in East Germany or as it was officially called “German Democratic Republic”. I was sixteen and living in Leipzig when the change happend and the wall came down. Will I ever see a handshake pic or graphic without thinking of this party?
Booga 24 Oct 06
Forgot it, here is a link to the “SED” logo.
milo 24 Oct 06
Booga is right, this logo really reminds me of a “Arbeiter & Bauern Partei” over here in Krautland.
dusoft 24 Oct 06
zhongyao: totally agree!!! (and with everyone else too ;-)
Mrad 24 Oct 06
Love the write up Ryan. I have to say though, my biggest concern would be if someone is sharing with an entire group of people, like 10 or so. Is that line gonna wrap, or will you have a “see all” link?
The shaking hands logo reminds me of a design project I did my sophomore year in college – a symbol systems project that required one for business.
Keep these articles comin’! A strong design process is HUGE !
Dean 24 Oct 06
Article is great – though l’m not crazy about the icon. Reminds me too much of the overused stock photo of shaking hands (but is is better than your original icon).
Larry 24 Oct 06
How do you unshare a page?
Matthew 24 Oct 06
Do you click on the sharing icon to change sharing options?
Des Traynor 24 Oct 06
Excellent post. Thanks for sharing it with us Ryan. Its inspirational to see how much work is put into what would appear to be a relatively small aspect of the BackPack UI.
Most web apps designers would typically have stopped far short of comp #1, your work and explanation is really good reading.
gwg 24 Oct 06
I look forward to reading more posts of this type.
JF 24 Oct 06
There’s more to sharing than just this image.
The purpose of this post isn’t to show how to turn on sharing, turn off sharing, add more people, delete people, the difference between public and private, etc.
The purpose of the post was to show a single design decision we made. This series of posts will be about one small design decision.
Nick 24 Oct 06
Yes! Great post. I agree that more like this would be awesome.
Amazing how such a small change can really turn that element around.
Jeff 24 Oct 06
I hope these articles continue. The amount of thought you guys put into the details is inspiring, and the discussion that follows is enlightening.
Even great design is subject to valid (and invalid) criticism. This might come as welcome relief to good designers who haven’t had the marketplace/peer validation that 37s has enjoyed.
Alvin 25 Oct 06
Neat post! I love to get a sneak peek into how your design processes work over at 37signals, it’s not only fascinating but it opens up my work as a designer as well.
More please!
Comments are closed