starred/photoprism

Fork 0

mirror of https://github.com/photoprism/photoprism.git synced 2026-03-02 22:57:18 -05:00

UX: Add description to context menu actions #1887

New issue

Open

opened 2026-02-20 01:01:49 -05:00 by deekerman · 8 comments

deekerman commented

2026-02-20 01:01:49 -05:00

Owner

Originally created by @anst84 on GitHub (Sep 15, 2023).

Describe what problem this solves and why this would be valuable to many users

The problem is that it is not clear to the user what the buttons in the action menu does. On a mouse controlled device, like a PC or Mac you could hover over the button to trigger the help text (alt attribute), but on a touch-based device like a phone/tablet you cannot do that. User will have to use "trial and error" approach, read a manual/user guide or similar. This could easily be avoided with text descriptions.

Describe the solution you'd like

Show text descriptions to the left of the button/icon.

Mockup:

Describe alternatives you've considered

Nothing to add

Additional context

Nothing to add

Originally created by @anst84 on GitHub (Sep 15, 2023). **Describe what problem this solves and why this would be valuable to many users** The problem is that it is not clear to the user what the buttons in the action menu does. On a mouse controlled device, like a PC or Mac you could hover over the button to trigger the help text (alt attribute), but on a touch-based device like a phone/tablet you cannot do that. User will have to use "trial and error" approach, read a manual/user guide or similar. This could easily be avoided with text descriptions. **Describe the solution you'd like** Show text descriptions to the left of the button/icon. Mockup: ![image](https://github.com/photoprism/photoprism/assets/99257591/cfe85121-f9c3-41e3-a95a-ff444af80119) **Describe alternatives you've considered** Nothing to add **Additional context** Nothing to add

deekerman added the

idea

needs-analysis

feedback wanted

labels

2026-02-20 01:01:49 -05:00

deekerman commented

2026-02-20 01:01:50 -05:00

Author

Owner

@Xirt commented on GitHub (Sep 25, 2023):

I tried adding Vuetify Tooltips, but it appears this mechanic is broken by the current implementation of the GUI: the tooltip does show, but it shows at the top right of the screen instead of at the related element. So, instead I played around with pure CSS tooltips which are probably more lightweight anyway (small change in VUE files + CSS). On screens over 600 pixels width the tooltips show on hover (instead of the default "title"-tag), while on smaller screens all tooltips are shown without hover:

Regular view

Small screen

Some styling still needs to be done to beautify it, but if this solution appears to be OK I can implement it in other context menus as well and raise a pull request. Let me know...

