development icon

User Experience Enhancements for Atrium 2.6

Mike Potter, Software Architect
#Atrium | Posted

During the past nine months, Phase2 has engaged our designers, usability experts and focus groups to study and improve the Atrium user experience. During this project many common themes emerged and specific enhancements were identified. These improvements have been implemented in the new 2.60 version of Atrium.

Atrium is a powerful framework for building collaborative intranets, portals, and websites. But sometimes this power was difficult to use because there were so many controls on the screen and no real consistency about where to go for certain tasks. The first impression of Atrium was often one of confusion.

In addition, the Theme used in Atrium was designed to be minimal. We assumed that sites built using Atrium would implement their own theme. And while this was true in some cases, we found that other users just wanted to use Atrium “out of the box” and were unhappy with it’s bare-bones look and feel.

A New Theme

In order to improve the first impressions and the branding, we decidedscreenshot of Atrium 2.6 new UI to split the theme into two parts:  a solid base theme, and a well designed default theme. Our previous Radix base theme had been updated to use new tooling and could now be integrated directly into a cleaned-up version of our previous oa_radix theme. Then, the new default “Modern Theme” was developed on top of this new base theme.

Not only does the new Modern Theme look great and have improved usability, it provides a template for cloning and customizing it as a custom site theme.

A New Layout

Early in the project we realized that just building a new set of themes wasn’t enough.  In order to dramatically improve the usability of Atrium, we needed a new set of components within a whole new layout structure.  The limited toolbar and footer “mini-panels” didn’t provide the functionality needed for these new components.

screenshot of Atrium site layout using panelsTo improve the flexibility of the site layout, we added the Panels Everywhere module, which is used to provide the outermost layout regions for toolbars, sidebars, and footers.  We created several new panel panes used with Panels Everywhere for elements such as navigation, tabs, local tasks, breadcrumbs, page title, etc.  We also created a new “Responsive Tray” panel style that could be use to create fly-out toolbar trays.

Not only does this new layout system enable all of our desired improvements, but it is also provides an extremely useful tool for site builders who want to customize their site layout.  You can create multiple “variants” of site layout triggered by any number of selection rules.  For example, you can have a different site layout for anonymous users vs logged-in users.

In addition we focused on the mobile experience to ensure the new layout system works well whether using Atrium on the desktop or on any mobile device.  Any toolbar components can be set to collapse within any number of mobile menu buttons.

End User Experience

One of our focus groups looked at Atrium from the perspective of anonymous users.  These users didn’t need to see all of the complexity of Atrium and just needed a consistent and familiar web experience. 

The new site header focuses on standard navigation and search.  Content creation or admin is no longer mixed with basic site navigation.  The main menu of the site is used for anonymous user navigation rather than exposing the Atrium space hierarchy.  The site is designed to focus the user’s attention on the content they are interested in.

Editor Experience

The next focus group concentrated on the Content Editor experience.   screenshot of editor widget tools

These are the users of your site who create, edit, and approve content being published.  All of the components needed for these editors have been grouped into a new Editor Toolbar placed in the lower-right corner of the site.  This is very similar to what other editing tools have done, especially mobile-focused tools.  When editing a page, the Save and Publish buttons have also been moved to this Editor Toolbar, providing a consistent location for all primary editor functions.  Editors no longer need to scan the entire page looking for Edit or Save buttons.

Admin Experience

Another group focused on the Space Admin role.  In the past, administrator functions were scattered around the screen in various places.  Admins had extra buttons for customizing the page and changing layout, as well as multiple “config” menus of tools.  This not only made them hard to find, but it also made it difficult to visualize how the page might look to non-admin users.  

In the new Atrium, a left sidebar tray is used to contain all of the Admin functions.  It contains the Drupal admin menu, a menu for all Space admin functions, a menu for managing the structure of a Space, and a menu for managing the members of a Space.  These functions are available all the time, no matter where in the Space you navigate.  This makes it even easier for Space Admins who no longer need to visit the home-page of the Space before selecting admin tools.

New Components

screenshot of new component such as notificationsMany new components were designed for the new version of Atrium.  From the new Admin components (Space Config, Space Structure, Space Members), to a new Space Navigation component located in the main header that simplifies the previous breadcrumb component.  The Contextual Tabs were improved to allow more control over where to place different page tasks to simplify the Editor Toolbar and move admin-related tasks to the new admin components.

Finally, a new Notification component was written from scratch to improve its functionality and usability.  Notifications have been a key feature in Atrium, and the new component allows notifications for anybody who has access to the page content including non-members, inherited members, other groups and teams.  It also shows more details such as who is notified as part of different groups, spaces, and teams, and whether users have disabled their notifications or lost access to the content.

Many other improvements

If you read the full release notes for v2.60-rc1 you’ll notice this was the largest number of improvements ever made to a Atrium since we first released 2.0 over two years ago. Almost every aspect of Atrium was improved by the new theme, including comments and discussion forums, the site map, the space membership page, and events and tasks. The entire typography of the site was improved with cleaner fonts and improved “vertical rhythm” for more visual consistency. The use of color was made more consistent and all the built-in color themes in Colorizer were improved.

And while we were working on the look and feel of Atrium, we were still fixing bugs and updating contrib modules used in Atrium.

Conclusion

We hope you like the new look and feel of Atrium.  To see the new version in more depth, view our “First Look at new theme in Atrium 2.60” video and our “New Notifications in Atrium 2.60” video. Release candidate one (rc1) is already available for download, and the final stable version of 2.60 is expected in late March 2016.

As an agile development shop, Phase2 strives to make continuous improvements to all aspects of our work and products, and I think this philosophy shows in the new version of Atrium. As we now start to look forward to Drupal 8 and move Atrium 2.x into a stable maintenance and support cycle I’m happy we were able to still make these kind of widespread enhancements to a product at this late phase.

Mike Potter

Mike Potter

Software Architect