I'm developing a task app that has a dashboard task list.

The user can change a task's status to done. What is the best solution for the done state?

Tks! enter image description here


You could screen it back with a check mark next to it. But to be honest, I prefer the strikethrough. Look at how Google Keep does it. If it's not critical to be able to see completed items you could have the completed item slide off the list.


Both of your ideas are good. Since both ideas are good, how can you decide in this case of one item in a list?

I find close calls much easier to make when designing for the worse case scenario. How do these two UX ideas compare with a long list; when there is a lot for the eyeball to read?

When glancing at a long list (below), which is quicker to interpret the DONE items and the NOT DONE items? I would vote for the Strikethru Design over the Green box design.

enter image description here

enter image description here

The Green Box solution has an annoying fault of white space in between long and short answers. My eyeball bounces around like a tennis match when trying to align the words with the green box. And this bouncing around adds wasted time when reading a list. Hence, wasted time is bad UX.

  • I find the squared-box easier to spot done from non-done. That blank space is very useful, but maybe it could be replaced by a light gray done icon? – Fernando Aug 8 '17 at 22:21

I agree with @jhurley and @Stefano's answers, but let me add a different angle:

Going back to first principles--what is the user's context and what task are they trying to accomplish?

I'll use my own experience to illustrate, since I don't know who you're designing for. Loosely ranked by frequency of use, these are my personal scenarios:

  1. I have discretionary time and am looking for a task to take on.I want to quickly review all my options and make a selection.

  2. I have completed a task and want to update my list.

  3. I want to review what I have completed and get a sense of my accomplishment, as well as trigger any additional next actions.

  4. I want to revive a task that was marked completed earlier (either because it was checked off accidentally, or I want to use it for a slightly different task).

For each of the above tasks, I want to separate DONE from not-DONE tasks. I've seen several implementations of this separation:

a) spatially separate them (usually not-DONE on top, DONE tasks below)

b) check mark in front of DONE tasks (and blank checkbox in front of non-DONE tasks)

c) strikethrough the task title for DONE tasks

d) filter / toggle whether

ALMOST EVERY task manager implement (b) and (c). (e.g. Wunderlist, 2Do, Toodledo, Asana). SOME implement (a), and (d). I consider (d) a more advanced feature, and whether you do (a) depends on how important it is to preserve list order.

To answer your specific question, the only advantage I see of a label vs. strikethrough is a slight increase in readability.

The advantages of strikethrough design:

  • mimicks what people do on paper, which makes it much less ambiguous and learnable
  • easier to parse (since the user only needs to look at once place to determine status)
  • easier to distinguish DONE and not-DONE tasks - the strikethrough as a visual pattern is easier to pick up
  • you can reserve labels for other features, like "tags" or "categories"
  • this is what most task management apps do.

As @Schwood suggested, Google Keep could be a really good source of inspiration:

  1. Completed actions are automatically grouped, so the user won't need to group them.

  2. There is no vibrant label close to the text, and the strikethrough text-decoration reinforces the concept of "Completed/Done" action. Otherwise, if you want to emphasize completed actions, you could fade out a little bit the actions that still has to be completed.

Google Keep screenshot

Take a little time thinking about the meaning of the list of completed actions for your users: do you really need to show all the actions, and preserve their order (mixing actions with different statuses)?

For example, in the backlog view of Jira, completed tasks are completely hidden.

Not the answer you're looking for? Browse other questions tagged or ask your own question.