978007184483x_web (1)

8/10/2019 978007184483X_Web (1)

1/96

8/10/2019 978007184483X_Web (1)

2/96

Simplified User

Experience DesignPatterns for theOracle ApplicationsCloud Service

Oracle Application User Experience

New York Chicago San FranciscoAthens London Madrid Mexico CityMilan New Delhi Singapore Sydney Toronto

8/10/2019 978007184483X_Web (1)

3/96

McGraw-Hill Education books are available at special quantity discounts to use as premiums andsales promotions, or for use in corporate training programs. To contact a representative, please visitthe 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 UnitedStates of America. Except as permitted under the Copyright Act of 1976, no part of this publicationmay be reproduced or distributed in any form or by any means, or stored in a database or retrievalsystem, without the prior written permission of Publisher, with the exception that the programlistings may be entered, stored, and executed in a computer system, but they may not bereproduced for publication.

Oracle is a registered trademark of Oracle Corporation and/or its affiliates. All other trademarks arethe property of their respective owners, and McGraw-Hill Education makes no claim of ownershipby the mention of products that contain these marks.

Screen displays of copyrighted Oracle software programs have been reproduced herein with thepermission of Oracle Corporation and/or its affiliates.

Excerpts of copyrighted Oracle user documentation have been reproduced herein with the permissionof Oracle Corporation and/or its affiliates.

ISBN 978-0-07-184483-XMHID 0-07-184483-X

Information has been obtained by Publisher from sources believed to be reliable. However, becauseof the possibility of human or mechanical error by our sources, Publisher, or others, Publisher doesnot guarantee to the accuracy, adequacy, or completeness of any information included in this workand is not responsible for any errors or omissions or the results obtained from the use of suchinformation.

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 oromissions.
http://www.mhprofessional.com/http://www.mhprofessional.com/

8/10/2019 978007184483X_Web (1)

4/96

Contents

Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ixIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi

1 Page Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Information Architecture Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2View Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Action Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Landing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Pattern Set Decision Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Object Overview Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2 Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Footer Component Placement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Footer Component Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Page Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Page Tab Component Classification and Placement . . . . . . . . . . . . . . 25Page Tab Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Panel Drawer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Panel Drawer Component Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . 28Panel Drawer Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

iii

8/10/2019 978007184483X_Web (1)

5/96

iv Simplified User Experience Design Patterns

Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33Table Style Decision Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Table Characteristics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3 Pattern Sets and Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Add to Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Patterns Contained in This Set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Pattern Set Decision Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Add a New Object Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Add a New Object on a Separate Page . . . . . . . . . . . . . . . . . . . . . . . 43Select and Add an Existing Object . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Change View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Patterns Contained in This Set . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Pattern Set Decision Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Context Switcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Context Switcher Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Context Switcher Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

List Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53List Filter Classifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53List Filter Behavior and Considerations . . . . . . . . . . . . . . . . . . . . . . . 53

View Toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56View Toggle Placement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56View Toggle Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

A Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

View Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Action Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Landing Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64Object Overview Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Page Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Panel Drawer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Add a New Object Inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77Add a New Object on a Separate Page . . . . . . . . . . . . . . . . . . . . . . . 79Select and Add an Existing Object . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Context Switcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82List Filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83View Toggle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

8/10/2019 978007184483X_Web (1)

6/96

Foreword

Before I learned user experience design patterns, my users did not love theapplications I built. Sometimes they liked them; sometimes they merelyaccepted 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 whatwere good at. User experience design is a completely separate skill, and one thatmost developers do not master. Unfortunately, many applications are being builtwithout 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 bya hodgepodge of developers, testers, and project managers. User acceptance is hitor misssometimes they like it, sometimes they dont. And we dont get any wiserfrom project to project.

In programming, we recognize that there are universal truths; there are somegood ways of meeting specific challenges and some not-so-good ways. We havecodified this knowledge of what works and what doesnt into software designpatternsgeneral, reusable solutions to common problems.

User experience also has universal truths. And of course, user experiencedesigners 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.

v

8/10/2019 978007184483X_Web (1)

7/96

vi Simplified User Experience Design Patterns

Now that I have learned user experience design patterns, I can consistently buildapplications that my users love. And you can, too. Read this book to learn how.

Sten VesterliOracle ACE Director

Oracle User Experience AdvocateWebsite: http://www.adfmastery.com

Blog: http://www.vesterli.com/Twitter: @stenvesterli

Stens Technology That FitsNewsletter: http://www.techthatfits.com

So heres the thing with design patterns. Good design patterns are productivitymultipliers. Let me explain.

First there is an increase in designer productivity. Rather than re-creatingdetailed designs from scratch, detailed designed become an exercise in reuse ofspecific components for recurring situations . . . still an exercise requiring skills andcreativity, 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 theproduct. So even when creating solutions for new use cases, the user interaction (thenavigation; the task flows; the overall form, bit, and function) remains consistent. Sousers 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 increasedproductivity (not to mention more successful user acceptance).

Oracles Applications User Experience team has developed some really gooddesign patterns. I know because Ive used them in my own work. And Ive alsobenefited as a user of Oracle products.

So there you have it. Read the book. Youll see what I mean.

Floyd TeterOracle ACE Director

