#227 Assorted UX improvements

Open
opened 3 months ago by matiasilva · 6 comments
  • Expand list of namespace colors and use a more standard list (the current colors seem quite an odd choice to me)
  • Assign each namespace a default color (make it part of the create process) and auto-assign each list a color based on the namespace color
  • "List identifier" was an odd field and I only understood it after a bit. If you enter an identifier longer than a certain length, it errors out when saving. Also, perhaps include and create a namespace identifier? Something like (namespace)-name-#. I might have two lists with the same name in two different namespaces.
  • Expand the width of the sidebar, it feels quite constrained and chops off "Namespaces &.."
  • Hide the scrollbar if my mouse isn't over the sidebar (cleaner) and give the sidebar a slightly lighter/darker tone
  • Collapse menu icon should always remain next to the logo and it should be used to toggle rather than the miniscule "Collapse menu"
  • Move "Next week" and "Next month" into an "Upcoming" page and allow me to toggle between whichever view I wish
  • Overview tab should either display tasks with no due date, or all tasks (related to #189)
  • Depending on the outcome of the above, create a Today tab which tells me the tasks with concrete deadlines that I need to complete by X, include overdue tasks too
  • Merge "shared with teams" and "shared with users" together into "Share with..." to avoid excessive configuration. The search results should indicate whether a result is a team or a user
  • Move "Teams" further down the list, as for most individual users it's not a very important feature
  • Make collapsing namespaces more user-friendly with a dropdown indicator, eg "v" for opened, and " >" when closed
  • Allow collapsing all namespaces and add "Namespaces" label above this, dropdown should work in a similar fashion to the above
  • Highlight with a different shade the selected item in the sidebar to make it further stand out
  • Move sidebar items closer together vertically

These are my quick insights from using Vikunja for a bit. I'm happy to have a go at a few of these once I get up to speed with Vue and the codebase but I wanted to share my initial thoughts.

* Expand list of namespace colors and use a more standard list (the current colors seem quite an odd choice to me) * Assign each namespace a default color (make it part of the create process) and auto-assign each list a color based on the namespace color * "List identifier" was an odd field and I only understood it after a bit. If you enter an identifier longer than a certain length, it errors out when saving. Also, perhaps include and create a namespace identifier? Something like (namespace)-name-#. I might have two lists with the same name in two different namespaces. * Expand the width of the sidebar, it feels quite constrained and chops off "Namespaces &.." * Hide the scrollbar if my mouse isn't over the sidebar (cleaner) and give the sidebar a slightly lighter/darker tone * Collapse menu icon should always remain next to the logo and it should be used to toggle rather than the miniscule "Collapse menu" * Move "Next week" and "Next month" into an "Upcoming" page and allow me to toggle between whichever view I wish * Overview tab should either display tasks with no due date, or all tasks (related to #189) * Depending on the outcome of the above, create a Today tab which tells me the tasks with concrete deadlines that I need to complete by X, include overdue tasks too * Merge "shared with teams" and "shared with users" together into "Share with..." to avoid excessive configuration. The search results should indicate whether a result is a team or a user * Move "Teams" further down the list, as for most individual users it's not a very important feature * Make collapsing namespaces more user-friendly with a dropdown indicator, eg "v" for opened, and " >" when closed * Allow collapsing all namespaces and add "Namespaces" label above this, dropdown should work in a similar fashion to the above * Highlight with a different shade the selected item in the sidebar to make it further stand out * Move sidebar items closer together vertically These are my quick insights from using Vikunja for a bit. I'm happy to have a go at a few of these once I get up to speed with Vue and the codebase but I wanted to share my initial thoughts.
konrad commented 3 months ago
Owner

Thank you for the suggestions! I've added most of them to the public roadmap to be on the same list with the rest.

A few comments:

Expand list of namespace colors and use a more standard list (the current colors seem quite an odd choice to me)

The colors are pretty much random and are coming from the colorpicker library - I'm not 100% sure if it supports setting them. Maybe that would require an upstream PR.

List identifier" was an odd field and I only understood it after a bit. If you enter an identifier longer than a certain length, it errors out when saving. Also, perhaps include and create a namespace identifier? Something like (namespace)-name-#. I might have two lists with the same name in two different namespaces.

I had the same thought after implementing and using it for a while. It can be set to an empty string, I think that's probably the best to do by default for now since it's not something I would guess many people are using.

Expand the width of the sidebar, it feels quite constrained and chops off "Namespaces &.."

I plan on making it a fixed width on desktop which should give it more space. Eventually it will be resizable.

Hide the scrollbar if my mouse isn't over the sidebar (cleaner) and give the sidebar a slightly lighter/darker tone

I'm not sure if that's possible with css currently? Happy to take any hints.
Generally I'm not that happy with the current scrollbar design, maybe changing that in other ways could be a good idea.

Collapse menu icon should always remain next to the logo and it should be used to toggle rather than the miniscule "Collapse menu"

Definitely.

Move "Next week" and "Next month" into an "Upcoming" page and allow me to toggle between whichever view I wish

Both views are able to set the range in between which the tasks should be shown, I think we can expand on that.

Overview tab should either display tasks with no due date, or all tasks (related to #189)

That probably also requires changes on the api side. I've yet to figure out how to make that useful for everyone while not bloating the ui.

Merge "shared with teams" and "shared with users" together into "Share with..." to avoid excessive configuration. The search results should indicate whether a result is a team or a user

This probably also requires a new api endpoint to search for both in one request but could work with the current api endpoints too.

Make collapsing namespaces more user-friendly with a dropdown indicator, eg "v" for opened, and " >" when closed

I'm not sure about this as it would add another icon on the right.

Move sidebar items closer together vertically

Do you mean the spacing between the namespaces/lists and the general nav items or the spacing between the items themselves?

Thank you for the suggestions! I've added most of them to [the public roadmap](https://my.vikunja.cloud/share/UrdhKPqumxDXUbYpEGJLSIyNTwAnbBzVlwdDpRbv/auth) to be on the same list with the rest. A few comments: > Expand list of namespace colors and use a more standard list (the current colors seem quite an odd choice to me) The colors are pretty much random and are coming from the [colorpicker library](https://github.com/baianat/verte) - I'm not 100% sure if it supports setting them. Maybe that would require an upstream PR. > List identifier" was an odd field and I only understood it after a bit. If you enter an identifier longer than a certain length, it errors out when saving. Also, perhaps include and create a namespace identifier? Something like (namespace)-name-#. I might have two lists with the same name in two different namespaces. I had the same thought after implementing and using it for a while. It can be set to an empty string, I think that's probably the best to do by default for now since it's not something I would guess many people are using. > Expand the width of the sidebar, it feels quite constrained and chops off "Namespaces &.." I plan on making it a fixed width on desktop which should give it more space. Eventually it will be resizable. > Hide the scrollbar if my mouse isn't over the sidebar (cleaner) and give the sidebar a slightly lighter/darker tone I'm not sure if that's possible with css currently? Happy to take any hints. Generally I'm not that happy with the current scrollbar design, maybe changing that in other ways could be a good idea. > Collapse menu icon should always remain next to the logo and it should be used to toggle rather than the miniscule "Collapse menu" Definitely. > Move "Next week" and "Next month" into an "Upcoming" page and allow me to toggle between whichever view I wish Both views are able to set the range in between which the tasks should be shown, I think we can expand on that. > Overview tab should either display tasks with no due date, or all tasks (related to #189) That probably also requires changes on the api side. I've yet to figure out how to make that useful for everyone while not bloating the ui. > Merge "shared with teams" and "shared with users" together into "Share with..." to avoid excessive configuration. The search results should indicate whether a result is a team or a user This probably also requires a new api endpoint to search for both in one request but could work with the current api endpoints too. > Make collapsing namespaces more user-friendly with a dropdown indicator, eg "v" for opened, and " >" when closed I'm not sure about this as it would add another icon on the right. > Move sidebar items closer together vertically Do you mean the spacing between the namespaces/lists and the general nav items or the spacing between the items themselves?
matiasilva commented 3 months ago
Poster

The colors are pretty much random and are coming from the colorpicker library - I'm not 100% sure if it supports setting them. Maybe that would require an upstream PR.

Ah. Random colors probably won't look very well most of the time, unless we optimize for them being more bright. I was thinking a fixed list from say https://material.io/design/color/the-color-system.html#tools-for-picking-colors and giving them names. Possibly allow the user to choose their own colors in addition.

I had the same thought after implementing and using it for a while. It can be set to an empty string, I think that's probably the best to do by default for now since it's not something I would guess many people are using.

Sounds like a good idea. Giving a brief description of what it is helps too.

I plan on making it a fixed width on desktop which should give it more space. Eventually it will be resizable.

Ah, perfect. Fixed on desktop sounds good and then allow resizing within certain limits.

I'm not sure if that's possible with css currently? Happy to take any hints.

Perhaps something like

    div.myautoscroll {
            height: 40ex;
            width: 40em;
            overflow: hidden;
            border: 1px solid #444;
            margin: 3em;
        }
        div.myautoscroll:hover {
            overflow: auto;
        }

This works for me (from https://stackoverflow.com/questions/10015389/showing-scrollbars-only-when-mouseover-div/10015883). Otherwise we could use JS.

Move "Next week" and "Next month" into an "Upcoming" page and allow me to toggle between whichever view I wish

Both views are able to set the range in between which the tasks should be shown, I think we can expand on that.

My motivation is that I would like to reduce the number of items on the sidebar to make using Vikunja really intuitive. If we have something that shows all tasks, today's tasks, and upcoming tasks (with configurable + preset date ranges), that would be the most intuitive.

Make collapsing namespaces more user-friendly with a dropdown indicator, eg "v" for opened, and " >" when closed

I'm not sure about this as it would add another icon on the right.

Knowing if a namespace is collapsed is tricky without this kind of visual feedback. It can even be added to the left of the imaginary vertical line that all nav items are aligned to.

Move sidebar items closer together vertically

Do you mean the spacing between the namespaces/lists and the general nav items or the spacing between the items themselves?

Spacing between items themselves. Looks like it's currently .75em, I think .5em works and feels more natural.

Thanks for hearing me out! Usually I would add each as an issue, but I would prefer not to create issue spam as part of my first posts :P

> The colors are pretty much random and are coming from the [colorpicker library](https://github.com/baianat/verte) - I'm not 100% sure if it supports setting them. Maybe that would require an upstream PR. Ah. Random colors probably won't look very well most of the time, unless we optimize for them being more bright. I was thinking a fixed list from say https://material.io/design/color/the-color-system.html#tools-for-picking-colors and giving them names. Possibly allow the user to choose their own colors in addition. > I had the same thought after implementing and using it for a while. It can be set to an empty string, I think that's probably the best to do by default for now since it's not something I would guess many people are using. Sounds like a good idea. Giving a brief description of what it is helps too. > I plan on making it a fixed width on desktop which should give it more space. Eventually it will be resizable. Ah, perfect. Fixed on desktop sounds good and then allow resizing within certain limits. > I'm not sure if that's possible with css currently? Happy to take any hints. Perhaps something like ``` div.myautoscroll { height: 40ex; width: 40em; overflow: hidden; border: 1px solid #444; margin: 3em; } div.myautoscroll:hover { overflow: auto; } ``` This works for me (from https://stackoverflow.com/questions/10015389/showing-scrollbars-only-when-mouseover-div/10015883). Otherwise we could use JS. > > Move "Next week" and "Next month" into an "Upcoming" page and allow me to toggle between whichever view I wish > > Both views are able to set the range in between which the tasks should be shown, I think we can expand on that. My motivation is that I would like to reduce the number of items on the sidebar to make using Vikunja really intuitive. If we have something that shows all tasks, today's tasks, and upcoming tasks (with configurable + preset date ranges), that would be the most intuitive. > > Make collapsing namespaces more user-friendly with a dropdown indicator, eg "v" for opened, and " >" when closed > > I'm not sure about this as it would add another icon on the right. Knowing if a namespace is collapsed is tricky without this kind of visual feedback. It can even be added to the left of the imaginary vertical line that all nav items are aligned to. > > Move sidebar items closer together vertically > > Do you mean the spacing between the namespaces/lists and the general nav items or the spacing between the items themselves? Spacing between items themselves. Looks like it's currently .75em, I think .5em works and feels more natural. Thanks for hearing me out! Usually I would add each as an issue, but I would prefer not to create issue spam as part of my first posts :P
konrad commented 3 months ago
Owner

Maybe we can do something with the ::-webkit-scrollbar stuff to hide them unless hovered. This would be more or less progressive enhancement though since browser support is limmited (at least for now).

Do you want to send PRs for a few of these?

Maybe we can do something with the `::-webkit-scrollbar` stuff to hide them unless hovered. This would be more or less progressive enhancement though since browser support is limmited (at least for now). Do you want to send PRs for a few of these?
matiasilva commented 3 months ago
Poster

Sounds good. Will do when I get up to speed with the codebase and setup my dev environment!

A couple things that I noticed with more use:

image

  • When I hover over the edit, it'd be nice to get some visual feedback as the response is different when I click on the pencil vs when I click on the item itself
  • The edit button experience could be improved. I usually use the button to edit some quick mistake I made when I created the task and those are mostly in the title, the labels, and the date. Instead of opening the side panel, allow me to edit these things very quickly and easily by expanding the item in a similar fashion to Todoist:

image

  • Open a modal instead of a side panel when I click on the task. I think overall this is better UX because a full page for a task feels a bit much. If we had a modal and views to toggle between like "Comments", "Edit", and so on within that model, it would make it a lot more intuitive.

  • The edit side panel should go away once I finish saving, or at least click outside of the panel.

Sounds good. Will do when I get up to speed with the codebase and setup my dev environment! A couple things that I noticed with more use: ![image](/attachments/544ea833-8e8b-485d-a134-2ba762f7d777) * When I hover over the edit, it'd be nice to get some visual feedback as the response is different when I click on the pencil vs when I click on the item itself * The edit button experience could be improved. I usually use the button to edit some quick mistake I made when I created the task and those are mostly in the title, the labels, and the date. Instead of opening the side panel, allow me to edit these things very quickly and easily by expanding the item in a similar fashion to Todoist: ![image](/attachments/12de6793-d9f0-4983-9142-5dddc9bb85ac) * Open a modal instead of a side panel when I click on the task. I think overall this is better UX because a full page for a task feels a bit much. If we had a modal and views to toggle between like "Comments", "Edit", and so on within that model, it would make it a lot more intuitive. * The edit side panel should go away once I finish saving, or at least click outside of the panel.
matiasilva commented 2 months ago
Poster

A bit on labels (now using this issue as a temp list for things I notice!)

  • Random color should be assigned instead of just grey
  • Searching should be case-insensitive
  • Adding label list should be pre-populated with some existing labels
A bit on labels (now using this issue as a temp list for things I notice!) * Random color should be assigned instead of just grey * Searching should be case-insensitive * Adding label list should be pre-populated with some existing labels
konrad commented 2 months ago
Owner

Searching is case-sensitive when you're using postgres, it is not when using any other db. That's something that needs to be fixed at the api-level.

Searching is case-sensitive when you're using postgres, it is not when using any other db. That's something that needs to be fixed at the api-level.
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.