erdfisch Blog

Views3UI and Codesprint

Single image: 

Views3 UI

Views UI Design

Every site builder new to Drupal ought to learn and get used to Views in order to be able to build really flexible websites without writing code.
The current UI is kind of hard for beginners although it is much better than the one Views 1 had.

In order to achieve further improvements within the View UI, Acquia, a Drupal company founded by Drupal creator Dries Buytaert, asked its interaction designer Jeff Noyes to brainstorm and discuss designs with merlinofchaos, the maintainer of Views.

Their goal is to integrate Views 3 into Drupal
, which provides customizable starter Drupal packages that can be set up an configurated in a few minutes and are then also hosted by Acquia.
The target group for Drupal Gardens is an audience with presumably little experience with module as complex as Views, thus, the Views 3 UI should be redesinged in order to make it more intuitive.


After Jeff's mockups were finalized, Acquia's engineering team knew they would need help from the Views maintainers to implement the design quickly enough, so they decided to host a code sprint.
Last week (14-18 February 2011), a group of developers met in San Jose (CA, US) and was joined virtually by others to further develop the new Views UI.

The working location for those developers from various parts of the globe was an apartement booked by Acquia, where they put together developers from all over the world, paying their travel costs and other expenses.

After a relaxing Sunday evening the work started the next morning.
Having determined the current state of the code, everyone got started on a specific part. On some days we had video-meetings with Jeff to discuss issues with the design.

During the day and the evening, and sometimes even at night, the hacking went on at incredible speed.

UI Changes/Designs

The new UI has many changes, here are just some of them:

  • A new wizard in order to create new views easily and provide some default settings.
    So for example if you create a new node view, the "node/content: published filter" is added by default.
  • A new listing of existing views integrated into CTools Export UI. So every module which uses CTools Export UI (and you should) has some kind of similar listing interface.
  • completely reorganized view edit screen.
  • The settings links got ordered/grouped by importance. See the screenshot [#1]
  • Every setting appears now by default in a modal
  • The add new field/filter/argument/sort form was redone. It provides some serious awesomeness[#2]
  • "Search-as-you-type" form
  • a listing of already added items is now at the bottom
  • the filter configuration page was completely redone in order to provide the 80% most frequent usecases as easy as possible.
  • The 80% usecase was considered in all areas of the new UI. So important stuff got moved up and less important stuff got moved into the "more" fieldset.
  • the same was done for arguments, fields and stuff like that, so, for example, the field configuration form is much smaller when you open it.[#3]
  • in order to calm down everyone: No views features were removed. Some bugs even got fixed.
  • Configure your view in the preview: You have contextual links for editing/adding new elements directly in the preview.[#4]
  • View templates: You can provide some default views which act as templates. The difference to a default view is that you "clone" the view template every time you use it.
  • Many more things that would exceed the average size of a blog entry ;-)

If you want to try out the new UI you have to checkout the current UI from or wait until it's merged into the official version of views.

Sadly enough, there's still one serious issue with the new interface: Once you get used to it, it's really hard to go back to the old one.

At the end of the week we nearly finished the work and the crowd scattered again. Some work also got started to provide an automatic migration of views for renamed tables from d6 to d7. This upgrade path is the main blocker for a beta.

People involved in making the new UI a reality:

ksenzee, jessebeach, esmerel, merlinofchaos, noyz, bojanz, pwolanin, dagmar, gabor, david_rothstein, effulgentsia, as well as promising new talent Charlotte and Reuben Miles.

Thanks for the really great week!
Thanks also to erdfisch for supporting me that week and in general, during my involvement in Views.

Blog gallery