Post on 13-Dec-2015
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Modern UI DesignImplementing Oracle’s Best Practices in your Applications
Laura AkelProduct Manager, ADF Faces Richard Wright Director, Middleware User Experience
October 1, 2014
Oracle Confidential – Internal/Restricted/Highly Restricted 2
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Safe Harbor StatementThe 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 Restricted 3
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 Restricted 4
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 Restricted 6
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 Restricted 7
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 Restricted 8
• 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 ApplicationDemo
Oracle Confidential – Internal/Restricted/Highly Restricted 9
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 Restricted 10
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Oracle Alta UI Content – Think Visually
Oracle Confidential – Internal/Restricted/Highly Restricted 11
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 Restricted 12
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 Restricted 13
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted 14
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 Restricted 19
Responsive Design
1. Design for the smallest width first2. Content essential to the task is presented at the narrowest width3. Content added to wider widths is only ancillary
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Alta SiteWhere it is an how to use it.
Oracle Confidential – Internal/Restricted/Highly Restricted 20
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. |
Learn More at OOWSession Title Time/Location
HOL9302 Developing Mobile Apps with Oracle Mobile Application Framework Tue 5:15 Hotel Nikko - Nikko Ballroom II
CON5037 Mobile Development: Lessons Learned in Real-World Implementations
Wed 2:00 Moscone West - 3020
HOL9303 Mobile Development with Oracle Mobile Suite Wed 11:45 Hotel Nikko - Nikko Ballroom II
HOL9908 Simplify Enterprise Mobile Connectivity by Using Oracle Mobile Cloud Service
Wed 4:15 Intercontinental - Sutter
Oracle Confidential – Internal/Restricted/Highly Restricted 21
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 Restricted 24
Questions & Answers