Simplified User Experience Design Patterns

Oracle Applications User Experience
……………………………
Simplified User Experience
Design Patterns for the
Oracle Applications Cloud Service
……………………………

Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 2
Oracle ® Simplified User Experience Design Patterns for the Oracle Applications Cloud Service, Release
7 and Later
Copyright © 2013, 2014, Oracle and/or its affiliates. All rights reserved.
This software and related documentation are provided under a license agreement containing restrictions
on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in
your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast,
modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any
means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for
interoperability, is prohibited.
The information contained herein is subject to change without notice and is not warranted to be error-free.
If you find any errors, please report them to us in writing.
If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it
on behalf of the U.S. Government, the following notice is applicable:
U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated
software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government
end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation
and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and
adaptation of the programs, including any operating system, integrated software, any programs installed
on the hardware, and/or documentation, shall be subject to license terms and license restrictions
applicable to the programs. No other rights are granted to the U.S. Government.
This software or hardware is developed for general use in a variety of information management
applications. It is not developed or intended for use in any inherently dangerous applications, including
applications that may create a risk of personal injury. If you use this software or hardware in dangerous
applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and
other measures to ensure its safe use. Oracle Corporation and its affiliates disclaim any liability for any
damages caused by use of this software or hardware in dangerous applications.
Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be
trademarks of their respective owners.
Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks
are used under license and are trademarks or registered trademarks of SPARC International, Inc. AMD,
Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks of Advanced
Micro Devices. UNIX is a registered trademark of The Open Group.
This software or hardware and documentation may provide access to or information on content, products,
and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly
disclaim all warranties of any kind with respect to third-party content, products, and services. Oracle
Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your
access to or use of third-party content, products, or services.

Contents
Foreword ................................................................................................................................................... 6
Introduction ............................................................................................................................................... 8
Who Should Read This Book.......................................................................................................... 8
How to Use This Book..................................................................................................................... 8
Support .............................................................................................................................................. 9
My Oracle Support ......................................................................................................................... 10
Documentation Accessibility ......................................................................................................... 10
About the OAUX Team.................................................................................................................. 10
Comments and Suggestions......................................................................................................... 11
Page Types............................................................................................................................................. 12
Information Architecture Overview................................................................................................... 13
View Page ........................................................................................................................................... 14
Elements.......................................................................................................................................... 14
Action Page......................................................................................................................................... 16
Elements.......................................................................................................................................... 16
Landing Page...................................................................................................................................... 19
Pattern Set Decision Table ........................................................................................................... 19
Elements.......................................................................................................................................... 19
Object Overview Page....................................................................................................................... 22
Elements.......................................................................................................................................... 22
Components............................................................................................................................................ 24
Footer................................................................................................................................................... 25
Elements.......................................................................................................................................... 25
Footer Component Placement...................................................................................................... 25
Footer Component Behavior......................................................................................................... 25
Header................................................................................................................................................. 27
Elements.......................................................................................................................................... 27
Page Tab............................................................................................................................................. 30
Elements.......................................................................................................................................... 30
Page Tab Component Classification and Placement................................................................ 30

Page Tab Order.............................................................................................................................. 31
Panel Drawer ...................................................................................................................................... 32
Elements.......................................................................................................................................... 32
Panel Drawer Component Behavior............................................................................................ 32
Panel Drawer Tabs ........................................................................................................................ 32
Table .................................................................................................................................................... 35
Table Style Decision Table ........................................................................................................... 35
Table Characteristics..................................................................................................................... 36
Pattern Sets and Patterns..................................................................................................................... 39
Add to Table........................................................................................................................................ 40
Patterns Contained in This Set..................................................................................................... 40
Elements.......................................................................................................................................... 41
Add a New Object Inline................................................................................................................ 41
Add a New Object on a Separate Page ...................................................................................... 42
Select and Add an Existing Object............................................................................................... 43
Change View....................................................................................................................................... 45
Patterns Contained in This Set..................................................................................................... 45
Context Switcher ................................................................................................................................ 46
Elements.......................................................................................................................................... 46
Context Switcher Considerations................................................................................................. 46
Context Switcher Behavior............................................................................................................ 47
List Filter.............................................................................................................................................. 48
List Filter Classifications................................................................................................................ 48
List Filter Behavior and Considerations ...................................................................................... 48
View Toggle ........................................................................................................................................ 50
Elements.......................................................................................................................................... 50
View Toggle Placement................................................................................................................. 50
View Toggle Behavior.................................................................................................................... 51
Appendix: Examples.............................................................................................................................. 52
Examples............................................................................................................................................. 53

View Page ....................................................................................................................................... 53
Action Page..................................................................................................................................... 53
Landing Page.................................................................................................................................. 54
Object Overview Page................................................................................................................... 54
Footer............................................................................................................................................... 55
Header............................................................................................................................................. 55
Page Tab......................................................................................................................................... 56
Panel Drawer .................................................................................................................................. 56
Table ................................................................................................................................................ 56
Add a New Object Inline................................................................................................................ 57
Add a New Object on a Separate Page ...................................................................................... 58
Select and Add an Existing Object............................................................................................... 58
Context Switcher ............................................................................................................................ 59
List Filter.......................................................................................................................................... 59
View Toggle .................................................................................................................................... 60

