We’ve been working hard to make it easier to organize and access your Backpack pages. Earlier this month we released reorderable sidebar links. Today we’re announcing another feature for your sidebar. Now you can add tags to your sidebar too.

Tags are like keywords you can use to label a page. If you have some pages that relate to sales, you can add a “sales” tag to each page. Then you can click “sales” on your “All Pages” screen to quickly see all pages that have been labeled “sales.” Basically tags are a simple and powerful way to group your pages together so you can easily find them later. Tags have been available in Backpack for a long time. What’s new today is that you can bookmark your favorite tags in your sidebar so you can easily jump to tagged pages.

Here’s how it works. First make sure you have some pages tagged. You can tag a page by clicking the “Tag” link on the top of any of your pages:

After you have tagged some pages, you can click the “All Pages” link in the sidebar to see a list of all your tags. The “All Pages” screen has a list of your tags on the right side:

Last week we launched a new feature for Backpack that allows people to comment on the to-do items and notes on their Backpack pages. We had actually built this feature a few months earlier for Basecamp. Since we had already built commentable to-do items for Basecamp, we could have just retraced our steps and built a look-a-like feature in Backpack. However there were a couple bumps in the experience that we didn’t want to carry over. We took the Backpack implementation as a chance to reconsider those bumps in the earlier Basecamp version so that both apps can be better in the end. Along the way we found a really nice method for positioning our comment icons relative to the flowing text of a to-do item.

Here’s how the feature works in Basecamp. When you hover your mouse over a to-do item, a comment icon appears on the right side of the to-do text:

We implemented this by rendering the comment icon after the text of the to-do item as an inline element. The to-do text and the icon are rendered within the same containing block like this:

<div>
  This is the text of the to-do.
  <img src="comment_icon.png" style="display: none;" />
</div>

I’m happy to be teaming up with Carson Workshops to offer a full-day workshop in London on April 27. I’m going to take complete advantage of the full day to go deep into all aspects of UI design and development. I’ll cover everything from feature conception and sketches to HTML/CSS mocks and collaboration with developers on Rails templates. In addition to insight on designing clear and truly understandable interfaces, I’ll also be giving a rare look into 37signals’ coding style from HTML markup to CSS to Rails templates.

A great thing about these workshops is the size. We’re capping the day at 40 people so I will surely be able to take questions throughout the day and follow your own interests at length. Think of me as your consultant for the day. This is a great opportunity to get a first-hand experience of 37signals’ design process from the big-picture vision all the way down to individual pixels and coding decisions.

Where and When?

Mon, 27th April 2009
Workshop: 9:00am — 5:00pm
Social: 5:30pm till late
Venue: RIBA London
Spaces: 40

Visit the Carson Workshops page to register. And bring your best questions and ideas. Hope to see you there!

We’re very excited to announce a new Backpack feature. Now you can post comments and add attachments to list items and notes on your Backpack pages. Every list item or note can be a starting point for a discussion.

To comment on an item, hover over it with your mouse. You’ll see a comment icon appear on the right side:

Click the comment icon to see the comment page for that list item. You can check and uncheck the item at the top of the page. Use the comment form to post your thoughts or attach files:

After one or more comments are posted to an item, an icon will appear beside the item with the number of comments inside it:

This is an incredibly useful feature that turns every page into an opportunity for discussion and clarification. We hope you enjoy posting comments to list items and notes. Thanks for organizing your life and business with Backpack!

As interface designers, we want our work to look good and also to make sense. Every element on the screen should please the eye, and at the same time interfaces aren’t merely art objects. They have work to do. Interfaces need to provide information and clearly indicate the possible courses of action. These two factors—sex appeal and function, prettiness and clarity, decoration and meaning—they often co-exist when the designer is skillful. But still there is a potential for conflicts between how we want a design to look and how that design is understood by our customers. I recently ran into one of these questions of decoration versus meaning on GitHub.

Global navigation on GitHub

After you log in to GitHub, the global navigation appears at the right-hand side of the header. The navigation block is wrapped and held together by a rounded rectangle.

Look at the rounded rectangle that holds this nav block together. There is a grey border around the outside and the whole block has a light blue background. The border and background are decorative. They stylize the block and add visual interest. To help you see that these elements are decorative, I made a quick comparison with the original on top and a new version below with no border or background:

We’re excited to announce a new Backpack feature. Now you can reorder the pages linked in your sidebar. Sidebar links are no longer limited to alphabetical order. Our customers have been asking for this and we’re glad to deliver it today.

In the past, people have been using all kinds of tricks to keep their pages in a certain order. We’ve seen people numbering their pages or prepending them with funny symbols like * and # to force the pages to the top of the sidebar. Now all you have to do is hover over a page and drag to move it up or down.

Hover over a page link and you’ll see the drag icon on the right-hand side. Grab onto the icon and drag up and down to reorder the page. When you drop the page, the position is saved. It’s that easy.

We hope you enjoy taking control of your sidebar with this improvement to Backpack. Thanks for your continued support!

There are only two hard things in Computer Science: cache invalidation and naming things. —Phil Karlton

Karlton’s quote isn’t just for techies. Interface designers are in the business of naming things too. We’re copywriters. It matters if we call something an Event or a Milestone or a Deadline. And it also goes deeper than that. The names we choose shape our software. They define the way we think about it and the way our customers interact with it. To understand why this all matters, you should meet two important ideas from the programming world: domains and domain languages.

When you’re working on software, the domain is the life situation your software is involved with. Basecamp’s domain is the life situation where people are trying to collaborate together on a project. iPhoto’s domain is that situation where someone has a collection of photos and they want to look at those photos and share the photos with others.

Now here’s where it gets interesting. Each application has a way of approaching its domain. Software designers think of a domain like a big cake and cut it into slices. Basecamp cuts project management into Messages, Files, Milestones, To-Dos. Photo organizers before iPhoto ‘08 always sliced their domain into Photos and Albums. In both cases, the software designers take a complicated life situation and boil it down to a few easy pieces with names. No domain comes pre-sliced—unless you’re blindly copying someone else’s software. It’s up to the designer to cut the pieces and give them names.

This process results in a domain language. A domain language is the set of words that reflect the way you cut up a domain. It consists of the pieces you sliced and the names you chose to give them. This language defines an application and makes it special. And for the last couple years Apple has been innovating iPhoto’s domain language very intentionally.