Improve the UI #34

Closed
opened 2024-09-07 08:57:59 +00:00 by M00NJ · 15 comments
M00NJ commented 2024-09-07 08:57:59 +00:00 (Migrated from github.com)

I've been using tasks for a while now and enjoy it a lot. There are some changes to the UI I'd like to suggest though, so I created a mockup. I've looked at other task managers like Errands and Planify and also the Cosmic apps for reference.

Mockup

My main suggestion is to remove most of the high emphasis icon buttons, since they make the UI look quite busy. The default Cosmic apps have a minimalistic approach and don't use them. So I'd drop them where they are not necessary, like the button for adding new tasks. You need to use the keyboard to write the task name, so you'll probably just press enter instead. Also the icon looks more like a send button in a messenger app to me. The same goes for the edit button. You can edit the task name by clicking on it. This is more intuitive, so I'd drop that button as well. I would also replace the export button, with a button to move all completed tasks to the trash. Errands has this feature and it's quite useful. I'd make the export functionality accessible via the files menu in the window header instead. I don't think people are exporting their list three times a day, so that space could be utilized better. With a new button to remove completed tasks, the trash button behind every task could be dropped as well. Again making the UI cleaner and avoiding component duplication. So the only button I'd keep there is for opening the context drawer. I'd also split tasks into separate cards and show a expand / collapse icon on hover if a task has sub-tasks, like Errands. Clicking anywhere on the task (except the name) could expand or collapse it, so the target area is bigger than a button. Showing the number of uncompleted task in a list and the progress for each task would also the helpful. The context drawer is great already, I'd just apply the same things as above to the sub-task section too. Lastly, context menus could be used to expose more actions, without cluttering the UI.

Maybe some of these ideas are useful to you. Thank you for this great application :)

I've been using tasks for a while now and enjoy it a lot. There are some changes to the UI I'd like to suggest though, so I created a mockup. I've looked at other task managers like Errands and Planify and also the Cosmic apps for reference. ![Mockup](https://github.com/user-attachments/assets/951bfb65-02c6-48e5-b1f0-e6144996b1e7) My main suggestion is to remove most of the high emphasis icon buttons, since they make the UI look quite busy. The default Cosmic apps have a minimalistic approach and don't use them. So I'd drop them where they are not necessary, like the button for adding new tasks. You need to use the keyboard to write the task name, so you'll probably just press enter instead. Also the icon looks more like a send button in a messenger app to me. The same goes for the edit button. You can edit the task name by clicking on it. This is more intuitive, so I'd drop that button as well. I would also replace the export button, with a button to move all completed tasks to the trash. Errands has this feature and it's quite useful. I'd make the export functionality accessible via the files menu in the window header instead. I don't think people are exporting their list three times a day, so that space could be utilized better. With a new button to remove completed tasks, the trash button behind every task could be dropped as well. Again making the UI cleaner and avoiding component duplication. So the only button I'd keep there is for opening the context drawer. I'd also split tasks into separate cards and show a expand / collapse icon on hover if a task has sub-tasks, like Errands. Clicking anywhere on the task (except the name) could expand or collapse it, so the target area is bigger than a button. Showing the number of uncompleted task in a list and the progress for each task would also the helpful. The context drawer is great already, I'd just apply the same things as above to the sub-task section too. Lastly, context menus could be used to expose more actions, without cluttering the UI. Maybe some of these ideas are useful to you. Thank you for this great application :)
edfloreshz commented 2024-09-07 10:46:21 +00:00 (Migrated from github.com)

I've been wanting to improve the UI but had no idea how, now I know.

I'll work on this for the next release. 🎉

This is great feedback, thanks for taking the time with the mock up and the issue 👍🏼

To-do's:

  • Remove high-emphasis icon buttons.
  • Use context menus for tasks.
  • Use separate cards for tasks with expand/collapse functionality.
  • Show task progress and number of uncompleted sub-tasks.
  • Show number of tasks in a list.
  • Move export functionality to navigation menu.
  • Add button to move all completed tasks to the trash.
I've been wanting to improve the UI but had no idea how, now I know. I'll work on this for the next release. 🎉 This is great feedback, thanks for taking the time with the mock up and the issue 👍🏼 ## To-do's: - [x] Remove high-emphasis icon buttons. - [x] Use context menus for tasks. - [x] Use separate cards for tasks with expand/collapse functionality. - [x] Show task progress and number of uncompleted sub-tasks. - [ ] Show number of tasks in a list. - [x] Move export functionality to navigation menu. - [ ] Add button to move all completed tasks to the trash.
edfloreshz commented 2024-09-07 16:00:53 +00:00 (Migrated from github.com)

There's currently an issue with context menus, which is preventing me from implementing the suggested behavior.

There's currently an issue with context menus, which is preventing me from implementing the suggested behavior.
edfloreshz commented 2024-09-07 16:12:25 +00:00 (Migrated from github.com)

Managed to implement some things already:

image
Context menu

image
Details

image
Export

