2. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Modern UI Design Implementing Oracle’s Best Practices in your Applications Laura Akel Product Manager, ADF Faces Richard Wright Director, Middleware User Experience October 1, 2014 Oracle Confidential – Internal/Restricted/Highly Restricted2

3. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Safe Harbor Statement The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. Oracle Confidential – Internal/Restricted/Highly Restricted3

4. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Session Agenda Oracle Alta UI Demo Work Better, an application built with Alta UI Go Behind the Scenes of Designing and Building Work Better Resources available to get you started today 1 2 3 4 Oracle Confidential – Internal/Restricted/Highly Restricted4

5. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | What is Oracle Alta UI? 5  Oracle’s new mobile and web UI  A new skin & design approach  The new standard for Oracle

6. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Fresh Visual Design Oracle Confidential – Internal/Restricted/Highly Restricted6  Mobile first  Components are larger  Text is larger  Visual design is flatter  Layout is spacious  Very little “chrome”

7. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Mobile Friendly UI Oracle Confidential – Internal/Restricted/Highly Restricted7 1. Design for mobile first 2. Show an information hierarchy 3. Engage with visual content

8. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Alta UI Page Layout Oracle Confidential – Internal/Restricted/Highly Restricted8 Content flows vertically Page content constrained horizontally and centered Page layout is conducive to responsive design – Work Better fits to 1024px – Work Better uses TabletFirstTemplate – Work Better demonstrates responsive design

9. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Work Better – Sample Alta Application Demo Oracle Confidential – Internal/Restricted/Highly Restricted9

10. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | New Skin Family – Alta Available now with 12.1.3 Work Better skin – Extends Alta – Contains additional styling Oracle Alta UI Oracle Confidential – Internal/Restricted/Highly Restricted10

11. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Alta UI Content – Think Visually Oracle Confidential – Internal/Restricted/Highly Restricted11

12. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | User expect ubiquitous search User expect view options User expect larger rows Oracle Alta UI Content Oracle Confidential – Internal/Restricted/Highly Restricted12

13. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Cards give 2x the real estate Allow for large touch targets Only flip explicitly Oracle Alta UI Content Oracle Confidential – Internal/Restricted/Highly Restricted13

14. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |Oracle Confidential – Internal/Restricted/Highly Restricted14 Alta UI Navigation Content over chrome Touch a dashboard view Touch content in a view Touch a chart metric Touch a row in a list

15. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Alta UI Animation New af:deck and af:transition tags Make animation easy Make animation available pretty much anywhere af:transition can also be added to DVT components Animation can enhance a compelling experience Be consistent on what animates and how

16. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Alta UI Animation - Traversals Use in Page Navigations – full or partial Use slide effect. Slide right if direction cannot be detected.

17. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Alta UI Animation - Transfers Same data collection, different layout Use fade effect.

18. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Alta UI Animation - Transitions Alternate presentation of the same object, different data shown. Use Flip Effect

19. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |Oracle Confidential – Internal/Restricted/Highly Restricted19 Responsive Design 1.Design for the smallest width first 2.Content essential to the task is presented at the narrowest width 3.Content added to wider widths is only ancillary

20. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Alta Site Where it is an how to use it. Oracle Confidential – Internal/Restricted/Highly Restricted20

21. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Learn More at OOW SessionTitleTime/Location HOL9302Developing Mobile Apps with Oracle Mobile Application FrameworkTue 5:15 Hotel Nikko - Nikko Ballroom II CON5037Mobile Development: Lessons Learned in Real-World Implementations Wed 2:00 Moscone West - 3020 HOL9303Mobile Development with Oracle Mobile SuiteWed 11:45 Hotel Nikko - Nikko Ballroom II HOL9908Simplify Enterprise Mobile Connectivity by Using Oracle Mobile Cloud Service Wed 4:15 Intercontinental - Sutter Oracle Confidential – Internal/Restricted/Highly Restricted21 Learn more at the Oracle Mobile Demo Booths in Moscone South

22. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Join the Oracle Mobile Community Twitter.com/OracleMobile Facebook.com/OracleMAF blogs.oracle.com/mobile Google + Oracle MAF community

23. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Join the Oracle ADF Community Twitter.com/Jdeveloper Twitter.com/OracleADF Facebook.com/Jdeveloper Google+ ADF community

24. Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |Oracle Confidential – Internal/Restricted/Highly Restricted24 Questions & Answers