Oracle User Experience AdvocateBlog: http://orclville.blogspot.com/

Twitter: @fteter
http://www.adfmastery.com/http://www.vesterli.com/http://www.techthatfits.com/http://orclville.blogspot.com/http://orclville.blogspot.com/http://www.techthatfits.com/http://www.vesterli.com/http://www.adfmastery.com/

8/10/2019 978007184483X_Web (1)

8/96

Introduction

Who Should Read This BookThis book contains user experience design patterns and guidelines that Oracle usesto build the simplified user interface for its Oracle Cloud Applications, such as OracleSales 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 orwireframes during the innovation cycle to expose problems early, increaseproductivity of application builders, and eliminate costly surprises late in thebuild cycle.

After code is written. They can be used to customize and extend OracleCloud Applications simplified user interface applications and to build otherapplications and integrations that look and behave like Oracle simplifieduser interface applications.

How to Use This BookThis book includes three sections: Page Types, Components, and Pattern Sets andPatterns. The content in these sections includes lists and descriptions of requireduser interface elements and examples. Depending on your design needs, you may

vii

8/10/2019 978007184483X_Web (1)

9/96

viii Simplified User Experience Design Patterns

need to reference content in one or more sections. This book also includes anappendix of examples taken from Oracle Sales Cloud and Oracle HCM Cloud.

Section Name DescriptionPage Types Oracle ADF templates that allow you to organize

components and patterns to provide a particular userexperience, optimize a specific functional purpose, andenable productive development. These templates are builtto accommodate common requirements that have beenidentified as industry best practices. They have been testedand proven by real users in our usability labs.

Components Oracle ADF user interface elements that provide theuser interface building blocks for the design. Componentguidelines are broad and can be used in a number of ways

in a template or together in a pattern to provide a solutionfor a user experience requirement.

Pattern Sets andPatterns

Reusable combinations of components, assembled togetherto 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 (orskinning) of an application. They are content neutral and can be adapted toapplication use cases and user requirements as needed.

SupportIf you have questions about how to use this book or have questions about thecontent in this book, you can reach us on Twitter: @usableapps.

Here are a few resources that you might find useful as you design and buildapplications:

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 thatdiscusses best practices for building enterprise applications: https://groups.google.com/forum/#!forum/adf-methodology
http://www.oracle.com/webfolder/ux/applications/blog/index.htmlhttp://www.oracle.com/webfolder/ux/applications/blog/index.htmlhttp://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlhttp://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlhttps://groups.google.com/forum/#!forum/adf-methodologyhttps://groups.google.com/forum/#!forum/adf-methodologyhttp://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlhttp://www.oracle.com/webfolder/ux/applications/blog/index.htmlhttps://groups.google.com/forum/#!forum/adf-methodologyhttps://groups.google.com/forum/#!forum/adf-methodologyhttp://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlhttp://www.oracle.com/webfolder/ux/applications/blog/index.html

8/10/2019 978007184483X_Web (1)

10/96

Introduction i

You can also enhance your user experience knowledge by attending events,such as webinars, workshops, and seminars that are led worldwide by the OracleApplications User Experience (OAUX) team. You can find information aboutupcoming OAUX training events on the Oracle Voice of User Experience blog athttps://blogs.oracle.com/VOX/,on the Oracle Usable Apps Blog at https://blogs.oracle.com/usableapps/, or through your Oracle customer and Oracle partnernetwork 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 ADFor community representative.

My Oracle SupportOracle 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 visithttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=trs if you are hearing impaired.

Documentation AccessibilityFor information about Oracles commitment to accessibility, visit the OracleAccessibility Program website at http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc.

About the OAUX TeamThe 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 peopleand their businesses, no matter where or how they work. Through dedicatedcollaboration and support, the Oracle Applications User Experience team empowersOracle customers, partners, and the Oracle ADF community to use Oracletechnologies and applications to deliver the simplified user interfacea userexperience 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 SuggestionsWed like to hear about your experiences as you use these design patterns andguidelines to build, customize, extend, and integrate applications. Share yourexperiences with us on Twitter: @usableapps.
https://blogs.oracle.com/VOX/https://blogs.oracle.com/usableapps/https://blogs.oracle.com/usableapps/http://www.oracle.com/technetwork/developer-tools/jdev/overview/index.htmlhttp://www.oracle.com/technetwork/developer-tools/jdev/overview/index.htmlhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=infohttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=trshttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacchttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacchttp://www.oracle.com/usableappshttp://www.oracle.com/usableappshttp://www.oracle.com/usableappshttp://www.oracle.com/usableappshttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacchttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacchttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=trshttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=infohttp://www.oracle.com/technetwork/developer-tools/jdev/overview/index.htmlhttp://www.oracle.com/technetwork/developer-tools/jdev/overview/index.htmlhttps://blogs.oracle.com/usableapps/https://blogs.oracle.com/usableapps/https://blogs.oracle.com/VOX/

8/10/2019 978007184483X_Web (1)

11/96

x Simplified User Experience Design Patterns

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 buildingapplications?

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

8/10/2019 978007184483X_Web (1)

