978007184483X Web

Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User
Experience / 483-X / Blind folio: i
Simplified User
Experience Design
Patterns for the
Oracle Applications
Cloud Service
Oracle Application User Experience
New YorkChicagoSan Francisco

AthensLondonMadridMexico City
MilanNew DelhiSingaporeSydneyToronto
00-FM.indd 1
15/04/14 4:08 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: ii
McGraw-Hill Education books are available at special quantity discounts to use as premiums and
sales promotions, or for use in corporate training programs. To contact a representative, please visit
the Contact Us pages at www.mhprofessional.com.
Simplified User Experience Design Patterns for the Oracle Applications Cloud Service
Copyright 2014 by McGraw-Hill Education (Publisher). All rights reserved. Printed in the United
States of America. Except as permitted under the Copyright Act of 1976, no part of this publication
may be reproduced or distributed in any form or by any means, or stored in a database or retrieval
system, without the prior written permission of Publisher, with the exception that the program
listings may be entered, stored, and executed in a computer system, but they may not be
reproduced for publication.
Oracle is a registered trademark of Oracle Corporation and/or its affiliates. All other trademarks are
the property of their respective owners, and McGraw-Hill Education makes no claim of ownership
by the mention of products that contain these marks.
Screen displays of copyrighted Oracle software programs have been reproduced herein with the
permission of Oracle Corporation and/or its affiliates.
Excerpts of copyrighted Oracle user documentation have been reproduced herein with the permission
of Oracle Corporation and/or its affiliates.
ISBN978-0-07-184483-X
MHID 0-07-184483-X
Information has been obtained by Publisher from sources believed to be reliable. However, because
of the possibility of human or mechanical error by our sources, Publisher, or others, Publisher does
not guarantee to the accuracy, adequacy, or completeness of any information included in this work
and is not responsible for any errors or omissions or the results obtained from the use of such
information.
Oracle Corporation does not make any representations or warranties as to the accuracy, adequacy,
or completeness of any information contained in this Work, and is not responsible for any errors or
omissions.
00-FM.indd 2
15/04/14 4:08 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: iii
Contents
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi

1 Page Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Information Architecture Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
View Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Action Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Landing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Pattern Set Decision Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Object Overview Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Footer Component Placement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Footer Component Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Page Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Page Tab Component Classification and Placement . . . . . . . . . . . . . . 25
Page Tab Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Panel Drawer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Panel Drawer Component Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Panel Drawer Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
iii
00-FM.indd 3
15/04/14 4:09 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: iv
iv
Simplified User Experience Design Patterns
Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Table Style Decision Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Table Characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
00-FM.indd 4
3 Pattern Sets and Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Add to Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Patterns Contained in This Set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pattern Set Decision Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Add a New Object Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Add a New Object on a Separate Page . . . . . . . . . . . . . . . . . . . . . . .
Select and Add an Existing Object . . . . . . . . . . . . . . . . . . . . . . . . . . .
Change View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Patterns Contained in This Set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pattern Set Decision Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Context Switcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Context Switcher Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Context Switcher Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
List Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
List Filter Classifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
List Filter Behavior and Considerations . . . . . . . . . . . . . . . . . . . . . . .
View Toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
View Toggle Placement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
View Toggle Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
41
41
41
42
42
43
45
47
47
48
48
49
49
49
53
53
53
55
56
56
56
A Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
View Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Action Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Landing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Object Overview Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Page Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Panel Drawer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Add a New Object Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Add a New Object on a Separate Page . . . . . . . . . . . . . . . . . . . . . . .
Select and Add an Existing Object . . . . . . . . . . . . . . . . . . . . . . . . . . .
Context Switcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
List Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
View Toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
59
60
60
62
64
66
68
69
71
73
75
77
79
81
82
83
85
25/04/14 5:10 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: v
Foreword
efore 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. Thats what we do and what
were 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 misssometimes they like it, sometimes they dont. And we dont 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 doesnt into software design
patternsgeneral, 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.
00-FM.indd 5
15/04/14 4:09 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: vi
vi
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
Stens Technology That Fits
Newsletter: http://www.techthatfits.com
So heres 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).
Oracles Applications User Experience team has developed some really good
design patterns. I know because Ive used them in my own work. And Ive also
benefited as a user of Oracle products.
So there you have it. Read the book. Youll see what I mean.
Floyd Teter
Oracle ACE Director
Oracle User Experience Advocate
Blog: http://orclville.blogspot.com/
Twitter: @fteter
00-FM.indd 6
15/04/14 4:09 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: vii
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
vii
00-FM.indd 7
15/04/14 4:09 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: viii
viii
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 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/applications/blog/index.html
Oracle Application Developer Framework (Oracle ADF) pages: http://www
.oracle.com/technetwork/developer-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/#!forum/adf-methodology
00-FM.indd 8
16/04/14 11:48 AM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: ix
Introduction
ix
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=trsif you are hearing impaired.
Documentation Accessibility
For information about Oracles commitment to accessibility, visit the Oracle
Accessibility Program website at http://www.oracle.com/pls/topic/
lookup?ctx=acc&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 greatlooking 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 interfacea 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

