search

WordPress / wp-feature-notifications

WP Feature Notifications - a proposal to modernise the way in which WordPress handles emails, admin notices and user notifications
https://wordpress.github.io/wp-feature-notifications/
GNU General Public License v2.0
189 stars 19 forks source link

Design for the notifications settings page #24

Open hedgefield opened 3 years ago

hedgefield commented 3 years ago

Splitting this off from #1, this is the place to discuss the design of the notifications settings page.

I couldn't find a whole lot of specs for this in the requirements document, but at least the user should be able to choose which notification 'sources' can actually send notifications, and where those should be delivered (within WordPress, email, push to app/text, etc). Similar to how you can manage this kind of thing in iOS or Android.

I did a first pass at a design for this here: https://www.figma.com/file/PIRT7PBfCYIxn4urohVInn/WP-Notify-design-v2-Tim?node-id=232%3A24

settings

The list of notification sources there should probably be a table, and the wordpress/mail/phone toggles can be improved a bunch in the a11y area alone, but I just wanted to throw an idea down that we can iterate on. Haven't seen a lot of discussion or definition about the elements on these pages, or where they should live in the admin, so let me know what you think!

folletto commented 3 years ago

Heya, I've a couple of discussion points:

  1. Checkbox — If we already provide on the side the activate/deactivate for the various options, I think the checkbox function is less clear. I can just disable on the side, no? If it's meant to work instead like the selector for Bulk Actions like in Posts, then I think the design needs to be the same: table, header, etc. We should try to avoid having multiple visual patterns for the same functionality — unless of course there's a screen where that design happens and I'm not remembering it.
  2. Icons — I appreciate the icon there, but I think it's essential there's a label. We don't have much space restriction there, so I'd suggest to iterate on that. Maybe we can use columns? Or full labels in each row with toggle controls? In general I'd try to explore more accessible functionality here.
  3. Overall Layout — The layout right now feels a bit unbalanced, the icons are a bit "floating" in the middle. I think we could either go for the table structure (per above) or resemble maybe more closely other settings pages.

Also two more meta considerations:

  1. Push and Mobile — I feel might be relevant here add a note on where to get the mobile app? Otherwise the third "Push notifications" option isn't obvious.
  2. Each plugin should have a link to the plugin page itself, or maybe the Plugins page? I think would be relevant to make super obvious if there's an intruding plugin and allow the person to manage it.
  3. How do we imagine this list to be populated? One approach would be to declare explicitly the labels/links on this page with a hook of some kind, and if not present, NO notification sent from the plugin goes through... but that's tricky, and I'm not sure if it's effectively enforceable in PHP (what stops a plugin to use some other plugin codes?). Would be useful to think through the logic here.
hedgefield commented 3 years ago

Good points. This would definitely benefit from a table layout, and I think column labels for the various delivery methods are good. I like the iconography visually, but indeed with those other improvements in place there may not really be a good place for them. I've put it in a fairly default WP table now (couldn't find a full composite of it in the Figma library so some handcrafting was involved). I'm not blown away by how modern it looks yet, but it's better than before, certainly.

I don't think a use of the toggle component exists in WP admin outside of Gutenberg, right? Having those to use here would look nicer, but checkboxes will do too. I've also added the links in the plugin names and a CTA for mobile.

I can't speak to how we should populate the list technically, and maybe that's a discussion for a separate issue, as you make a good point that it might be hard to route everything a plugin 'broadcasts' into the notification system. Same of course with the on-page notices in #26.

settings Design is of course available on Figma

raaaahman commented 3 years ago

This looks clean and consistent with WordPress admin panels. Good job!

folletto commented 3 years ago

I'm not blown away by how modern it looks yet, but it's better than before, certainly.

That's unfortunately a general thing with WP Admin, it has its years. I think the baseline is to "fit" properly, and I think the above does. If we find a way to improve it, then better, but I think that "fitting" is the baseline for us to proceed. 👍

I can't speak to how we should populate the list technically, and maybe that's a discussion for a separate issue

Yes, I think this probably needs to be a separate discussion. It might be that the new system won't forward a message unless the plugin "registers" it first, or any other solution, but needs to be decided at a technical level.

JasonTheAdams commented 3 years ago

Hi! Just starting to jump in on this project. 😃

I think "App" should be "Mobile App". I had to ask @folletto what the difference between "Admin" and "App" was as I had no clue. Distinguishing could even give more awareness that there is a mobile app... I often forget, myself.

If we're trying to avoid using more than one word per column, then perhaps a tooltip would suffice to provide a brief explanation for each notification type?

folletto commented 3 years ago

Good point.

I think the amount of space shouldn't be a concern there, we have space... but also we can't really say how that will get translated to other languages so while it's nice to keep it short, I wouldn't try to enforce "one word".

EdithAllison commented 1 year ago

This appears superseded by the new design approach tracked in https://github.com/WordPress/wp-feature-notifications/issues/357, suggesting to close. @Sephsekla