Usability: Rearranging the Node Form | Cwgordon7's blog

Usability: Rearranging the Node Form

I've been working on implementing Leisa Reichelt's . started the process off by creating a to move the submit buttons up to the right, and separate the node form into a "Content" and a "Meta" tab. I refined his patch to make the horizontal tabs a reusable form element, and in the current state of the patch, the node form looks as pictured:

The effect is a more streamlined version of the node form: all the traditional "content" fields—you know, the ones that people actually pay attention to—are presented to the user without any distraction. Should a content author need to mess with the date a node was published, or other information that Drupal allows to be altered (but isn't typically necessary to fill out), they can click the "Meta information" tab, which switches tabs through javascript. The "Save," "Preview," and "Delete" buttons are all located at the top right for easier access.

The next step in implementing the design was the . The basic concept was to leave information available in a readable state, yet not take up so much room so as to block other information from the screen. While the layout I created isn't exactly like , I believe it cleanly captures the essence of the idea without requiring too many changes to the underlying code. With my current , the "Meta information" tab appears as pictured:

I like what I've done a lot, but what is usable for one person might be completely unusable for everyone else. I'm sure there's room for improvement, so please feel free to comment on either of the issues () () or add a comment to this post to voice your thoughts or concerns. There are many opinions on what makes for good usability, and the more opinions we get, the more accurate a picture we can make of what is most usable overall. Thank you!


Buttons on the right

I think that putting the buttons on the right like that is a general usability improvement for nearly all Drupal forms. Especially with long forms it would be nice if those buttons were visible all the time. Don't know how your work here might feed into that concept, or what other pitfalls my idea can fall into, but I'm sure glad people are thinking about and working on this!

what about "About"

Instead of "Meta" which is second nature to computer people but odd to others, what about renaming "Meta" to "About"

"Meta information"

I'm ignorant of the general goings-on here, but has the use of the term "Meta information" been discussed? It feels vague to me, and I actually have a case where I use the word meta occasionally. The newbie might understand the word meta in regards to meta tags on web pages, but will it be understood as "all that other stuff about this that doesn't quite belong on the Content form"? I'd recommend more brainstorming on an appropriate label.

the exact label is still being discussed

The exact label text is still being discussed, the patch is easy to change to have a different text on the label.

Is it accessible to people

Is it accessible to people with non-JavaScript browsers?

Reminds me of nodeformcols

I like the attention the node edit forms are getting. Backend UX is pretty overlooked IMO :)

The rightbar layout of the save/preview buttons remind me of what the Nodeform Columns module () is doing. Check it out for inspiration.

If usability is the primary

If usability is the primary reason for this I think there's one thing to consider: dividing the form over multiple pages will raise a question to the user: will the entered information be saved if I click on the other tab or do I have to click 'save' myself?

If the form is divided it should be absolutely clear to the user what will happen next, without feedforward I think besided a cleaner look this doesn't improve in terms of clarity for the user.

100% agreed with libeco.

100% agreed with libeco.

combining 'meta' and 'content submit/edit on one layer

is there a reason the "META' information to be exist as a separate tab/layer?
would not be better if the meta information (pic.2) info and functions combined to right block of the node add/edit form (pic. 1)? (below the submit buttons)
-where it is easily visible and accessible rather than hiding it behind another tab and click, rather than reveal the meta settings right there when user submitting the node form.

Meta and tabs

The more I look at this, the less I'm keen on Meta information being a separate tab.

- Reduces the need to scroll
- Hides less frequently used elements from new users (i.e. less scary)

- There's a penalty to hiding elements away rather than making them visible at a glance in some form.
- As libeco says, it raises issues about when changes are actually saved. (which as a general point is an area that I think needs to be more consistent in Drupal)
- May not be the most efficient use of available screen space

If there's any way that the form elements can be presented on a single page, then I think this should be the preferred option. Since the meta elements seem to be narrow, having them on the right sidebar seems possible. The fact that each meta element is collapsible, is enough to stop less experienced users from being overwhelmed by the options available.

See my composite example here:

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

You must answer the above question correctly to be able to submit a comment. This measure is designed to protect this site against spambots, which seem able to circumvent even the toughest image captchas. Hint: try googling for the question answer if you really don't know it. The theory behind this is that if this website is running its own completely custom captcha, it will not be in anyone's economic advantage to rewrite their spam bot's code to handle this website's questions. Powered by CwgordonCaptcha.