Wed 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.
00-FM.indd 9
15/04/14 4:09 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User Experience / 483-X / Blind folio: x
Tell us:
Is there something that youd 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.
00-FM.indd 10
15/04/14 4:09 PM
Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Servic / Oracle Applications User Experience e / 483-X / Blind folio: 1
CHAPTER
Page Types
01-ch01.indd 1
24/04/14 4:55 PM
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-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:
01-ch01.indd 2
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.
24/04/14 4:58 PM
Chapter 1:
Page Types
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.
01-ch01.indd 3
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) Sectionlevel 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.
24/04/14 4:58 PM
Element Name
Description
(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 1-2. A view page that displays view-only information and a link
01-ch01.indd 4
24/04/14 4:58 PM
Chapter 1: Page Types
FIGURE 1-3. A view page that displays view-only information and a text button
FIGURE 1-4. A view page that displays view-only information and an icon text button
with a punchout icon
01-ch01.indd 5
24/04/14 4:58 PM
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:
System-defined attributes
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
01-ch01.indd 6
24/04/14 4:58 PM
Elements
An action page contains the following elements.
Element Name
Description
Page-level title

component.
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:
Specific action page types require specific sets of buttons.
Edit and Add pages:
Edit and Add pages:

Save and Close button: Commits a change and closes
the page.
Save and Close

and Cancel
buttons
Cancel button: Closes the page without committing

any changes or processing any action. Returns the
user to the previous page.
Save and Close,

Cancel, and
Submit buttons
Submit button: Commits a change and triggers a

workflow process.
Select and Add

page: Apply, OK,
and Cancel buttons
Search and Select
page: OK and
Cancel buttons
Select and Add page:

Apply button: Adds selected results to a field or table
on the page without closing the page.
OK button: Applies any selected results, closes the
page, and returns the user to the previous page.
Search and Select page:
OK button: Applies any selected results, closes the
page, and returns the user to the previous page.
01-ch01.indd 7
24/04/14 4:58 PM
Element Name
Description
(Optional) Link,
button, or menu item
that opens an action
page in the simplified
user interface or a
page in the desktop
user interface

the simplified user interface where the user can edit or
perform another action on a larger set of object attributes.
Examples
FIGURE 1-5.
01-ch01.indd 8
Action page that overlays the springboard
24/04/14 4:58 PM
Chapter 1:
Page Types
FIGURE 1-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.
01-ch01.indd 9
05/05/14 9:31 AM
10
Pattern Set Decision Table

Landing Page
without Tabs
Landing Page
with Tabs
Does the users 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
Consideration
Elements
The landing page contains the following elements.
01-ch01.indd 10
Element Name
Description
Page-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.
the simplified user interface where the user can edit
or perform another action on a larger set of object
attributes.
24/04/14 4:58 PM
Element Name
Description
(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.
11
Examples
FIGURE 1-7. A landing page that focuses on a single object: opportunities
01-ch01.indd 11
24/04/14 4:58 PM
12
FIGURE 1-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.
01-ch01.indd 12
24/04/14 4:58 PM
Chapter 1:
Page Types
13
FIGURE 1-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.
01-ch01.indd 13
24/04/14 4:58 PM
14
Elements
The object overview page contains the following elements.
01-ch01.indd 14
Element Name
Description
Page-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.
24/04/14 4:58 PM
Chapter 1:
Page Types
15
Examples
FIGURE 1-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.
01-ch01.indd 15
24/04/14 4:58 PM
16
FIGURE 1-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.
01-ch01.indd 16
24/04/14 4:58 PM
CHAPTER
Components
02-ch02.indd 17
24/04/14 5:09 PM
18
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 users 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
02-ch02.indd 18
24/04/14 5:09 PM
Chapter 2:
Components
19
Example
FIGURE 2-1. 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.
02-ch02.indd 19
24/04/14 5:09 PM
20
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
02-ch02.indd 20
24/04/14 5:09 PM
Chapter 2: Components
Element Name

Specific Page Type
View page: object
overview page
21

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
02-ch02.indd 21
24/04/14 5:09 PM
22
Element Name
Section-level
title

Specific Page Type
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.
02-ch02.indd 22
24/04/14 5:09 PM
Chapter 2:
Components
23
Examples
FIGURE 2-2. A view page that displays a page title and context switcher
02-ch02.indd 23
24/04/14 5:09 PM
24
FIGURE 2-3. 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
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.
Apage 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.
02-ch02.indd 24
24/04/14 5:09 PM
25
Elements
A page tab contains the following elements.
Element Name
Description
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
View
page
Primary
On the left,
outside of
the page
frame
Action
page
Secondary
On the left,
inside of
the page
frame
Maximum
Allowable
Quantity
of Tabs
Page Tab Name

Syntax
Page Tab
Tooltip Syntax
<Tab Name>
<Tab Name>
Example:
Career
Planning
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.
02-ch02.indd 25
24/04/14 5:09 PM
26
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 2-4. Primary page tabs on a view page
02-ch02.indd 26
24/04/14 5:09 PM
Chapter 2:
Components
27
FIGURE 2-5. Secondary page tabs on an action page

For examples of the page tab component in Oracle Sales Cloud and Oracle HCM
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.
02-ch02.indd 27
Element Name
Description
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.
24/04/14 5:09 PM
28
Element Name
Description
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
Search
Icon
Description
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
Search results are displayed in a table below the search
box.
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.
02-ch02.indd 28
24/04/14 5:09 PM
Chapter 2:
Tab
Name
Actions
Icon
Components
29
Description
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
02-ch02.indd 29
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.
24/04/14 5:09 PM
30
Examples
FIGURE 2-6. A closed panel drawer
02-ch02.indd 30
24/04/14 5:09 PM
31
FIGURE 2-7. An open Search panel tab on a panel drawer
02-ch02.indd 31
24/04/14 5:09 PM
32
FIGURE 2-8. An open Actions panel tab on a panel drawer
02-ch02.indd 32
24/04/14 5:09 PM
Chapter 2:
Components
33
FIGURE 2-9. 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:
02-ch02.indd 33
Standard table using a list layout
Standard table using a grid layout
Paragraph table
24/04/14 5:09 PM
34
Table Style Decision Table

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 objects
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
Does the user need to be able

to interact with the row, for
example, to enter a quantity?
No
No
Yes
Consideration
02-ch02.indd 34
24/04/14 5:09 PM
35
Table Characteristics
The following table lists the general table characteristics that apply to each table style.
Standard
Table Using a
List Layout
Standard
Table Using a
Grid Layout
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
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 rowspecific actions are available.
Yes
Yes
Yes
Characteristics
Sort
Cannot be case sensitive
02-ch02.indd 35
Paragraph
Table
24/04/14 5:09 PM
36
Standard
Table Using a
List Layout
Standard
Table Using a
Grid Layout
Scroll bar
A vertical scroll bar in a table is
allowed; a horizontal scroll bar in a
table is not allowed.
Yes
Yes
Yes
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:
Yes
Yes
Yes
Yes
Yes
Yes
Characteristics
Paragraph
Table
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.
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.
02-ch02.indd 36
24/04/14 5:09 PM
Characteristics
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.
Standard
Table Using a
List Layout
Standard
Table Using a
Grid Layout
Yes
Yes
37
Paragraph
Table
Yes
Examples
FIGURE 2-10. Standard table, using a list layout
02-ch02.indd 37
24/04/14 5:09 PM
38
FIGURE 2-11. Standard table, using a grid layout
02-ch02.indd 38
24/04/14 5:09 PM
39
FIGURE 2-12. Paragraph table

For examples of the table component in Oracle Sales Cloud and Oracle HCM
02-ch02.indd 39
24/04/14 5:09 PM
CHAPTER
Pattern Sets and Patterns
03-ch03.indd 40
25/04/14 4:06 PM
Chapter 3: Pattern Sets and Patterns
41
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
03-ch03.indd 41
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
25/04/14 4:06 PM
42
Elements
Element Name Description
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

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.
03-ch03.indd 42
25/04/14 4:06 PM
Chapter 3:
43
Example
FIGURE 3-1. 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.

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 objects attributes are too numerous to appear inline in
one table row using the columns in view, or when additional editing capabilities are
needed.
03-ch03.indd 43
25/04/14 4:06 PM
44
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 3-2. Clicking the Add Interaction button opens a new page, where the user can
enter information about the newly added interaction.
03-ch03.indd 44
25/04/14 4:06 PM
Chapter 3:
FIGURE 3-3.
this contact.
45
The Add Interaction page, where the user can enter a new interaction for
For examples of the add a new object on a separate page pattern in Oracle Sales
Cloud and Oracle HCM Cloud, see the Appendix.

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.
03-ch03.indd 45
25/04/14 4:06 PM
46
Examples
FIGURE 3-4. 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.
03-ch03.indd 46
25/04/14 4:06 PM
Chapter 3:
47
FIGURE 3-5. 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
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
03-ch03.indd 47
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).
25/04/14 4:06 PM
48
Pattern Name
Description
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.

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
Consideration
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.
03-ch03.indd 48
25/04/14 4:06 PM
49
Elements
The context switcher contains the following elements.
Element Name
Description
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 doesnt 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.
03-ch03.indd 49
25/04/14 4:06 PM
50
Examples
FIGURE 3-6.
03-ch03.indd 50
A context switcher before a user clicks the drop-down arrow icon button
25/04/14 4:06 PM
Chapter 3:
51
FIGURE 3-7. A context switcher that displays a calendar after a user clicks the drop-down
arrow icon button
03-ch03.indd 51
25/04/14 4:06 PM
52
FIGURE 3-8. A context switcher that displays a menu 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.
03-ch03.indd 52
25/04/14 4:06 PM
53
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.
03-ch03.indd 53
25/04/14 4:06 PM
54
Examples
FIGURE 3-9. A single-select choice list displaying several options from which a user can
select only one to filter by
03-ch03.indd 54
25/04/14 4:06 PM
Chapter 3:
55
FIGURE 3-10. 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:
03-ch03.indd 55
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)
25/04/14 4:06 PM
56
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
03-ch03.indd 56
25/04/14 4:06 PM
Chapter 3:
57
requested for the use case. To change this view, a user clicks one of the other
buttons in the view toggle.
Examples
FIGURE 3-11. My Team page that contains toggle buttons that enable the user to view
team information in grid or list format
03-ch03.indd 57
25/04/14 4:06 PM
58
FIGURE 3-12. 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.
03-ch03.indd 58
25/04/14 4:06 PM
APPENDIX
Examples
04-App.indd 59
25/04/14 4:05 PM
60
Examples
View Page
FIGURE A-1. View page (Oracle Sales Cloud)
04-App.indd 60
25/04/14 4:05 PM
Appendix :
FIGURE A-2.
04-App.indd 61
Examples
61
View page (Oracle HCM Cloud)
25/04/14 4:05 PM
62
Action Page
FIGURE A-3. Action page (Oracle Sales Cloud)
04-App.indd 62
25/04/14 4:05 PM
Appendix :
FIGURE A-4.
04-App.indd 63
Examples
63
Action page (Oracle HCM Cloud)
25/04/14 4:05 PM
64
Landing Page
FIGURE A-5. Landing page (Oracle Sales Cloud)
04-App.indd 64
25/04/14 4:05 PM
Appendix :
FIGURE A-6.
04-App.indd 65
Examples
65
Landing page (Oracle HCM Cloud)
25/04/14 4:05 PM
66
Object Overview Page
FIGURE A-7. Object overview page (Oracle Sales Cloud)
04-App.indd 66
25/04/14 4:05 PM
Appendix :
FIGURE A-8.
04-App.indd 67
Examples
67
Object overview page (Oracle HCM Cloud)
25/04/14 4:05 PM
68
Footer
FIGURE A-9. Footer (Oracle Sales Cloud)
04-App.indd 68
25/04/14 4:05 PM
Appendix :
Examples
69
Header
FIGURE A-10.
04-App.indd 69
Header (Oracle Sales Cloud)
25/04/14 4:05 PM
70
FIGURE A-11. Header (Oracle HCM Cloud)
04-App.indd 70
25/04/14 4:05 PM
Appendix :
Examples
71
Page Tab
FIGURE A-12.
04-App.indd 71
Page tab (Oracle Sales Cloud)
25/04/14 4:05 PM
72
FIGURE A-13. Page tab (Oracle HCM Cloud)
04-App.indd 72
25/04/14 4:05 PM
Appendix :
Examples
73
Panel Drawer
FIGURE A-14.
04-App.indd 73
Panel drawer (Oracle Sales Cloud)
25/04/14 4:05 PM
74
FIGURE A-15. Panel drawer (Oracle HCM Cloud)
04-App.indd 74
25/04/14 4:05 PM
Appendix :
Examples
75
Table
FIGURE A-16.
04-App.indd 75
Table, list layout (Oracle Sales Cloud)
25/04/14 4:05 PM
76
FIGURE A-17. Table, grid layout (Oracle HCM Cloud)
04-App.indd 76
25/04/14 4:05 PM
Appendix :
Examples
77
FIGURE A-18.
04-App.indd 77
Add a new object inline (Oracle Sales Cloud)
25/04/14 4:05 PM
78
FIGURE A-19. Add a new object inline (Oracle HCM Cloud)
04-App.indd 78
25/04/14 4:05 PM
Appendix :
Examples
79
FIGURE A-20.
04-App.indd 79
Add a new object on a separate page (Oracle Sales Cloud)
25/04/14 4:05 PM
80
FIGURE A-21. Add a new object on a separate page (Oracle HCM Cloud)
04-App.indd 80
25/04/14 4:05 PM
Appendix :
Examples
81
FIGURE A-22.
04-App.indd 81
Select and add an existing object (Oracle Sales Cloud)
25/04/14 4:05 PM
82
Context Switcher
FIGURE A-23. Context switcher (Oracle Sales Cloud)
04-App.indd 82
25/04/14 4:05 PM
Appendix :
Examples
83
List Filter
FIGURE A-24.
04-App.indd 83
Single-select list filter (Oracle Sales Cloud)
25/04/14 4:05 PM
84
FIGURE A-25. Multiselect list filter (Oracle HCM Cloud)
04-App.indd 84
25/04/14 4:05 PM
Appendix :
Examples
85
View Toggle
FIGURE A-26.
04-App.indd 85
View toggle buttons (Oracle HCM Cloud)
25/04/14 4:05 PM