12/96

CHAPTER

1

Page Types

8/10/2019 978007184483X_Web (1)

13/96

2 Simplified User Experience Design Patterns

Information Architecture OverviewPages in the simplified user interface are classified as either view or action. Whethera 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 PageA view page enables a user to view a single main object or multiple related objects ortasks. A single main object is displayed on a single page. Multiple related objectsor tasks are displayed on one single page or across a set of page tabs. A view page isnot 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.

8/10/2019 978007184483X_Web (1)

14/96

Chapter 1: Page Types 3

The page that opens displays a pointer at the top of the page frame to thefunctional 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

ElementsAll view pages include the following elements. To see the lists of elements for eachtype 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 headercomponent.

See theHeadercomponent section.

(Optional) Section-

level title

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

displayed in a header component.See theHeadercomponent section.

Link, button, ormenu item thatopens a view oran action page inthe simplified userinterface or a pagein the desktop userinterface

A link that takes a user to an object overview page in thesimplified user interface where the user can view a largerset of object attributes or to an object details page in thesimplified user interface where the user can view or edit alarger set of object attributes.

A link or button that takes a user to an action page inthe simplified user interface where the user can edit orperform 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 interfacewhere the user can view or edit a complete set ofattributes or additional attributes.

8/10/2019 978007184483X_Web (1)

15/96



(Optional) Pagetabs

One or more navigation elements that are designated byan 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 contentwithin the same functional area.

See thePage Tabcomponent section.

Examples

FIGURE 1-2. A view page that displays view-only information and a link

8/10/2019 978007184483X_Web (1)

16/96


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 buttonwith a punchout icon

8/10/2019 978007184483X_Web (1)

17/96


For examples of view pages in Oracle Sales Cloud and Oracle HCM Cloud, see theAppendix.

Action PageAn 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 acrossa set of page tabs.

Add one or more existing objects to a page.

For more information about page tabs, see the Page Tabcomponent section.

A user accesses an action page from a view page or another action page. Theaction 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 andselect 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. Asecondary action page contains a supplementary task that is directly related to theaction page from which it originated. A secondary action page is not a required partof the main task flow.

Examples of action pages include:

Edit page

Add page

Search and Select page

Select and Add page

8/10/2019 978007184483X_Web (1)

18/96


ElementsAn action page contains the following elements.



See the Headercomponent section.

(Optional) Section-level title

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


One set of thesebuttons, dependenton the specific actionpage type:

Edit and Add pages:

Save and Closeand Cancelbuttons

Save and Close,Cancel, andSubmitbuttons

Select and Addpage: Apply, OK,and Cancelbuttons

Search and Selectpage: OKandCancel buttons

Specific action page types require specific sets of buttons.

Edit and Add pages:

Save and Closebutton: Commits a change and closesthe page.

Cancel button: Closes the page without committingany changes or processing any action. Returns theuser to the previous page.

Submit button: Commits a change and triggers aworkflow process.

Select and Add page:

Applybutton: Adds selected results to a field or tableon the page without closing the page.

OKbutton: Applies any selected results, closes thepage, and returns the user to the previous page.

Cancelbutton: Closes the page without committingany changes or processing any action. Returns theuser to the previous page.

Search and Select page:

OKbutton: Applies any selected results, closes thepage, and returns the user to the previous page.

Cancelbutton: Closes the page without committingany changes or processing any action. Returns theuser to the previous page.

8/10/2019 978007184483X_Web (1)

19/96



(Optional) Link,button, or menu item

that opens an actionpage in the simplifieduser interface or apage in the desktopuser interface

A link or button that takes a user to an action page inthe simplified user interface where the user can edit or

perform another action on a larger set of object attributes.


Examples

FIGURE 1-5. Action page that overlays the springboard

8/10/2019 978007184483X_Web (1)

20/96


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, seetheAppendix.

Landing PageA landing page represents a functional area. The focus of a landing page is on eithera single object in a functional area or on a group of related objects or tasks in afunctional area. When the focus is on a single object, the landing page has no pagetabs. 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 separatelanding page.

For more information about page tabs and considerations for using page tabs,see the Page Tabcomponent section.

A landing page is displayed when a user clicks a functional area icon button onthe springboard or when a user selects a tab from among a group of tabs on anotherlanding page.

8/10/2019 978007184483X_Web (1)

21/96


Pattern Set Decision Table

Consideration

Landing Page

without Tabs

Landing Page

with TabsDoes the users work revolve around aprimary object or business process?

Yes No

Does the user need to perform small tasksacross multiple, related objects or tasks?

No Yes

Can the information be logically groupedon one landing page?

Yes No

ElementsThe landing page contains the following elements.





The name of the sections within a page. A title isdisplayed in a header component.


(Optional) Page tabs One or more navigation elements that are designated byan icon. Page tabs enable the user toview content onother landing pages within the same functional area.

See thePage Tabcomponent section.

(Optional) Link,button, or menu itemthat opens a viewor an action page inthe simplified userinterface or a pagein the desktop user

interface

A link that takes a user to an object overview page inthe simplified user interface where the user can view alarger set of object attributes or to an object details pagein the simplified user interface where the user can viewor edit a larger set of object attributes.

