search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

Unconsistent behavior when trying to access image metadata in the Carousel on mobile #30773

Closed pehaa closed 1 year ago

pehaa commented 1 year ago

Impacted plugin

Jetpack

Quick summary

The user experience when trying to check image metadata for more than one image is inconsistent and requires clicking twice. This behavior was reported in the forum here.

Steps to reproduce

  1. Create a new page and insert an image gallery
  2. Activate Carousel in Jetpack modules
  3. Open the page on mobile (I tested in mobile Safari on iPhone and Opera Mini on iPhone)
  4. Click on the image to launch the Carousel view
  5. Click the "i" icon to access image metadata; you will notice that the page scrolls down to show the data
  6. Without closing the metadata, swipe to the next image
  7. You will notice that metadata is not visible, but when you try to open it, the first click only changes the button state, you need to click twice to see the metadata.

A clear and concise description of what you expected to happen.

Metadata should show after single click.a

What actually happened

You need to click twice.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Self-hosted

Logs or notes

No response

karenroldan commented 1 year ago

📌 REPRODUCTION RESULTS

📌 FINDINGS/SCREENSHOTS/VIDEO

Simple site: I'm not sure if I'm missing some steps, but I don't see the option to change settings (Jetpack > Settings > Writing) to enable the carousel in Jetpack for simple sites.

Atomic site

https://github.com/Automattic/jetpack/assets/67279475/e22d281f-bea5-4189-ba3b-16ae4f78f15c

📌 ACTIONS

jeherve commented 1 year ago

Simple site: I'm not sure if I'm missing some steps, but I don't see the option to change settings (Jetpack > Settings > Writing) to enable the carousel in Jetpack for simple sites.

Carousel is enabled by default on Simple sites, so you won't find that setting there.

karenroldan commented 1 year ago

Carousel is enabled by default on Simple sites, so you won't find that setting there.

Thanks! I was able to replicate it on simple sites.

📌 REPRODUCTION RESULTS

Tested on Simple – Replicated

samiff commented 1 year ago

@karenroldan or @pehaa Could you please verify if after advancing slides with the metadata info open, that you can scroll down on the next image to see the next slide's info (before trying to click the Info icon again)?

This behavior was modified when we overhauled the Carousel design, more specifically for the info/comment icons in: https://github.com/Automattic/jetpack/commit/511378b10612f0edb20023222cb5c3e00a08a532

If I'm understanding the inquiry correctly, this seems to be more of a design question:

If at least the view of the carousel would stay at the bottom when the meta info is open, that would be OK – users may intuit that they need to scroll up to see the rest of the image.

I can see the potential for confusion here. The first time a user clicks the Info icon for example, they are scrolled down to the metadata automatically (action > result), then they advance slides and want to see the info for a different image so try repeating the behavior of clicking the Info icon. Aside from the active Info icon status (white fill), there isn't a way the user would "know" that the metadata info section is still within scroll reach unless they discovered that naturally.

We could remove the jump to top behavior on slide transition, arguments against that might be:

@jeherve Thoughts on this one?

karenroldan commented 1 year ago

@karenroldan or @pehaa Could you please verify if after advancing slides with the metadata info open, that you can scroll down on the next image to see the next slide's info (before trying to click the Info icon again)?

Hi @samiff! I can view the metadata by scrolling down without clicking on the info icon.

https://github.com/Automattic/jetpack/assets/67279475/f179cbe0-1c5f-4e5f-b8f2-88bbfdd936e8

Perhaps we could consider: instead of automatically scrolling back to the top when transitioning slides, allowing the metadata section to stay in its current scrolled position. This would enable users to easily notice that the metadata is still accessible as they navigate through the slides. Also, users could have the option to click on the info icon again to hide the metadata if needed.

karenroldan commented 1 year ago

@karenroldan or @pehaa Could you please verify if after advancing slides with the metadata info open, that you can scroll down on the next image to see the next slide's info (before trying to click the Info icon again)?

Hi @samiff! I can view the metadata by scrolling down without clicking on the info icon.

https://github.com/Automattic/jetpack/assets/67279475/f179cbe0-1c5f-4e5f-b8f2-88bbfdd936e8

Perhaps we could consider: instead of automatically scrolling back to the top when transitioning slides, allowing the metadata section to stay in its current scrolled position. This would enable users to easily notice that the metadata is still accessible as they navigate through the slides. Also, users could have the option to click on the info icon again to hide the metadata if needed.

jeherve commented 1 year ago

The current behavior favors always seeing the full image if a user has scrolled down.

Yes, I think that was the overall idea, and I think we should support that when we can.

What if we automatically closed the metadata when moving on the next image, so the icon doesn't remain in that focussed state?

samiff commented 1 year ago

What if we automatically closed the metadata when moving on the next image, so the icon doesn't remain in that focussed state?

That is definitely an option, though this could make viewing metadata on subsequent slides tedious (having to keep clicking the Info icon). I'm not sure if adding a filter to control this behavior would be overkill?

jeherve commented 1 year ago

It does feel a bit overkill to me. I can definitely see how not ideal this behavior would be for folks wanting to see image metadata for all images. In that case, the whole new Carousel experience must be tedious to be honest. :(

instead of automatically scrolling back to the top when transitioning slides, allowing the metadata section to stay in its current scrolled position.

Thinking about it some more, this seems like our best option here, imo.