Metaboxes' UI

[ramon-villain]

Hi Julién, I was wondering about the Metabox interface/design, and by coincidence a client of mine asked for more room in the Metaboxes' area. As you know and we can see in the attachment, the left side is making the field's column tight.

I was dribbbling, and found some good references like: https://dribbble.com/shots/247575-Language-Admin-CMS-02 - We can set the Title/Info's text inline https://dribbble.com/shots/1691822-Form-with-validation - Title inline and Info as a tooltip

I did a 2mins proof of concept, so what do you think ?

Actual

Proof

[jlambe]

Hi @ramon-villain. I was also thinking about optimizing the UI for metaboxes but with the goal to solve long scrollable metabox UI.

When I started this API, I kept the rule to mimic the core WordPress UI so it feels well integrated. But as you add metaboxes and fields, your admin page scroll to infinite and it feels very cumbersome.

Now looking at your example, I personally feel the UI more "stressful" or "heavy" as there is not so much space between elements. Thinking about the goal I would like to solve with long metabox, this example UI is not solving it for me as everything is stacked top to bottom.

I've already looked to other CMS like drupal, craft or expression engine and they did the same as your example and it is functional but I don't find it enough user-friendly.

Now I'm super glad you talk about this because now we have a thread where we can push this discussion and search for a better UI. To bring another idea, I was also thinking about bringing metabox tabs, so you can define sections and their fields in a metabox and switch between tabs in place of long scrollable page.

Don't hesitate to share any ideas or mockup files as any help or search on this can improve the project!

[ramon-villain]

One thing that I personally would suggest it's 'fix' the info text style, it's just a paragraph, it doesn't have a reduced font-size or italic, or even a lighter text-color.

Another thing is, don't you like the idea of putting the info text in a tooltip, for example that question mark in the Editor's field?

I don't know if it's a WooCommerce's feature (cause I didn't find a tooltip helper/class in wp), but in that UI we have things pretty user-friendly (see attachment). The info text becomes intuitive, because it's closer to the title (not under field), it's an icon, and finally it's not displayed all the time, which makes more clear the whole page.

[bactisme]

More generally, it could be useful to introduce some auto generated classes for fields and labels to be able to style them easily.

[SudoCat]

It might be worth taking some pointers form the ACF plugin (http://www.advancedcustomfields.com/). This offers a variety of different field layouts so that you can tailor the layout to the fields you are using. I'm not sure what would be the appropriate way of implementing a similar system to Themosis, or whether it would be better to just leave custom templating down to the end user.

ACF also provides the option of adding tabs to a metabox, which can really help prevent the edit screen from becoming too unwieldy, without collapsing all the whitespace.

Here's a couple of examples.

[ramon-villain]

Just to "keep" the conversation.

good insights

https://uxdesign.cc/design-better-forms-96fadca0f49c

good, but older than this thread 😂

https://research.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html

[jlambe]

Nice article for reference. Thanks