Improving the card detail pane

When Trello was released a few people asked about the vote button on the back of cards. Why the big, prominent button at the top right?

I didn’t have a great answer. We weren’t necessarily trying to promote voting over other features. Time went on. We made new features. We fixed bugs. We knew we needed to examine the card detail pane with a fine toothed comb, but we never made the time.

Well now we’ve done a small audit and found a number of things worth improving. Here are the results.

Finding A: The vote button

The aforementioned vote button. So big. So in the way. After some data mining, we found that 98.2% of cards had zero votes. People also mentioned that when they went to close the card, they brushed by it, making it flicker green annoyingly. Sure you can always turn off voting, but you shouldn’t have to. Less than 5% of users will change the default settings anyway.

Resolution: We put the vote button with the other actions in the sidebar. The ‘I voted’ state is now a quieter checkmark. The vote count is now beneath the card title with the other metadata. If you want to see who voted, you can click the count and bring up a list. You can vote from that menu as well.

Finding B: Due dates

The main problem with due dates was that they were in a whole different section of the pane, separate from the other metadata. This made the pane longer than it needed to be, and kept you from activity feed. You also had to look in multiple places for similar metadata.

Resolution: We made the due date a badge just like the other metadata. It’s clickable like the vote count. Clicking brings up a menu that lets you change the due date. You can always change the due date from the actions list in the sidebar as well.

Finding C: Showing the list

On the back of the card, Trello tells you which list the card occupies. It showed up beneath the title. The problem is that if you weren’t using a bunch of other Trello features, the list would show up on a new line, making the pane longer than it needed to be. And if you did have a bunch of attachments, comments, checklists, and other metadata, it would often push the metadata on to two lines, making things difficult to read.

Resolution: The list is now inline with the card title, saving lots of space. Easy enough.

Finding D: Labels

Like showing the list, when you’ve got a healthy amount of metadata, showing labels would make things drop to another line, making the whole thing difficult to read.

Resolution: We put the labels in the sidebar. You might be saying, “Hey, didn’t you just say putting all the metadata together is good? And didn’t you just take the vote button out of the sidebar?” Well, unlike the old vote button, the labels section won’t show up if you don’t have any labels. Also labels looked separate from other metadata on the front of cards, so why should they be inline with everything else? And now they show up as bands, making them look similar to the label selection menu.

Going forward

Trello is still young. As we’ve shipped new features, we’ve accrued some visual debt. Hopefully with the new, cleaner, and more consistent card detail pane, we’ve paid some of that off. We’ve also been touching up other parts of the interface. We cleaned up the look of badges, made the header brighter and more colorful, and given the whole interface more polish and an ever-so-slight amount of depth. As always, check out the Trello development board for the latest.