Foreword
Before I learned user experience design
patterns, my users did not love the applications I
built. Sometimes they liked them; sometimes
they merely accepted them. And I never knew
which of the two it was going to be.
Developers learn to build screens and write
code. That’s what we do and what we’re good
at. User experience design is a completely
separate skill, and one that most developers do
not master. Unfortunately, many applications are
being built without the benefit of the specialized
knowledge that a user experience expert can
bring to the table. In all of these applications, the
user experience is determined by a hodgepodge
of developers, testers, and project managers.
User acceptance is hit or miss—sometimes they
like it, sometimes they don’t. And we don’t get
any wiser from project to project.
In programming, we recognize that there are
universal truths; there are some good ways of
meeting specific challenges and some not-so-
good ways. We have codified this knowledge of
what works and what doesn’t into software
design patterns—general, reusable solutions to
common problems.
User experience also has universal truths. And
of course, user experience designers have also
codified their knowledge into user experience
design patterns. Just like in software design,
these patterns identify good ways of
implementing commonly occurring tasks like
searching, browsing or editing data.
Now that I have learned user experience design
patterns, I can consistently build applications
that my users love. And you can, too. Read this
book to learn how.
Sten Vesterli
Oracle ACE Director
Oracle User Experience Advocate
Website: http://www.adfmastery.com
Blog: http://www.vesterli.com/
Twitter: @stenvesterli
Sten’s “Technology That Fits” newsletter:
http://www.techthatfits.com

So here’s the thing with design patterns. Good
design patterns are productivity multipliers. Let
me explain.
First there is an increase in designer
productivity. Rather than re-creating detailed
designs from scratch, detailed designed become
an exercise in reuse of specific components for
recurring situations . . . still an exercise requiring
skills and creativity, but a much quicker process
than designing from scratch.
Second is the increase in user productivity. As
we utilize good design patterns, our work
products have consistency in the interaction
between the user and the product. So even
when creating solutions for new use cases, the
user interaction (the navigation; the task flows;
the overall form, bit, and function) remains
consistent. So users are not required to learn a
new product, but merely need to understand
how to apply our new solution, and a shorter
learning curve equals increased productivity (not
to mention more successful user acceptance).
Oracle’s Applications User Experience team has
developed some really good design patterns. I
know because I’ve used them in my own work.
And I’ve also benefited as a user of Oracle
products.
So there you have it. Read the book. You’ll see
what I mean.
Floyd Teter
Oracle ACE Director
Oracle User Experience Advocate
Blog: http://orclville.blogspot.com/
Twitter: @fteter

Introduction
Who Should Read This Book
This book contains user experience design
patterns and guidelines that Oracle uses to build
the simplified user interface for its Oracle Cloud
Applications, such as Oracle Sales Cloud and
Human Capital Management (HCM) Cloud.
Oracle customers, partners, and the Oracle
Application Development Framework (Oracle
ADF) community can use these design patterns
and guidelines:
 Before a single line of code is written.
They can be used for sketches or
wireframes during the innovation cycle
to expose problems early, increase
productivity of application builders, and
eliminate costly surprises late in the
build cycle.
 After code is written. They can be used
to customize and extend Oracle Cloud
Applications simplified user interface
applications and to build other
applications and integrations that look
and behave like Oracle simplified user
interface applications.
How to Use This Book
This book includes three sections: Page Types,
Components, and Pattern Sets and Patterns.
The content in these sections includes lists and
descriptions of required user interface elements
and examples. Depending on your design
needs, you may need to reference content in
one or more sections. This book also includes
an appendix of examples taken from Oracle
Sales Cloud and Oracle HCM Cloud.
Section Name Description
Page Types Oracle ADF templates that allow you to
organize components and patterns to provide a
particular user experience, optimize a specific
functional purpose, and enable productive
development. These templates are built to
accommodate common requirements that have
been identified as industry best practices. They
have been tested and proven by real users in
our usability labs.
Components Oracle ADF user interface elements that
provide the user interface building blocks for
the design. Component guidelines are broad
and can be used in a number of ways in a
template or together in a pattern to provide a

Section Name Description
solution for a user experience requirement.
Pattern Sets and Patterns Reusable combinations of components,
assembled together to provide a solution for a
typical user experience task.
The design guidance in this book is intended for
the simplified user experience. Templates,
components, and patterns are independent of
the visual look and feel (or “skinning”) of an
application. They are content neutral and can be
adapted to application use cases and user
requirements as needed.
Support
If you have questions about how to use this
book or have questions about the content in this
book, you can reach us on Twitter:
@usableapps.
Here are a few resources that you might find
useful as you design and build applications:
 Oracle Applications User Experience
blogs:
http://www.oracle.com/webfolder/ux/appl
ications/blog/index.html
 Oracle Application Developer
Framework (Oracle ADF) pages:
http://www.oracle.com/technetwork/deve
loper-tools/adf/overview/index.html
 Oracle ADF Enterprise Methodology
Group: An external support forum that
discusses best practices for
building enterprise applications:
https://groups.google.com/forum/#!foru
m/adf-methodology
You can also enhance your user experience
knowledge by attending events, such as
webinars, workshops, and seminars that are led
worldwide by the Oracle Applications User
Experience (OAUX) team. You can find
information about upcoming OAUX training
events on the Oracle Voice of User Experience
blog at https://blogs.oracle.com/VOX/, on the
Oracle Usable Apps Blog at
https://blogs.oracle.com/usableapps/, or through
your Oracle customer and Oracle partner
network channels.
We do not provide support on learning or using
Oracle ADF or developer tools. For more
information, see the Oracle JDeveloper site at
http://www.oracle.com/technetwork/developer-
tools/jdev/overview/index.html, or contact your
Oracle ADF or community representative.

