introduction to tablet design and adf (intro to the simplified ui design guide)
DESCRIPTION
Ultan O’Broin If you are looking to build a cloud-friendly tablet user experience, look no further than Oracle’s new simplified UI. Developed with simplicity and cross-platform compatibility in mind, it’s now also a source of inspiration for any IT team looking to build their own tablet UI. Oracle will be making available the user experience design patterns behind the simplified UI, and optimized for ADF.TRANSCRIPT
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 1
Introduction to Tablet Design with ADF and UX
Ultan Ó Broin (@usableapps) Director Oracle Applications User Experience
Simplified UI Guide
March 18, 2014 Nieuwegein, NL
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 3
Safe Harbor
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. 4
Simplicity: Complete Applications ROI DEMO
• Simple to use • Simple to deploy • Simple to sell • Simple to build
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 5
UX Build Enablement 100% Oracle ADF-based
Resource Description
Components Based on the Oracle ADF Rich Client User Interface Guidelines, reusable ADF solutions for structural components of the UI.
Design patterns
Reusable combinations of components that you can apply to solve common design problems.
Guidelines Detailed documentation for areas covering broad, flexible usages in applications.
Templates Coded layouts of ADF components designed for particular user experience or functional purposes that you can apply, for example, to the UI Shell.
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 6
Enable a user to view a single main object or multiple related objects or tasks.
VIEW PAGES
Enable a user to add or edit a single main object or multiple related objects or tasks.
ACTION PAGES
Edit object details page (with tabs)
Simplified UI Architecture and Page Types
Object overview page Object details page
Edit object details page (no tabs)
Desktop UI
Landing page
Simplified UI home page
Secondary action page
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 7
Simplified UI Page Type: Landing Page Decision and Design Elements
Landing Page without Tabs
Landing Page with Tabs
Does the user’s work revolve around a primary object or business process?
Yes No
Does the user need to perform small tasks across multiple related objects or tasks?
No Yes
Can the information be logically grouped on one landing page?
Yes No
Pattern Set Decision Table
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 8
Simplified UI Pattern Set: Add to Table Decision and Design Components
Pattern Set Decision Table
Add a New Object Inline
Add a New Object on a Separate Page
Select and Add an Existing Object
Does all of the information that is required to add a new object fit within one table row using the table columns in view?
Yes No No
Does all of the information that is required to add a new object result in more attributes than can appear in one table-column’s view?
No Yes No
Does the object that you need to add to your table already exist?
No No Yes
New object inline
Add button
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 9
Simplified UI Component: Tab Decision and Design Elements
Page tabs on a view page
Career Planning tab
Performance tab
Goals tab
Profile tab
Sales Account team tab
Contacts tab
Opportunities tab Leads tab
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 10
Simplified UI: Landing Page
af:selectOneChoice
af:commandButton
af:panelGroupLayout
af:table
af:panelStretchLayout
af:outputText/ af:selectOneChoice af:panelGroupLayout
af:panelGroupLayout
af:panelStretchLayout
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 11
Oracle’s User Experience Strategy is About …
Simplicity Easily access the essential information and actions to support your work.
Mobility Optimized UIs for wherever and however you work.
Extensibility Tailor the user experience to best fit your company’s identity and business processes.
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 12
Learn More About Oracle Apps UX Online
• Oracle.com/UsableApps
• Blogs.oracle.com/VoX
• Blogs.oracle.com/UsableApps
• @usableapps
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 13
Copyright © 2014, Oracle and/or its affiliates. All rights reserved. 14