AEM 6 TOUCH-OPT IMIZED U I

P R E S E N T E D B Y

Gilles Knobloch - November 18th

, 2014

2

Engineering Manager @ Adobe Basel, Switzerland

• 4+ years of AEM experience

• Launches, History API, Granite References API,

Sling Resource Merger

• Team focusing on CoralUI, Granite UI, WCM Sites

and Page Authoring

@gilknob

A FEW WORDS ABOUT ME…Gilles Knobloch

3

AGENDA

• Why a new UI?

• AEM 6 Touch-Optimized UI highlights

• Feedback & Improvements

• Q & A

4

WHY A NEW UI?

5

REVOLUT ION IS

IN PROGRESS

20th century

2000’sFuture?

We need to be prepared for this!

6

7

SO WHAT CHANGED OVER T IME?

• Multiplication of devices

• Various screen sizes

• 4 major browsers for desktop and 2 major ones for touch devices

• New interfaces: touch screen, voice over, etc.

• Technology improvements

8

SEAMLESS EXPERIENCE. EVERYWHERE. ANYT IME.

9

2Cross

Devices

3Future

Proof

1Cross

Solutions

WE WANT TO DRIVE THE REVOLUT ION!Key Principles

1Cross

Solutions

10

CROSS SOLUT IONSHow Marketing Cloud looked like

11

2Cross

Devices

2Cross

Devices

12

3Future

Proof

1Cross

Solutions

13

NEEDS FOR A USER

• Mobile me

• Restless me

• Simple me

• Individual me

14

MOBILE MEI want to work from anywhere

15

• Finger friendly hit areas

• Enhanced gestures

• Touch first, but desktop in mind

MOBILE ME

16

RESTLESS MEI want to work when I am most efficient

17

INDIVIDUAL MEI want to choose the device and browser, not let the application tell me

18

S IMPLE MEJust give me the functionality I need

Efficient? Probably not!

Less buttons,

but covers 90% of daily operations

2Cross

Devices

19

3Future

Proof

1Cross

Solutions

3Future

Proof

20

FUTURE PROOF

• Adopted recognized standards

• Leverage the Web

• Responsive Layout

• Hypermedia driven API

Web Technologies

21

FUTURE PROOF

• Rich Widgets with an API

• Consistent Pattern in the UX Framework

• User Interaction Notification

Reusable UI Widgets

22

FUTURE PROOFExtensible Widgets

• A User Interface is dynamic and under consistent change

• Extensions and Plugins are necessary

• You can extend the framework

23

FUTURE PROOFAccessibility

• WAI-ARIA (W3C)

• Being accessible implies

Full keyboard access

Cross Devices

• Mobility

• Contextual UI

• Device Independence

24

Future Proof

• Web Standards

• Reusable UI Widgets

• Extensibility

• Accessibility

Cross Solutions

• Marketing Cloud

• One Experience

WHY A NEW UI?Quick Wrap-up

25

AEM 6 TOUCH-OPT IMIZED UI H IGHL IGHTS

26

FEEDBACK & IMPROVEMENTS

27

I S TOUCH-OPT IMIZED U I FOR ME? NOW?

• Classic UI is still supported, even within Touch UI

• You can still decide to use it or not

• Admin

• Authoring

• Upgrade won’t change the Authoring UI

• Get all other nice features from AEM 6

28

New sites and

transition existing

sites

Touch UI

Preview

5.0

Most sites are

using Touch UITouch UI

Classic UI100% of

sites

CUSTOMER TRANSIT ION

5.6 20156.0 2016 2017

Work with

customers to

move all sites to

Touch UI

http://adobe.ly/1vmr1zC

29

FEEDBACK PROGRAM

• Transition needs time

• Improvements vehicles

• SP1 (September)

• Touch-optimized UI update package (mid-October)

• SP2

• 6.1

• Dialog conversion tool

30

WHERE’S MY TREE?

• Classic UI had a nice tree view

• This pattern does not work in Touch UI

• How can I quickly navigate within the structure of my resource?

• Now introducing Miller Columns

Create Folder

31

OTHER ADMIN FEATURES

Configure Cloud services

32

PAGE AUTHORING

• Drag & drop into dialogs

• In-place editing improvements

33

EXTENSIB I L I TY

• Ease of extending existing admin screen…

• … but also create new ones

• Enhance and customize page authoring

34

WRAP-UP

• Good reasons for creating a new UI

• Showed in action

• Ongoing journey

35

QUEST IONS & ANSWERS