My Oracle Support
Oracle customers have access to electronic
support through My Oracle Support. For
information,
visit http://www.oracle.com/pls/topic/lookup?ctx=
acc&id=info or
visit http://www.oracle.com/pls/topic/lookup?ctx=
acc&id=trs if you are hearing impaired.
Documentation Accessibility
For information about Oracle's commitment to
accessibility, visit the Oracle Accessibility
Program website
at http://www.oracle.com/pls/topic/lookup?ctx=ac
c&id=docacc.
About the OAUX Team
The OAUX team provides the science, research,
and art that increases Oracle designer and
developer productivity and enables them to
design and build great-looking usable enterprise
applications and user experiences for tablet,
smart phone, desktop, and other devices in the
cloud that delight, engage, and empower people
and their businesses, no matter where or how
they work. Through dedicated collaboration and
support, the Oracle Applications User
Experience team empowers Oracle customers,
partners, and the Oracle ADF community to use
Oracle technologies and applications to deliver
the simplified user interface—a user experience
that is simple to use, simple to build, and simple
to sell.
Learn more about our outreach events and
shared resources at
www.oracle.com/usableapps.

Comments and Suggestions
We’d like to hear about your experiences as you
use these design patterns and guidelines to
build, customize, extend, and integrate
applications. Share your experiences with us on
Twitter: @usableapps.
Tell us:
 Is there something that you’d like us to
clarify?
 Would you like to see more user
interface examples?
 Do you need to see sample code or
sample applications for analysis?
 Do you have an idea for a page type,
component, or design pattern?
 Does the format of this book align well
with your practice of building
applications?
 What other information would help you
build applications productively?
You can also share your experiences with us
though the Oracle Usable Apps Blog at
https://blogs.oracle.com/usableapps/ or through
Twitter at @usableapps.

……………………………
Page Types
……………………………

Information Architecture Overview
Pages in the simplified user interface are
classified as either view or action. Whether a
page is view or action determines the page type
to use and the various activities, links, and
elements that are allowed on a page.
Figure 1. Relationships among page types

View Page
A view page enables a user to view a single
main object or multiple related objects or tasks.
A single main object is displayed on a single
page. Multiple related objects or tasks are
displayed on one single page or across a set of
page tabs.
A view page is not editable.
A user opens a view page by:
 Clicking a functional area icon button on
the springboard.
 Clicking a link on a landing page.
 Selecting a tab from among a group of
tabs on another view page.
The page that opens displays a pointer at the
top of the page frame to the functional area icon
button that was clicked. From a view page, a
user can:
 Open an object overview or object
details page in the simplified user
interface
 Open an action page in the simplified
user interface
 Open a page in the desktop user
interface
Examples of view pages include:
 Landing page
 Object overview page
Elements
All view pages include the following elements. To see the lists of elements for each type of view page,
see the specific page type document.
Element Name Description
Page-level title The name of the page. A title is displayed in a header component.
See the Header component section.
(Optional) Section-level
title
The name of the sections within a page. A title is displayed in a header
component.
Link, button, or menu
item that opens a view
or an action page in the
simplified user interface
or a page in the
desktop user interface
 A link that takes a user to an object overview page in the simplified
user interface where the user can view a larger set of object attributes
or to an object details page in the simplified user interface where the
user can view or edit a larger set of object attributes.
 A link or button that takes a user to an action page in the simplified
user interface where the user can edit or perform another action on a
larger set of object attributes.
 A button or menu item that contains the punchout icon ( ) that
takes the user to the desktop user interface where the user can view or

edit a complete set of attributes or additional attributes.
(Optional) Page tabs One or more navigation elements that are designated by an icon and are
displayed on the left side, outside of the page frame, of a view page type or an
action page type. Page tabs provide navigation among categories of content
within the same functional area.
See the Page Tab component section.
Examples
Figure 2. A view page that displays view-only
information and a link
information and an icon text button with a
punchout icon
information and a text button
For examples of view pages in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.

Action Page
An action page is a modal page that enables a
user to:
 Add or edit a single main object on a
single page.
 Add or edit multiple related objects or
sub-objects that are displayed across a
set of page tabs.
 Add one or more existing objects to a
page.
For more information about page tabs, see the
Page Tab component section.
A user accesses an action page from a view
page or another action page. The action page
partially or completely overlays the springboard
or the underlying page. A user must commit a
change or cancel the action to return to the
preceding page.
 Content that is displayed on an action
page can be: Editable
Example: A user can add a new object,
edit an existing object, or search and
select an existing object.
 Not editable or that the user is not
authorized to edit
Examples:
o System-defined attributes
o Employee ID
The action page provides access to no more
than two secondary action pages. A secondary
action page contains a supplementary task that
is directly related to the action page from which
it originated. A secondary action page is not a
required part of the main task flow.
Examples of action pages include:
 Edit page
 Add page
 Search and Select page
 Select and Add page
Elements
An action page contains the following elements.
(Optional) Section-level title The name of the sections within a page. A title is displayed in a header
component.

One set of these buttons,
dependent on the specific action
page type:
 Edit and Add pages:
o Save and Close and
Cancel buttons
o Save and Close,
Cancel, and Submit
buttons
 Select and Add page: Apply,
OK, and Cancel buttons
 Search and Select page: OK
and Cancel buttons
Specific action page types require specific sets of buttons.
 Edit and Add pages:
o Save and Close button: Commits a change and
closes the page.
o Cancel button: Closes the page without committing
any changes or processing any action. Returns the
user to the previous page.
o Submit button: Commits a change and triggers a
workflow process.
 Select and Add page:
