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

[Making WordPress.org]

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

Comment (by kevinwhoffman):

 @mapk Thanks for putting this together. The mockups and demo really help.
 I've attempted to break down the pros and cons of a flexible-height slider
 vs. a vertically stacked layout. As I expressed in the meeting, I still
 feel that the idea of a slider is one that has been forced because of the
 move to a one-page layout, not because a slider is an inherently better
 interface. I've attempted to make that clear in the comparison below
 without showing too much bias :)

 == Flexible-Height Slider ==

 Pros:

 * Accepts any aspect ratio and displays image at full-width.
 * Total height required for all screenshots is much less than vertically
 stacked alternative.

 Cons:

 * Controls shift position when aspect ratio changes. Forced to reposition
 cursor and continue.
 * Entire page shifts when aspect ratio changes. This is jarring.
 * Caption overlay would significantly obscure screenshots with wide aspect
 ratios (e.g. https://ps.w.org/jetpack/assets/screenshot-5.png?rev=1279667)
 * Caption overlays do not work well with screenshots of UIs because
 caption text is likely to overlap other text in the UI itself. Text on
 text is difficult to read.
 * Requires user to click through each screenshot one by one to fully grasp
 what screenshots are available, as opposed to simply scrolling. (Compare
 the time it takes to click through 5 images of different aspect ratios in
 a flexible height slider vs. scrolling down a vertical layout).

 == Vertically Stacked ==

 Pros:

 * Accepts any aspect ratio and displays image at full-width.
 * No shifting controls. Viewing more screenshots is as simple as
 scrolling.
 * Captions below screenshots do not obscure screenshots and can be more
 flexible in length.
 * Allows user to quickly grasp what screenshots are available by
 scrolling, as opposed to clicking through each one individually in a
 slider.
 * Naturally responsive, no need to worry about adapting controls to
 smaller screens.
 * Works with touch interfaces by default.

 Cons:

 * More vertical space required than slider alternative.
 * Potential deal-breaker: Not a viable option for a one-page layout; more
 suitable for tabs.

 == Conclusion ==

 I feel the vertically stacked layout is superior with the understanding
 that it is only a viable option within a tabbed interface (or similar)
 where significant vertical space is available.

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