A link or button that takes a user to an action page inthe simplified user interface where the user can editor perform another action on a larger set of objectattributes.


8/10/2019 978007184483X_Web (1)

22/96



(Optional) Paneldrawer

A component anchored to the right side of a landingpage that provides supplementary actions or content.

See the Panel Drawercomponent section.(Optional) Footer A component that displays supplemental information

related to page content that is helpful and of interest toa user but not central to the task at hand.

See theFootercomponent section.

Examples

FIGURE 1-7. A landing page that focuses on a single object: opportunities

8/10/2019 978007184483X_Web (1)

23/96


FIGURE 1-8. A group of related objects or tasks within the Performance and Careerfunctional area, each represented by a page tab. In this case, when you select the Career

tab, the Career Planning landing page is displayed.

8/10/2019 978007184483X_Web (1)

24/96


FIGURE 1-9. Selecting the Goals tab from the group of tabs within the Performance andCareer functional area displays the Goals landing page.

For examples of landing pages in Oracle Sales Cloud and Oracle HCM Cloud, seethe Appendix.

Object Overview PageAn object overview page type is used when there is a lot of information about anobject and you want to display only high-level summary information neededfrequently 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 keyinformation about that particular object but provides access to more details ifneeded and edit capabilities if the user has been granted edit permissions.

8/10/2019 978007184483X_Web (1)

25/96


ElementsThe object overview page contains the following elements.





The name of the sections within a page. A title isdisplayed in a header component.


Donebutton A button that enables a user to return to the landing page.

Link, button, or

menu item thatopens an actionpage in thesimplified userinterface or a pagein the desktop userinterface

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

in the simplified user interface where the user canview, edit, or perform another action on a larger setof object attributes, or access more attributes in thedesktop user interface.

A button or menu item that contains the punchouticon ( ) that takes the user to the desktop userinterface where the user can view or edit a completeset of attributes or additional attributes.

8/10/2019 978007184483X_Web (1)

26/96


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 toopen to an action page and edit object details.

8/10/2019 978007184483X_Web (1)

27/96


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 HCMCloud, see theAppendix.

8/10/2019 978007184483X_Web (1)

28/96

CHAPTER

2

Components

8/10/2019 978007184483X_Web (1)

29/96


FooterA footer component displays supplemental information related to page content thatis 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 andobject overview pages.

ElementsThe footer component does not have any required elements. All fields included mustbe noneditable, although links to relevant information may be included. The footercan be divided into sections.

Footer Component PlacementA 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 BehaviorWhen 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 selectionin 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

8/10/2019 978007184483X_Web (1)

30/96

Chapter 2: Components 19

Example

FIGURE 2-1. A footer, displaying information about the currently selected contentswitcher view

For an example of the footer component in Oracle Sales Cloud, see theAppendix.

HeaderA header component is used to name pages and sections within pages. Headersappear 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 titleand contains information applicable to the overall object, a header at thatsection level is not required.

8/10/2019 978007184483X_Web (1)

31/96


All page header titles:

Use headline case

Use header title truncation as needed

ElementsThe header component can contain the following elements. The header title syntaxis informed by the page type.

Element NamePage 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:

Example:

Team Talent

If the landing page contains tabs:

For example, in the PersonalInformation functional area, thetabs are named as follows:

My DetailsBenefitsPayCompensation

8/10/2019 978007184483X_Web (1)

32/96



View page: object

overview page

There are two syntax options:

If the object of the object overviewpage is unique:

Example:

Kelly Wilson

If the object of the Object Overviewpage needs specificity:

,

Example:Lisa Jones, Senior SalesRepresentative

Action page There are three syntax options:

If the action page contains no tabs:

Example:

Create Opportunity

If the action page contains tabs:

:

Example:

Edit My Details: Contact Info

If the action page contain tabs, andthe context of the object needs tobe carried forward:

: :

Example:

Edit Contact: Aaron Simpson: Leads

8/10/2019 978007184483X_Web (1)

33/96



Section-level

title

View page

Action page

A section-level title should describe

the content in the section.Examples:

Contact Points

Address

Contextswitcher

View page

Action page

A context switcher enables a userto view different subsets of onehomogeneous set of information in apage header or section header.

See the Context Switcherpatternsection.

Toolbar View page

Action page

A toolbar that aligns with apagetitle is always displayed flush-right,opposite of the page title. Thistoolbar contains buttons that initiatesection-level actions.

A toolbar that aligns with a sectiontitle is displayed to the right of thesection title. This toolbar contains

buttons that control the content inthat section.

8/10/2019 978007184483X_Web (1)

34/96


Examples

FIGURE 2-2. A view page that displays a page title and context switcher

8/10/2019 978007184483X_Web (1)

35/96


FIGURE 2-3. An action page the displays a page title with a toolbar and two sectiontitles, each with its own toolbar

For examples of the header component in Oracle Sales Cloud and Oracle HCMCloud, see theAppendix.

Page TabA page tab is a navigation element that is used to divide pages into multiplesections, 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 pagetypes. However, not all view or action pages require tabs even if their originatingpages 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

