Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AEM 6.0 Touch-optimized UI

1,779 views

Published on

Get why Adobe created a new UI in AEM 6.0

Published in: Software
  • Want to earn $4000/m? Of course you do. Learn how when you join today! ●●● http://scamcb.com/ezpayjobs/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

AEM 6.0 Touch-optimized UI

  1. 1. AEM 6 TOUCH-OPT IMI ZED UI P R E S E N T E D B Y Gilles Knobloch - November 18th, 2014
  2. 2. 2 A F EW WO R D S A B O U T M E… Gilles Knobloch Engineering Manager @ Adobe Basel, Switzerland • 4+ years of AEM experience • Launches, History API, Granite References API, Sling Resource Merger • Team focusing on CoralUI, Granite UI, WCM Sites and Page Authoring @gilknob
  3. 3. 3 AGENDA • Why a new UI? • AEM 6 Touch-Optimized UI highlights • Feedback & Improvements • Q & A
  4. 4. 4 WHY A NEW UI?
  5. 5. 5 REVOLUT ION IS IN PROGRESS 20th century We need to be prepared for this! 2000’s Future?
  6. 6. 6
  7. 7. 7 SO WHAT CHANGED OVER T IME? • Multiplication of devices • Various screen sizes • 4 major browsers for desktop and 2 major ones for touch devices • New interfaces: touch screen, voice over, etc. • Technology improvements
  8. 8. 8 SEAMLESS EXPERIENCE. EVERYWHERE. ANYT IME.
  9. 9. 9 WE WANT TO DRIVE THE REVOLUT ION! 2 Cross Devices 3 Future Proof Key Principles 1 Cross Solutions
  10. 10. 10 CROSS SOLUT IONS How Marketing Cloud looked like
  11. 11. 11
  12. 12. 2 Cross Devices 12 3 Future Proof 1 Cross Solutions
  13. 13. 13 NEEDS FOR A USER • Mobile me • Restless me • Simple me • Individual me
  14. 14. 14 MOBI LE ME I want to work from anywhere
  15. 15. 15 • Finger friendly hit areas • Enhanced gestures • Touch first, but desktop in mind MOBI LE ME
  16. 16. 16 RESTLESS ME I want to work when I am most efficient
  17. 17. 17 INDIVIDUAL ME I want to choose the device and browser, not let the application tell me
  18. 18. 18 SIMPLE ME Just give me the functionality I need Efficient? Probably not! Less buttons, but covers 90% of daily operations
  19. 19. 2 Cross Devices 19 3 Future Proof 1 Cross Solutions
  20. 20. 20 FUTURE PROOF Web Technologies • Adopted recognized standards • Leverage the Web • Responsive Layout • Hypermedia driven API
  21. 21. 21 FUTURE PROOF Reusable UI Widgets • Rich Widgets with an API • Consistent Pattern in the UX Framework • User Interaction Notification
  22. 22. 22 FUTURE PROOF Extensible Widgets • A User Interface is dynamic and under consistent change • Extensions and Plugins are necessary • You can extend the framework
  23. 23. 23 FUTURE PROOF Accessibility • WAI-ARIA (W3C) • Being accessible implies Full keyboard access
  24. 24. Cross Devices • Mobility • Contextual UI • Device Independence 24 Future Proof • Web Standards • Reusable UI Widgets • Extensibility • Accessibility WHY A NEW UI? Quick Wrap-up Cross Solutions • Marketing Cloud • One Experience
  25. 25. 25 AEM 6 TOUCH-OPT IMIZED UI HIGHL IGHTS
  26. 26. 26 FEEDBACK & IMPROVEMENTS
  27. 27. 27 IS TOUCH-OPT IMI ZED UI FOR ME? NOW? • Classic UI is still supported, even within Touch UI • You can still decide to use it or not • Admin • Authoring • Upgrade won’t change the Authoring UI • Get all other nice features from AEM 6
  28. 28. 28 CUSTOMER TRANSI T ION New sites and transition existing sites Touch UI Preview 5.0 Most sites are Touch UI using Touch UI Classic UI 100% of sites 5.6 6.0 2015 2016 2017 Work with customers to move all sites to Touch UI http://adobe.ly/1vmr1zC
  29. 29. 29 FEEDBACK PROGRAM • Transition needs time • Improvements vehicles • SP1 (September) • Touch-optimized UI update package (mid-October) • SP2 • 6.1 • Dialog conversion tool
  30. 30. 30 WH E R E ’ S M Y T R E E ? • Classic UI had a nice tree view • This pattern does not work in Touch UI • How can I quickly navigate within the structure of my resource? • Now introducing Miller Columns
  31. 31. Create Folder 31 OTHER ADMIN FEATURES Configure Cloud services
  32. 32. 32 PAGE AUTHORING • Drag & drop into dialogs • In-place editing improvements
  33. 33. 33 EXTENSIBI L I TY • Ease of extending existing admin screen… • … but also create new ones • Enhance and customize page authoring
  34. 34. 34 WRAP-UP • Good reasons for creating a new UI • Showed in action • Ongoing journey
  35. 35. 35 QUEST IONS & ANSWERS

×