Yeehaw! Better UI on node forms - Drupal 6

Thanks to Dmitri (and Bevan) who has contributed a new module (Vertical Tabs - Drupal 6 only currently) that minimizes vertical scrolling on node forms. I don't know anyone, from a client level to the developer, who likes a lot of vertical scrolling, regardless if browsing or filling in a form. Dmitry has now brought us one step closer to having a better UI for administrators. I'm glad to see some modules erupt that are working toward solving the UI problems related to the Drupal administration / backend.

The Super Nav module provides friendly usability and productivity. I have not tested this module but from the video demonstration I can see its usefulness. Although, it does not get rid of the long vertical scrolling. This module focuses more on productivity - which is a good thing. I suppose you could use super Nav along with Vertical Tabs to accomplish both productivity and minimizing long node forms.

The Root Candy theme gives an iconic administrator theme - helping with navigation. While using this theme plus the Thickbox module you can get a little bit tighter UI on the node form - compared to the new Vertical Tabs module. The node fieldsets remain in a column through a block and when clicking on a fieldset link a modal window pops up through the Thickbox module. Personally I would prefer the vertical tabs module, but instead of having the form element links at the bottom of the node form, I would prefer to have a block option - like Root Candy does. Maybe Dmitry is working on that :)

If you have come across the usability group, I'm sure you are aware that the Drupal community is getting serious about usability issues. The Drupal developers and designers that I work with have all said that this is the one great weakness Drupal has - I agree. Acquia interviewed David Mercer (and author of Drupal books) some weeks back. During that interview he talked about usability issues on the backend for administrators. He made some very good points. I hope that all of us, as Drupal developers can find a way to contribute back to this very large and important UI effort. It seems the founder of Drupal is taking UI concerns seriously as well. (thank you Dries for making it a priority!). With great leadership and plenty of people willing to contribute, I am confident this usability issue will be taken care of by the Drupal 7 release, if not then hopefully Drupal 8.

Comments

<p>First, Dmitri. Second, thanks to Bevan and Dmitri 'cos this is based on Bevan's work. Third install Mollom instead of some crap captcha. Yes, I am a human and I am sick of proving it.</p>

<p>@chx, Thanks for the Bevan clarification. Mollom is a good tool but I have heard in Drupal circles that Mollum has been letting a lot of spam through. Obviously I would not know the extent of spam it is letting through since I do not use that module. Thanks though for the suggestion.</p>

It's still Dmitri and not Dmitry. Dunno what circles you are hearing because the Drupal Planet is full praises. And it's Mollom not Mollum. Finally if it's "Drupal circles" -- not your circles?? then why you ae on Drupal Planet to begin with?

<p>@chx, Circles? IRC and email from other Drupal devs. I never said Mollom  was a worthless module, definately not. But there is nothing wrong with asking "are you human". Does Mollom not do the same, on the next page load, for unreconized users?</p>

<p>Of course not. It has a pretty good backend which determines whether your content is spam and only gives you a captcha if it thinks it might be.</p>

