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
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.
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.
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 firstname.lastname@example.org or email@example.com 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.