Your SlideShare is downloading. ×
0
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Introduction to Marketing Cloud UI, Adobe Summit 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to Marketing Cloud UI, Adobe Summit 2014

1,019

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,019
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×