Various UI elements improvement, increasing overall readability & usability

[zenminimalist]

Support guidelines

• My request extends the functionality of Ocular in a meaningful way.
• I've used the search and this has not been requested before.

Todos

• Add year-dropdown next to the switch buttons to change years more easily #70
• Improve highlight colors during hover to focus on the row and/or column #71
• Highlight the total sums in the income/expenses tables
• Highlight relevant sankey part when hovering dashboard tiles #68
• Clicking a category in the sankey-chart will zoom-in and blur out the rest
• Add ability to zoom in to the appropriate year in the all-time overview #69
• Make it possible to change the accent color globally #65
• Add lock above delete button for budget rows to prevent accidental deletion #66
• Show horizontal drag-and-drop line during row-reordering #67

Description

First, I'm not sure why this project doesn't have like 10k stars. This is such great work! You can tell the German 🇩🇪 precision that went into this 😀

My suggestion are small little UI/UX improvements. I've made some annotation screenshots to make it a bit clearer. Hopefully it makes my suggestion a bit clearer.

1. Adding the ability to change the year via dropdown in the top left corner and make its consistent across exp., income and other

2. Adding highlight colors during hover helps the user focus on the row and/or column. Here's an example. But maybe just not yellow. :)

Souce

3. Add a highlight element to make the sums pop a bit more, so that the eyes know where to focus and can do so more quickly.

When hovering over various elements it highlights the appropriate data in case of the river flow chart, zooms in and blur out the rest of the data a bit.

Ability to zoom in to the appropriate year. You already have crosshairs implemented.

And lastly, have a setting where the user can globally change the accent color from black to say blue or and hex color. In the dark version, you could limit it to sensible colors, b/c black wouldn't make much sense 🤣

4. Add a lock at the very top. This would lock all rows from accidentally being deleted. A simple unlock would remove this protection again. Very simple and intuitive.

5. Moving of rows is a bit cumbersome as a new user would have to read the tool tip every time to make sure where the row is getting moved to. Instead, it would be better (and is more commonplace) to have a horizontal line during the moving process to indicate where the row is being moved to.

Here are two examples that improve the process (source):

dragndrop-old.mp4

dragndrop-new.mp4

I personally find example two perfect.

Solution

Clearer UI/UX in terms of focusing on the relevant data a bit more. When you have lots of table rows it adds a bit more clarity where you are and the current focus it with hovering/highlighting elements.

Furthermore, it makes the UX a bit more engaging, despite these changing being small tweaks from a user perspective.

What are alternatives?

No response

Additional context

see above.

[simonwep]

Woah, thank you so much for this very elaborate issue! I wish I'd get issues like that at work 😅 This started of as a simple budget manager that syncs to google drive (if you look at the legacy branch) and I never promoted it, I guess other FOSS projects just do more in this regard 😄

I tried to compile a list of TODOs of things that you mentioned at the top of your issue to keep track of the progress, but I wanted to add some notes to what you mentioned as well below. I maked those where I'm still not sure about with RFC: just for you to know where a little more input might be needed :)

Adding the ability to change the year via dropdown in the top left corner and make its consistent across exp., income and other

There are already two buttons to change the year or what did you mean? This is the same as on the dashboard.

Adding highlight colors during hover helps the user focus on the row and/or column. Here's an example. But maybe just not yellow. :)

