In my previous post I convered the reasons why we decided to streamline the administration UIs of Liferay and in the process review the usability and design of the Control Panel. In that post I already covered two of the key decisions we made as part of this redesign: (1) Extract the "My Account" administration out of the Control Panel and (2) Extract "Site Administration" outside of the Control Panel.
Let's follow up from there with other key decisions.
3. Reorganize the portlets in the Control Panel
Once we've extracted out the portlets within "My Account" and "Site Administration", what do we have left? The remaining tools are those that in 6.1 and previous used to be classified in two sections: "Portal" and "Server". The reasoning for having those two sections was that the portlets that belong to the first manage stuff that belongs to the current portal instance, while the portlets under "server" manage elements that have an effect across all portal instances.
However, the feedback we've gotten over the past couple of years is that this differentiation wasn't very clear, or even highly informative for administrators. Also, some portlets were quite related to each other but were also mixed with other unrelated portlets. For this reason several months ago, Juan Hidalgo our UX Designer based on Madrid, proposed to start brainstorming for alternative classifications. Juan, wrote a card for each tool and pasted them in a big whiteboard (I wish I had a pic but I don't. Juan if you do go ahead and paste it as a comment). After several weeks trying alternatives we were ready to make a proposal, which got interesting feedback from a bunch of people, specially Nate Cavanaugh and Ed Chung. The result was the creation of 4 categories within the Control Panel: Users, Sites, Apps and Configuration. One key thing to highlight is that each of these categories has one portlet that is specially relevant and we expect it to be used much more than the rest in the category (which provide complementary features). Leveraging this, we decided to get rid of the vertical menu and go with a horizontal menu which makes the navigation easier to use. Here is a description of each of the sections along with an screenshot:
- Users: Contains all portlets related to administering users and user related stuff, such as permissions.
- Sites: Contains all portlets related to managing sites as well as tools used to build the sites themselves such as site templates and page templates. It is worth noting that within the sites portlet it is possible to fully manage any site (as long as the user has permission) just by clicking on its name. In other words, the site administration UIs of all sites are easily accessible from the Control Panel.
- Apps: we decided to go along with the overwhelming trend of calling Apps to all extensions to a product. This term had already been adopted by the marketplace so it was good to be consistent. For those used to other terminologies within Liferay, an App can be installed from the marketplace (in which case it can contain one or more plugins) or be deployed locally (in which case it will be composed of one plugin of any type, portlet, hook, web or ext).
- Configuration: contains all portlets that provide ways to configure the platform. All the configuration performed from here will either affect elements that live outside of a site or will have effect over all sites.
We also decided to provide a frontpage which provides an overview of all portlets available in each of the sections. This provides a quick way to go to any of them in one click. It also provides access to a description of each portlet by hovering the question mark next to its link:
One final thing you can notice in this screenshot of the Control Panel Home is that under each section there is a question and a button that provides access to the most common action that the current user might want to perform. Note that the location of these "Quick Actions" is not final yet.
4. Reduce the number of pop-ups
In 6.1 we introduced quite a few pop-ups to access management UIs as a way to allow the administrator to keep the context. However, after the feedback received and our own UX evaluation we came to the conclusion that we were using pop-ups in situations were they weren't the optimal solution. For this reason, in 6.2 we've replaced many pop-ups with full page reloads, although making sure that the headers and navigation provided proper context as well as a quick way to go back to the previous screen. The general rule we are following is that pop-ups are good for short iterations, but not when the user is going to be working within the pop-up for some time or do quite a bit of clicking around.
The overall experience is definitely much better now and the UI feels much faster.
Note: There are still a few pop-ups that we haven't been able to replace for technical reasons. In particular, the "Manage > Templates/Structures" in Web Content and "Manage > Document Types" in Documents & Media come to mind. We'll replace those later on.
5. Keep backwards compatibility for developers
As you've seen, we've performed tons of changes to improve the usability. However we didn't want these changes to have a big impact on developers. So if you are a developer you will be happy to know that if you developed a portlet for the control panel for 6.1 it will work in 6.2 without any changes.
This is possible, because under the hood both "Site Administration" and "My Account" are considered to be part of the Control Panel. So in order to create a portlet for any of them a developer just has to add a control-panel-category element
within its definition in the liferay-portlet.xml configuration file. We've also made it so that the old category names are automatically converted to the new category names as follows:
Here is a full list of the new available categories:
- Control Panel:
- Site Administration:
- My Account:
How can I test it out and provide my feedback?
If you've got this far you are probably interested in finding out how to test this out. It's easy, just download Liferay Portal 6.2 Beta 1 and install it locally. We'd love to hear your feedback either as comments to this blog post or as part of the beta program.
Remaining tasks and aspects under consideration
We are already in the beta cycle of 6.2 so what has been discussed in this blog is quite final. However, there are still some minor UX improvements that are still under consideration and might suffer slight changes. Here is a non-exhaustive list, feel free to give us your opinion:
- Headers of both Site Administration and Control Panel: we are still not 100% sure of how they look so they may still change.
- How to let portal administrators know which actions will affect all portal instances: With the new organization it's not clear in environments with multiple instances that some will affect all instances while most won't. We need to find a way to let the user know.
- Descriptions for each Control Panel section and place the quick actions in a different position that flows better in smaller screen sizes.
- Navigation witihn the "Sites" and "Users & Organizations" portlets.
That's it, I hope you enjoyed these two blog posts. Next I'm planning a post on the changes we've done to the dockbar, anyone interested?