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