There already was an issue for that (#62) where I evaluated different designs/approaches and figured it might clash with the even/odd colored rows... But I'm open for any Ideas you have that might fit into the current design!

Add a highlight element to make the sums pop a bit more, so that the eyes know where to focus and can do so more quickly.

Highlighting the totals on income/expenses a bit more should be easy and makes sense.

When hovering over various elements it highlights the appropriate data in case of the river flow chart, zooms in and blur out the rest of the data a bit.

That'll be a bit trickier, but I really like the idea. The highlighting part should be easy, I'm not sure if the zoom part will be feasible though.

Ability to zoom in to the appropriate year. You already have crosshairs implemented.

Should be possible, but I'll need to see what the charts library will say about this haha

And lastly, have a setting where the user can globally change the accent color from black to say blue or and hex color. In the dark version, you could limit it to sensible colors, b/c black wouldn't make much sense 🤣

Since it's all css variables anyway this should also be easy, but I'd need some kind of settings screen if I don't want to bloat the left but. Not sure about.

Add a lock at the very top. This would lock all rows from accidentally being deleted. A simple unlock would remove this protection again. Very simple and intuitive.

Protecting the user from accidentally deleting a row in any way is a good idea, other ways could be showing a dialog (but that'd block the user from "cleaning up" many at once).

Moving of rows is a bit cumbersome as a new user would have to read the tool tip every time to make sure where the row is getting moved to. Instead, it would be better (and is more commonplace) to have a horizontal line during the moving process to indicate where the row is being moved to.

Yeah I didn't want to touch the grid back then as it's a bit tricky to work with (but needed to keep the layout as-is).

Note

I'm on vacation this week / will be busy with other long outstanding project but will come back to this next week when I'm back home. Looking forward woking on this! Thank you again for this issue and happy holidays! :)

[zenminimalist]

Adding the ability to change the year via dropdown in the top left corner and make its consistent across exp., income and other

There are already two buttons to change the year or what did you mean? This is the same as on the dashboard.

Yes, I did see those, and they are fine for switching to individual year. But image I'm doing long-term planning or I'm looking at how my income/expenses have developed over 10 years. I'd have to click 10 times.

So being able to click the year and it's displaying a dropdown with the years would speed up jumping to certain years. If you only have 2-3 years that's fine, but the more data you have, they more cumbersome it will become.

Although I just saw 🤦‍♂️the icon for switching year in the bottom left, vertical bar. For me (intuitively) that would belong at the top where I see the year.

So it would be like so:
Annual Budget 2025 < >
[Text] [clickable drop-down year] [backward-forward]

Adding highlight colors during hover helps the user focus on the row and/or column. Here's an example. But maybe just not yellow. :)

There already was an issue for that (#62) where I evaluated different designs/approaches and figured it might clash with the even/odd colored rows... But I'm open for any Ideas you have that might fit into the current design!

You could also experiment with an ultra light (color and thickness wise) border aground the row/column selection.

Add a highlight element to make the sums pop a bit more, so that the eyes know where to focus and can do so more quickly.

Highlighting the totals on income/expenses a bit more should be easy and makes sense.

When hovering over various elements it highlights the appropriate data in case of the river flow chart, zooms in and blur out the rest of the data a bit.

That'll be a bit trickier, but I really like the idea. The highlighting part should be easy, I'm not sure if the zoom part will be feasible though.

The zoom in part is just the icing on the top. The current implementation is already really good. Highlight via hover would improve clarify and focus a bit.

Ability to zoom in to the appropriate year. You already have crosshairs implemented.

Should be possible, but I'll need to see what the charts library will say about this haha

And lastly, have a setting where the user can globally change the accent color from black to say blue or and hex color. In the dark version, you could limit it to sensible colors, b/c black wouldn't make much sense 🤣

Since it's all css variables anyway this should also be easy, but I'd need some kind of settings screen if I don't want to bloat the left but. Not sure about.

I'd think about consolidating some icons/settings in the least vertical bar. Accent color isn't something you change on the fly, but generally you do initial. So I'd create a dedicated settings page/icon for all the system-wide, less-frequented settings and nerd-features e.g. language, accent color, number format...Settings that are used frequently can/should have a dedicated button on the left sidebar.

Add a lock at the very top. This would lock all rows from accidentally being deleted. A simple unlock would remove this protection again. Very simple and intuitive.

Protecting the user from accidentally deleting a row in any way is a good idea, other ways could be showing a dialog (but that'd block the user from "cleaning up" many at once).

I think the simplest would be a lock function that would prevent you from deleting rows as the "x" are extremely close to each other, and it's easy to accidentally do.

Moving of rows is a bit cumbersome as a new user would have to read the tool tip every time to make sure where the row is getting moved to. Instead, it would be better (and is more commonplace) to have a horizontal line during the moving process to indicate where the row is being moved to.

Yeah I didn't want to touch the grid back then as it's a bit tricky to work with (but needed to keep the layout as-is).

Note

I'm on vacation this week / will be busy with other long outstanding project but will come back to this next week when I'm back home. Looking forward woking on this! Thank you again for this issue and happy holidays! :)

No worries. Enjoy!

[simonwep]

Yes, I did see those, and they are fine for switching to individual year. But image I'm doing long-term planning or I'm looking at how my income/expenses have developed over 10 years. I'd have to click 10 times. So being able to click the year and it's displaying a dropdown with the years would speed up jumping to certain years. If you only have 2-3 years that's fine, but the more data you have, they more cumbersome it will become.

That totally makes sense! :)

I think the simplest would be a lock function that would prevent you from deleting rows as the "x" are extremely close to each other, and it's easy to accidentally do.

I just want to note that you can always undo your changes via cmd+z ;) But I can see that many might think this is not a thing there...

