More Related Content
Similar to Introduction to Marketing Cloud UI, Adobe Summit 2014
Similar to Introduction to Marketing Cloud UI, Adobe Summit 2014 (20)
Introduction to Marketing Cloud UI, Adobe Summit 2014
- 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