AEM marketing and development teams often spend a tremendous amount of time and money focused on the design and usability of their site. Interactive prototypes and user experience testing labs are leveraged to make sure visitors are able to quickly and easily accomplish tasks in a beautifully branded and engaging site. AEM developers are then tasked with breaking the designs into components and working to ensure the components render according to the design.
However, for the AEM implementation to be truly successful, focus also needs to be on the internal customer; the AEM author. In order for AEM marketing teams to quickly create and publish content, equal attention needs to be placed on the component dialogs, which are the means by which authors enter content. Poorly designed dialogs can cause confusion, delays, and frustration for marketing teams. To help make sure AEM developers are helping their business practitioners to be successful, this article offers recommendations and best practices when creating AEM component dialogs.
1. Develop standards for field names and types
Develop standards so that dialog field labels and field types are consistent in order to simplify the authoring process. Keep the field labels short, succinct, and consistent. Be sure to populate the field's description property so that authors can see field-level contextual tips. For fields that are related, consider grouping those items or placing them on separate tabs. Leverage custom CSS to add borders and separators as desired for a clean dialog layout.
2. Include validation
Required fields should be marked as required to ensure they’re populated. Include basic validation to make sure that authors cannot enter invalid content or content that does not fit the design, such as min and max lengths. If only numbers can be added to a text box, validate accordingly. Regular expressions can be leveraged for complex validation rules.
3. Default components with sample content
When authors add a component to a page, it can be confusing if the component doesn’t initially render content. When creating editable templates, add default content that will help the author populate the dialog with appropriate content. For example, if the Title is supposed to be between 20 and 40 characters, default the Title field to render accordingly.
4. Leverage content and experience fragments
Leveraging content and experience fragments can be extremely helpful. When capturing content, consider who is providing the content and how that content will be used. If the content is coming from authors who are not familiar with page building, instead just grant access to the fragments in AEM Assets. Page builders can then leverage those assets when building pages. Fragments are also very helpful if the content is being used in multiple locations since the content can be managed in a centralized location.
5. Utilize component styles
Rather than creating multiple components that perform a similar function but render differently, just create one component and use CSS to vary the HTML output as needed. Use the component’s Style System to allow the author to select the desired rendering for the component. For example, a List component could render various fields based on the author's requirements. Rather than creating a different component for each variation, create just one component that leverages different CSS to hide/show the different fields, and allow the author to use the styles button on the component’s toolbar to select the desired output.
6. Simplify the component library
A component library should be as lean as possible. Before creating any new components, make sure that the existing set of components can’t meet or be altered to meet the requirements. However, it's best to keep the components as simple as possible since any added complexity will only make it harder for the authors to use.
7. Only enable applicable components
When authors want to add a component to their page, it can be confusing to sift through a large number of component groups and components. To make it easy on the author, only enable relevant components to be added to the template so that authors can quickly and easily select the desired component.
8. Have authors UX test components
When creating a new component dialog, start with a basic prototype and run it by the authors. Explain how the component will be used and gather their feedback. After all, they are the end-users who will interact with the dialog, so soliciting and incorporating their recommendations is beneficial. These reviews will also help to identify any issues early in the development cycle.
9. Provide online help
Create online help documentation for the components. Leverage the component’s “helpPath” property so that a help icon renders in the component dialog that links to the online documentation for that specific component. This gives the author an easy way to quickly refer to that documentation in case they’re not familiar with the component. The AEM Core Component documentation is an excellent example.
Hopefully, these tips will enable AEM developers to create amazing components and dialogs that authors will find easy to use when creating pages. If you need assistance with your AEM implementation, B2evolve would love to be your trusted partner. Feel free to connect with me on LinkedIn, and for AEM authors, developers, and architects in the Dallas/Ft. Worth area, join us for our next Dallas AEM User Group meeting on November 12th.