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
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
2
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.
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
3
Session Agenda
1
Oracle Alta UI
2
Demo Work Better, an application built with Alta UI
3
Go Behind the Scenes of Designing and Building Work Better
4
Resources available to get you started today
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
4
What is Oracle Alta UI?
 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. |
5
Fresh Visual Design
 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. | Oracle Confidential – Internal/Restricted/Highly Restricted
6
Mobile Friendly UI
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 Confidential – Internal/Restricted/Highly Restricted
7
Oracle Alta UI Page Layout
• 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. | Oracle Confidential – Internal/Restricted/Highly Restricted
8
Work Better – Sample Alta Application
Demo
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
9
Oracle Alta UI
• New Skin Family – Alta
• Available now with 12.1.3
• Work Better skin
– Extends Alta
– Contains additional styling
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
10
Oracle Alta UI Content – Think Visually
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
11
Oracle Alta UI Content
• User expect ubiquitous search
• User expect view options
• User expect larger rows
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
12
Oracle Alta UI Content
• Cards give 2x the real estate
• Allow for large touch targets
• Only flip explicitly
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
13
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 Confidential – Internal/Restricted/Highly Restricted
14
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. |
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. | Oracle Confidential – Internal/Restricted/Highly Restricted
19
Alta Site
Where it is an how to use it.
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
20
Learn More at OOW
Session
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
Learn more at the Oracle Mobile Demo Booths in Moscone South
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
21
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. |
Questions & Answers
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. | Oracle Confidential – Internal/Restricted/Highly Restricted
24