Vertical tabs are finally in Drupal core!

Screenshot of vertical tabs on an 'Article Edit' page in Drupal 7.

A week ago Angie "webchick" Byron committed a large patch from #323112 Vertical Tabs to Drupal 7 core. This change is quite possibly the most significant usability enhancement to Drupal 7 to date. Two of the three formal usability tests did usability testing with vertical tabs and reported positively.

Screenshot of a 'Story Edit' page in Drupal 6, before vertical tabs.

UPDATE: Rob Loach has created a patch to implement vertical tabs on the node-type form.

UPDATE: See other issues about vertical tabs in Drupal core .

What is more interesting about this however, is the process, time and effort that it took to get this change into Drupal core. It all started over a year ago, well before DrupalCon Boston 2008 even before Drupal 6 had a stable release. The discussion around part of that patch goes back as far as November 2007! Along the way countless people have been involved in many discussions, worked on heaps of mockups, lots of prototypes, and loads of code.

The UI design that finally got coded and committed was something I worked heavily on as my Season of Usability project. Around that time Hubert "couzinhub" Florin of Raincity Studios and Roy "yoroy" Scholten were designing the Views 2 UI with Earl "merlinofchaos" Miles, myself and others. The vertical tabs UI pattern was came up there and was incorporated in a relatively simple way for selecting which display to edit. It was suggested that it could also work for node edit forms, which were being discussed elsewhere at the time.

An early wireframe by Roy "yoroy" Scholten of a Views 2 UI design concept, that shows vertical tabs as it was later developed in the final UI.

Through discussion, mockups and prototypes it became apparent that vertical tabs – or "drawers" as we were calling them then – was the single most effective and simple improvement that could be made to node forms (at least of all the ideas we had discussed and that were within manageable scope). I put together a series of prototypes, which Joachim "ximo" Stai didn't waste too much time turning into a proof-of-concept module; Node Form Layouts.

The paper equivalent of vertical tabs. At that point everyone seemed to get busy or distracted, until Dmitri "dmitrig01" Gaskin – with some some prodding from Dries Buytaert and assistance from Károly "chx" Négyesi – turned it into an alpha module; Vertical Tabs. Nate "quicksketch" Haug of Lullabot has maintained that module and got it to a near-stable release.

Meanwhile, Konstantin "kkaefer" Kaefer, Dmitri, Nate, Nathaniel "catch" Catchpole of CivicActions and others took the patch down the home straight through about 40 iterations over 6 months!