1. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Marketing Cloud: Introduction to the User Interface
Alexandre Capt, Damien Antipa

2. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !2
working on AEM/Granite/Coral and
wherever Javascript is used
Leading the UX team
5+ years of AEM experience, architect of the
page authoring, MSM and ClientContext
Damien Antipa, Senior UX Engineer
Alexandre Capt, Engineering Manager
@visiongeist
@k4lex

3. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !3
marketing.adobe.com

4. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !4
50s VAX and Punched
Card

5. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !5
80s
Computer
Keyboard
Mouse

6. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !6
2000
Touch Devices
Future
…?

7. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !7
A Revolution is happening
now!

8. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !8

9. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !9
… so what changed
over time?

10. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !10
!10
Good old times Now and future
1 Browser = 95% of the market 4 major desktop and 2 major mobile
browsers + plenty of others
Desktop computer Phone, Tablet, Desktop, Big Screen, Watch,
Glass…
Resolution from 800x600 to 1280x1024 480x320 to 3840x2160 to ?
90 to 130 dpi 90 to 330 dpi
Mouse + Keyboard Mouse + Keyboard + TouchScreen + Video
Control + Voice Control ….
Technology improvements: internet speed,
browser features

11. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !11
SEAMLESS EXPERIENCE. EVERYWHERE. ANYTIME.

12. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !12
Cross Solutions
1
Cross Devices
2
Future Proof
3
SEAMLESS EXPERIENCE. EVERYWHERE. ANYTIME.

13. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !13
Cross Solutions
1
Cross Devices
2
Future Proof
3

14. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
!14
Analytics
Target
Experience
Manager
Media
Optimizer
Campaign
MARKETING CLOUD
Social

15. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !15
Different User Interface

16. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !16
On Premise
Cloud
PaaS Shared Services
SaaS
Heterogenous environments Technology diversity
Java
C++
.NET
PHP
Ruby
Ruby

17. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !17
One Marketing Cloud
6 Solutions
One Experience

18. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !18
Cross Solutions
1
Cross Devices
2
Future Proof
3

19. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Mobile me
Simple me
Individual me
Restless me
Needs of a User

20. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !20
Mobile me
+
I want to use my applications anywhere

21. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !21
▪ Finger friendly hit areas
▪ Enhanced Gestures
▪ Touch First but Desktop in Mind

22. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !22
$('.cards').pointer('mouseenter', function (event) {!
! // do mouse eventing!
}).finger('taphold', function (event) {!
! // do touch eventing!
});!

23. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !23
Restless me
I want to work when I am most efficient

24. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !24
Individual me
I choose the device and browser, not the application

25. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !25
Simple me
Just give me the functionality I need

26. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !26
CONTEXTUAL USER INTERFACE

27. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !27
Cross Solutions
1
Cross Devices
2
Future Proof
3

28. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !28
▪ Adopted recognized standards
▪ Leverage the Web
▪ Responsive Layout
▪ Hypermedia driven API
Web Technologies

29. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !29
Hypermedia driven API
.dam-asset-actions-delete-activator
<button !
class="dam-asset-actions-delete-activator" !
title="Delete" !
data-path="/content/dam/geometrixx/cover.png">!
Delete!
</button>!

30. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
<button !
class="dam-asset-actions-delete-activator" !
title="Delete" !
data-collection="{!
!'target': ‘.dam-assets.is-selected’!
}">!
Delete!
</button>!
!30
Hypermedia driven API
.dam-asset-actions-delete-activator

31. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !31
Reusable UI Widgets
▪ Rich Widgets with an API
▪ Consistent Pattern in the UX
Framework
▪ User Interaction Notification

32. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !32
<span class="coral-Select" data-init="select">!
<button type="button" class="coral-Select-button coral-MinimalButton">!
<span class="coral-Select-button-text">Austria</span>!
</button>!
<select class="coral-Select-select">!
<option value=“1">Austria</option>!
<option value="2">France</option>!
<option value="3">United States</option>!
<option value="4">Switzerland</option>!
</select>!
</span>!
Create a Widget with HTML

33. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
<span class="coral-Select" data-init="select" data-multiple="true">!
<button type="button" class="coral-Select-button coral-MinimalButton">!
<span class="coral-Select-button-text">Austria</span>!
</button>!
<select class="coral-Select-select">!
<option value=“1">Austria</option>!
<option value="2">France</option>!
<option value="3">United States</option>!
<option value="4">Switzerland</option>!
</select>!
</span>!
!33
Create a Widget with HTML

34. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !34
var dropDown = new Coral.Select({!
element: '#mySelect',!
multiple: true!
});!
Create with Javascript
dropDown.on('selected', function (event) {!
event.selectedValue;!
});!

35. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !35
▪ A User Interface is dynamic and under consistent change
▪ Extensions and Plugins are necessary
!
▪ You can extend the framework
Extensibility

36. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !36
Create your own Widget
Coral.Slider = new Class({!
!
construct: function () {!
// merged defaults + passed options!
this.options;!
},!
!
customFn: function (val) { return val; }!
!
defaults: {!
min: 0,!
max: 100!
}!
});!
!
Coral.registry.register("slider", Coral.Slider);!

37. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Coral.PathBrowser = new Class({!
!
extend: Coral.Autocomplete,!
!
construct: function () {!
!
},!
!
defaults: {!
searchPath: '/content'!
}!
});!
!
Coral.registry.register("pathBrowser", Coral.PathBrowser);
!37
Extend existing Widget

38. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !38
▪ WAI-ARIA (W3C)
▪ Being accessible implies
full keyboard access
Accessibility

39. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !39
▪ Guide: Showing available widgets
▪ Detailed examples of widgets’ options
▪ Application frame
▪ JSDoc
!
▪ Version 1.x available under: http://tinyurl.com/qga2t63
▪ Version 2.x will be released in June 2014
Documentation

40. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !40
SEAMLESS EXPERIENCE. EVERYWHERE. ANYTIME.
Future Proof
▪ Web Standards
▪ Reusable UI Widgets
▪ Extensibility
▪ Accessibility
Cross Devices
▪ Mobility
▪ Contextual UI
▪ Device Independence
Cross Solutions
▪ Marketing Cloud
▪ One Experience

41. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !41
marketing.adobe.com
Alexandre Capt: acapt@adobe.com | @k4lex
!
Damien Antipa: dantipa@adobe.com | @visiongeist
THANK YOU

42. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !42
- DeLorean, Back to the future, poster print by mondotees.com
- Office Building Icon, iconarchive.com, CC Attribution 3.0
- iPhone, iPad, iMac by Apple Inc
- purple watch, swatch.com
- Android phones, samsung.com
- Windows phone, htc.com
- Remote control, logitech.com
Image copyrights