Interface Module Part One

Jan
09

By Michael Haggerty | Filed Under: AJAX, content mangement, Drupal, interface, usability

Sharing some video of a the Drupal Interface module that I've been working on here at Trellon. With our new site up, I can devote more time to this project.

Interface is a module for authoring node form interfaces. Primarily, the module is being developed to increase the usability of Drupal sites. It allows administrators to control the placement of form elements using drag and drop tools like you might see on Facebook. Placement of form elements is handled by templates, which work similarly to other themable elements in Drupal. Templates can be authored with CSS and JavaScript, and create regions in templates that allow form elements to be placed in different sections of the page. Each template includes an info file, for specifying characteristic properties of each Interface.

I am putting a lot of work into behaviors, which are small scripts for carrying out animations and other operations in the interface. Behaviors will be associated with different regions within each template, and with different form elements in each region. For example, you might have a region which displays all form elements within an accordion menu, and several form elements above it which display as part of a tab set. Right now, I have a workable tabs interface underway, along with the accordion menu, and plan on building a behavior to replace checkboxes with image buttons.

Here's an early proof of concept video for the module: Interface Module. Be careful if you are on dial up, it's a big file. I intend to have a working beta ready before DrupalCon DC this March, and I'm planning to release another video every week or two until it is finished.

This module started as something completely different. I had been working on a widget module for Drupal for about 6 months when I realized that the content authoring tools were going to make it inaccessible to all but the most advanced users. This increased my interest in building an alternative interface for authoring content, and lead to some drag and drop prototypes. Around that time, I got stuck in at an online politics conference where a series of speakers criticized Drupal for lacking the 'high aesthetics' of Joomla's interface despite all of it's other features. After talking with some other developers at a Chicago Drupalcamp, I decided it was time to explore some new ideas.

To that end, the Interface module will ship with a template that duplicates the most recent default interface for Joomla, along with some other interesting templates we are working on. Long term, this module will be extended to the entire administration interface as well.

Would love some feedback.

Bookmark/Search this post with:

mhaggerty's blog

41 Comments

akahn

January 9, 2009

at 2:30 PM

Awesome. This module will be

Awesome. This module will be a big help, I have to customize the node form in just about all the Drupal sites I build. Let us know when you release the code so we can help out.

Bevan

January 9, 2009

at 5:39 PM

Nice! I cross-posted this to

Nice! I cross-posted this to groups.drupal.org. On a related note, vertical tabs module is also designed to improve usability of default drupal core node forms. Vertical Tabs module came about as a result of prototypes I created in the season of usability. Cheers!

Bevan

January 9, 2009

at 5:50 PM

The post on GDO;

The post on GDO; http://groups.drupal.org/node/18090

mhaggerty

January 10, 2009

at 9:38 PM

Thanks for the cross-post.

Thanks for the cross-post. Vertical tabs are very nice! Have not played around with them too much, but they definitely have potential.

Anonymous

January 9, 2009

at 5:19 PM

you guys might want to look

you guys might want to look here

http://www.lullabot.com/blog/drupals-form-building-future

Anonymous

January 9, 2009

at 6:20 PM

You're missing a key term

You're missing a key term here: interface.

Lullabot's module builds forms, and offers you the code. This particular module takes an existing form, the node form, and enables admins to move it all around and organize it the way they see it, and then saves this interface so that it comes up again and again. It doesn't create a /form/, it creates an /interface/.

Nate Haug

January 20, 2009

at 5:11 PM

I think there's a very strong

I think there's a very strong connection between this Interface module and Form Builder. Form Builder will most definitely let you edit the node form (the latest code already supports this) and will provide a complete interface overhaul for adding/editing CCK fields, in addition to all the fields (Publishing Options, Authoring Info, Attachments, Menu Settings) provided by core itself.

There is a significant difference in that Form Builder actually allows you to edit properties of those fields, such as whether or not a fieldset is collapsed by default (or collapsible at all), whereas Interface seems like it will allow you to control the placement elements within regions on the page, but not actually edit those fields.

So they're complementary in a way, where Form Builder will allow you to configure the form, then interface would allow you to change the placement of fields. Right now Form Builder does not support any kind of templating of the node form at all, since it'd interfere with the interface. Of course it would be optimal to be able to be able to both design placement and configure the fields in one interface, but we'll have to see how this project shapes up.

Anonymous

January 9, 2009

at 7:24 PM

This is exactly what I need

This is exactly what I need to get off clunky joomla

kourge

January 9, 2009

at 10:51 PM

Will this module use jQuery

Will this module use jQuery UI? There are certainly functionalities that would work excellently by implementing with jQuery UI.

mhaggerty

January 10, 2009

at 9:40 PM

Yep. Uses jquery heavily,

Yep. Uses jquery heavily, along with the forms api.

Michelle

January 10, 2009

at 2:08 PM

Very nice! I plan on heavily

Very nice!

I plan on heavily restructuring my node forms some time this Spring. I might just wait for this rather than messing around in FAPI. :)

Michelle

David Peteson

March 5, 2009

at 9:43 AM

This looks great! Any updates

This looks great! Any updates on that beta?

Cheers,

David

admin

April 4, 2009

at 4:33 AM

Yep. http://trellon.com/conte

Yep.

http://trellon.com/content/blog/interface-module-part-two

samudrapandian

February 24, 2010

at 4:24 AM

This is informative blog

This is informative blog author explained clearly about drupal which now used designing purpose very good blog it deals about drupal wiht joomla too useful blog..penis vergrößerung

Leo

March 24, 2010

at 11:09 AM

I can't seem to find the

I can't seem to find the screencast - Do you have a working link to it?

Interface Module Part One

41 Comments

Post new comment

Most Popular

Tags

By Author

Explore

Blog

Services

Solutions

Portfolio