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

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

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 Oracle Confidential – Internal/Restricted/Highly Restricted4

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

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”

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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 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

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

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

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