Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7

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

http://www.adfmastery.com/

http://www.vesterli.com/

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

http://orclville.blogspot.com/


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:


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.

http://www.oracle.com/webfolder/ux/applications/blog/index.html

http://www.oracle.com/webfolder/ux/applications/blog/index.html

http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html

http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html

https://groups.google.com/forum/#!forum/adf-methodology

https://groups.google.com/forum/#!forum/adf-methodology

https://blogs.oracle.com/VOX/

https://blogs.oracle.com/usableapps/

http://www.oracle.com/technetwork/developer-tools/jdev/overview/index.html

http://www.oracle.com/technetwork/developer-tools/jdev/overview/index.html


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.

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc

http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc

http://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.

https://blogs.oracle.com/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




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




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_for_the_oracle_applications_cloud_service_v7

Software

oracle sales

oracle hcm

ctx accamp

simplified

desktop user

existing team

page type

object overview