Introduction to Marketing Cloud UI, Adobe Summit 2014

1,952 views

Published on

Published in: Technology

Introduction to Marketing Cloud UI, Adobe Summit 2014

  1. 1. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Marketing Cloud: Introduction to the User Interface Alexandre Capt, Damien Antipa
  2. 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. 3. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !3 marketing.adobe.com
  4. 4. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !4 50s VAX and Punched Card
  5. 5. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !5 80s Computer Keyboard Mouse
  6. 6. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !6 2000 Touch Devices Future …?
  7. 7. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !7 A Revolution is happening now!
  8. 8. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !8
  9. 9. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !9 … so what changed over time?
  10. 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. 11. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !11 SEAMLESS EXPERIENCE. EVERYWHERE. ANYTIME.
  12. 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. 13. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !13 Cross Solutions 1 Cross Devices 2 Future Proof 3
  14. 14. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !14 Analytics Target Experience Manager Media Optimizer Campaign MARKETING CLOUD Social
  15. 15. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !15 Different User Interface
  16. 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. 17. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !17 One Marketing Cloud 6 Solutions One Experience
  18. 18. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !18 Cross Solutions 1 Cross Devices 2 Future Proof 3
  19. 19. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Mobile me Simple me Individual me Restless me Needs of a User
  20. 20. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !20 Mobile me + I want to use my applications anywhere
  21. 21. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !21 ▪ Finger friendly hit areas ▪ Enhanced Gestures ▪ Touch First but Desktop in Mind
  22. 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. 23. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !23 Restless me I want to work when I am most efficient
  24. 24. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !24 Individual me I choose the device and browser, not the application
  25. 25. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !25 Simple me Just give me the functionality I need
  26. 26. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !26 CONTEXTUAL USER INTERFACE
  27. 27. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !27 Cross Solutions 1 Cross Devices 2 Future Proof 3
  28. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 38. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. !38 ▪ WAI-ARIA (W3C) ▪ Being accessible implies 
 full keyboard access Accessibility
  39. 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. 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. 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. 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

×