1 / 25

Modern UI Design

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. Session Agenda. Oracle Alta UI Demo Work Better, an application built with Alta UI

phoebe-patel
Download Presentation

Modern UI Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 Restricted

  2. Oracle Confidential – Internal/Restricted/Highly Restricted

  3. 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. What is Oracle Alta UI? • Oracle’s new mobile and web UI • A new skin & design approach • The new standard for Oracle

  5. Fresh Visual Design • Mobile first • Components are larger • Text is larger • Visual design is flatter • Layout is spacious • Very little “chrome” Oracle Confidential – Internal/Restricted/Highly Restricted

  6. Mobile Friendly UI • Design for mobile first • Show an information hierarchy • Engage with visual content 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 Oracle Confidential – Internal/Restricted/Highly Restricted

  8. Work Better – Sample Alta Application Demo 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 Oracle Confidential – Internal/Restricted/Highly Restricted

  10. Oracle Alta UI Content – Think Visually Oracle Confidential – Internal/Restricted/Highly Restricted

  11. Oracle Alta UI Content • User expect ubiquitous search • User expect view options • User expect larger rows 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 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 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

  15. Oracle Alta UI Animation - Traversals • Use in Page Navigations – full or partial • Use slide effect. • Slide right if direction cannot be detected.

  16. Alta UI Animation - Transfers • Same data collection, different layout • Use fade effect.

  17. Oracle Alta UI Animation - Transitions • Alternate presentation of the same object, different data shown. • Use Flip Effect

  18. Responsive Design Design for the smallest width first Content essential to the task is presented at the narrowest width Content added to wider widths is only ancillary Oracle Confidential – Internal/Restricted/Highly Restricted

  19. Alta Site Where it is an how to use it. Oracle Confidential – Internal/Restricted/Highly Restricted

  20. Learn More at OOW Learn more at the Oracle Mobile Demo Booths in Moscone South 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

  22. Join the Oracle ADF Community • Twitter.com/Jdeveloper • Twitter.com/OracleADF • Facebook.com/Jdeveloper • Google+ ADF community

  23. Questions & Answers Oracle Confidential – Internal/Restricted/Highly Restricted

More Related