WordPress.org

Making WordPress.org

Opened 2 years ago

Last modified 16 months ago

#2273 new enhancement

Screenshot UI for plugin directory

Reported by: hlashbrooke Owned by:
Milestone: Plugin Directory v3 - Future Priority: normal
Component: Plugin Directory Keywords: needs-patch ui-feedback 2nd-opinion
Cc:

Description

The screenshot UI in the new plugin directory is good, but it could do with a couple of tweaks to make it more streamlined.

I'll refer to this plugin of mine as an example as it has a lot (too many!) screenshots: https://wordpress.org/plugins-wp/seriously-simple-podcasting/

  1. The number of screenshots should be limited. I believe this has been discussed before, but a limit of 4-6 images would be best I think. Once that is done, then the thumbnail carousel images should be resized to fit exactly the maximum number of screenshots under the displayed image.
  1. When the displayed image changes, the image height should be changed with an animated slide (even if it's a fast one) to prevent jarring UI changes when images of vastly different heights are used.
  1. We should add a lightbox to the displayed image so people can see it more clearly in cases where the image contains small text. Something like the Featherlight lightbox library might be good as it has a very minimal UI that won't look out of place in the new directory.

Those updates would make the screenshot UI a whole lot smoother and easier to use.

Change History (21)

#1 in reply to: ↑ description @chriscct7
2 years ago

Replying to hlashbrooke:

  1. The number of screenshots should be limited. I believe this has been discussed before, but a limit of 4-6 images would be best I think. Once that is done, then the thumbnail carousel images should be resized to fit exactly the maximum number of screenshots under the displayed image.

I think your plugin shows the usecase as to why there shouldn't be a limit. Screenshots are supposed to provide users context to a plugin, like being able to see what options do and don't exist, and how things will be output. Limiting screenshots seems counterintuitive to a goal of making the directory better for the end users, who by definition are on the directory trying to find a plugin that meets their needs. If the number of screenshots is limited, on certain plugins, particularly ones with more settings than others (WooCommerce, EDD, any caching plugin, etc), it will be significantly harder for users to gauge if they've found the right plugin without needing to install it to see.

#2 follow-up: @chriscct7
2 years ago

A good example is the plugins page for Easy Digital Downloads. It demonstrates the types of screenshots users expect to see for an eCommerce plugin:

  • What does the checkout screen look like
  • What does the reporting look like
  • What does the edit order screen look like
  • What does the edit product screen look like (and what options are there)
  • What settings does the plugin offer
  • How flexible are coupons
  • etc etc

There's a lot more than 6 screenshots needed for a user to answer these relatively basic questions about a plugin.

#3 in reply to: ↑ 2 @hlashbrooke
2 years ago

@chriscct7: Yeah fair point - allowing a ton of screenshots isn't a huge issue really, just so long as the UI for viewing them can handle it. Right now, they all stick off the right of the viewport, which really isn't ideal at all. We would need to work out a better way to display them.

#4 @chriscct7
2 years ago

Instead of having 1 large image + tons of tiny images in a row underneath it, perhaps have a grid of images 3 - 5 columns wide per row, with the ability to click to expand on an overlay. This would allow for tons of images to be handled.

#5 @chriscct7
2 years ago

Now that I think of it, the issue that will run into is the images can be different ratios. Perhaps a masonry style grid?

#6 @hlashbrooke
2 years ago

Something that I thought of that could work nicely is larger thumbnails in 3 columns using a masonry layout (so the ratios don't matter) and then clicking on them pops up a lightbox. That would give you a way to see all of the screenshots at a glance without even having to click on anything, but it would also allow for viewing them in greater detail.

So screenshots of a widget UI would be pretty easy to see without expanding, but if it's a screenshot of a longer settings screen then the user could click on it.

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


2 years ago

#8 @tellyworth
2 years ago

  • Milestone set to Plugin Directory v3.0

Here's an example of screenshots that would benefit from some way to zoom, as suggested in (3):

https://wordpress.org/plugins-wp/string-locator/

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


2 years ago

#10 @tellyworth
2 years ago

  • Milestone changed from Plugin Directory v3.0 to Plugin Directory v3 - Future

#11 @Goran87
2 years ago

Clicking on the image has same effect as a lightbox, except that its not lightbox. Its pretty confusing, i tried to hit escape, then was looking for close button untill I hit back. I definitely agree that there should be some kind of simple lightbox, or to have it open as standard image in browser, current solution is very confusing to the end user.

#12 @brianhogg
23 months ago

I also ran into this yesterday, hitting escape and clicking around thinking I was still on the plugin page. Should either be in a lightbox or remove the link to the full image for the time being?

#13 @lukecavanagh
23 months ago

Using something like this would be a lightweight option for a lightbox.

https://github.com/noelboss/featherlight/
https://github.com/nicolas-t/Chocolat

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


23 months ago

#15 follow-up: @kevinwhoffman
23 months ago

I feel we need a real lightbox solution to improve the experience. I'd like to suggest Magnific which does several things really well to solve some of the issues mentioned above:

  • Elegant lightbox UI
  • Keyboard-accessible (focuses correctly on popup, arrow navigation, escape to close)
  • Touch-enabled
  • Supports captions
  • Supports galleries
  • Keeps the gallery experience on one page (current implementation launches an entirely new page per image)
  • Allows user to navigate from one zoomed-in image to the next without having to exit back to the main page in between

Check out the Lightbox gallery example on this page: http://dimsemenov.com/plugins/magnific-popup/

This ticket was mentioned in Slack in #meta by kevinwhoffman. View the logs.


23 months ago

#17 in reply to: ↑ 15 @lukecavanagh
23 months ago

Magnific Popup does look very solid, the JS is a bit bigger than the two other previous examples, around 19kb, but it does handle a lot.

Replying to kevinwhoffman:

I feel we need a real lightbox solution to improve the experience. I'd like to suggest Magnific which does several things really well to solve some of the issues mentioned above:

  • Elegant lightbox UI
  • Keyboard-accessible (focuses correctly on popup, arrow navigation, escape to close)
  • Touch-enabled
  • Supports captions
  • Supports galleries
  • Keeps the gallery experience on one page (current implementation launches an entirely new page per image)
  • Allows user to navigate from one zoomed-in image to the next without having to exit back to the main page in between

Check out the Lightbox gallery example on this page: http://dimsemenov.com/plugins/magnific-popup/

This ticket was mentioned in Slack in #accessibility by kevinwhoffman. View the logs.


23 months ago

This ticket was mentioned in Slack in #meta by kevinwhoffman. View the logs.


23 months ago

#20 @melchoyce
19 months ago

  • Keywords ui-feedback added

#21 @tellyworth
16 months ago

  • Keywords 2nd-opinion added
Note: See TracTickets for help on using tickets.