Grouping to-dos

Jason Fried
Jason Fried
For 13 years we've done stuff like this...
====== OTHER ====== 403 KB View full-size Download

QA: 463 KB View full-size Download

What we're trying to do is create simple groups of to-dos within a single list. So we're hacking it. We're either creating "===Artificial Dividers==========" or prepending a batch of to-dos with a label like "QA" or our old standby, the trusty ~ which is code for "maybe". Yeah it works, but it's messy, and it's not a refined pattern to share with customers. 13 years in, it's time to level up.

To-do groups

A couple weeks ago, Ryan and I spent an afternoon working out an idea out to make to-do groups first class citizens without adding noticeable complexity to the purity of today's to-do lists. We're pleased with where we landed, and we'd like to put it forward as a big batch project this cycle.

Here's how it works:

First, to-dos without groups will look identical to today's to-dos. We won't add any additional UI around them, no new buttons, etc...
A basic list remains the same 185 KB View full-size Download
But, if you add a group (or groups), it'll look like this...
A list with some loose to-dos plus two groups of to-dos 230 KB View full-size Download

This means now you could make a list for a specific scope that had a section for design-specific to-dos, and QA-specific to-dos.
With labels 189 KB View full-size Download

A group is defined by a divider. You can name a divider anything you want. It can't be checked off, it's not a to-do itself. Any to-dos you put below the divider become part of that group. And critically, groups always go below any ungrouped (loose) to-dos. This simplifies a bunch of behaviors, and prevents loose to-dos from being lost between groups. If it's loose, it's at the top.

You can create a divider in two ways...
Two ways to make a divider 152 KB View full-size Download
  1. Click the hamburger menu next to the list title. You'll get a menu. One of the items will be "Create a group" (or add a divider, exact language TBD). It'll then add a blank divider at the end of the loose to-dos, and scroll right to that point so you can name it.
  2. You can multi-select (shift key) multiple loose to-dos, and instantly create a group from those to-dos. If you do this, an unnamed divider will be created, and the to-dos will be placed under that divider.
Key to this concept is that we'll add "Add a to-do" buttons to the bottom of each group (and the loose to-dos at the top). So once a divider exists, you can add to-dos directly to that section. If we didn't do this, and we only had one add to-do button at the top or bottom, you'd have to add and then move into place. That's a hassle. It's much better to add it place when we have places to add.

Completed to-dos will still be grouped into a single collection at the bottom of the entire list. If they were part of a group when you checked them off, we'll prepend the group name before the to-do like so...
If you uncheck a completed to-do from a group, it could go back up to the group (assuming the group divider hasn't been deleted). 185 KB View full-size Download
Groups will also have their own permas. So you can click the title of a group/divider, and you'll see a new page with just the to-dos in that group...
Group perma for QA 195 KB View full-size Download

What we like about this concept overall is that it's very straightforward. It doesn't change existing to-do lists at all. No new permanent UI in the way, no behavior changes if you don't use groups.

But if you want to level up your organization - and we'd use the shit out of this - then you can add groups to a list. No groups within groups, no indenting - just as many one-level groups as you'd like.

There are open questions. Things like if you move the divider, do all the items move with it? I'd say yes since it's a group, but we have to work that out. Also, since you can't put groups above loose to-dos, we'd have to prevent dragging above a certain point, but that's doable as well. I'm sure there are a few other questions as well, but we can work those out as we go.

BONUS: Down the road we'd like to explore adding to-do templates to BC3. We have project templates, but now we're just talking to-do templates. You can imagine creating a template with no to-dos, but with groups in place. This is a process boost - people can organize projects in similar ways with just a little bit of structure like this...
Just add in place 155 KB View full-size Download