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.

6 thoughts on “Improving the card detail pane

  1. Nice. Small but usefull changes.

    I see one more thing : remove the duplicates. Now that we’ve got the labels on the right with a “change” link right above the section name, the big “change labels…” button is redundant.

    And why not adopt the same system for the other sections, while we’re at it ? Putting an “assign” link right of the “Members” part, “upload” right of “Attachments”.

    Thanks for the work so far, hope Trello will keep on going that nice route ! My schoolproject team loves it !

    • The labels section is only there if you’ve added labels, so if you didn’t have any there would be no way to add them if there wasn’t a button in the actions list. We wanted you to always be able to do everything from the actions list, not have it change based on what things you have added (due dates, votes, labels, etc.).

      As for members and attachments, those features aren’t represented in the actions list so having a big button makes them more obvious.

    • Time tracking and estimates will likely be premium features. We’re working on an API at the moment and will add premium features once that is ready.

  2. Trello looks and works great, but I can’t commit any actual work to it without an export (i.e. backup) feature. ANY export feature (OK not “any”, binary would suck, but you know, human-readable characters and end-of-lines would probably be enough). PLEEEEEAZE!!!!