I think I'm going to look what makes sense to implement as part of this ticket in particular, for everything else I'd create a separate ticket to avoid a too much convoluted thread if that makes sense :D

[simonwep]

@zenminimalist okay, I extracted all TODOs into their own issue. Two things left I'd like some additional input if that's okay though:

Highlight the total sums in the income/expenses tables

I took a closer look and noticed that the color-contrast in the light theme made them a bit difficult to read, I tried to adjust that in 52e66ff:

and on hover an edit icon is displayed taking you to the corresponding tab, I hoped this to be intuitive:

I also played around with different font-weights and underlines in particular, but I always find this to somewhat break open the current design:

what were your thoughts on this?

Clicking a category in the sankey-chart will zoom-in and blur out the rest

I totally get the highlight part (created #68 for this) - but I'm really not sure about the zoom in on the sankey? Or did I mix up something with the sankey/all-time since you mentioned it there as well?!

[zenminimalist]

Highlight the total sums in the income/expenses tables

Currently, the "Total" and “Average” columns are visually “behind” the month columns. Put another way, they're visually more in the background than they should be. So you'd want the more important columns/information to be in front more or highlight it somehow. Unfortunately, I'm not a visual designer where I could suggest the optimal solution.

I took a closer look and noticed that the color-contrast in the light theme made them a bit difficult to read, I tried to adjust that in 52e66ff:

and on hover an edit icon is displayed taking you to the corresponding tab, I hoped this to be intuitive:

I'm not sure if you really need the edit icon. For me, it would be superfluous. If you hover on the appropriate block, and it slightly changes color (similarly to hover of an HTML link) or has a very light border, that should be more than enough of a cue that the users knows: "Oh, Ok, I can click here and it's taking me to XYZ." Plus, it's a lot more subtle without adding more elements than you need.

If you wanted to you could add a tooltip (jump to Income 2025) reducing the need for new users to experiment to find out what clicking there does.

I also played around with different font-weights and underlines in particular, but I always find this to somewhat break open the current design:

what were your thoughts on this?

Personally, I don't think you require any underlines here, as it's only 1-2 number in this box. It adds more distractions (lines) for the eye to take in. However, the titles "Income, expense,..." could be a tad bit bigger - at least for the dashboard. For the all-time overview (globe icon) I find them to be a perfect size.

You could in another release think about changing the "Ending and remaining balance" to be conditional. If positive = green, if negative = red. But that's just an idea.

Clicking a category in the sankey-chart will zoom-in and blur out the rest

I totally get the highlight part (created #68 for this) - but I'm really not sure about the zoom in on the sankey? Or did I mix up something with the sankey/all-time since you mentioned it there as well?!

The zoom in was meant for the all-time overview, but that's a nice-to-have feature when you have 3,5 or more years of data. That would be it a bit more convenient. However, it wouldn't be on the of my list as dev though.

Also, I just noticed a little detail as well:
The alternating colors after the header (black), starts with the darker color first instead of the lighter color. If you switch those around, it would be more consistent.

[simonwep]

Thank you for your input! As I thought most of these changes are a bit more tricky to solve, there's already a lot of data on the dashboard as well as income/expenses tabs making it a bit tricky to make something more "visible". I'll change the alternating row colors immediately, that's a nice change as well as changing the edit icons to a hover color, I can see why that makes more sense.

Personally, I don't think you require any underlines here, as it's only 1-2 number in this box. It adds more distractions (lines) for the eye to take in. However, the titles "Income, expense,..." could be a tad bit bigger - at least for the dashboard. For the all-time overview (globe icon) I find them to be a perfect size.

Technically they're the same size 😄 - but of course, the difference in the font-size of other elements skews the size a bit.

Maybe I'll convert one or another thing to a separate ticket as well, work starts next week for me so I'll have less time to work on this (and I spend the past few days catching up on my other FOSS projects as well as tinkering on a new homepage) - but this is great for when I find some time to have something to work on immediately 😄