WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 18 months ago

Last modified 18 months ago

#33950 closed enhancement (maybelater)

Media Gallery Modal can reduce complexity and get a more intuitively UI / UX

Reported by: th23 Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.3.1
Component: Media Keywords: ux-feedback
Focuses: ui, administration Cc:

Description

The "new" media modal / interface (since version 3.x) is a huge improvement over the past one, but still creates a lot of uncertainty with users.

I observed several users (also people usually confident with web applications) being very uncertain how to upload, attach and embedd a gallery - thus I would propose the following simplified layout and flow:

1) "Add Media" button and "Set featured" can follow the same flow, but do not to be present at the same time - in general the left-hand side panel in the current modal can be eliminated without negative user impact

2) "Selection" tab/ step should start showing the media attached to the current post/ page - to be changed by user in case required

3) Uploading an additional file is unnecessary complex - either user can drag&drop directly onto "Selection" tab or a click on a "+" in place of the first item opens the (local) upload file dialog

4) Buttons: "Add to Gallery" (primary) opens next tab and "Insert directly" (secondary) inserts HTML link into post

5) Second tab is opened following previous one or upon click on "Edit gallery" by user

6) Tab is responsive - moving "Gallery settings" and "Media details" sections below the media items, if screen is smaller (avoiding any overlaps)

7) Introduce "highlights" parameter via selectable star associated to resulting shortcode - can also be done via an API / filter / hook for flexibly adding options (including required JS and CSS)

8) "Insert" / "Update" buttons will finish workflow, close media modal and insert required shortcode

Bits and pieces of this proposal are taken from suggestions in various stages around here, some other ideas have enhanced this proposal - but I thought it might make sense to bundle this into ONE flow...

Attachments (3)

wp-gallery-image-flow-1.jpg (129.9 KB) - added by th23 5 years ago.
Suggested UI / UX flow - part 1
wp-gallery-image-flow-2.jpg (167.1 KB) - added by th23 5 years ago.
Suggested UI / UX flow - part 2
wp-gallery-image-flow-3.jpg (97.8 KB) - added by th23 5 years ago.
Suggested UI / UX flow - part 3

Download all attachments as: .zip

Change History (8)

@th23
5 years ago

Suggested UI / UX flow - part 1

@th23
5 years ago

Suggested UI / UX flow - part 2

@th23
5 years ago

Suggested UI / UX flow - part 3

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.


3 years ago

#2 @melchoyce
3 years ago

  • Keywords ux-feedback added

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 years ago

#4 @karmatosed
2 years ago

There have been some changes to the flow here with Gutenberg (the new editing interface). I think in light of that refreshing and considered based on that is something worth doing. @th23 are you interested in revisiting this?

#5 @karmatosed
18 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

As we asked 7 months ago about revisiting this going to close for now. If you would still like to work on this @th23 then we can absolutely reopen, however the new flows need to be considered.

Last edited 18 months ago by karmatosed (previous) (diff)
Note: See TracTickets for help on using tickets.