The document discusses Oracle's UX design patterns for applications. It provides examples of common patterns used across Oracle products like Fusion Applications, PeopleSoft, and E-Business Suite. These patterns include persistent global navigation, type-ahead search, detail on demand, and analytics. The document also describes resources for developers on Oracle's design patterns and an upcoming workshop on applying the patterns using Oracle technologies like ADF.

1. 1 Copyright © 2011, Oracle and/or its affiliates. All rights reserved.

2. 2 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
Ultan Ó Broin (@usableapps)
Director, Oracle Applications
User Experience
Building a Better User
Experience with
Oracle Applications
User Experience
Design Patterns
OTN América Latina Tour August 2013

3. 3 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
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
(Oracle acknowledges the original copyright of sources of
screenshots in this presentation)
Legal Statement

4. 4 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
UX Comes To Life, Without Thinking!

5. 5 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Shopping Cart
Registration
pattern
Item Comparisons
pattern
UX Design Patterns 101: Everyday Tasks, Easy
Autocomplete
pattern
Point location
pattern
Breadcrumbs navigation
Ratings
Global area pattern
Contextual action

6. 6 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
UX Design Patterns 101: Mobile Tasks
Heat map analytics
Pull and release
to refresh
Pull and release to createPull and release to create

7. 7 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
• Reusable common solutions
• Scientifically proven
• Oracle Application
Development Framework
• Developer productivity
• User satisfaction
• Business benefits
UX Design Patterns: Applications Consistency

8. 8 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
UX Design Patterns: Oracle Process
Informed by consumer
expectations
Deep understanding
of Oracle toolkit
Best of Oracle
applications
Proven scientific
usability
Design pattern
website. On OTN.
Productivity for
applications developers
Result: Consistent, high-quality
user experience built by ADF
enterprise community using OTN.

9. 9 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Consumerization: Top Free Android App, Brasil?
WhatsApp Messenger
Source: AppAnnie.com / Phonegap.com/ MediaBistro.com / “Translation is UX”
“Are you aware your app name can hardly be
pronounced, let alone remembered by Brazilians?”

10. 10 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
UX Design Patterns: Oracle Fusion Applications
Out of the Box Usability Applied by Developers

11. 11 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Common UX Design Patterns
Persistent Global Area Streamlines Navigation
PeopleSoft 9.1
E-Business Suite 12.1.3
Fusion
Applications

12. 12 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Common UX Design Patterns
Efficient Item Selection with Type-Ahead
Fusion
Applications
PeopleSoft 9.1
E-Business Suite 12.1.3
Siebel 8.1

13. 13 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Common UX Design Patterns
Analytics Bring Insight and Action Together
Fusion HCM Promote
Employee Details
JD Edwards FIN
Account Balance
Inquiry
PeopleSoft 9.1
Siebel 8.1

14. 14 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Common UX Design Patterns
Detail on Demand: Information As Needed
Fusion
Applications
E-Business
Suite 12.1.3
PeopleSoft 9.1
Siebel 8.1

15. 15 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
For Developers: UX Design Patterns on OTN

16. 16 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
For Developers: Patterns Mean Productivity
Efficiency Through Built-In Usability: ADF UI Shell
Tasks pane
Quick search
Global area
Create in form
Create in table
Contextual area
Applications
UI Shell
Applications table
Applications panel

17. 17 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Example UX Design Pattern: Detail on Demand
Decision Table

18. 18 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Example UX Design Pattern: Detail on Demand
1. Create detail components in af:popup
2. Add af:showPopupBehavior to link in a table
Decision Made on Hover: Now Implement in ADF
2. Set popup to be able to access client side attributes
3. Add af:clientAttribute elements to the launching component
4. Create af:setPropertyListener components to pass currently hovered
row’s attributes to client components
5. Add af:showPopupBehavior to link in a table

19. 19 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Example UX Design Pattern: Detail on Demand
Implementation in ADF with JDeveloper
<af:popup autoCancel="disabled" id="p1"
childCreation="deferred" contentDelivery="lazyUncached"
launcherVar="launchSource" eventContext="launcher">
<af:setPropertyListener type="popupFetch"
from="#{launchSource.attributes.id1}" to="#{viewScope.Id1}"/>
<af:setPropertyListener type="popupFetch"
from="#{launchSource.attributes.dateordered}"
to="#{viewScope.DateOrdered}" />
...

20. 20 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Example UX Design Pattern: Detail on Demand
Implementation in ADF with JDeveloper

21. 21 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Putting OTN UX Design Patterns in Your Hands
• Design Patterns: oracle.com/UsableApps > For Developers
• Fusion Desktop UI
• Fusion Mobile
• Endeca
• OBIEE
• Coming…
• Workshops and developer events
• blogs.oracle.com/VoX
• blogs.oracle.com/UsableApps
• @usableapps

22. 22 Copyright © 2013 Oracle and/or its affiliates. All rights reserved.
Upcoming Workshop: UX and ADF
• Building Great-Looking Usable Apps: Applying Oracle’s
Best UX Design Practices in ADF and ADF Mobile
• 2-day learning and hands-on collaborative workshop for
designing and building applications with Oracle toolkit
• Sponsors
– Oracle Applications User Experience Team (Apps UX)
– Oracle Application Development Framework Team (ADF)
– Oracle Partner Network (OPN)
• ADF UX Specialization coming…
Brasil, São Paulo, 12-13 August 2013

23. 23 Copyright © 2011, Oracle and/or its affiliates. All rights reserved.