o Apply button: Adds selected results to a field or table
on the page without closing the page.
o OK button: Applies any selected results, closes the
page, and returns the user to the previous page.
 Search and Select page:
o OK button: Applies any selected results, closes the
page, and returns the user to the previous page.
(Optional) Link, button, or menu
item that opens an action page in
the simplified user interface or a
page in the desktop user
interface
 A link or button that takes a user to an action page in the
simplified user interface where the user can edit or perform
another action on a larger set of object attributes.
 A button or menu item that contains the punchout icon ( )
that takes the user to the desktop user interface where the
user can view or edit a complete set of attributes or additional
attributes.

Examples
Figure 5. Action page that overlays the
springboard
Figure 6. Secondary action page that overlays
the action page from which it originates
For examples of action pages in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.

Landing Page
A landing page represents a functional area.
The focus of a landing page is on either a single
object in a functional area or on a group of
related objects or tasks in a functional area.
When the focus is on a single object, the landing
page has no page tabs. When the focus is on a
group of related objects or tasks in a functional
area, a set of vertically aligned page tabs is
used, with each tab designating a separate
landing page.
For more information about page tabs and
considerations for using page tabs, see the
Page Tab component section.
A landing page is displayed when a user clicks a
functional area icon button on the springboard or
when a user selects a tab from among a group
of tabs on another landing page.
Pattern Set Decision Table
Consideration 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
Elements
The landing page contains the following elements.
(Optional) Section-
level title
component.
(Optional) Page tabs One or more navigation elements that are designated by an icon. Page tabs
enable the user to view content on other landing pages within the same
functional area.

See the Page Tab component section.
(Optional) Link,
button, or menu item
that opens a view or
an action page in the
simplified user
interface or a page in
the desktop user
interface
 A link that takes a user to an object overview page in the simplified user
interface where the user can view a larger set of object attributes or to an
object details page in the simplified user interface where the user can
view or edit a larger set of object attributes.
 A link or button that takes a user to an action page in the simplified user
interface where the user can edit or perform another action on a larger
set of object attributes.
 A button or menu item that contains the punchout icon ( ) that takes
the user to the desktop user interface where the user can view or edit a
complete set of attributes or additional attributes.
(Optional) Panel
drawer
A component anchored to the right side of a landing page that provides
supplementary actions or content.
See the Panel Drawer component section.
(Optional) Footer A component that displays supplemental information related to page content that
is helpful and of interest to a user but not central to the task at hand.
See the Footer component section.
Examples
Figure 7. A landing page that focuses on a
single object: opportunities
Figure 8. A group of related objects or tasks
within the Performance and Career functional
area, each represented by a page tab. In this
case, when you select the Career tab, the
Career Planning landing page is displayed.

Figure 9. Selecting the Goals tab from the group
of tabs within the Performance and Career
functional area displays the Goals landing page.
For examples of landing pages in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.

Object Overview Page
An object overview page type is used when
there is a lot of information about an object and
you want to display only high-level summary
information needed frequently by most users.
The object overview page is displayed when a
user selects an object from among a list of
objects on a landing page. The object overview
page displays only key information about that
particular object but provides access to more
details if needed and edit capabilities if the user
has been granted edit permissions.
Elements
The object overview page contains the following elements.
(Optional) Section-level
title
component.
Done button A button that enables a user to return to the landing page.
Link, button, or menu
item that opens an
action page in the
simplified user interface
or a page in the
desktop user interface
 A link or button that takes a user to an action page in the simplified
user interface where the user can view, edit, or perform another action
on a larger set of object attributes, or access more attributes in the
desktop user interface.
 A button or menu item that contains the punchout icon ( ) that
takes the user to the desktop user interface where the user can view or
edit a complete set of attributes or additional attributes.

Examples
Figure 10. Selecting an object on a landing
page opens the object overview page, where a
user can view key information about the
selected object or click an Edit button to open to
an action page and edit object details.
Figure 11. The Directory page and one of its
object overview pages
For examples of object overview pages in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.

……………………………
Components
……………………………

Footer
A footer component displays supplemental
information related to page content that is
helpful and of interest to a user but not central to
the task at hand.
When this optional component is used, it is
displayed only on landing and object overview
pages.
Elements
The footer component does not have any
required elements. All fields included must be
noneditable, although links to relevant
information may be included. The footer can be
divided into sections.
Footer Component
Placement
A footer component always spans the bottom of
a landing or object overview page, taking up no
more than 25 percent of the page. Footer
content should not scroll.
Footer Component
Behavior
When a footer component is used, the
information in the footer can be:
 Static: The information in the footer
does not change.
 Dynamic: The information in the footer
changes based on a user’s selection in
the page-level context switcher
component.
When a page-level context switcher component
is used, the footer can:
 Change its content to reflect the
selected context
 Retain its content across selected
contexts
 Display or hide, depending on the
selected context

Example
Figure 12. A footer, displaying information about the
currently selected content switcher view
For an example of the footer component in Oracle Sales Cloud, see the Appendix.

Header
A header component is used to name pages and
sections within pages. Headers appear at two
levels:
1. Page level: Every page must contain a
header.
2. Section level: If a page is divided into
sections, each section must contain a
noncollapsible header. However, if a
section directly follows the page title and
contains information applicable to the
overall object, a header at that section
level is not required.
All page header titles:
 Use headline case
 Use header title truncation as needed
