Make WordPress Core

Opened 9 months ago

Last modified 2 months ago

#57369 new enhancement

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

Reported by: abitofmind's profile abitofmind Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.1.1
Component: Media Keywords:
Focuses: ui, css Cc:

Description

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)

https://www.dropbox.com/s/i3nx5ewqkp5itne/wordpress-insert-media-dialogue.png

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)"

Attachments (3)

wordpress-insert-media-dialogue.png (877.0 KB) - added by abitofmind 9 months ago.
Wordpress Insert Media Dialog - Usability issues annotated + proposed improvements as mockups in place
WordPress-Media-Inserter-is-a-usability-horror-when-inserting-image-series.png (280.2 KB) - added by abitofmind 2 months ago.
WordPress Media Inserter is a usability horror when inserting image series
Gutenberg Media Inserter 1 Status Quo.png (152.6 KB) - added by abitofmind 2 months ago.

Download all attachments as: .zip

Change History (7)

@abitofmind
9 months ago

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

#1 @abitofmind
9 months ago

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.

#2 @abitofmind
5 months ago

@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
2 months ago

WordPress Media Inserter is a usability horror when inserting image series

#3 @abitofmind
2 months ago

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):

#4 @abitofmind
2 months ago

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!

Note: See TracTickets for help on using tickets.