Overviewsection.

8/10/2019 978007184483X_Web (1)

36/96


ElementsA 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 mustbe unique. An icon cannot be used more than once in thesame set of tabs.

tooltip A description that appears on a screen when a user hoversover an element.

A tooltip that matches the tab title is required for every icon.

Page Tab Component Classification and PlacementPage tabs are classified as primary or secondary. A primary page tab is displayed ona view page, and a secondary page tab is displayed on an action page. Page typeclassifications determine the maximum allowable quantity of tabs that can be usedon a page, as well as the page tab name and page tab tooltip syntax.

PageType

Page TabClassification

Location ofPage Tab

MaximumAllowableQuantityof Tabs

Page Tab NameSyntax

Page TabTooltip Syntax

View

page

Primary On the left,

outside ofthe pageframe

5

Example:CareerPlanning

Actionpage

Secondary On the left,insideofthe pageframe

10 : :

Edit Contact:AaronSimpson:Leads

Page Tab OrderOrder 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 adecision that a user must make on the first tab in the stack.

8/10/2019 978007184483X_Web (1)

37/96


Place tabs that contain frequently accessed information higher in the stackorder.

Place tabs containing sensitive information, such as compensation information,

lower in the tab order, even if the content is actionable or requires the user tomake 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 beplaced in stack order.

If multiple considerations apply, determine which is more important for your usecase.

Examples

FIGURE 2-4. Primary page tabs on a view page

8/10/2019 978007184483X_Web (1)

38/96


FIGURE 2-5. Secondary page tabs on an action page

For examples of the page tab component in Oracle Sales Cloud and Oracle HCMCloud, see theAppendix.

Panel DrawerA panel drawer is an optional component anchored to the right side of a landingpage that provides supplementary actions or content.

ElementsA panel drawer contains the following elements.


panel A bounded area on a page that comprises a panel tab and apanel content region.

panel tab An element that is displayed vertically on the left of thepanel drawer and that is designated by an icon. A panel tabprovides navigation between panel tab content categories.

A user opens the panel drawer by clicking a panel tab; a usercloses the panel drawer by clicking a panel tab or by clickinganywhere on the page.

8/10/2019 978007184483X_Web (1)

39/96



panel contentregion

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 aspecific set of information.


Panel Drawer Component BehaviorWhen a landing page contains both page tabs and a panel drawer, the panel drawercontent can be contextual to eachtab of the landing page or can apply to alltabs inthe functional area.

Panel Drawer TabsA panel drawer can contain any of the following panel tabs, in this order. The paneltab order remains fixed even when fewer than three tabs are needed.

TabName Icon Description

Search The Search tab content comprises:

1. A search field

When the search tab opens, the search results sectionshould 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 searchbox.

If the search results include a search result found in thedesktop user interface, the punchout icon ( ) should bedisplayed next to the link.

Search results that take a user to the desktop userinterface should occur infrequently. If search resultsthat link to the desktop user interface are displayed

frequently, consult your user experience team.If no search results are found, the following text stringshould be displayed in the results section: No resultsfound.

If additional descriptive text is needed for the use case,work with your user experience team to determine theappropriate message.

8/10/2019 978007184483X_Web (1)

40/96


TabName Icon Description

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 thesimplified user interface and the desktop user interface. Thepunchout icon ( ) should be displayed next to each externallink to the desktop user interface.

The links that are displayed in the Actions section take theuser to a location where the user is expected to perform an

action.

The links that are displayed in the Related Links sectiontake the user to a location where no action is assumed. Thelocation might only contain information that the user views.

The punchout icon ( ) should be displayed next to eachexternal link to the desktop user interface.

Analytics The Analytics tab content comprises no more than 10 dataanalytics (for example, graphs). If more than one data analyticis displayed, an affordance for switching among the figures isrequired.

8/10/2019 978007184483X_Web (1)

41/96


Examples

FIGURE 2-6. A closed panel drawer

8/10/2019 978007184483X_Web (1)

42/96


FIGURE 2-7. An open Search panel tab on a panel drawer

8/10/2019 978007184483X_Web (1)

43/96


FIGURE 2-8. An open Actions panel tab on a panel drawer

8/10/2019 978007184483X_Web (1)

44/96


FIGURE 2-9. An open Analytics panel tab on a panel drawer

For examples of the panel drawer component in Oracle Sales Cloud and OracleHCM Cloud, see theAppendix.

TableA table is a component that is used to organize and display a large quantity ofcontent. A table enables a user to view or to interact with content. A table containsone 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

8/10/2019 978007184483X_Web (1)

45/96


Table Style Decision Table

Consideration

Standard

Table Using aList Layout

Standard

Table Using aGrid Layout

ParagraphTable

Does the user need high-leveldetails displayed in numerousrows and columns rather thanextensive details about thecontent in each row?

Yes No No

Does the user need to viewinformation about the one objectin a row where the objects

related attributes are separatedinto columns?

Yes No No

Does the user need to be able tosort on each column?

Yes No No

Does the user need to viewinformation about multiplerelated objects in single row?

No Yes No