Elements
The header component can contain the following elements. The header title syntax is informed by the
page type.
Element Name Page Type Classification:
Specific Page Type
Header Title Description and Syntax
Page-level title View page: landing page There are two syntax options:
 If the landing page contains no tabs:
<Functional Area Name>
Example:
Team Talent
 If the landing page contains tabs:
<Functional Area Object or Task Name>
For example, in the Personal Information
functional area, the tabs are named as
follows:
My Details
Benefits
Pay
Compensation
View page: object overview
page
There are two syntax options:
 If the object of the object overview page is

Specific Page Type
unique:
<Object Name>
Example:
Kelly Wilson
 If the object of the Object Overview page
needs specificity:
<Object Name>, <Object Descriptor>
Example:
Lisa Jones, Senior Sales Representative
Action page There are three syntax options:
 If the action page contains no tabs:
<Action><Object Type>
Example:
Create Opportunity
 If the action page contains tabs:
<Action><Object Type>: <Tab Name>
Example:
Edit My Details: Contact Info
 If the action page contain tabs, and the
context of the object needs to be carried
forward:
<Action><Object Type>: <Object Name>:
<Tab Name>
Example:
Edit Contact: Aaron Simpson: Leads

Specific Page Type
Section-level title  View page
 Action page
A section-level title should describe the content in
the section.
Examples:
 Contact Points
 Address
Context switcher  View page
 Action page
A context switcher enables a user to view different
subsets of one homogeneous set of information in
a page header or section header.
See the Context Switcher pattern section.
Toolbar  View page
 Action page
 A toolbar that aligns with a page title is
always displayed flush-right, opposite of
the page title. This toolbar contains buttons
that initiate section-level actions.
 A toolbar that aligns with a section title is
displayed to the right of the section title.
This toolbar contains buttons that control
the content in that section.
Examples
Figure 13. A view page that displays a page title
and context switcher
Figure 14. An action page the displays a page
title with a toolbar and two section titles, each
with its own toolbar
For examples of the header component in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.

Page Tab
A page tab is a navigation element that is used
to divide pages into multiple sections, categorize
content, and provide navigation among
categories of content. A page tab is designated
by an icon and can be displayed on view and
action page types. However, not all view or
action pages require tabs even if their originating
pages have tabs.
Tab content should not be repeated across tabs
in the same set of tabs.
For more information about page types, see the
Information Architecture Overview section.
Elements
A page tab contains the following elements.
icon A graphic representation of an object.
The icon that is used on a page tab in a set of page tabs must be unique. An
icon cannot be used more than once in the same set of tabs.
tooltip A description that appears on a screen when a user hovers over an element.
A tooltip that matches the tab title is required for every icon.
Page Tab Component Classification and Placement
Page tabs are classified as primary or
secondary. A primary page tab is displayed on a
view page, and a secondary page tab is
displayed on an action page. Page type
classifications determine the maximum
allowable quantity of tabs that can be used on a
page, as well as the page tab name and page
tab tooltip syntax.
Page
Type
Page Tab
Classification
Location of
Page Tab
Maximum
Allowable
Quantity
of Tabs
Page Tab Name
Syntax
Page Tab Tooltip
Syntax
View
page
Primary On the left,
outside of
the page
frame
5 <Tab Name> <Tab Name>
Example: Career
Planning
Action
page
Secondary On the left,
inside of the
page frame
10 <Action><Object Type>:
<Object Name>: <Tab
Name>
<Tab Name>
Edit Contact:
Aaron Simpson:
Leads

Page Tab Order
Order page tabs on both page types according
to these guidelines:
 Place tabs containing important
information higher in stacked order.
 Place a tab containing summary
information or information that informs a
decision that a user must make on the
first tab in the stack.
 Place tabs that contain frequently
accessed information higher in the stack
order.
 Place tabs containing sensitive
information, such as compensation
information, lower in the tab order, even
if the content is actionable or requires
the user to make a decision.
 Place tabs that contain content that is
slow to load, lower in the stack order.
The longer it takes for content on a tab
to load, the lower the tab should be
placed in stack order.
If multiple considerations apply, determine which
is more important for your use case.
Examples
Figure 15. Primary page tabs on a view page Figure 16. Secondary page tabs on an action
page
For examples of the page tab component in Oracle Sales Cloud and Oracle HCM Cloud, see the
Appendix.

Panel Drawer
A panel drawer is an optional component anchored to the right side of a landing page that provides
supplementary actions or content.
Elements
A panel drawer contains the following elements.
panel A bounded area on a page that comprises a panel tab and a panel content
region.
panel tab An element that is displayed vertically on the left of the panel drawer and that
is designated by an icon. A panel tab provides navigation between panel tab
content categories.
A user opens the panel drawer by clicking a panel tab; a user closes the
panel drawer by clicking a panel tab or by clicking anywhere on the page.
panel content region The area on a panel where content is displayed.
A panel content region can contain one or more subheaders. Each subheader
contains a content section that displays a specific set of information.
Panel Drawer Component Behavior
When a landing page contains both page tabs
and a panel drawer, the panel drawer content
can be contextual to each tab of the landing
page or can apply to all tabs in the functional
area.
Panel Drawer Tabs
A panel drawer can contain any of the following
panel tabs, in this order. The panel tab order
remains fixed even when fewer than three tabs
are needed.
Tab
Name
Icon Description
Search The Search tab content comprises:
1. A search field
When the search tab opens, the search results section should contain the
following string: “No search conducted.”
2. A search button
3. A list of search results
o Search results are displayed in a table below the search box.

