Views3UI and Codesprint

Ein ausführlicher Bericht von unserem Entwickler Daniel Wehner über den Views UI Codesprint in San Jose, Kalifornien (14.02.2011 bis 18.02.2011)

jump to the English version of this article

Views3 UI

Views UI Design

Jeder, der Drupal nutzt, um damit Webseiten oder andere webbasierte Projekte zu erstellen, sollte sich mit Views auskennen, denn es ist ein fantastisches Werkzeug, um sehr flexible Webseiten zu erstellen, ohne dabei tatsächlich programmieren zu müssen. Die Vielzahl der Möglichkeiten, die Views dabei bietet sind aber für Einsteiger auch ein Hemmnis, denn die Benutzeroberfläche der derzeitigen Views Version 2 ist relativ komplex, wenngleich sie schon um einiges besser als diejenige von Views 1 ist.

Um eine weitere Verbesserung der Übersichtlichkeit und Benutzerführung der Views UI zu erreichen, hat die von Drupal-Erschaffer Dries Buytaert mitgegründete Firma Acquia ihren interaction designer Jeff Noyes beauftragt, mögliche Designs und Benutzerführungen mit merlinofchaos, dem Haupt-Maintainer von Views zu besprechen.

Mit ein Ziel von Acquia ist dabei die Integration von Views 3 in Drupal
Gardens, ein Service, der modulare und optisch anpassbare Drupal Starter Packs bietet, welche direkt auf dem Acquia Server binnen weniger Minuten eingerichtet und durchkonfiguriert werden können und dann direkt als voll funktionsfähige Drupal-Site zur Verfügung stehen. Die Zielgruppe für Drupal-Gardens sind Einsteiger, die zum ersten Mal mit einem Content-Management-System wie Drupal arbeiten wollen, somit kann man davon ausgehen, dass die wenigstens Nutzer bisher Erfahrungen mit einem komplexen Modul wie Views gemacht haben. Auch aus diesem Grund strebte Acquia eine deutliche Verbesserung der Views 3 UI an, um sie untuitiver und besser erfassbar zu machen.

Codesprint

Nachdem Jeff seine Mockups fertiggestellt hatte, beschloss Acquia, sich direkte Hilfe von von Maintainern von Views zu holen, damit die neue Benutzeroberfläche zeitnah implementiert werden konnte. Die beste dafür geeignete Methode war ein zentraler Codesprint, der in der letzten Woche im Zeitraum vom 14. bis zum 18. Februar in San Jose, Kalifornien stattfand. Hier haben sich sowohl real als auch virtuell zahlreiche Entwickler aus allen Ecken der Welt zusammengefunden, um gemeinsam die neue View UI umzusetzen.

Hierzu wurde von Acquia ein Apartement angemietet, ebenso wurden den eingeladenen Entwicklern Reisekosten und Spesen erstattet.

Nach einem entspannten Sonntagabend begann Montag Früh die Arbeit. Sobald der aktuelle Code-Status überprüft war, wurden die Aufgaben verteilt und jeder Entwickler widmete sich einem speziellen Problem. Hin und wieder gab es auch Video-Meetings mit Jeff, um Rückfragen bezüglich der Umsetzung der Mockups in eine funktionierende UI zu klären.

Es wurde fleißig gecodet und gehackt, tagsüber, an den Abenden und mitunter auch bis tief in die Nacht hinein, so dass der Codesprint ganz im Wortsinne rasche Ergebnisse und Fortschritte lieferte.

Nachfolgend nun ein kurzer Überblick in Bezug auf Änderungen bei der UI

