Your Site Administration Ui Should Be Loved as Well

One of the best parts of doing an upgrade on an existing site is that it gives you the opportunity to fix things that need fixing. Of course, we’re very focused on our users as our first priority when it comes to working on the site, but we, as the site administrators, need some usability love too.

In a world of SCRUMS and SPRINTS a site can begin to become an entity all of its own (I swear that was not a bad Drupal pun). As features are added, decisions about how those features get implemented are based on what is easiest for our members and visitors. Over time this results in things becoming cumbersome on the administration side of the site. I’m talking about “content-type-itis” and “node-form-scroll-a-lot.”

For Drupalize.Me’s migration, I took on the task of cleaning this issue up. I went about it by taking into consideration the workflow for how we add videos to the site, which is probably the most common and complicated interaction we have with the site. Posting a video to a site may seem simple, but then you start to consider all of the options like:

Image

When you start to bring in that many pieces, things start to get a bit crazy and posting a video becomes more of a chore than a celebration. All of these bits and pieces are necessary, but how they’re presented, and at what stage of node creation, is something we can work with to improve our experience. When we create a video (usually a series of them) we like to let our users know about it before we are 100% done shooting/editing it. Because of this process, not all of the information needs to be filled in when we first create the node(s). Currently the parts that do need to be filled in are spread all over our “node-form-scroll-a-lot”.

So how did I go about cleaning this up? I messed around with several modules and settled on using Conditional Fields and Display Suite. Conditional fields allows us to hide fields when viewing the form, allowing us to clean up the form displayed during our initial creation of the nodes. There is no reason to have lots of fields all over if you don’t need them. As more details are needed we can edit the form and choose to change the context of the node, which reveals everything else we need. Conditional Fields is really powerful and awesome to use with tons of potential down the line. (As a note, this module is a great UI that is using Drupal's form states system. If you want to code things like this on your own, you can check out the Creating dynamic forms with the states system video to understand what is going on behind the scenes.)

Image

Once I had the forms organized, simplifying the layout without the need of template files and theming was a must for me. Why add more complexity to a project when a module can make a world of difference? Display Suite met this need perfectly and will also allow us to modify the look and feel to our nodes without a bunch of stress. It also added some other great features to help clean up our node form. We have some fields that are no longer needed moving forward but are needed for legacy nodes that won’t need to be edited. Display Suite allows you to hide fields on your node form. This is perfect for “node-form-scroll-a-lot” clean-up. We love Display Suite so much, that we're going to be posting a tutorial series for it starting next week.

Image

In conclusion, I was able to clean up our node forms/content types with two great modules. They allowed me to hide fields when not needed, or altogether. They gave me the option to reduce content types by making the form more complex, but easier to use. They also allowed me to columnize our node forms for better usability. I was then able to wrap these up into Features and put them in code. When all is said and done, it seems like a no-brainer and will make me feel warm and fuzzy every time I need to add a new video on Drupalize.me.