Improving content efficiency with Zen Garden

15 December 2016
Mateusz Luczak
Frink_Cognifide_2016_HeaderImages_0117

With every new feature that we develop for Zen Garden, our Adobe Experience Manager accelerator,  the goal is always the same, to optimise the author experience. As such, we spend a lot of time thinking about how authors use it and where their priorities lie. The majority of these people are content creators or, in AEM terminology, regular authors. On a daily basis, apart from writing fresh content, they will spend a lot of time creating, inserting and configuring components. So we've been developing Zen Garden in order to make this easier and find solutions for existing pain points.

The components browser

One of those pain points relates to the out-of-the-box AEM 6.2 Touch UI components browser. Touch UI is a big leap forward in terms of user experience and functionality compared to Classic UI, particularly in the way in which the component list is displayed. In the Touch UI components browser, authors can now filter displayed components either by typing a query into the text field or by selecting a group. Components are also much easier to select, especially using your fingers, which not only makes authoring on mobile devices possible, but also greatly reduces the number of mistakes caused by dragging and dropping different components. You can see the differences here.

Classic UI vs Touch UI

Seeing how much of an improvement Touch UI makes when compared to Classic UI, we have been working hard with Zen Garden to improve the usability of the components browser even further. And although Touch UI represents huge progress, we really liked the idea of having collapsible groups of components in Classic UI.

Bucketing in subgroups

According to the latest research regarding the number of items in a list of links (and yes, the component browser is a list of links), the optimum number is around 7. So, in Zen Garden, we decided to divide the long component list into subgroups. This approach not only reduces the number of items in each list but also makes lists easier to scan, as visual, meaningful hooks are provided in each subgroup. While visually grouping components we can also present those with similar functions in one bucket, which gives authors a better understanding of what every component can do.

image

In Zen Garden we already had 27 reusable components grouped into buckets (such as Common, Hyperlinks, Content Lists, Engagement etc.), so finding a way to display that in author mode made it far easier to understand. These groupings provide an additional level on top of what is available in standard AEM. We call them subgroups. Authors are still able to filter the component list by group and then display the results presented in a subgroup.

Introducing Zen Garden 

You may also notice on the screenshot above that we have changed the way in which individual components are displayed in the list. We found that the colourful component rectangles in the out-of-the-box solution were too big for non-touch devices so we decided to present a two column solution. We have also introduced a way to add icons for a component or feature that you may recognise if you're familiar with Zen Garden in Classic UI.

If a picture is worth a thousand words, the benefits of representing components with icons are pretty self explanatory. In the out-of-the-box approach, colours were randomly assigned from a predefined colour palette, which means that some components may end up being represented by the same colour. Providing icon gives each component a unique visual resprentation. Authors can therefore better understand what components actually do and find them more quickly.

Component icons

Can I create my own icons for bespoke components? 

This kind of iconography is not limited to Zen Garden out-of-the-box components or blocks. If you are using Zen Garden 4.1 (or later), or planning to upgrade, providing a subgroup and new icons for your components is super simple. To set an icon, provide a file named either icon@touch.png or icon@touch.svg in the component directory of your application project. Use svg if you want to make sure your component icon is displayed beautifully on high dpi touch devices. Adding a component to a subgroup is just as easy. You only need to update .content.xml of your component to create an additional node called componentSubGroup.

<jcr:root ...
   jcr:title="Rich Text"
   componentGroup="Zen Garden"
   componentSubGroup="Common">
Want to learn more? 

If you're a content author, there are many other ways in which Zen Garden 4.2 could improve your working life. for instance, in this release we have enhanced inplace editing, so even dynamic components like tabs or carousels can be configured with fewer clicks directly from the component toolbar. And Zen Garden 5.0 is now available for projects based on AEManager 6.2. 

Check out the Zen Garden 4.2 release notes for further information.


Zen Garden 4.2 Galaxite