<p>Right, but the point is "if" Mollom thinks you are spam you still get a captcha. I have posted comments on other drupal dev sites and was asked to fill out a captcha on the next page load. I assume they were using Mollom - but my posts were not spam :(</p> <p>I might eventually remove the captcha on this site and use Mollom. Not anytime soon though. Although I do manage a couple other sites that get's lots of spam, so I may use it on those for sure...</p>

<p>thanks for information</p>

<p>Mollom's algorithms are not perfect. But they prevent many people from having to fill out captchas. Also, what's a "block style" for vertical tabs?</p>

<p>Hi Dmitri, thanks for joining the conversation. Sorry for initially misspelling your name. I guess where I was going with Mollom, sometimes you still get a surprise captcha on the next page load. I would rather to have no surprises and make a captcha standard and required on every post. Just my preference...<br /><br />"Block style", to have a block available, listing the node form fieldset options. The only thing I think would enhance the whole UI vertical tabs offers is to have an additional fieldset option to toggle back to the title and body sections. So if you click on "publishing options" your "title and body" sections would disappear and "publishing options" appear. Then to revisit the title and body sections click on the new fieldset I am suggesting, ie "main content".<br /><br />I am curious, why did you name the module "vertical tabs"? Why not "node form tabs"? Or is it too late. Either way, thanks (and Bevan) for creating this node form UI solution!</p>

<p>&lt;blockquote&gt;I am curious, why did you name the module "vertical tabs"? Why not "node form tabs"? Or is it too late. Either way, thanks (and Bevan) for creating this node form UI solution!&lt;/blockquote&gt;</p> <p>To convert it into a more generic solution to let administrators or module developers make use of them.</p> <p>Where's the preview button? Hehe.</p>

<p>While Bevan, Ximo (who created the first vertical 'node forms' module) and Dimitri are behind making the Node Form/Vertical Tab modules come to life, you do realize the concept is partially mine too. Your blog post ranks quite high in certain Google searches so that compels me to clarify the history of whose behind vertically oriented tabs for node forms. Eigentor's idea of using Ubercart's carousel style purchase flow for node forms, inspired me to use tabs for node forms and if my memory serves me correctly, Bevan and CHX introduced the idea of using vertically oriented tabs which I introduced into wire frames which Bevan then turned into a working UI.</p>

<p>There's a bunch of people behind what you today is the vertical_tabs module. Dmitri has done a great job taking the mockup of Bevan further (further than I did), and behind Bevan's great mockup was a lot of wireframes and discussions in the Usability group. I think the discussion sparked from <a href="http://drupal.org/node/185814">this issue</a> that I created in October last year, and took off from there with SteveJB's excellent wireframes and feedback from chx and others. That's the nature of Open Source, there's usually not just one person behind something :)</p>

<p>Am i the only designer who favours vertical scrolling? i find the manouverability much less of a task especially during filtering of PSI's.</p>

Hi, thanks for the info; do you know if there is any easy way to actually turn OFF elements from the node_form [creation or editing] based on user permissions? I make drupal sites for many clients, and there is not a single one who needs to have all those fields like "pathauto on/off", "comments on/off" etc. visible. I can just choose a default in a super-admin mode, and then I should be able to turn it OFF for all other user types... I have searched for easy ways to create a modified template [a themable: node_edit.tpl.php would have been too easy] but I can't seem to figure out how to do this, as it seems very advanced; all buried in template.php functions of which I don't have overview... etc. I'm a strong AI/usability kind of person; so this is really important to the kind of work = solutions; I provide to clients. Thanks for listening!

<p>You can make a small module file that you could introduce new "permissions" just for certain node form elements. This option is really for programmers. If you want to go the "permissions" way, where you can control access from the backend permissions, this is the route I would recommend.</p> <p>Another option is to override with a template file. You should be able to have some control over those node form elements you mention, in node_edit.tpl.php. Also, whatever theme function that controls those node form elements, you can create a tpl file to override that output. This is a feature I don’t see many drupal’ers mention but it is a good tactic at times. For example, the theme function:<br /><br />theme_image($path, $alt = '', $title = '', $attributes = NULL, $getsize = TRUE)</p> <p>Can actually be a template file, called image.tpl.php. You can access / manipulate the values within the .tpl file as well.<br />But in this case I don’t believe this approach will benefit you.</p> <p>Chances are you need to learn some template.php overrides. In Drupal 6 we have more flexibility due to the preprocess functions. I would encourage you to learn about them AND more about how the template engine works in Drupal. Be sure to always empty cache and theme registry after making template changes in Drupal 6.</p>

I would rather to have no surprises and make a captcha standard and required on every post. Just my preference... Website localization is a complex process which needs both technical skills and linguistic/cultural knowledge. The aim is to make a website look natural for the target audience and be user-friendly.

Great job here. I really enjoyed what you had to say. Keep going because you definitely bring a new voice to this subject. Not many people would say what you’ve said and still make it interesting. Well, at least I’m interested. Cant wait to see more of this from you.

<p>Your site formatting looks weird. Why is it messed up ? Is it your site, or just me ?</p>

Add new comment