Does the user need extensivecontextual details aboutparticular items in a table (even

when it means displaying fewerrows) in order to increase thechance of the user finding theobject he is seeking?

No No Yes

Does the user need to be ableto interact with the row, forexample, to enter a quantity?

No No Yes

8/10/2019 978007184483X_Web (1)

46/96


Table CharacteristicsThe following table lists the general table characteristics that apply to each table style.

Characteristics

StandardTable Using aList Layout

StandardTable Using aGrid Layout

ParagraphTable

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 canbe enabledon columnsand isdesignated bya down arrowicon buttonin the columnheader.

Yes

Sorting can beenabled at therow level andis designatedby a choicelist above thetable.

Yes

Sorting canbe enabledat the rowlevel and isdesignatedby a choicelist abovethe table.

Links

Can be used in any column or rowas needed. Links take the usersto more details about the linkedobject. These object details may ormay not be editable.

Yes Yes Yes

Additional row-level actions

An icon, text button, or icon buttonis used to indicate that more row-specific actions are available.

Yes Yes Yes

8/10/2019 978007184483X_Web (1)

47/96


Characteristics



ParagraphTable

Scroll barA vertical scroll bar in a table isallowed; a horizontal scroll bar in atable is not allowed.

Yes Yes Yes

Personalization

Only an administrator can canrearrange, show or hide, or add ordelete columns.

No No No

Emphasis

Two font sizes can be used in a

table to emphasize content:

A larger font is used to identifya primary column that containsthe most important content in thetable.

A smaller font is used to identfiysecondary columns and supportcontent. The content in any oneof these secondary or supportingcolumns can be set apart from

the other columns or emphasizedby setting all of the content inthat column in bold.

Yes Yes Yes

Interactions

Limited to standard actions, such asview, create, and add. These actionsare designated by links, text buttons,and icon buttons. Actions that affectthe entire table appear above thetable; actions that affect a particularrow appear within that row. A usercannot right-click content in a rowand take an action.

Yes Yes Yes

8/10/2019 978007184483X_Web (1)

48/96


Characteristics



ParagraphTable

TruncationShould be set to on for allcontent in all columns so that ifcontent exceeds the space alloted,the content will truncate and befollowed by ellipsis points (threepoints, with one space betweeneach point: . . . ). Full text should bedisplayed on hover.

Yes Yes Yes

Examples

FIGURE 2-10. Standard table, using a list layout

8/10/2019 978007184483X_Web (1)

49/96


FIGURE 2-11. Standard table, using a grid layout

8/10/2019 978007184483X_Web (1)

50/96


FIGURE 2-12. Paragraph table

For examples of the table component in Oracle Sales Cloud and Oracle HCMCloud, see theAppendix.

8/10/2019 978007184483X_Web (1)

51/96

CHAPTER

3

Pattern Sets and Patterns

8/10/2019 978007184483X_Web (1)

52/96

Chapter 3: Pattern Sets and Patterns 41

Add to TableUse the patterns in the Add to Table pattern set to enable a user to add new orexisting 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 newobject inline without leaving the table.

Add a New Object on a Separate Page Use to enable a user to add a newobject on a separate page.

Select and Add an Existing Object Use to enable a user to select and

add an existingobject.


ConsiderationAdd a NewObject Inline

Add a NewObject on aSeparate Page

Select and Addan ExistingObject

Does all of theinformation that isrequired to add a new

object fit within onetable row using the tablecolumns in view?

Yes No No

Does all of theinformation that isrequired to add a newobject result in moreattributes than can appearin one table row using thetable columns in view?

No Yes No

Does the object that youneed to add to your tablealready exist?

No No Yes

8/10/2019 978007184483X_Web (1)

53/96


Elements


table An arrangement of information in row and column format. Tablerows and columns may or may not display borders.

Add button A button with eitherAdd, Add , orAdd 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

Example: Add Interaction

If you are selecting and adding an existing object:

Add

Add Team Members

Add a New Object InlineUse the Add a New Object Inline pattern to enable a user to add a new object to atable when all of the attributes that are required to create the component can fit inone 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 informationfor the new object.

8/10/2019 978007184483X_Web (1)

54/96


Example

FIGURE 3-1. Clicking the Add button on the Edit Opportunity page adds a new row atthe top of the table, where the user can enter information about the newly added revenueitem for this opportunity.

For examples of the add a new object inline pattern in Oracle Sales Cloud andOracle HCM Cloud, see theAppendix.

Add a New Object on a Separate PageUse the Add a New Object on a Separate Page pattern to enable a user to add a newobject to a table when the objects attributes are too numerous to appear inline inone table row using the columns in view, or when additional editing capabilities areneeded.

8/10/2019 978007184483X_Web (1)

55/96


In this pattern, the user clicks the Add button located above the table and a newpage appears. The user completes the required fields on the new page, clicks theSave and Close button to close the new page. A new row appears as the top row ofthe initial table.

Examples

FIGURE 3-2. Clicking the Add Interaction button opens a new page, where the user canenter information about the newly added interaction.

8/10/2019 978007184483X_Web (1)

56/96


FIGURE 3-3. The Add Interaction page, where the user can enter a new interaction forthis contact.

