Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New UI for tagging module #15172

Open
Ni-Ti opened this issue Sep 3, 2023 · 23 comments · May be fixed by #17488
Open

New UI for tagging module #15172

Ni-Ti opened this issue Sep 3, 2023 · 23 comments · May be fixed by #17488
Assignees
Labels
feature: redesign current features to rewrite no-issue-activity scope: DAM managing files, collections, archiving, metadata, etc. scope: UI user interface and interactions

Comments

@Ni-Ti
Copy link
Contributor

Ni-Ti commented Sep 3, 2023

Is your feature request related to a problem? Please describe.

The tag module should be easier to use:

  • several obscure and sometimes redundant buttons :
    image
    image

  • interesting invisible functionality
    image

  • incomprehensible functionality (and yes, I've read the doc ^^) ¹
    image

Describe the solution you'd like

A complete redesign of the module's interface could help make it easier to use, I've produced this model, which looks much more understandable:

image

  • use "bubbles" for tags used: prettier, more visible, less space used
  • two tabs for suggestions and "all tags"
  • three display modes : tree structure, list, bubble
  • two sorting modes: alphabetical; number of uses (only for “all tags”)
  • easy-to-understand pictograms

What do you think?


¹ I didn't understand the method used for suggestions (I'd be interested if someone could explain it to me), it's still a very interesting feature, so it should be highlighted in the interface.

@Nilvus
Copy link
Contributor

Nilvus commented Sep 3, 2023

Good mockup, I find it better than actual one. I'm totally on for that one just with actual design of darktable.
If 3 icons after display are tree structure, list, bubble. I'm not sure it's so obvious for list and bubble one. Could be so improved. Anyway it's a good start. Thanks.

Hope someone with Gtk skills could make Gtk part to let me finish icons and CSS (if needed) one.

@Ni-Ti
Copy link
Contributor Author

Ni-Ti commented Sep 3, 2023

Another idea for the 2 symbols, perhaps a better one:
image

@rds13
Copy link
Contributor

rds13 commented Sep 3, 2023

👍

@lapineige
Copy link
Contributor

Another idea for the 2 symbols, perhaps a better one

Yes, it's look clearly better in my view.

@dterrahe
Copy link
Member

dterrahe commented Sep 3, 2023

Hope someone with Gtk skills could make Gtk part

The backlash against attempts to make significant changes to improve any part of the UI has historically been so vicious that I personally am definitely not tempted to get involved.

@Nilvus
Copy link
Contributor

Nilvus commented Sep 3, 2023

The backlash against attempts to make significant changes to improve any part of the UI has historically been so vicious that I personally am definitely not tempted to get involved.

I understand and it's up to all to make what he wants only. Just that what was vicious was mostly by people no more there.

@wpferguson
Copy link
Member

The backlash against attempts to make significant changes to improve any part of the UI has historically been so vicious that I personally am definitely not tempted to get involved.

Perhaps if @Ni-Ti makes clear what problems need fixed and how his proposal seeks to do that. The vicious reactions to some previous UI changes were because the change was seen as for the sake of change, and not to fix a problem.

I would refrain from saying "make the UI better" because it's a perception and then everyone else is going to voice their perception. If you say feature X is hidden and we can unhide it by ..., or feature Y doesn't ... and we can fix that with ... then the discussion can be restricted to feature and not to the perception.

I don't use tagging a lot (though I should), so I don't have much opinion about this other than I hope it can fit into the same amount, or less, of panel space that the current tagging module occupies.

@TurboGit
Copy link
Member

TurboGit commented Sep 3, 2023

Clearly the new UI looks better to me. I do quite some tagging and I'm pretty sure this is going in the right direction.

@TurboGit TurboGit added feature: redesign current features to rewrite scope: UI user interface and interactions scope: DAM managing files, collections, archiving, metadata, etc. labels Sep 3, 2023
@lapineige
Copy link
Contributor

Well at the very minimum the different tagging visual representations helps a lot to find the style that is best suited for your use and/or best readable for you.

