Visual revamp of GNOME To Do

Greetings, GNOME friends!

I’m a fan of productivity. It is not a coincidence that I’m the maintainer of Calendar and To Do. And even though I’m not a power user, I’m a heavy user of productivity applications.

For some time now, I’m finding the overall experience of GNOME To Do clumsy and far from ideal. Recently, I received a thank you email from a fellow user, and I asked they what they think that could be improved.

It was not a surprise when they said To Do’s interface is clumsy too.

That motivated me to experiment and bother our designers about ways to improve GNOME To Do. With the great help of Tobias Bernard, a super awsome contributor, we could figure out a way to improve the current situation.

Opaque Task Rows

One of the problems of GNOME To Do was the translucent task rows. Priorities would be semi-transparent colors applied on top of transparent rows.

Of course this mess could lead to things like this:

Mess
Can you tell which tasks are high, medium and low priority tasks?

After some investigation, a lot of experimentation and feedback from multiple design team members, we could come up with this:

New colors
All opaque rows with priorities at the borders.

I personally think this is a small, but huge improvement over the previous state. When you have to stare at tasklists for hours, the minor annoyances are what causes the biggest frustrations.

Inline Editing

Another big aspect of To Do that was the task editor panel. This was initially made based on some old mockups, but this proved to not be the ideal experience.

The biggest problem was that there were no connection between the editor and the task. Of course there is an arrow pointing to the task row, but consider that:

  • The task title is edited in the task row
  • All other fields are edited in the side panel
  • The arrow might now be obvious to spot
  • The real representation of the task was the row, not the panel

So Tobias suggested me inline editing of tasks. I went ahead and implemented it, and the result looked actually very good!

Inline editing
Editing the task where the task is represented.

The necessary width was reduced, and now the window can be shrinked to small sizes. And it works nicely on Dark Themes too:

Dark theme
New rows on Dark Theme variant

This work already landed on master, and will be part of GNOME To Do 3.28. And, of course, our traditional sequence of images:

 

Any comments? Thoughts? Please let me know in the comments! And don’t ever forget, you can always get involved – you just need to get in touch, and join us at #gnome-todo at irc.gnome.org.

Enjoy!

Advertisements

24 thoughts on “Visual revamp of GNOME To Do

  1. Looks great!

    In the figure with caption “Editing the task where the task is represented” there are two things that confuse me:

    1) For task A, what does the X button in the upper right corner do? Does it delete task A? Does it collapse the expanded view of task A?

    2) Why is the “Delete” button in the bottom? I thought Gnome had action buttons like this in the top of a window.

    Søren

    Like

    1. Hi Søren, thanks for the feedback!

      You’re absolutely right about the X button, and also about the Delete button. So far, these changes only affect the task rows – I just packed the previous Edit panel inside them.

      Now I’ll take some time to rethink the task editing widgets. I thought about having an responsive layout where groups of widgets would be packed side-by-side, or vertically, depending on the available width.

      Like

  2. I had the same problem, wandering about the X button as well.
    I think this should rather be some arrow to make clear that it collapses the inline editor.
    Does clicking outside the editor pane work as well to collapse it?

    Steffen

    Like

  3. Looking good.

    Two things come to mind though:

    1) The X button at the top right of an expanded task. This button usually means closing something and make it go away. In your case, however, it only collapses the task. Like the comment from Søren above, this confuses people. You constantly wonder if it will just close the task or if it will get rid of it so you’d have to recreate it. Consider changing the icon and maybe even the position. You would normally see a collapse/expand control before the label/name, in e.g. a tree list.

    2) I do hope that clicking on a collapsed task will collapse the current task and expand the new one automatically. This will prevent having to perform two actions instead of one (collapse first, expand after).

    Like

  4. Hi GEORGES,

    Looks great but couple of input:

    In “Today” or in “Scheduled view”,

    1) If a task-list uses a specific color then, then all task belonging to that should use same color indicator in the main view regardless of it’s priority. That’s what Todoist does. That’s what we do in calendar.

    But here We are setting priority indicator in the left side. Why is that? Why priority indicators are so important that we must show it as a color indicator and why does it overwrite task-list color?

    How does people will differentiate which task belongs to which task-list if we have more than one task with same name? Reading faded task-list name on task is inconvenient.

    I feel color indicator should be the color of the task-list it belongs to and not priority color. Inside task-list your implementation is fine.

    2) If showing priority is so important why don’t we show it as separate indicator along with task-list indicator in the main view? It can’t small horizontal indicator in the right (that’s what ios does). Or it can be a number.

    Thoughts?

    Like

    1. Well, I use GNOME Online Accounts to sync the tasks from my Nextcloud instance. On my phone I sync the same tasks using DAVdroid. With that you got all of your info at your fingertips.

      Like

  5. The “Priority” combobox looks kinda strange, with a full width. Why not use buttons labelled “None”, “Low”, “Medium” and “High”, the same approach as in “Due Date”?

    Like

  6. This looks really good. Maybe the edit menu can be even more compact by putting some things side by side instead of on top of each other?

    One unrelated feature I would love to have is the possibility to turn off alphabetic sorting, so that I can order the items myself by dragging the items around (and after completing a task it should stay in the same position, just striped through). Maybe having alphabetic sorting turned off should even be the default? What do others think?

    Like

  7. So…… the primary role of a to-do app in my life is to see how long I can procrastinate. I wonder if it would be possible to include a feature that answers the question: “If I start on this to-do list now, and do everything on it one item after another, at what time will I be finished? Can I put all this off for another 45 minutes?” 🙂

    Like

  8. Dear Georges,

    thanks (one more!) for your great work on the GNOME productivity tools – my personal everyday life organization has seen a dramatic improvement owing to your contributions to various GNOME projects.

    Tasks indeed was a bit clumsy to work with (we were in email contact a few months ago) and I’m thrilled to see you working on this again!

    While I really like the changes you proposed above, there is one feature I am really missing, which is implemented in the Android “Tasks” app that I sync with my Nextcloud instance, but not (yet) in GNOME To Do: it allows to add item lists (with markdown-style syntax) to the task and scales the progress according to the number of list items checked. This is a very handy way to work on tasks without relying on subtasks – which is supported by some front-ends, and not supported by others.

    Maybe you could work on something like this at some point…

    Cheers and thanks for the great work!
    Simon

    Like

  9. Awesome!
    “The necessary width was reduced”, does this also mean the width needed for the overview mode is also reduced? I really like to use ToDo vertically but the stack switcher and buttons on the headerbar always prevent it.

    Also I would like better integration with other software, for example I use Open Tasks on Android which also supports syncing via NextCloud, but the issue is many stuff like sub-tasks aren’t compatible on either side. (I don’t really know which is at fault, and whether there is a standard for the data structure used or not…)

    Like

  10. It would be great if such applications would be provided as AppImage/Flatpack/Snap package. Currently although i like the changes it will take at least a year or more before i will be able to test and use it.

    Like

  11. Apologies for the OT comment, but I use the revamped gnome-to-do a lot and I was sure tasks used to appear in the calendar panel of gnome-shell once. I cannot find an option for it any more. Is there a way to have the upcoming tasks shown?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s