A todo app is really simple right?

The tasks are:

• Add
• Delete
• Mark as done

We’d all probably be able to make a todo app without any kind of plan but no matter how simple you think something is, it is worthwhile to break it right down into tiny steps that can be confirmed. Only list things that can be independently confirmed and checked off. Anything too vague for someone to check off in seconds needs to be broken down further. I like to start with a user action that is small and easy to test. Then I break that down into mini-milestones that seem stupidly trivial. It takes less time to think this way and we can all use a dopamine hit from checking things off…

Let’s break this down further:

• User can add a todo item by entering in it a text field

  • textfield for adding items is displayed
  • user can select textfield
  • user can enter text into textfield
  • user can commit an item to be added by pressing return when editing text
  • added item is shown in updated list

• User can delete an item from the list

  • user can select an item
  • item shows DELETE affordance
  • user can tap DELETE
  • removed item is no longer displayed in list

• User can check an item as done

  • items have a checkbox
  • user can tap the checkbox to indicate an item is done
  • done items are show by changing font to strikethrough

I haven’t even begun to break down the actual displaying of the list in the first place:

• When user opens the app, a list of todo items is presented below a textfield for adding new items
  • textfield for adding items is displayed
  • list of items is displayed
  • done items are indicated by striking through

Also, how does the user cancel editing? Can you uncheck a done item? We keep asking questions until we have an answer for everything and a list of things that are precise and small enough to be checked off by almost anybody. You should be able to give the list to anybody and let them loose on the app and come back with a completed checklist.

You might think this is far too much detail to go into and that it is so obvious that you might as well just write the add() function knowing everything that goes into it. Say we do that and now the ADD task is completed and out of mind. We still had to think through the steps to build it and we still ended up converting the tasks from ideas in our head to lines of code. We might as well write that process down rather than do it in our heads. As Richard Feynman might say unless you can explain how to make the ADD function to a child, you do not understand it fully enough yourself. So make life easy for yourself and keep breaking tasks into smaller tasks until you get to the lines of code.