@jenshannoschwalm
Copy link
Collaborator

Clearly that gtk stuff is by far out of my reach so no code from me. BUT - i would certainly appreciate a wizard's work :-)

@Ni-Ti
Copy link
Contributor Author

Ni-Ti commented Sep 3, 2023

Perhaps if @Ni-Ti makes clear what problems need fixed and how his proposal seeks to do that. The vicious reactions to some previous UI changes were because the change was seen as for the sake of change, and not to fix a problem.

I think I explained the problems with the module pretty well in my first post and the benefits of the new interface, but I can elaborate. 🙂

To contextualize, I use a lot this module for my own use, I have a collection of almost 1000 keywords (not all used fortunately 😅) and I spend a lot of time using them as much as possible to find my photos (species of wild animal, family, event, location, sports, etc.).

I have been using this module for more than 5 years now almost every day and I only discovered by chance in recent days while preparing training for a person certain features of this module.
Even after reading the doc, I still randomly click on some buttons in the module to modify the list of tags because they are not understandable.

These points are, I think, a main argument for the need to update this module to be more understandable, quick and easy to use.

About my interface proposal:

  • As I said, the suggestion of keywords is a very interesting feature, even if I did not fully understand on what criteria the software suggests certain tags, and I think it would be very interesting to really highlight it on a dedicated interface and not hidden behind a + symbol that no one notices (perhaps it would be interesting to also add a search bar in this tab too).

  • In the same way, the visualization of keywords in the form of a tag cloud is clearly an interesting step forward, and a little more modern, to allow you to see more easily and quickly all the tags used on one or more photos, hence the proposal of 3 visualization modes: tree, list and tag cloud via 3 icons directly visible and easily recognizable in the interface.

  • The way of sorting keywords is improved with two icons that are easier to understand than the one currently used :
    image
    vs
    image

  • I also voluntarily removed from the 1st level interface the button allowing you to see the automatic darktable tags (exported, nef, changed, etc.) because in my opinion it is not so useful for the majority of users and would make the interface heavier, however, this feature may be available in the module settings for people who would really like to see them.
    image

I’m taking this opportunity to share an update of the mockup with the exact style (at least for the colors) of the elegant-grey-theme. 😉

image

@lapineige
Copy link
Contributor

Even after reading the doc, I still randomly click on some buttons in the module to modify the list of tags because they are not understandable.

I have the very same issue.
And worse, I don't use it so often, so I can't remember by heart (which is quite a quite bad UX requirement anyway).

I think it would be very interesting to really highlight it on a dedicated interface and not hidden behind a + symbol that no one notices

Yes, clearly. It could even by the default if it's could enough. If that's a good feature, there is no point in hiding it in the UI.

@fabiosirna
Copy link
Contributor

hi @Ni-Ti it is not clear which problem you are trying to solve. And when I read "make UI better" there are usually good intentions but the problem is still not clear.
Is the problem related to tagging? Or to search for a tag? Or to assign a tag? Or multiple tag? Or managing tags? You think your design it is easier to use, but I have some doubts.

Not in a particular order.

Bubbles can contains long tags, listing here couple of tags/keywords from IPTC list:

  • art and culture and entertainment
  • monument and heritage site
  • justice and rights
  • meteorological disaster
  • quarterly or semiannual financial statement
  • computing and information technology

In your mockup you took a shortcut by using very short words and I doubt it is that simple.

How do you manage the hierarchy between keywords? Try an example with nested tags:

France / Provence-Alpes Cote d'Azure / Mandelieu la Napoule

How does it work in the bubble style? What about in the tree view? How can the user edit the sample hierarchy?

In the current implementation, the "suggestion" view has a search bar, which in your proposal is lost and which I find very useful because the list could be long. Here again you have used a shortcut: what happens if the list is longer than the available space? I have doubts that the interaction with the bubbles is easier than it is now.

Although more generally the UI of darktable has some contrast problems, in your proposal white text on light gray background is not really readable. If your intentions are to "make UI better" in my opinion with this detail it is made worse (==more frustration for the user).