For examples of the add a new object on a separate page pattern in Oracle SalesCloud and Oracle HCM Cloud, see theAppendix.

Select and Add an Existing ObjectUse the Select and Add an Existing Object pattern to enable a user to search for andselect an existingobject to add to the table.

In this pattern, when the user clicks an Add button above the table, a new pageappears 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 withmatching attributes appear in the Search Results section below. The user must selectan 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 Createbutton in the Search Results header toolbar.

8/10/2019 978007184483X_Web (1)

57/96


Examples

FIGURE 3-4. Clicking the Add Team Members button opens a new page, where the usercan search for, select, and add one or more existing team members to this opportunity.

8/10/2019 978007184483X_Web (1)

58/96


FIGURE 3-5. The Add Team Members page, where a user can search for, select, and addone or more existing team members to this opportunity.

For an example of the select and add an existing object pattern in Oracle SalesCloud, see theAppendix.

Change ViewUse the patterns in the Change View pattern set to enable a user to quickly changethe content of a page or region without leaving the page or region.

Patterns Contained in This Set


Context Switcher Use to enable a user to change the context of a page orregion.

Each available option in a context switcher represents adifferent slice of a data set (for example, appointments fora specific day in a calendar or opportunities in a particularfiscal quarter).

8/10/2019 978007184483X_Web (1)

59/96



List Filter Use to enable a user to refine the information that isdisplayed 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.


ConsiderationContextSwitcher 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 torefine what is displayed in a list?

No Yes No

Do you want to provide the user withthe ability to quickly alternate betweendifferent views of a content region?

No No Yes

Do you want a user to be able to seeall available view options at onceon the page, without having to drilldown or click for this information?

No No Yes

Context SwitcherA context switcher enables a user to view different slices of one homogeneous set ofinformation on a page without leaving the page.

A context switcher is designated by a drop-down arrow icon button that alwaysappears to the right of a page title or a section title.

For example:

Appointments represent one homogeneous set of information. The contextswitcher 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 ofinformation. The context switcher enables a user to view opportunitiesby fiscal quarter. Each fiscal quarter represents one view of that sameinformation.

8/10/2019 978007184483X_Web (1)

60/96


ElementsThe context switcher contains the following elements.


drop-down arrow iconbutton

A button with an image of a downward-pointingarrow on it.

some type of selectionelement

An element that offers the user homogenous optionsto select from, such as a menu that lists fiscal yearquarters, or a calendar that lists days of the month.

Context Switcher ConsiderationsConsiderations for using context switchers:

Avoid using more than one context switcher on the same page becausedoing so makes it difficult for users to track the context that they are in.

Because of performance costs associated with context switchers, considerusing list filters or toggle buttons.

For information about list filters and toggle buttons, see theList Filterpattern andView Togglepattern sections.

Context Switcher Behavior

The view that a user selects from the context switcher controls the set of informationthat 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 currentselection.

The context switcher affects only what appears on the page; it doesnt affect thefunctions of the page tabs or what appears on those pages. For example, the searchfeature on a Search tab searches the information in all page contexts, not only thepresent view.

8/10/2019 978007184483X_Web (1)

61/96


Examples

FIGURE 3-6. A context switcher before a user clicks the drop-down arrow icon button

8/10/2019 978007184483X_Web (1)

62/96


FIGURE 3-7. A context switcher that displays a calendar after a user clicks the drop-downarrow icon button

8/10/2019 978007184483X_Web (1)

63/96


FIGURE 3-8. A context switcher that displays a menu after a user clicks the drop-downarrow icon button

For an example of the context switcher pattern in Oracle Sales Cloud, see theAppendix.

8/10/2019 978007184483X_Web (1)

64/96


List FilterA list filter enables a user to refine the information that is displayed on a page orcontent region.

List Filter ClassificationsList filters in the simplified user interface are classified as either single select ormultiselect. More than one list filter or a combination of list filter types can be usedon a page.

List Filter TypeClassification Description

Specific ListFilter TypeExamples

List FilterTitle Syntax

single-select

list filter

A filter that enables a user to

select a single option fromamong several options. Each ofthe available options in the filterprovides a more focused viewof the larger set of information.The view adjusts as soon as theuser selects an option.

single-select

choice list

multiselect listfilter

A filter that enables a user tocombine options, selecting andremoving multiple options froma series of options to broadenor narrow the information thatis displayed. The view adjustsas soon as the user selects orremoves an option.

filter tiles

List Filter Behavior and ConsiderationsThe 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 onthe 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.

8/10/2019 978007184483X_Web (1)

65/96


Examples

FIGURE 3-9. A single-select choice list displaying several options from which a user canselect only one to filter by

8/10/2019 978007184483X_Web (1)

66/96


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 theAppendix.

View ToggleA view toggle enables a user to alternate between different views of a contentregion. The view toggle provides different views of the same information or differentviews of distinct sets of information.

Examples:

Team member details presented in either grid or list format (different viewsof the same information)

A day, week, or month view of a single calendar (different views of the sameinformation)

8/10/2019 978007184483X_Web (1)

67/96


Different data analytics, such as a headcount pie graph, workforce mobilitybar graph, and workforce events bar graph (different views of distinct sets ofinformation)

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.

