[wp-meta] [Making WordPress.org] #1828: Improve Screenshots section

[Making WordPress.org]

#1828: Improve Screenshots section
------------------------------+---------------------------------------
 Reporter:  samuelsidler      |       Owner:  mapk
     Type:  task              |      Status:  assigned
 Priority:  high              |   Milestone:  Plugin Directory v3 - M7
Component:  Plugin Directory  |  Resolution:
 Keywords:                    |
------------------------------+---------------------------------------

Comment (by mapk):

 I want to explore every possible solution within a single page view, so
 please review the mockups below.

 1. Using actual screenshots of UI instead of photos.
 2. Moved captions below screenshots.
 3. Added thumbnails (instead of circles) back to slider navigation below
 captions.
 4. Left and Right arrows don't appear until hover, but the 'next' and
 'previous' arrows can be clicked from anywhere on the right or left side
 of the screenshot so the user's cursor doesn't need to be directly above
 arrow.
 5. Screenshots are full width and full height (height adjusts
 dynamically).
 6. Screenshots can still tell a step-by-step story to the user.
 7. We could also include max-height or min-height as well to keep the
 slider from getting too long or too short.
 8. Mobile versions should work similarly to any other responsive slider.
 9. At this point, if people think a larger lightbox feature would still be
 useful, we can allow the user to click the screenshot itself to open a
 lightbox which can provide 'next' and 'previous' navigation, but offer
 larger views of screenshots.


 Screenshot view without cursor interaction.
 [[Image(https://cldup.com/0gNgCw7mVg.png)]]

 Screenshot view with cursor hovered over right side of screenshot.
 [[Image(https://cldup.com/gfXpY-hHm4.png)]]

 Screenshot view of next ''larger'' slide with cursor in same place and
 still able to navigate.
 [[Image(https://cldup.com/pCUBDPfzIz.png)]]

 I believe I've addressed most (if not all) of the major concerns for a
 single page view that includes screenshots with this solution. There are
 still some obvious concerns though.

 CONS
 1. Content below the screenshots will still adjust based on larger or
 smaller screenshots in the slider. How important is this one? The top and
 sidebar wouldn't jump at all so it really wouldn't cause a jarring affect,
 but there would be visible movement on the page.
 2. If the user's cursor is hovered over the lower part of the 'next'
 button and the next screenshot is ''shorter'', the cursor may no longer be
 hovered over the 'next' nav item.

 I'd love to hear your thoughts!

--
Ticket URL: <https://meta.trac.wordpress.org/ticket/1828#comment:38>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org