View
509
Download
2
Category
Tags:
Preview:
Citation preview
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
Recommended