This document provides an introduction to the Adobe Marketing Cloud user interface. It discusses how user interfaces have evolved over time from punched cards to modern touchscreens. It then outlines the Marketing Cloud UI's goals of being cross-solution, cross-device, and future proof. Specific strategies discussed include responsive design, reusable widgets, extensibility, and accessibility. The document concludes by introducing the presenters and thanking the audience.

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