New in 6.2: Streamlined administration through Site Administration and the new Control Panel (1/2)

Hey guys,

The 6.2 release is getting closer and closer, so after quite a few months without writing a blog entry I'd like to get back starting a new series I'm calling "New in 6.2". In this blog series I plan to blog about new features in the upcoming release and will try to explain our motivations, the challenges we faced and the reasons for the decisions we made. All in the Open Sourse spirit of being as open and transparent as possible. I'm also encouraging other developers on the team to do the same.

This first blog post will be about a set of improvements with which I've been personally very involved: the redesign of the Control Panel to make it more usable and versatile and to allow it to keep growing without increasing the complexity. This post will go through our thinking process and show the end result. Since it's a pretty large post I've divided it in two parts. Here goes the first one.

Why we started this effort

The Control Panel was introduced in Liferay 5.2 as a way to provide a central location to manage the whole portal, including all of its sites. Previously administrators had to build their own administration UI by manually adding portlets to pages. I think the goal was achieved with great success and almost all of the feedback has been very positive.

However as the Control Panel has kept growing with more and more portlets new challenges have arised. Additionally some companies were approaching us saying that in their particular scenarios the Control Panel was not the best fit. Here are some of these challenges:

Losing context: In some portals the fact that the user (for example a site administrator) looses the context of the site when going to the control panel was a big issue (or even not allowed by the company UX policy). A big factor in this context loss is that the Control Panel offered many more options than just administering that one site, another was the quite different look & feel.
Too complex: Let's admit it, the Control Panel was becoming quite complicated as it has gained more and more functionality. While this could be alleviated by giving users the right permissions, the fact is that people kept finding it too confusing.
Mix of portal-wide administration, site administraiton and even personal account administration: This is an explicit decision we made, so that there was one and only one administration UI for everything. But not everybody feels comfortable with this, specially because personal account administration is available for all users while portal-wide administration is for a very small number of portal admins, so having one single UI didn't allow optimizing for each separately. Site administration was somewhat in the middle of both extremes.
Old look and feel: The look and feel had some changes in 6.1 but it was still not so pretty and that fact made it even more intimidating for some users.
Empty first page: When going to the control panel the first page is empty and only shows a message. That's not the best from a user experience perspective.
Non-intuitive navigation through administrable sites: the dropdown embedded within the left menu is quite handy for administrators that manage more than one site, but let's admit it, it's weird to have a dropdown within a menu. Specially since what its selection only affects some one of the menu sections.

For these reasons and a few others many Liferay installations were restricting access to the Control Panel (which in 6.1 can be done with a permission) to very high level administrators. In other cases I found people were relying back to the manual addition of administration portlets to regular pages, which I consider more like a workaround than a final solution.

Before digging into the solution let's see the before pic:

The prototype and early decisions

We had been thinking about how to address these challenges for a while but we couldn't find answers for all the questions. Finally this past May during an engineering retreat we decided to give a try and started a prototype. In this prototype we combined several ideas that had been proposed by different people (Nate, Juan Hidalgo, Ed, myself, ...) over the past few months and voilá... we really liked the result. So much that we decided to fully implement it even if it wasn't originally planned for 6.2.

Here are some of the key decisions we made:

1. Extract the "My Account" administration out of the Control Panel.

We call "My Account" to the set of tools that allow a user to manage his personal stuff. By default that includes "Account Settings" (also known as "My Account" in 6.1 and before) and "My Pages". If a workflow engine is deployed, two more tools become available: "My Submissions" and "My Workflow Tasks". And since Liferay is a platform it's possible to add more tools easily by developing a portlet. In the image above you can see the portlet "My Subscriptions" that we use at liferay.com.

Almost all portals provide a way for users to edit his account settings. This means that "My Account" should be available for all users, which contrasts to the Control Panel which is targetted at Portal Administrators. So in 6.2 we've decided to extract it out of there and make it easily accessible through the user menu in the upper right area:

By default it opens a pop-up giving access to Account Settings as well as any other personal portlet. It is possible to make it load as a regular portlet in the current page with a setting in portal. properties:

2. Extract "Site Administration" outside of the Control Panel

The second key decission we made is to extract all site administration tools outside of the Control Panel. In order to do that we have created a new UI, appropriately called Site Administration, that can be accessed from any site. Within this UI all administration tools are organized in 4 sections:

Pages: The site pages (public and private).
Content: Has an entry for each site application that has content. It also includes other content-related tools such as Categories, Tags and the new Recycle Bin.
Users: Tools related to managing users in the context of the site. By default there are two tools, Site Memberships and Site Teams.
Configuration: All tools related to configuring the site. The first and probably the most used of these tools is "Site Settings", other useful tools are the new Application Display Templates, Mobile Device Families (previously known as Mobile Device Rules) and more.

Each of these sections has a direct link from the Dockbar, from within a new menu called "Admin":

This is the result of clicking "Content":

Here are some important things to notice from this screenshot:

This UI is actually pretty similar to the old Control Panel, with a left menu and a main area. Although it only has administration tools associated with the current site.
The name of the site along is shown in the dockbar and to its left there is a link to go back to the site.
The down arrow next to the name provides access to a menu with a list of other sites that the current user can administer. This will be specially useful when the current site displays shared content (a new feature in 6.2) from parent sites or other sites managed by the administrator, as well as global.
The list of site administration tools in the left menu is searchable with instant search (aka search as you type)
When going to a section the user is shown the first portlet within that section. In this case it's Web Content, which will be in many sites one of the most commonly accessed portlets.
The left menu acts as an accordion, That means that only one section can be open at a time. This has been done to reduce the size of the menu, which could otherwise create circumstances such as display the current tool below the visible screen area.

I'm going to finish here the first part of the post. I would love to hear your feedback about anything I've shared and I'll be happen to answer any questions.

In the second part I'll go through other key decisions, such as the reorganization of the portlets left in the control panel, the efforts to reduce the number of pop-ups or how we have kept backwards compatibility for developers. I will also descrived other changes that are still under consideration and waiting for user feedback as well as the results from UX testing.

Update (Aug 14th): I've just published the second part of this blog post.