@Xirt commented on GitHub (Sep 25, 2023): I tried adding Vuetify Tooltips, but it appears this mechanic is broken by the current implementation of the GUI: the tooltip does show, but it shows at the top right of the screen instead of at the related element. So, instead I played around with pure CSS tooltips which are probably more lightweight anyway (small change in VUE files + CSS). On screens over 600 pixels width the tooltips show on hover (instead of the default "title"-tag), while on smaller screens all tooltips are shown without hover: _**Regular view**_ ![Tooltip 1](https://github.com/photoprism/photoprism/assets/1115609/e6416809-1516-459f-ba8a-f989f60b4b7d) _**Small screen**_ ![Tooltip 2](https://github.com/photoprism/photoprism/assets/1115609/203ec2db-0cb4-40f2-b458-14b9fb25d1e8) Some styling still needs to be done to beautify it, but if this solution appears to be OK I can implement it in other context menus as well and raise a pull request. Let me know...

deekerman commented

2026-02-20 01:01:50 -05:00

Author

Owner

@Xirt commented on GitHub (Sep 25, 2023):

There are only five(?) context menus that I could find so I took the liberty to update all of them and beautify the styling a bit. I will create a pull request. Final styling is as follows (looks quite neat on all themes tested):

@Xirt commented on GitHub (Sep 25, 2023): There are only five(?) context menus that I could find so I took the liberty to update all of them and beautify the styling a bit. I will create a pull request. Final styling is as follows (looks quite neat on all themes tested): ![Screenshot 2023-09-25 210902](https://github.com/photoprism/photoprism/assets/1115609/1ce05164-bdef-4bd5-9b3a-0b62a4beea27)

deekerman commented

2026-02-20 01:01:50 -05:00

Author

Owner

@graciousgrey commented on GitHub (Oct 10, 2023):

I am not sure what is the best approach here. I understand that descriptions are helpful for new users. However, they can be annoying for experienced users if they can't be disabled/hidden.

@graciousgrey commented on GitHub (Oct 10, 2023): I am not sure what is the best approach here. I understand that descriptions are helpful for new users. However, they can be annoying for experienced users if they can't be disabled/hidden.

deekerman commented

2026-02-20 01:01:51 -05:00

Author

Owner

@anst95 commented on GitHub (Oct 10, 2023):

I am not sure what is the best approach here. I understand that descriptions are helpful for new users. However, they can be annoying for experienced users if they can't be disabled/hidden.

Why would they be annoying for experienced users? I think the upside outperforms “annoyance” factor.

@anst95 commented on GitHub (Oct 10, 2023): > I am not sure what is the best approach here. I understand that descriptions are helpful for new users. However, they can be annoying for experienced users if they can't be disabled/hidden. Why would they be annoying for experienced users? I think the upside outperforms “annoyance” factor.

deekerman commented

2026-02-20 01:01:51 -05:00

Author

Owner

@graciousgrey commented on GitHub (Oct 23, 2023):

Why would they be annoying for experienced users?

The descriptions cover the photos and it is not possible to hide them on the phone when the context menu is open.

Ideally, we should have an onboarding wizard to guide new users through the features, but that's not a priority and we can't focus on it in the near future.
Another option would be to add a configuration option, but that's extra work and makes things more complicated.

We'd love to hear more opinions on this before we make changes ❤️

@graciousgrey commented on GitHub (Oct 23, 2023): > Why would they be annoying for experienced users? The descriptions cover the photos and it is not possible to hide them on the phone when the context menu is open. Ideally, we should have an onboarding wizard to guide new users through the features, but that's not a priority and we can't focus on it in the near future. Another option would be to add a configuration option, but that's extra work and makes things more complicated. We'd love to hear more opinions on this before we make changes :heart:

deekerman commented

2026-02-20 01:01:51 -05:00

Author

Owner

@anst95 commented on GitHub (Oct 24, 2023):

You do not review your photos when clicking the context menu? At that point the user has already done the review and is ready to take an action. Once you’ve taken the action the context menu disappears and is not “in the way”.

@anst95 commented on GitHub (Oct 24, 2023): You do not review your photos when clicking the context menu? At that point the user has already done the review and is ready to take an action. Once you’ve taken the action the context menu disappears and is not “in the way”.

deekerman commented

2026-02-20 01:01:52 -05:00

Author

Owner

@DivineDominion commented on GitHub (Nov 3, 2023):

The descriptions cover the photos and it is not possible to hide them on the phone when the context menu is open.

Traditionally, you could toggle the context menu to close it.

The current design is targeted at this flow:

Select things to operate on
Bring up a menu with actions
Execute action

"Descriptions get in the way of (1)" sounds like the menu should go away more easily? (It currently is quite sticky)

@DivineDominion commented on GitHub (Nov 3, 2023): > The descriptions cover the photos and it is not possible to hide them on the phone when the context menu is open. Traditionally, you could toggle the context menu to close it. The current design is targeted at this flow: 1. Select things to operate on 2. Bring up a menu with actions 3. Execute action "Descriptions get in the way of (1)" sounds like the menu should go away more easily? (It currently is quite sticky)

deekerman commented

2026-02-20 01:01:52 -05:00

Author

Owner

@graciousgrey commented on GitHub (Nov 6, 2023):

You're right, if we want to show descriptions, we may have to live with the photos being covered while the menu is open. That said, such tooltips are not commonly used in mobile applications (please correct me if I'm wrong). A menu, as shown here, seems to be a more common approach for this use case:

As we currently have many other tasks to focus on, we are happy to consider this for a future release with a focus on UX improvements.

@graciousgrey commented on GitHub (Nov 6, 2023): You're right, if we want to show descriptions, we may have to live with the photos being covered while the menu is open. That said, such tooltips are not commonly used in mobile applications (please correct me if I'm wrong). A menu, as shown here, seems to be a more common approach for this use case: ![20231106_093350_D33951BA](https://github.com/photoprism/photoprism/assets/15210372/7efcac3b-c9de-416e-a6b2-f947c548054e) As we currently have many other tasks to focus on, we are happy to consider this for a future release with a focus on UX improvements.