Managed to implement some things already: ![image](https://github.com/user-attachments/assets/41177661-26bd-4370-9bdf-53a2ac7debbb) Context menu ![image](https://github.com/user-attachments/assets/5b84eae1-ba82-46f1-8032-bb4952f58f4a) Details ![image](https://github.com/user-attachments/assets/3d993dc4-2b2b-4bdf-8a64-70fd7dcb22fc) Export
M00NJ commented 2024-09-07 17:55:31 +00:00 (Migrated from github.com)

Wow, that was fast! The app looks very polished now :)

Wow, that was fast! The app looks very polished now :)
edfloreshz commented 2024-09-07 18:29:58 +00:00 (Migrated from github.com)

I need to sleep now, I've been coding straight for 8-9 hours 😴

I need to sleep now, I've been coding straight for 8-9 hours 😴
M00NJ commented 2024-09-07 19:56:48 +00:00 (Migrated from github.com)

Please don't over-work yourself. Burnout is no fun. There are no deadlines is the foss world... 😌

Please don't over-work yourself. Burnout is no fun. There are no deadlines is the foss world... :relieved:
edfloreshz commented 2024-09-08 04:15:09 +00:00 (Migrated from github.com)

I got a little carried away, working on this is fun for me!

I got a little carried away, working on this is fun for me!
edfloreshz commented 2024-09-11 20:59:11 +00:00 (Migrated from github.com)

I haven't had a chance to take a look at that, but it is most likely related to libcosmic or flatpak.

I haven't had a chance to take a look at that, but it is most likely related to libcosmic or flatpak.
herrdiener commented 2025-03-26 16:16:44 +00:00 (Migrated from github.com)

Could this be merged, even if it's partial progress? This would be a significant improvement to both user experience and usability.

Could this be merged, even if it's partial progress? This would be a significant improvement to both user experience and usability.
edfloreshz commented 2025-03-26 16:18:41 +00:00 (Migrated from github.com)

I worked on this a while back but I faced some issues, I'll try to tackle this again and see how it goes.

I worked on this a while back but I faced some issues, I'll try to tackle this again and see how it goes.
edfloreshz commented 2025-05-25 11:24:04 +00:00 (Migrated from github.com)

@M00NJ I'm getting quite close to completing this request! By the way, can you share the name of the icon to move completed tasks to the trash?

Image

Image

@M00NJ I'm getting quite close to completing this request! By the way, can you share the name of the icon to move completed tasks to the trash? ![Image](https://github.com/user-attachments/assets/e834a197-5db4-4546-a83e-52bdf74f1543) ![Image](https://github.com/user-attachments/assets/5a0f4762-7e06-49b8-961c-f110032bb7c5)
edfloreshz commented 2025-05-25 11:25:24 +00:00 (Migrated from github.com)

@herrdiener I have merged my progress so far, feel free to review it and let me know your thoughts 👍🏼

@herrdiener I have merged my progress so far, feel free to review it and let me know your thoughts 👍🏼
M00NJ commented 2025-05-25 18:35:53 +00:00 (Migrated from github.com)

@M00NJ I'm getting quite close to completing this request! By the way, can you share the name of the icon to move completed tasks to the trash?

Amazing work, this looks great!
Sure, I grabbed the icon from Google's Material Symbols and it's called "remove done". I don't think it's a common icon in many sets. If this doesn't work due to licensing or something else let me know. An icon like this is simple to make... :)

> [@M00NJ](https://github.com/M00NJ) I'm getting quite close to completing this request! By the way, can you share the name of the icon to move completed tasks to the trash? Amazing work, this looks great! Sure, I grabbed the [icon](https://fonts.google.com/icons?icon.query=remove+done&icon.set=Material+Symbols&icon.size=24&icon.color=%231f1f1f&selected=Material+Symbols+Outlined:remove_done:FILL@0;wght@400;GRAD@0;opsz@24) from Google's Material Symbols and it's called "remove done". I don't think it's a common icon in many sets. If this doesn't work due to licensing or something else let me know. An icon like this is simple to make... :)
edfloreshz commented 2025-05-25 18:43:35 +00:00 (Migrated from github.com)

Thanks! I'll include it once I work on that feature.

Thanks! I'll include it once I work on that feature.
herrdiener commented 2025-05-25 21:09:02 +00:00 (Migrated from github.com)

Brilliant work, thank you! The interface now looks classy and keeps the attention where it needs to be.

(Also during the last two hours, you've been fixing regressions faster than I was able to report them - mad respect.)

I've only noticed a tiny usability peeve, which, since this is merged to master, I've opened a separate issue for.

Brilliant work, thank you! The interface now looks classy and keeps the attention where it needs to be. (Also during the last two hours, you've been fixing regressions faster than I was able to report them - mad respect.) I've only noticed a tiny usability peeve, which, since this is merged to master, I've opened a [separate issue](https://github.com/cosmic-utils/tasks/issues/66) for.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
edfloreshz/tasks#34
No description provided.