Make WordPress Core

Opened 8 years ago

Last modified 5 years ago

#38453 new enhancement

New UI for the settings page of the dashboard

Reported by: xavortm's profile xavortm Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-design
Focuses: ui Cc:

Description

The dashboard settings page is very basic looking - build using simple table markup and has almost zero stylings applied. I would like to suggest a change to this, where new visual elements and better organization is added to the page. Meaning - better separation between different components, description, larger click area/input fields, validation of the input fields and so on.

In short - bring the settings pages to more modern look. It won't add new features to it, so the users won't be required to make choices but instead it will make the general experience of the page better.

I am attaching sample mockup/idea screenshot I had on top of which I can work more based on the feedback and if this is needed in the first place. Any input regarding is welcome.


Here is the screenshot:
http://i.imgur.com/KQHZiHk.png

The validation is there to show how it can look, not that I focus on this. Honestly, I believe while it would be awesome it's not of very high priority to have it.

Another thing I want to comment about the design - the tabs on top are also only an idea, I can see how they can be a problem instead of a solution, so thoughts regarding this is also welcome. It's there just to show it visually

Change History (6)

#1 @desrosj
6 years ago

  • Component changed from General to Administration
  • Keywords needs-design-feedback added
  • Version 4.7 deleted

Thanks for this ticket, @xavortm!

I am going to mark this as needs-design-feedbac.

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


6 years ago

#3 @xavortm
5 years ago

Now that I revisit this ticket, I think that the first design suggestion is a bit naive. + now we have the site health which does look nice and clean! :)

Which got me to think that there's no reason to add a whole new design look and feel for the settings, instead we can just reuse what is already set in the site health tab. Add the tabs for Settings and then we can output the very same HTML that works on the settings pages now.

The benefits:

  • No need to change markup, functions etc. It's backwards compatible with all themes and plugins that hook somewhere in the settings
  • It's the same as the new site health check, so it's consistent with the dashboard as a whole

Quick note though - My thoughts about the markup improvements that can be applied remains. I think that the tables and all looks kinda... outdated, but if the markup is changed, then plugin stylings and all could be broken. Not 100% what is the best approach for this.

http://i.imgur.com/ATdM6Im.png

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


5 years ago

#5 @estelaris
5 years ago

  • Keywords needs-design added; needs-design-feedback removed

@xavortm you would like to review the work done by @melchoyce in the Block Library. It will have a similar header as Health Check

https://make.wordpress.org/design/2019/07/11/block-directory-in-wp-admin-concepts/

#6 @xavortm
5 years ago

Posting one more way to do the settings, which was inspired from GitLab blog post on the redesign of their settings page - to add the most used options at the top and then all the rest inside tabs. Technically, this is used when there are more settings to define.

but this approach is helping in the way that WP Settings can offer more options, while keeping the UI simple - what most users use is on the top and all other more advanced settings are one click away.

Honestly my concern is backward compatibility here...

But for another positive note, this would be a good place to add a notice that visual settings can be altered from the customizer, not the WP Options page :) The text under the settings should be able to hold these URLs

https://i.imgur.com/4dAjcwX.png

Version 0, edited 5 years ago by xavortm (next)
Note: See TracTickets for help on using tickets.