UI Project Leads to Significant Improvements in Plone 4.3’s Theme Editor

In Spring 2012, the University of California, Los Angeles Diazo Work Group collaborated with other members of the Plone community to improve Plone’s Diazo user interface (UI). The result is an easy-to-use in-browser rich editor for Diazo themes along with advanced theme building and testing tools. The improved Diazo theming engine is integrated with Plone 4.3, due to be released later this year.

“We saw a call for help in an online discussion from Martin Aspeli, one of Plone’s core developers,” says User Experience (UX) Designer Alice Tseng-Planas, a member of the UCLA group. “He was looking for users to help improve the interface. We wanted to get involved.

“Alec Mitchell, another member of Plone’s core development team, taught us how to use Diazo. He provided a lot of support as we tried using the different features. We put together a report for Martin, so he was better able to prioritize which issues to tackle.”

The work group tested and evaluated layout, labeling of elements, organization of features, and overall ease of use. “We found that certain elements didn’t make immediate sense. In other cases, features were hidden within the UI’s organization,” says Tseng-Planas.

“For example, we got confused when we first used the theme mapper. We tried to import our existing themes, and the app wouldn't accept them. It wasn’t clear why. It turned out that each theme to be imported required an XML rules file. But we didn't know that, and we didn't know how to make one.”

This experience led to the development of a new feature:

Users now can upload an HTML/CSS mockup, and the theme mapper generates and appends the XML template for them. This makes importing themes much simpler.

Members of the UCLA Diazo Work Group participating in the UI project were Alice Tseng-Planas, Elaine Blakeman, Celia Cheung, Dave Margolis, Michael Miller, Jared Planas and Caroline Kong. Plone developers contributing to the UI project were Martin Aspeli, Alec Mitchell, Alexander Limi and Denys Mishunov.

UCLA work group member Elaine Blakeman and Tseng-Planas provided mockups for alternate dashboard layouts. These proposed layout changes addressed users' complaints that organization of elements was cluttered and overwhelming.

The group also submitted suggestions for clarifying the various options for creating, importing, and cloning themes as well as documenting JavaScript cache bugs that were causing confusion.

“The UCLA group highlighted a number of usability issues that likely would have cut adoption,” says Aspeli. “Because of their help, we’ve been able to make the interface significantly more user friendly.”

“The old Plone theming process was painful,” says Tseng-Planas. “We wanted this project to succeed because we needed a tool like this. We’ve been theming with Diazo ever since working on the UI project, and two of our members have created new responsive designs for their units’ Plone sites. Our dream is that eventually all of the rendered experience can be handled by Diazo -- including template changes, browser view customizations, and the like.”

“We want the Diazo theming tools to provide a user-friendly environment so that designers and non-developers can create themes without needing filesystem access or knowledge of Buildout or Python,” says Aspeli. “The goal is to make Plone the world's easiest CMS to theme."