Developing GenUIne, the new Magnolia User Interface

July 07, 2008

My name is Vivian Steller. I joined the Magnolia team in mid 2007. I study Media Informatics at the University of Ulm, Germany. My main focus covers human-interaction design and programming distributed systems, especially in the area of Java EE technologies.

A quick look at GenUIne

GenUIne is a completely redesigned interface that will ultimately increase Magnolia’s usability and joy of use. Along with those improvements, Magnolia’s GUI will be build on a completely revised technical architecture based on modern web technologies.

Seeing is believing, so here is a mock-up of the current GenUIne design which we are going to evolve further:

About Magnolia and its GUI

Magnolia is an open-source enterprise content management system which is based on Java and in particular the Java Content Repository (JCR) Specification . The community edition is available free of charge, whereas the enterprise edition that comes with advanced features and additional support options is available upon purchase. The current branch 3.x provides a rich set of features for creating sophisticated website frontends covering both small and large scale businesses.

One of Magnolia’s unique selling points is its outstanding simplicity for the end user when it comes to the GUI, yet, Magnolia also provides access to powerful features for experienced users, administrators and developers. Magnolia’s web-based backend system through which users manage the website is made of two main parts: AdminCentral and the website preview with editing capabilities, whereas each one is accessible from the other.

AdminCentral is the main entry-point for editors, content managers, administrators and developers to the website management facilities of Magnolia. Most importantly editors or site managers use AdminCentral to create the page structure of the resulting website and to review changes submitted by editors. Administrators use AdminCentral to setup site permissions, security constraints and perform other administrative tasks. Developers on the other hand use AdminCentral to initially setup and customize the entire website.

In contrast to AdminCentral which provides access to the website’s navigational structure, editors use the website preview mode to manage the webpage’s content that is the real data that is displayed when the website visitor hits one of the pages. In fact, the preview mode is one of the key features of Magnolia that boosted its success in terms of usability and simplicity. Users quickly feel pretty much comfortable with Magnolia’s editing capabilities since those are seamlessly integrated into the website’s final layout and look & feel.

The two metaphors, AdminCentral as a single point of entry to manage the structure and administrate the complete website and the preview editing mode which is a handy tool for creating content, ultimately resulted in Magnolia being a powerful yet easy to use and easy to learn enterprise-ready application.

Motivation for GenUIne

Magnolia early recognized that the user experience, the easiness of using a software system, offers strong business value to the end user. That’s why ease-of-use and usability in all its facets are not only industry buzzwords for Magnolia but have been practiced starting from the first release of the Magnolia CMS in 2003.

Nevertheless, the current Magnolia user interface which – in its current status – exists since more than 3 years now and requires some revision considering the latest developments in the constantly moving field of user interface design. We thoroughly analyzed nearly the complete interface and developed new concepts as well as revised existing ones. An in-depth look at this analysis will be presented in future articles. This article however should highlight some outcomes of the analysis.

Usability aspects

Well, talking about usability means more precisely speaking about three things:

• efficiency & effectiveness
• error robustness and
• user satisfaction (“joy-of-use”)

In short, efficiency and effectiveness describe how fast a user can perform a certain task or, the other way round, how many tasks a user can finish in a certain time-frame and if those tasks are being executed correctly. Thus helping the user to avoid making errors is a key goal for increasing efficiency as well. Increasing the systems' error robustness also leads to – in the end – a more satisfied user. Finally, the “joy-of-use” is an important corner-stone of a usable application. Users who like to work with a software do this in a more efficient manner.

Of course, usability is much more than those three factors and all those aspects are covered in detail in a future article.

Comparing the current Magnolia UI and its behavior against those three items raises some – even though little – shortcomings. For instance, the UI controls of Magnolia currently do not provide input validation at all which is one of the significant missing features. Furthermore, special care should be taken to ensure consistency and expectations conformance across different screens and dialogs within the application. For instance, in Magnolia the user can quickly loose his working context due to popping-up windows or when navigating through complex website navigations in preview mode. Also, the complete navigational state (e.g. which node was opened within a tree component) is lost once the user browses to another page and uses the browser’s back button to direct to the previous page again. Those are by far not the only things we consider for being improved in the upcoming version of the Magnolia UI in terms of usability. We will finally redesign the complete application’s look & feel to make it even more pleasurable than today to work with the Magnolia Enterprise CMS.

Having said that, let’s just clarify it again: it’s neither the goal to reinvent the wheel nor to loose any of those outstanding features that made Magnolia a thousands users' choice and which made Magnolia that successful. We will carefully investigate where it “tweaks” and what can or has to be improved. Users will not have to learn managing a completely new interface but will gain a lot from sophisticated new features.

Technical Aspects

So far we only looked at Magnolia from the users point of view. Well, there will be – and that is likely to be the even bigger part – a significant revision of the Magnolia UI from a technical perspective. The technical discussion is a ongoing process and will be explained in detail in upcoming posts. But first, let’s look into what’s already built into Magnolia and what will further be extended, namely Asynchronous JavaScript and XML, in short AJAX.

“AJAX is everywhere” - and that is for reasons. Nowadays it is an absolute must for an application to support AJAX capabilities. Speaking from a usability perspective again, the advent of AJAX offers great advantages such as quick application response times and thus enabling immediate user feedback opportunities. These usability advantages come along with a bunch of technical advantages like lower bandwidth consumption etc. (yes, these are the AJAX standard arguments and are out of discussion for this article).

Well, AJAX has found it’s way into Magnolia some years ago. But there is still a lot of space left for further enhancements. Most notably there are ongoing discussions on building the Magnolia user interface entirely on top of a full-blown webservice infrastructure. This not only enables extended AJAX capabilities but also clearly decouples the view from the application’s logic. This approach offers the ability to independently improve AdminCentral by potentially putting it into it’s own software development lifecycle which can be updated without affecting the core components of the Magnolia CMS. The discussion and details of the webservice approach shall not be discussed in this first article but instead is left as a topic of later one.

Not only that the UI gets a new foundation, also the library for building the user interface itself (like controls and components) will be replaced. Instead of using our own, proprietary UI component model we will switch to one of the numerously available solutions (such as ExtJS ) which come with a couple of big advantages, no matter what specific technology is used in the end:

• modern UI libraries provide a rich set of UI components
• each component itself has a rich feature set as well as built-in AJAX support
• they come with a better user experience out of the box
• libraries such as ExtJS have strong community support (and acceptance)
• and a continuous development cycle (constantly fixing bugs etc.)

Magnolia was built on its own component model and AJAX libraries and pioneered the area of rich web clients at a time where no other reliable solution was available. However, time has changed and extensive work has been accomplished to build powerful front-end libraries. Magnolia will gain a lot from those development efforts in the future.

Future Prospects and Further Reading

There is a lot of work to be done, there are a lot of things to discuss and to talk about. We will constantly inform you about the status of GenUIne, the new Magnolia 4.0 user interface. You can get an insight on what will await you in this blog post series by looking at the (preliminary) list of GenUIne blog posts in the Magnolia Wiki. Additionaly, you can directly browse the GenUIne pages in the Dev Space of the Magnolia wiki.

We strongly appreciate any comments and valuable feedback you provide either by directly commenting on each posts entry page or through the developer mailing list. For more information refer to the Magnolia Documentation website . We encourage you to participate in this great new project and making the coolest CMS out there even better!