ElementsThe view toggle contains the following elements.

Element Name Description View Toggle Label Syntax

button A text button, icon button, orother clickable representation ofthe choices that enables a userto navigate to another view ofinformation.

Varies based on the viewof the information

tooltip A description that appears on ascreen when a user hovers overan icon.

Every icon button in a view togglemust contain a tooltip.

View as a

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, orto 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 bedisplayed on the page, consider using either acontext switcher or list filter.

Avoid using more than one view toggle on a given page because doing so cancause a user to lose context.

View Toggle BehaviorThe available buttons in a view toggle control the information that is displayed inthe 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

8/10/2019 978007184483X_Web (1)

68/96


requested for the use case. To change this view, a user clicks one of the otherbuttons in the view toggle.

Examples

FIGURE 3-11. My Team page that contains toggle buttons that enable the user to viewteam information in grid or list format

8/10/2019 978007184483X_Web (1)

69/96


FIGURE 3-12. Analytics panel content region that contains toggle buttons in the form ofthumbnails that enable the user to view different data analytics

For an example of the view toggle pattern in Oracle HCM Cloud, see theAppendix.

8/10/2019 978007184483X_Web (1)

70/96

APPENDIX

Examples

8/10/2019 978007184483X_Web (1)

71/96


Examples

View Page

FIGURE A-1. View page (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

72/96

Appendix : Examples 61

FIGURE A-2. View page (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

73/96


Action Page

FIGURE A-3. Action page (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

74/96


FIGURE A-4. Action page (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

75/96


Landing Page

FIGURE A-5. Landing page (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

76/96


FIGURE A-6. Landing page (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

77/96


Object Overview Page

FIGURE A-7. Object overview page (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

78/96


FIGURE A-8. Object overview page (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

79/96


Footer

FIGURE A-9. Footer (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

80/96


Header

FIGURE A-10. Header (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

81/96


FIGURE A-11. Header (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

82/96


Page Tab

FIGURE A-12. Page tab (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

83/96


FIGURE A-13. Page tab (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

84/96


Panel Drawer

FIGURE A-14. Panel drawer (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

85/96


FIGURE A-15. Panel drawer (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

86/96


Table

FIGURE A-16. Table, list layout (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

87/96


FIGURE A-17. Table, grid layout (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

88/96


Add a New Object Inline

FIGURE A-18. Add a new object inline (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

89/96


FIGURE A-19. Add a new object inline (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

90/96


Add a New Object on a Separate Page

FIGURE A-20. Add a new object on a separate page (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

91/96


FIGURE A-21. Add a new object on a separate page (Oracle HCM Cloud)

8/10/2019 978007184483X_Web (1)

92/96


Select and Add an Existing Object

FIGURE A-22. Select and add an existing object (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

93/96


Context Switcher

FIGURE A-23. Context switcher (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

94/96


List Filter

FIGURE A-24. Single-select list filter (Oracle Sales Cloud)

8/10/2019 978007184483X_Web (1)

95/96

8/10/2019 978007184483X_Web (1)

96/96


View Toggle

FIGURE A-26. View toggle buttons (Oracle HCM Cloud)

978007184483x_web (1)

Documents

hp laserjet1000h10032. · 3=jbl & 3=jbl ˛ ˘ ˇ˚...

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1...

· xls file · web view2012-04-20 · 1 1 1 1. 1 1 1 1. 1...

klijenttelebet.rs:81/liste/dopuna.pdfengland-premier league...

· xls file · web view2016-06-12 · 1 1 1 1 1 1 1 1 1 1...

la famille dans les relations transfrontalières€¦ · 1...

az-cv english updated to feb 17, 2019 · 2019. 2. 17. · 1...

$1ryho2swlrq &kdswhu $orn6kdupd +hpdqjl6dqh … · 1 1 1 1...

sparta township zoning map · 33333 33333 33333 33333 33333...

singapore’s healthcare financing system · 2018. 10....

ЧЕЛОВЕЧЕСКОЕ РАЗВИТИЕ 1 1 1 1 1 1 1 1 1...

1 ) · 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 ) . 0...

1; ' # '9& *#: & 31 1 1 , 1 1 1 1 1 1 1 1 1 1 1 ¢ ð1 1 1...

1 1 1 , 1 1 ï 1 1 1 1 1 1 1 1 1 1 1 1 1 1 ï 1 1 ñ 1 1 w v

broodmare report 5-11-17 · 2017. 5. 11. · 1 1 1 1 1 1 1...

1 $su vw (g +lwdfkl +hdowkfduh %xvlqhvv 8qlw 1 x ñ 1...

eeeeee e e - ovlej€¦ · 1 1 1 1 eeee ee eeeeee e e 1 1 1...

© 2007 m. tallman. 15 1 1 + 5 1 5 1 5 1 3 1 1 1 1 1 1 1 1 1...

acta de presentaciÓn y apertura de propuestas …€¦ ·...

1 1 1 1 1 1 1 ¢ 1 , ¢ 1 1 1 , 1 1 1 1 ¡ 1 1 1 1 · 1 1 1...