WordPress.org

Make WordPress Core

Opened 19 months ago

Last modified 3 months ago

#45001 new defect (bug)

Relocate Admin Alerts to a new Alert Icon

Reported by: s3w47m88 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: 2nd-opinion
Focuses: Cc:

Description

This is apart of a bigger project for my staff and I, you can find the context here https://www.theportlandcompany.com/2017/09/10/proposed-improvements-to-the-wordpress-ui/.

Our goal is to clean up the UI with two principles in mind:

  • Context Visibility - Only show something when it's in context.
  • Add With Purpose - If something, such as padding or margins, don't serve a purpose, don't add them.
  • Simplify Number of Actions - If a step can be avoided in a process, avoid it.

This ticket is about Alerts. Like updating WordPress, appear in the main body of the admin pages.

We believe this is a disruptive experience and has many bugs associated with it:

  • Some notifications, such as the WordPress Core Update notification, cannot be dismissed. Sometimes authors intend this, other times it's not intentional, but it's always a nuisance because it persists across all pages.
  • This requires scrolling on *every* page load, if the alert is persistent across pages. On mobile this can make WP virtually unusable for rapid actions.
  • The dismiss button often is broken. *Many* plugins out there don't use it properly or code their own dismiss button because of a few limitations with the current function. Resulting in alerts never disappearing.
  • These alerts are disorienting to users who are not developers. Especially when they overrun the page.
  • If there is a dismiss button, often times the styling of that is inconsistent. Sometimes it's text that says "Dismiss". Sometimes it's a circle icon with an x. Other times it's a literal x. Sometimes it's in the top right. Sometimes it's in the bottom right. Etc...

This behavior is uncommon throughout the web when you compare to GitHub, Amazon, Google anything, MacOS, etc...

We propose:

  • Introducing an alert icon in the upper right of the admin bar.
  • When an alert is registered it introduces a badge count. Could be AJAX / jQuery Hearbeat, etc...
  • When hovered or selected you see the alerts in a menu that shifts the page body from right to left (just like MacOS notification center).
  • From there each item has a dismiss icon. When clicked it is *permanently* dismissed (another topic, many Plugins don't respect this for various reasons).
  • The dismiss icon is always a circle x icon right aligned and vertically centered.
  • Clicking on the alert could take the user to a new page that is contextual to the Plugin that is displaying it where they can read more information or take action.

This would result in a cleaner UI, less scrolling - especially on mobile - less distraction that can and does cause confusion for some users, but maintains full functionality.

Optionally we could implement growl-like notifications that hang for a moment when a new alert is registered. No dismiss buttons on those, rather they fade out automatically so Plugin authors don't use them to cause the same problem somewhere new.

We'd be happy to do some design mockups and code a feature as Plugin if the leadership is interested in accepting this.

Change History (3)

#1 @SergeyBiryukov
19 months ago

  • Component changed from General to Administration

Related: #43484

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


3 months ago

#3 @karmatosed
3 months ago

  • Keywords ui-feedback ux-feedback removed

There is a feature project for notifications I think this could fit into. https://make.wordpress.org/core/2019/11/29/wp-notify-hiatus-till-january-2020/ - noting they are on hiatus but coming back this month.

It would be great for you to post your mocks @s3w47m88 as any ideas at this point are great. For now, let me remove the ux-feedback keywords as having some designs makes sense.

Note: See TracTickets for help on using tickets.