• es gibt einen neuen Wizard, der es einem erlaubt, schnell neue Views anzulegen und diese dabei auch gleich noch mit den üblichen Standard-Einstellungen versieht. Erstellt man also beispielsweise einen neuen Node-View, wird "node/content: published filter" automatisch hinzugefügt
• Es wurde eine neue Auflistung von existierenden Views erstellt, die in die CTools Export UI integriert ist, was bedeutet, dass dieses Listing in jedem Modul, welches auf die CTools Export UI zurückgreift (was sehr zu empfehlen ist) ein ähnliches Listing zur Verfügung steht
• der Edit Bereich eines Views wurde vollständig überarbeitet
• Die Links zu den Einstellungen sind jetzt gemäß ihrer Relevant angeordnet bzw. gruppiert. Vgl. dazu auch Screenshot [#1]
• Das add new field/filter/argument/sort Formular wurde überarbeitet. Was da in der UI passiert (Overlays für jede Einstellung) ist salopp ausgedrückt relative "awesome". [#2]
• Es gibt ein "Suche-während-du-tippst" Formular, das in Echtzeit die eingegebenen Zeichen für die Suche verwendet und Ergebnisse zurückliefert
• Am Fuß der jeweiligen Overlays sieht man die bereits hinzugefügten Einstellungen
• Die Ansicht für die Konfiguration von Filtern wurde ebenfalls vollkommen überarbeitet, um die Funktionen, die in 80% der Fälle ("80% usecase") benutzt werden so schnell und einfach wie möglich auffindbar zu machen
• eben dieser "80% usecase" wurde auch sonst möglichst allen Bereichen der UI berücksichtigt. Konkret bedeutet das: wichtige und häufig genutzte Funktionen sind jetzt immer prominent vor allem im linken/oberen Bereich der UI zu finden, während seltener verwendete Funktionen nach recht/unten rücken oder in einklappbare "Mehr"-Fieldsets ausgelagert werden
• gleiches geschah mit Argumenten, Feldern oder ähnlichem, was als Resultat ergab, dass das Formular für die Konfiguration von Feldern jetzt deutlich kleiner und damit übersichtlicher erscheint beim Öffnen [#3]
• falls jemand Sorge haben sollte, dass unter der Vereinfachung der Benutzerführung die Mächtigkeit von Views gelitten haben könnte: natürlich haben wir keine Features entfernt. Alles ist noch da, nur besser organisiert, und selbst für das Beseitigen von Bugs ist noch Zeit geblieben

• Einstellen des Views im Rahmen der Vorschau: hier gibt es jetzt kontextuelle Links, um direkt in der Preview bestehende Elemente zu editieren oder neue hinzuzufügen
• View templates: Basis-Views können nun eingerichtet werden, die als eine Art Template ("View-Vorlage") verwendet werden können. Im Unterschied zu einem normalen View werden diese Vorlagen geklont, wann immer sie verwendet werden sollen
• zahlreiche weitere Verbesserungen, die aber den Rahmen dieses Blogbeitrags sprengen würden. ;)

Wer die neue UI ausprobieren möchte: sie kann entweder aus drupal.org/github direkt ausgecheckt werden - oder aber man muss sich gedulden, bis sie tatsächlich in die offiziell auf drupal.org vorhandene Version von Views integriert worden ist.

Es gibt bei der ganzen Geschichte um die UI jedoch ein gravierendes Problem: sobald man sich einmal daran gewöhnt hat, will man nicht wirklich zu der alten zurück.

Am Ende der Codesprint-Woche waren wir mit fast allen Arbeiten durch, und die Gruppe ging wieder auseinander. Begonnen wurde auch noch die Arbeit an der automatischen Migration von Views von Drupal 6 nach 7. Hier gibt es nämlich noch Probleme mit dem Upgrade-Path, was eines der Haupthindernisse für das Erscheinen einer neuen Views Beta ist.

Entwickler, die neben mir am Views UI Codespring beteiligt waren:

ksenzee, jessebeach, esmerel, merlinofchaos, noyz, bojanz, pwolanin, dagmar, gabor, david_rothstein, effulgentsia, und zudem die vielversprechenden Newcomer Charlotte and Reuben Miles.

Es hat riesen Spaß gemacht, danke für diese großartige Woche. Bedanken möchte ich mich auch bei erdfisch für die Unterstützung in dieser Woche und generell für die Zeit, die ich hier als Arbeitszeit in die Weiterentwicklung von Views stecken kann.

english version

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
Gardens, 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.

Codesprint

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 drupal.org/github 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.