Tab
Name
Icon Description
o If the search results include a search result found in the desktop
user interface, the punchout icon ( ) should be displayed next
to the link.
Search results that take a user to the desktop user interface should
occur infrequently. If search results that link to the desktop user
interface are displayed frequently, consult your user experience
team.
If no search results are found, the following text string should be
displayed in the results section: “No results found.”
If additional descriptive text is needed for the use case, work with
your user experience team to determine the appropriate message.
Actions The Actions tab content comprises either one or both of the following sections,
always in this order:
 Actions
 Related Links
Each section can contain links to frequent transactions in the simplified user
interface and the desktop user interface. The punchout icon ( ) should be
displayed next to each external link to the desktop user interface.
 The links that are displayed in the Actions section take the user to a
location where the user is expected to perform an action.
 The links that are displayed in the Related Links section take the user to a
location where no action is assumed. The location might only contain
information that the user views.
The punchout icon ( ) should be displayed next to each external link to the
desktop user interface.
Analytics The Analytics tab content comprises no more than 10 data analytics (for example,
graphs). If more than one data analytic is displayed, an affordance for switching
among the figures is required.

Examples
Figure 17. A closed panel drawer
Figure 19. An open Actions panel tab on a
panel drawer
Figure 18. An open Search panel tab on a panel
drawer
Figure 20. An open Analytics panel tab on a
panel drawer
For examples of the panel drawer component in Oracle Sales Cloud and Oracle HCM Cloud, see the
Appendix.

Table
A table is a component that is used to organize
and display a large quantity of content. A table
enables a user to view or to interact with
content. A table contains one or more columns
and rows.
The simplified user interface supports the
following table styles:
 Standard table using a list layout
 Standard table using a grid layout
 Paragraph table
Table Style Decision Table
Consideration Standard Table Using
a List Layout
Standard Table Using a
Grid Layout
Paragraph Table
Does the user need high-
level details displayed in
numerous rows and
columns rather than
extensive details about
the content in each row?
Yes No No
Does the user need to
view information about
the one object in a row
where the object’s related
attributes are separated
into columns?
Yes No No
Does the user need to be
able to sort on each
column?
Yes No No
Does the user need to
view information about
multiple related objects in
single row?
No Yes No
Does the user need
extensive contextual
details about particular
items in a table (even
when it means displaying
fewer rows) in order to
increase the chance of
the user finding the object
he is seeking?
No No Yes

Consideration Standard Table Using
a List Layout
Standard Table Using a
Grid Layout
Paragraph Table
Does the user need to be
able to interact with the
row, for example, to enter
a quantity?
No No Yes
Table Characteristics
The following table lists the general table characteristics that apply to each table style.
Characteristics Standard
Table Using
a List
Layout
Standard
Table Using a
Grid Layout
Paragraph
Table
One object per column and row Yes No No
One or more objects per row No Yes Yes
Table title No No No
Column headers Yes No No
List filter No Yes Yes
View toggle buttons
Provide list and grid views
No Yes Yes
Sort
Cannot be case sensitive
Yes
Sorting can
be enabled
on columns
and is
designated
by a down
arrow icon
button in the
column
header.
Yes
Sorting can be
enabled at the
row level and
is designated
by a choice list
above the
table.
Yes
Sorting can be
enabled at the
row level and
is designated
by a choice list
above the
table.
Links
Can be used in any column or row as needed. Links
take the users to more details about the linked object.
These object details may or may not be editable.
Yes Yes Yes
Additional row-level actions
An icon, text button, or icon button is used to indicate
that more row-specific actions are available.
Yes Yes Yes
Scroll bar Yes Yes Yes

Characteristics Standard
Table Using
a List
Layout
Standard
Table Using a
Grid Layout
Paragraph
Table
A vertical scroll bar in a table is allowed; a horizontal
scroll bar in a table is not allowed.
Personalization
Only an administrator can can rearrange, show or
hide, or add or delete columns.
No No No
Emphasis
Two font sizes can be used in a table to emphasize
content:
 A larger font is used to identify a primary column
that contains the most important content in the
table.
 A smaller font is used to identfiy secondary
columns and support content. The content in any
one of these secondary or supporting columns can
be set apart from the other columns or
emphasized by setting all of the content in that
column in bold.
Yes Yes Yes
Interactions
Limited to standard actions, such as view, create, and
add. These actions are designated by links, text
buttons, and icon buttons. Actions that affect the entire
table appear above the table; actions that affect a
particular row appear within that row. A user cannot
right-click content in a row and take an action.
Yes Yes Yes
Truncation
Should be set to “on” for all content in all columns so
that if content exceeds the space alloted, the content
will truncate and be followed by ellipsis points (three
points, with one space between each point: . . . ). Full
text should be displayed on hover.
Yes Yes Yes

Examples
Figure 21. Standard table, using a list layout
Figure 23. Paragraph table
Figure 22. Standard table, using a grid layout
For examples of the table component in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.

……………………………
Pattern Sets and Patterns
……………………………

Add to Table
Use the patterns in the Add to Table pattern set to enable a user to add new or existing objects to a list of
objects in a table.
Patterns Contained in This Set
Pattern Name Description
Add a New Object Inline Use to enable a user to add a new object inline
without leaving the table.
Add a New Object on a Separate Page Use to enable a user to add a new object on a
separate page.
Select and Add an Existing Object Use to enable a user to select and add an existing
object.
Consideration 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 row
using the table columns in
view?
No Yes No
Does the object that you
need to add to your table
already exist?
No No Yes