@Ni-Ti
Copy link
Contributor Author

Ni-Ti commented Sep 5, 2023

I don't think I really want to re-explain for the third time the reasons for my proposal because I don't seem to be really read.

Rather than criticizing each new proposal that allows the software to evolve a little, perhaps you could question the reasons and justifications that push you to defend the status quo. I think I have presented quite a few points about the current interface which makes no sense and I would like you to justify it to me other than “we have always done it like that”, “I am used to it, I know the interface” and “read the doc”.

My mockup is not intended to take all the visual aspects but to serve as a starting point so that others can complete (I am waiting for your ideas 😉), and most of the visuals not proposed here are because they are identical to the current state so no need to represent them again.

And for your information, it's you who's talking about “better UI”, I'm talking about “understandable UI”, that makes a big difference.

@Ni-Ti
Copy link
Contributor Author

Ni-Ti commented Sep 6, 2023

I'm sharing with you my working file for the interface, I use the website https://app.diagrams.net/, it's easy and versatile enough to do what you want :
https://drive.proton.me/urls/SEBJMQGBSW#UMMRnIo8j2Hm
I tried to take into account very long tags, another solution is to stay on a single line and put a “…” without displaying the entire keyword.
image
image

The tree structure remains identical to the current view, it works well I think.
I hope we find something cool to offer. 🙂

@lapineige
Copy link
Contributor

another solution is to stay on a single line and put a “…” without displaying the entire keyword.

Which could be also done in this way: instead of inserting "…" at the end, do it in the middle, so people relying the the last keyword of the tag can get the appropriate info, as well as the first word (which can be a general category, …).

@Ni-Ti
Copy link
Contributor Author

Ni-Ti commented Sep 7, 2023

Which could be also done in this way: instead of inserting "…" at the end, do it in the middle, so people relying the the last keyword of the tag can get the appropriate info, as well as the first word (which can be a general category, …).

In my head, the tag cloud presentation only shows the last level tags, i.e. “Paris” in “Pays|France|Paris”. If you want to view the entire hierarchy, the button relating to this view should be preferred for better visibility, I think.

I tried to take into account very long tags, another solution is to stay on a single line and put a “…” without displaying the entire keyword.
image
image

In this view, we can imagine that the complete tag is visible when hovering.

@lapineige
Copy link
Contributor

In my head, the tag cloud presentation only shows the last level tags, i.e. “Paris” in “Pays|France|Paris”.

Ah right I didn't understand that way.

In this view, we can imagine that the complete tag is visible when hovering.

👍

Copy link

github-actions bot commented Nov 7, 2023

This issue has been marked as stale due to inactivity for the last 60 days. It will be automatically closed in 300 days if no update occurs. Please check if the master branch has fixed it and report again or close the issue.

Copy link

github-actions bot commented Sep 2, 2024

This issue was closed because it has been inactive for 300 days since being marked as stale. Please check if the newest release or nightly build has it fixed. Please, create a new issue if the issue is not fixed.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 2, 2024
@RokeJulianLockhart

This comment was marked as off-topic.

@zisoft zisoft self-assigned this Sep 10, 2024
@zisoft zisoft reopened this Sep 10, 2024
@zisoft
Copy link
Collaborator

zisoft commented Sep 10, 2024

Reopened because I have started to implement this.
Will take some time and effort though.

Bildschirmfoto 2024-09-10 um 18 40 25
Bildschirmfoto 2024-09-10 um 18 40 41
Bildschirmfoto 2024-09-10 um 18 40 51

@zisoft zisoft linked a pull request Sep 17, 2024 that will close this issue
Copy link

This issue has been marked as stale due to inactivity for the last 60 days. It will be automatically closed in 300 days if no update occurs. Please check if the master branch has fixed it and report again or close the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature: redesign current features to rewrite no-issue-activity scope: DAM managing files, collections, archiving, metadata, etc. scope: UI user interface and interactions
Projects
None yet
Development

Successfully merging a pull request may close this issue.