Improvements to Touch UI in AEM 6.1

Improvements to Touch UI in AEM 6.1

The latest version of Adobe Experience Manager, version 6.1, hits shelves today. In case you missed it, the last review I posted of a major release of this product was, shall we say, a bit troubling

I’m happy to report that AEM 6.1, while not perfect, improves several key interactions in the now-default Touch UI (including how to turn it off). Let’s take a look!

Selecting your preferred UI

Here was the dialog for setting User Preferences in AEM 6:

AEM 6.0: Attempting to change the default Authoring Mode 

AEM 6.0: Attempting to change the default Authoring Mode 

I actually couldn’t figure out how to set my Authoring Mode to Classic UI until an Adobe engineer contacted me to follow up on the post (in case you were wondering, that drop-down scrolls, it’s just extending beyond an invisible fold).

Here’s the new dialog in 6.1:

AEM 6.1: Radio buttons above the fold.

AEM 6.1: Radio buttons above the fold. 

The AEM team has gone out of their way to change the input types of these fields for the Touch dialog, and in doing so have simultaneously solved a UI issue and set a good example for developers who may be tasked with creating dialogs for both UIs. Kudos!

Editing an Existing Component 

Because we’re operating without a right-click, Touch users must click/touch once to select a component for editing. In AEM 6.0, the editing options always appeared above the component… even if the top of the component was off-screen:

AEM 6.0: The blue outlined component has been selected, but there’s no clear way to edit.
AEM 6.0: The blue outlined component has been selected, but there’s no clear way to edit.

AEM 6.0: Scroll up… there it is.

AEM 6.0: Scroll up… there it is. 

In AEM 6.1, the editing options now appear at the bottom of the component if the top is out of view:

 

A simple, yet effective fix.

Page Properties Dialog

I still dislike the inability to resize dialogs in Touch UI (aside from a context-switching full screen mode), but in 6.1 some dialogs that had very poor experiences have been updated to display far more relevant information. We’ve already seen an example with User Preferences, but my favorite example is the Page Properties dialog:

AEM 6.0: When you open Page Properties, the only thing that appears in the viewport of the dialog is the thumbnail image for the page. This is in the running for the least helpful piece of metadata on an AEM page.

AEM 6.0: When you open Page Properties, the only thing that appears in the viewport of the dialog is the thumbnail image for the page. This is in the running for the least helpful piece of metadata on an AEM page. 

In AEM 6.1, Page Properties shows far more relevant information and is very reminiscent of its Classic UI predecessor:

AEM 6.1: That’s more like it.

AEM 6.1: That’s more like it.

Populating a Pathfield

The pathfield is one of the most ubiquitous edit dialog fields in AEM. It is what allows authors to configure hyperlinks, both internal and external. Which is why I was completely confounded by the fact that not only could an author not distinguish it from other text fields in a dialog, but also I honestly could not find a way to browse AEM pages and select a page to populate a pathfield.

The only way I could figure out how to use an internal link at all was to begin manually typing the local path:

AEM 6.0: Pathfields, one of the most crucial edit dialog elements, are hardly useable.

AEM 6.0: Pathfields, one of the most crucial edit dialog elements, are hardly useable. 

The Touch UI pathfield is vastly improved in AEM 6.1. Not only is it distinguishable in a familiar way…

AEM 6.1: Look, it’s our old pal the magnifying glass.

AEM 6.1: Look, it’s our old pal the magnifying glass.

 … But it also opens a slick new column-based navigation dialog to browse your site and select a page:

AEM 6.1: Brand new interface introduced to solve for the lack of browsing ability.

AEM 6.1: Brand new interface introduced to solve for the lack of browsing ability. 

New Feature: Miller Columns 

The new dialog I just showed you actually has a huge impact on the viability of using Touch UI regularly. Prior to this update, I don’t believe it was possible to browse the hierarchy of the content pages in any Touch UI console or dialog. For an inherently hierarchy-based system, this was a critical misstep in focusing on functionality, which might allow even occasional users of the product to adopt Touch UI.

In 6.1, we now see Miller Columns as a touchable way to navigate hierarchically. OS X Finder users and former click-wheel iPod owners will be instantaneously familiar with this approach:

AEM 6.1: The Sites console in Column view. Finally, Touch UI users can navigate their page hierarchy.

AEM 6.1: The Sites console in Column view. Finally, Touch UI users can navigate their page hierarchy. 

New Feature: Permissions on Page Properties

This is straight up bonus functionality provided exclusively in Touch UI that I am really, really excited to see. Page Properties now has a Permissions tab, which does two things remarkably better than the User Security console in Classic UI.

Thing 1: Set permissions quickly and easily, without leaving the context of the page:

AEM 6.1: Setting permissions right on the page.

AEM 6.1: Setting permissions right on the page. 

Thing 2: View Effective Permissions for the page, based on inherited permissions applied higher up the tree:

AEM 6.1: Money.

AEM 6.1: Money. 

This is hugely beneficial to Administrator users of AEM. I applaud this one!

Have you seen anything cool in the new release? Do you have questions about getting your organization’s web presence migrated to this cutting-edge platform? Comment below to start a conversation with our thought leaders here at 6D.

Share this post

0 Comments

comments powered by Disqus