Elements
table An arrangement of information in row and column
format. Table rows and columns may or may not
display borders.
Add button A button with either Add, Add <Object>, or Add
<Objects> on it.
Follow this labeling syntax for the button:
 If the table has a title: Add
 If the table lacks a title and you are
adding on a separate page:
Add <Object>
Example: Add Interaction
 If you are selecting and adding an
existing object:
Add <Objects>
Add Team Members
Add a New Object Inline
Use the Add a New Object Inline pattern to
enable a user to add a new object to a table
when all of the attributes that are required to
create the component can fit in one table row
using the columns in view.
In this pattern, when the user clicks an Add
button that appears above the table, a new
blank row appears at the top of the table, where
the user can enter information for the new
object.

Example
Figure 24. Clicking the Add button on the
Edit Opportunity page adds a new row at the
top of the table, where the user can enter
information about the newly added revenue
item for this opportunity.
For examples of the add a new object inline pattern in Oracle Sales Cloud and Oracle HCM Cloud, see
the Appendix.
Add a New Object on a Separate Page
Use the Add a New Object on a Separate Page
pattern to enable a user to add a new object to a
table when the object’s attributes are too
numerous to appear inline in one table row using
the columns in view, or when additional editing
capabilities are needed.
In this pattern, the user clicks the Add button
located above the table and a new page
appears. The user completes the required fields
on the new page, clicks the Save and Close
button to close the new page. A new row
appears as the top row of the initial table.

Examples
Figure 25. Clicking the Add Interaction button
opens a new page, where the user can enter
information about the newly added interaction.
Figure 26. The Add Interaction page, where the
user can enter a new interaction for this contact.
For examples of the add a new object on a separate page pattern in Oracle Sales Cloud and Oracle HCM
Cloud, see the Appendix.
Select and Add an Existing Object
Use the Select and Add an Existing Object
pattern to enable a user to search for and select
an existing object to add to the table.
In this pattern, when the user clicks an Add
button above the table, a new page appears on
which the user can search for an existing object.
When the user enters search criteria at the top
of the page and clicks Search, one or more
objects with matching attributes appear in the
Search Results section below. The user must
select an object and click Apply to add the object
to the table on the previous page.
If an object does not yet exist, a user can create
an object by clicking the Create button in the
Search Results header toolbar.

Examples
Figure 27. Clicking the Add Team Members
button opens a new page, where the user can
search for, select, and add one or more existing
team members to this opportunity.
Figure 28. The Add Team Members page,
where a user can search for, select, and add
one or more existing team members to this
opportunity.
For an example of the select and add an existing object pattern in Oracle Sales Cloud, see the Appendix.

Change View
Use the patterns in the Change View pattern set
to enable a user to quickly change the content of
a page or region without leaving the page or
region.
Patterns Contained in This Set
Pattern Name Description
Context Switcher Use to enable a user to change the context of a page or region.
Each available option in a context switcher represents a different slice of a data set
(for example, appointments for a specific day in a calendar or opportunities in a
particular fiscal quarter).
List Filter Use to enable a user to refine the information that is displayed in a list on a page or
content region. List filters can be single select or multiselect.
View Toggle Use to enable a user to alternate between different views of a content region.
Consideration Context Switcher List Filter View Toggle
Do you want to present
different slices of a data
set?
Yes No No
Do you want to enable a
user to refine what is
displayed in a list?
No Yes No
Do you want to provide
the user with the ability to
quickly alternate between
different views of a
content region?
No No Yes
Do you want a user to be
able to see all available
view options at once on
the page, without having
to drill down or click for
this information?
No No Yes

Context Switcher
A context switcher enables a user to view
different slices of one homogeneous set of
information on a page without leaving the page.
A context switcher is designated by a drop-down
arrow icon button that always appears to the
right of a page title or a section title.
For example:
 Appointments represent one
homogeneous set of information. The
context switcher provides a calendar
that enables a user to view a slice of
that information, for example,
appointments for a specific day.
 All opportunities for an organization
represent one homogeneous set of
information. The context switcher
enables a user to view opportunities by
fiscal quarter. Each fiscal quarter
represents one view of that same
information.
Elements
The context switcher contains the following elements.
drop-down arrow icon button A button with an image of a downward-pointing
arrow on it.
some type of selection element An element that offers the user homogenous
options to select from, such as a menu that lists
fiscal year quarters, or a calendar that lists days of
the month.
Context Switcher Considerations
Considerations for using context switchers:
 Avoid using more than one context
switcher on the same page because
doing so makes it difficult for users to
track the context that they are in.
 Because of performance costs
associated with context switchers,
consider using list filters or toggle
buttons.
For information about list filters and
toggle buttons, see the List Filter pattern
and View Toggle pattern sections.

Context Switcher Behavior
The view that a user selects from the context
switcher controls the set of information that is
displayed on the page. When the context
switcher is:
 Open: A user can select from a set of
mutually exclusive options.
 Closed: A user views information on the
page in context of the current selection.
The context switcher affects only what appears
on the page; it doesn’t affect the functions of the
page tabs or what appears on those pages. For
example, the search feature on a Search tab
searches the information in all page contexts,
not only the present view.
Examples
Figure 29. A context switcher before a user
clicks the drop-down arrow icon button
Figure 31. A context switcher that displays a
menu after a user clicks the drop-down arrow
icon button
Figure 30. A context switcher that displays a
calendar after a user clicks the drop-down arrow
icon button
For an example of the context switcher pattern in Oracle Sales Cloud, see the Appendix.

