Insert Media dialog gets ad-hoc controls: Thumbnails squared/proportional + Sort order by date/name asc/desc

[abitofmind]

Reproduction

• Edit a page
• Insert an image gallery
• The "Create gallery" (aka "Insert Media") popup opens.

The user experience in this dialog is problematic

• Screenshot with annotations and proposed improvements
• (If inline embedding failed, please see attached below)

Problems

• This dialog follows the WordPress design philosophy "decisions not choices" but here I'd propose "good defaults (=decision) which satisfy the majority but extra ad-hoc choices for users and use cases which require otherwise".

Order is by upload date, newest first

• A good default suited for the majority of typical bloggers.
• In case you want to insert numbered image series or image stories (where upload order occurred not exactly in the lexicographical order) this gets a nightmare! Especially in combination with the other issue, read on.

Squared thumbnails

• Very bad if you have many similar images, where the significant differences may be in the hidden areas.

Proposals

• The dialog gets extra controls. As illustrated in the mockup.

Sort preference

• Dropdown menu with the choices "Date, Name"
• Nearby a toggle button for ascending or descending order
• "Date with newest on top" remains the default.

Display preference

• Dropdown with these values:
  • "Thumbs" --> image fits container
    • Original image ratio is kept
    • Has no effect ofc if the source files were cropped due to: Settings > Media > Crop thumbnail to exact dimensions (normally thumbnails are proportional) = ON. But by default this is OFF as the remark in brackets indicates.
  • "Thumbs (squared)" --> image fills container
  • "List" with thumbs
  • "List (with micro thumbs)"

[abitofmind]

Wordpress Insert Media Dialog - Usability issues annotated + proposed improvements as mockups in place

[abitofmind]

Originally had ​filed this in Gutenberg but ​was informed that this is an issue for the Media component of Core, hence I now filed it here.

[abitofmind]

@talldanwp : You ​told me to file this issue in WP Core, but nobody here ever re-acted. Could you please help that this gets some first treatment?

For some image content types (like screenshots/infographics) the square thumbnails make it really hard to browse/differentiate. This is hardcoded, no customization possible.

It is best practise in all major photo management software, that one can toggle the library/overview between "Original aspect ratio ↔︎ Squared display."

[abitofmind]

WordPress Media Inserter is a usability horror when inserting image series

[abitofmind]

Can someone please look into this?

This behavior is such a usability horror when inserting screenshot series!

• Where the slight difference is NOT visible instantly on a square thumbnail without a filename
• Where a reliable ordering by filename / title asc/desc would really support you!
• No workaround whatsoever: Even when using search and being filtered to "My image series" when the images come in order "… 7, ...5 , …3, …1, …2, …4, …6" (which ever one was first during batch upload! or was later added!), its really such a chaotic mess!

Polemically said: I don't want to play a 5min ​Find Waldo session each time when entering an image series, but instead want to perform an efficient from-to-selection within 5secs.

There is no workaround: All 3rd party Image Blocks I know of usually facilitate this dialog.

Gutenberg has Block Inserter → Media, which is a bit better, but still suffers many of the same problems (see screenshot in next post):

[abitofmind]

As in my experience a WP-Core proposal takes years to get treatment, this standalone UI from Gutenberg now poses a chance for a MVP where inserting an ordered image series could finally get an acceptable UX! Hence filed Gutenberg issue: ​#53109 : Sort + View controls for Block Inserter → Media — For better usability with image series!

But: Fixing this in core is still of utmost importance, as nearly all 3rd party media blocks use the WP Core Media Inserter UI for picking your media source files!