Usability Tip: Use Edit Bars instead of Roll-over Editing in Your Adobe AEM Project

The world’s worst developer, Joe Gunchy (read more about Joe here)  is at it again.  He created a new component to give content authors the ability to add rich text onto a page.  The content author loves this idea and wants to try it out.  They dragged the component onto the page, but there is no indication that the component is on the page and ready to edit.  The content author is confused, so they drag another component onto the page. Still, nothing shows up.

 

Where are the components?

 

They drag another onto the page, then another, then another.  Nothing is displayed. Now the content author has five instances of the component on the page that they don’t know about, forcing the content author to drink from a flask hidden in their bottom desk drawer.  Joe Gunchy laughs at the content author.  Joe Gunchy is an idiot.

 

“Content authors are so dumb.” – Joe Gunchy

 

Demo_Targeted_Content_-_2014-05-27_10.56.12

Five instances of the component

Component Editing

There are a few ways to edit content in a component. Some components contain an “edit bar” to show the editor dialog, while some use “rollover” editing.  The component below shows an edit bar above the component with options to add, edit, but, copy, and paste. If you want to edit the content of the component, you click the “Edit” button which opens the editing dialog. Easy.

 

Edit Bar to launch the dialog

 

When there is no edit bar, the author must click on the component in the page until they see the green boundary box appear. This is referred to as “rollover editing”.  Once that’s selected, you can either double-click within the box or right-click to launch the dialog editor. Joe Gunchy’s component used ‘rollover’, but when there is no content in the component, there is no way to tell the component is on the page.  You can mitigate this in the component source code by checking to see if you’re in EDIT mode, then add some default text to the component to show it’s editable. Also, in many cases, it is difficult to click if you do not place your mouse at the precise point within the box to open the dialog, or even worse – components overlap each other and you can’t click them at all.

 

Roll-over editing (no Edit Bar)

Roll-over editing (no Edit Bar)

 

Use the Edit Bar

For better usability and consistency across the editing experience,  use the Edit Bar on your components and never mix Edit Bar and Rollover on the page.  That’s a horrible authoring experience.  The Edit Bars below clearly show the author how to edit content on the page and when used exclusively, gives the author consistency when authoring a page.   It’s clean, has clear calls-to-action, and doesn’t require default text to know they’re on the page.  By adding a few options to the edit bar configuration, you can click on the “Cut” button and easily move them around the page.

 

Marketing_Automation_Software_Oracle_Marketing_Cloud_Oracle_Eloqua_Products_-_2014-05-27_10.58.08

To add the edit bar to your component, create an ‘cq:editConfig’ node of type cq:EditConfig under the component. This link shows the various properties to add to the component.  Adding cq:actions to the properties allows functionality to move the component around the page.

The table below from the CQ documentation shows the different options for the edit bar.

Property Value Description
text:<some text> Displays the static text value <some text>
Adds a spacer
edit Adds a button to edit the component
delete Adds a button to delete the component
insert Adds a button to insert a new component before the current one
copymove Adds a button to copy and cut the component

 

Here are some typical properties to allow editing, moving, and deleting the component from the page. You must have “insert” selected if you want to move the component around the page and replace it between two components.

 

CRXDE_Lite_-_2014-05-27_14.32.13

 

Additional Tip: Remove the Wrapper

AEM adds wrapper containers around components to allow either clicking on the component on roll-over, or around the component tool bar when using the EDIT BAR. These additional DIVs tend to negatively impact the style of the component because of the extra container that the developer was not anticipating.

There is an easy way to force CQ to remove the wrapper when in any mode but EDIT mode.

Add the following snippet at the bottom of your component:


 <%
 //This code will only add the surrounding DIVs for the editbars when in EDIT mode only
 if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) {
    IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE);
 }
 %>
Advertisements

2 thoughts on “Usability Tip: Use Edit Bars instead of Roll-over Editing in Your Adobe AEM Project

  1. I Just found this blog and looking through the older posts found this one… I find that in a lot of cases edit bars are nice, but they kind of reek of an antiquated interaction model. Another option would be to have placeholder images in edit mode to indicate a component has been placed into the paragraph. Kind of like the default text or download components.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s