List Filter
A list filter enables a user to refine the information that is displayed on a page or content region.
List Filter Classifications
List filters in the simplified user interface are
classified as either single select or multiselect.
More than one list filter or a combination of list
filter types can be used on a page.
List Filter
Type
Classification
Description Specific List Filter Type
Examples
List Filter Title Syntax
single-select
list filter
A filter that enables a user to
select a single option from
among several options. Each of
the available options in the filter
provides a more focused view of
the larger set of information.
The view adjusts as soon as the
user selects an option.
single-select choice list <Show>
multiselect list
filter
A filter that enables a user to
combine options, selecting and
removing multiple options from
a series of options to broaden or
narrow the information that is
displayed. The view adjusts as
soon as the user selects or
removes an option.
filter tiles <Filter>
List Filter Behavior and Considerations
The content of a list filter is informed by the page
object or content region object. The options that
a user selects control the subset of information
that is displayed on the page or in a content
region on a page (for example, in a table).
Set the default view to one that is appropriate for
the use case and to one that considers
performance issues.

Examples
Figure 32. A single-select choice list displaying
several options from which a user can select
only one to filter by
Figure 33. Filter tiles, including a list accessed
by clicking an overflow icon button, displaying
numerous options from which a user can select
or remove from the list filter as many as needed
For examples of the list filter pattern in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.

View Toggle
A view toggle enables a user to alternate
between different views of a content region. The
view toggle provides different views of the same
information or different views of distinct sets of
information.
Examples:
 Team member details presented in
either grid or list format (different views
of the same information)
 A day, week, or month view of a single
calendar (different views of the same
information)
 Different data analytics, such as a
headcount pie graph, workforce mobility
bar graph, and workforce events bar
graph (different views of distinct sets of
information)
A view toggle is designated by a series of
buttons that are displayed side by side, adjacent
to the affected region. Each button in a view
toggle represents a different view.
Elements
The view toggle contains the following elements.
Element Name Description View Toggle Label Syntax
button A text button, icon button, or other clickable
representation of the choices that enables a
user to navigate to another view of
information.
Varies based on the view of the
information
tooltip A description that appears on a screen when
a user hovers over an icon.
Every icon button in a view toggle must
contain a tooltip.
View as a <View Type>
Examples include:
 View as a List
 View as a Grid
View Toggle Placement
Place a view toggle directly adjacent to the
content that it affects: above, below, or to the left
or right. Ideally, all buttons in a view toggle are
displayed on the page, without scrolling or an
overflow option. If you have more toggle buttons
than can be displayed on the page, consider
using either a context switcher or list filter.
Avoid using more than one view toggle on a
given page because doing so can cause a user
to lose context.

View Toggle Behavior
The available buttons in a view toggle control
the information that is displayed in the content
region that is associated with the view toggle.
When a user opens a page, the information that
is displayed in a content region that contains a
view toggle should align with the toggle view
most frequently requested for the use case. To
change this view, a user clicks one of the other
buttons in the view toggle.
Examples
Figure 34. My Team page that contains toggle
buttons that enable the user to view team
information in grid or list format
Figure 35. Analytics panel content region that
contains toggle buttons in the form of thumbnails
that enable the user to view different data
analytics
For an example of the view toggle pattern in Oracle HCM Cloud, see the Appendix.

……………………………
Appendix: Examples
……………………………

Examples
View Page
Figure 36. View page (Oracle Sales Cloud) Figure 37. View page (Oracle HCM Cloud)
Action Page
Figure 38. Action page (Oracle Sales Cloud) Figure 39. Action page (Oracle HCM Cloud)

Landing Page
Figure 40. Landing page (Oracle Sales Cloud) Figure 41. Landing page (Oracle HCM Cloud)
Object Overview Page
Figure 42. Object overview page (Oracle Sales
Cloud)
Figure 43. Object overview page (Oracle HCM
Cloud)

Footer
Figure 44. Footer (Oracle Sales Cloud)
Header
Figure 45. Header (Oracle Sales Cloud)
Figure 46. Header (Oracle HCM Cloud)

Page Tab
Figure 47. Page tab (Oracle Sales Cloud) Figure 48. Page tab (Oracle HCM Cloud)
Panel Drawer
Figure 49. Panel drawer (Oracle Sales Cloud) Figure 50. Panel drawer (Oracle HCM Cloud)
Table
Figure 51. Table, list layout (Oracle Sales
Cloud)
Figure 52. Table, grid layout (Oracle HCM
Cloud)

Add a New Object Inline
Figure 53. Add a new object inline (Oracle
Sales Cloud)
Figure 54. Add a new object inline (Oracle HCM
Cloud)

Add a New Object on a Separate Page
Figure 55. Add a new object on a separate page
(Oracle Sales Cloud)
Figure 56. Add a new object on a separate page
(Oracle HCM Cloud)
Select and Add an Existing Object
Figure 57. Select and add an existing object (Oracle
Sales Cloud)

Context Switcher
Figure 58. Context switcher (Oracle Sales Cloud)
List Filter
Figure 59. Single-select list filter (Oracle Sales
Cloud)
Figure 60. Multiselect list filter (Oracle HCM
Cloud)

View Toggle
Figure 61. View toggle buttons (Oracle HCM Cloud)

Simplified User Experience Design Patterns

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Simplified User Experience Design Patterns

Similar to Simplified User Experience Design Patterns (20)

More from Berry Clemens

More from Berry Clemens (18)

Recently uploaded

Recently uploaded (20)

Simplified User Experience Design Patterns