978007184483X Web

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

978007184483X Web

Uploaded by

Copyright:

Available Formats

Oracle-Regular / Simplified User Experience Design Patterns for the Oracle Applications Cloud Service / Oracle Application User

Experience / 483-X / Blind folio: i

New YorkChicagoSan Francisco

Simplified User Experience Design Patterns

3 Pattern Sets and Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Simplified User Experience Design Patterns

How to Use This Book

Simplified User Experience Design Patterns

Oracle ADF templates that allow you to organize

Oracle ADF user interface elements that provide the

Pattern Sets and

Reusable combinations of components, assembled together

About the OAUX Team

Comments and Suggestions

Simplified User Experience Design Patterns

Simplified User Experience Design Patterns

Information Architecture Overview

FIGURE 1-1. Relationships among page types

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.

Open an action page in the simplified user interface

Open a page in the desktop user interface

Examples of view pages include:

Object overview page

The name of the page. A title is displayed in a header

(Optional) Sectionlevel title

The name of the sections within a page. A title is

A link that takes a user to an object overview page in the

Simplified User Experience Design Patterns

One or more navigation elements that are designated by

Chapter 1: Page Types

Simplified User Experience Design Patterns

An action page is a modal page that enables a user to:

Not editable or that the user is not authorized to edit

Chapter 1: Page Types

The name of the page. A title is displayed in a header

(Optional) Sectionlevel title

The name of the sections within a page. A title is displayed

One set of these

Specific action page types require specific sets of buttons.

Edit and Add pages:

Edit and Add pages:

Save and Close

Cancel button: Closes the page without committing

Save and Close,

Submit button: Commits a change and triggers a

Select and Add

Select and Add page:

Simplified User Experience Design Patterns

A link or button that takes a user to an action page in

Action page that overlays the springboard

Simplified User Experience Design Patterns

Pattern Set Decision Table

Does the users work revolve around a

Does the user need to perform small tasks

Can the information be logically grouped

The name of the page. A title is displayed in a header

(Optional) Sectionlevel title

The name of the sections within a page. A title is

(Optional) Page tabs

One or more navigation elements that are designated by