Your SlideShare is downloading. ×
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Simplified user experience_design_patterns_for_the_oracle_applications_cloud_service_v7

190

Published on

UX designs for Oracle HCM and ERP Cloud services

UX designs for Oracle HCM and ERP Cloud services

Published in: Software
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
190
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Oracle Applications User Experience …………………………… Simplified User Experience Design Patterns for the Oracle Applications Cloud Service ……………………………
  • 2. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 2 Oracle ® Simplified User Experience Design Patterns for the Oracle Applications Cloud Service, Release 7 and Later Copyright © 2013, 2014, Oracle and/or its affiliates. All rights reserved. This software and related documentation are provided under a license agreement containing restrictions on use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify, license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means. Reverse engineering, disassembly, or decompilation of this software, unless required by law for interoperability, is prohibited. The information contained herein is subject to change without notice and is not warranted to be error-free. If you find any errors, please report them to us in writing. If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on behalf of the U.S. Government, the following notice is applicable: U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government. This software or hardware is developed for general use in a variety of information management applications. It is not developed or intended for use in any inherently dangerous applications, including applications that may create a risk of personal injury. If you use this software or hardware in dangerous applications, then you shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its safe use. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this software or hardware in dangerous applications. Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners. Intel and Intel Xeon are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are used under license and are trademarks or registered trademarks of SPARC International, Inc. AMD, Opteron, the AMD logo, and the AMD Opteron logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The Open Group. This software or hardware and documentation may provide access to or information on content, products, and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly disclaim all warranties of any kind with respect to third-party content, products, and services. Oracle Corporation and its affiliates will not be responsible for any loss, costs, or damages incurred due to your access to or use of third-party content, products, or services.
  • 3. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 3 Contents Foreword ................................................................................................................................................... 6 Introduction ............................................................................................................................................... 8 Who Should Read This Book.......................................................................................................... 8 How to Use This Book..................................................................................................................... 8 Support .............................................................................................................................................. 9 My Oracle Support ......................................................................................................................... 10 Documentation Accessibility ......................................................................................................... 10 About the OAUX Team.................................................................................................................. 10 Comments and Suggestions......................................................................................................... 11 Page Types............................................................................................................................................. 12 Information Architecture Overview................................................................................................... 13 View Page ........................................................................................................................................... 14 Elements.......................................................................................................................................... 14 Action Page......................................................................................................................................... 16 Elements.......................................................................................................................................... 16 Landing Page...................................................................................................................................... 19 Pattern Set Decision Table ........................................................................................................... 19 Elements.......................................................................................................................................... 19 Object Overview Page....................................................................................................................... 22 Elements.......................................................................................................................................... 22 Components............................................................................................................................................ 24 Footer................................................................................................................................................... 25 Elements.......................................................................................................................................... 25 Footer Component Placement...................................................................................................... 25 Footer Component Behavior......................................................................................................... 25 Header................................................................................................................................................. 27 Elements.......................................................................................................................................... 27 Page Tab............................................................................................................................................. 30 Elements.......................................................................................................................................... 30 Page Tab Component Classification and Placement................................................................ 30
  • 4. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 4 Page Tab Order.............................................................................................................................. 31 Panel Drawer ...................................................................................................................................... 32 Elements.......................................................................................................................................... 32 Panel Drawer Component Behavior............................................................................................ 32 Panel Drawer Tabs ........................................................................................................................ 32 Table .................................................................................................................................................... 35 Table Style Decision Table ........................................................................................................... 35 Table Characteristics..................................................................................................................... 36 Pattern Sets and Patterns..................................................................................................................... 39 Add to Table........................................................................................................................................ 40 Patterns Contained in This Set..................................................................................................... 40 Pattern Set Decision Table ........................................................................................................... 40 Elements.......................................................................................................................................... 41 Add a New Object Inline................................................................................................................ 41 Add a New Object on a Separate Page ...................................................................................... 42 Select and Add an Existing Object............................................................................................... 43 Change View....................................................................................................................................... 45 Patterns Contained in This Set..................................................................................................... 45 Pattern Set Decision Table ........................................................................................................... 45 Context Switcher ................................................................................................................................ 46 Elements.......................................................................................................................................... 46 Context Switcher Considerations................................................................................................. 46 Context Switcher Behavior............................................................................................................ 47 List Filter.............................................................................................................................................. 48 List Filter Classifications................................................................................................................ 48 List Filter Behavior and Considerations ...................................................................................... 48 View Toggle ........................................................................................................................................ 50 Elements.......................................................................................................................................... 50 View Toggle Placement................................................................................................................. 50 View Toggle Behavior.................................................................................................................... 51 Appendix: Examples.............................................................................................................................. 52 Examples............................................................................................................................................. 53
  • 5. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 5 View Page ....................................................................................................................................... 53 Action Page..................................................................................................................................... 53 Landing Page.................................................................................................................................. 54 Object Overview Page................................................................................................................... 54 Footer............................................................................................................................................... 55 Header............................................................................................................................................. 55 Page Tab......................................................................................................................................... 56 Panel Drawer .................................................................................................................................. 56 Table ................................................................................................................................................ 56 Add a New Object Inline................................................................................................................ 57 Add a New Object on a Separate Page ...................................................................................... 58 Select and Add an Existing Object............................................................................................... 58 Context Switcher ............................................................................................................................ 59 List Filter.......................................................................................................................................... 59 View Toggle .................................................................................................................................... 60
  • 6. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 6 Foreword Before I learned user experience design patterns, my users did not love the applications I built. Sometimes they liked them; sometimes they merely accepted them. And I never knew which of the two it was going to be. Developers learn to build screens and write code. That’s what we do and what we’re good at. User experience design is a completely separate skill, and one that most developers do not master. Unfortunately, many applications are being built without the benefit of the specialized knowledge that a user experience expert can bring to the table. In all of these applications, the user experience is determined by a hodgepodge of developers, testers, and project managers. User acceptance is hit or miss—sometimes they like it, sometimes they don’t. And we don’t get any wiser from project to project. In programming, we recognize that there are universal truths; there are some good ways of meeting specific challenges and some not-so- good ways. We have codified this knowledge of what works and what doesn’t into software design patterns—general, reusable solutions to common problems. User experience also has universal truths. And of course, user experience designers have also codified their knowledge into user experience design patterns. Just like in software design, these patterns identify good ways of implementing commonly occurring tasks like searching, browsing or editing data. Now that I have learned user experience design patterns, I can consistently build applications that my users love. And you can, too. Read this book to learn how. Sten Vesterli Oracle ACE Director Oracle User Experience Advocate Website: http://www.adfmastery.com Blog: http://www.vesterli.com/ Twitter: @stenvesterli Sten’s “Technology That Fits” newsletter: http://www.techthatfits.com
  • 7. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 7 So here’s the thing with design patterns. Good design patterns are productivity multipliers. Let me explain. First there is an increase in designer productivity. Rather than re-creating detailed designs from scratch, detailed designed become an exercise in reuse of specific components for recurring situations . . . still an exercise requiring skills and creativity, but a much quicker process than designing from scratch. Second is the increase in user productivity. As we utilize good design patterns, our work products have consistency in the interaction between the user and the product. So even when creating solutions for new use cases, the user interaction (the navigation; the task flows; the overall form, bit, and function) remains consistent. So users are not required to learn a new product, but merely need to understand how to apply our new solution, and a shorter learning curve equals increased productivity (not to mention more successful user acceptance). Oracle’s Applications User Experience team has developed some really good design patterns. I know because I’ve used them in my own work. And I’ve also benefited as a user of Oracle products. So there you have it. Read the book. You’ll see what I mean. Floyd Teter Oracle ACE Director Oracle User Experience Advocate Blog: http://orclville.blogspot.com/ Twitter: @fteter
  • 8. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 8 Introduction Who Should Read This Book This book contains user experience design patterns and guidelines that Oracle uses to build the simplified user interface for its Oracle Cloud Applications, such as Oracle Sales Cloud and Human Capital Management (HCM) Cloud. Oracle customers, partners, and the Oracle Application Development Framework (Oracle ADF) community can use these design patterns and guidelines:  Before a single line of code is written. They can be used for sketches or wireframes during the innovation cycle to expose problems early, increase productivity of application builders, and eliminate costly surprises late in the build cycle.  After code is written. They can be used to customize and extend Oracle Cloud Applications simplified user interface applications and to build other applications and integrations that look and behave like Oracle simplified user interface applications. How to Use This Book This book includes three sections: Page Types, Components, and Pattern Sets and Patterns. The content in these sections includes lists and descriptions of required user interface elements and examples. Depending on your design needs, you may need to reference content in one or more sections. This book also includes an appendix of examples taken from Oracle Sales Cloud and Oracle HCM Cloud. Section Name Description Page Types Oracle ADF templates that allow you to organize components and patterns to provide a particular user experience, optimize a specific functional purpose, and enable productive development. These templates are built to accommodate common requirements that have been identified as industry best practices. They have been tested and proven by real users in our usability labs. Components Oracle ADF user interface elements that provide the user interface building blocks for the design. Component guidelines are broad and can be used in a number of ways in a template or together in a pattern to provide a
  • 9. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 9 Section Name Description solution for a user experience requirement. Pattern Sets and Patterns Reusable combinations of components, assembled together to provide a solution for a typical user experience task. The design guidance in this book is intended for the simplified user experience. Templates, components, and patterns are independent of the visual look and feel (or “skinning”) of an application. They are content neutral and can be adapted to application use cases and user requirements as needed. Support If you have questions about how to use this book or have questions about the content in this book, you can reach us on Twitter: @usableapps. Here are a few resources that you might find useful as you design and build applications:  Oracle Applications User Experience blogs: http://www.oracle.com/webfolder/ux/appl ications/blog/index.html  Oracle Application Developer Framework (Oracle ADF) pages: http://www.oracle.com/technetwork/deve loper-tools/adf/overview/index.html  Oracle ADF Enterprise Methodology Group: An external support forum that discusses best practices for building enterprise applications: https://groups.google.com/forum/#!foru m/adf-methodology You can also enhance your user experience knowledge by attending events, such as webinars, workshops, and seminars that are led worldwide by the Oracle Applications User Experience (OAUX) team. You can find information about upcoming OAUX training events on the Oracle Voice of User Experience blog at https://blogs.oracle.com/VOX/, on the Oracle Usable Apps Blog at https://blogs.oracle.com/usableapps/, or through your Oracle customer and Oracle partner network channels. We do not provide support on learning or using Oracle ADF or developer tools. For more information, see the Oracle JDeveloper site at http://www.oracle.com/technetwork/developer- tools/jdev/overview/index.html, or contact your Oracle ADF or community representative.
  • 10. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 10 My Oracle Support Oracle customers have access to electronic support through My Oracle Support. For information, visit http://www.oracle.com/pls/topic/lookup?ctx= acc&id=info or visit http://www.oracle.com/pls/topic/lookup?ctx= acc&id=trs if you are hearing impaired. Documentation Accessibility For information about Oracle's commitment to accessibility, visit the Oracle Accessibility Program website at http://www.oracle.com/pls/topic/lookup?ctx=ac c&id=docacc. About the OAUX Team The OAUX team provides the science, research, and art that increases Oracle designer and developer productivity and enables them to design and build great-looking usable enterprise applications and user experiences for tablet, smart phone, desktop, and other devices in the cloud that delight, engage, and empower people and their businesses, no matter where or how they work. Through dedicated collaboration and support, the Oracle Applications User Experience team empowers Oracle customers, partners, and the Oracle ADF community to use Oracle technologies and applications to deliver the simplified user interface—a user experience that is simple to use, simple to build, and simple to sell. Learn more about our outreach events and shared resources at www.oracle.com/usableapps.
  • 11. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 11 Comments and Suggestions We’d like to hear about your experiences as you use these design patterns and guidelines to build, customize, extend, and integrate applications. Share your experiences with us on Twitter: @usableapps. Tell us:  Is there something that you’d like us to clarify?  Would you like to see more user interface examples?  Do you need to see sample code or sample applications for analysis?  Do you have an idea for a page type, component, or design pattern?  Does the format of this book align well with your practice of building applications?  What other information would help you build applications productively? You can also share your experiences with us though the Oracle Usable Apps Blog at https://blogs.oracle.com/usableapps/ or through Twitter at @usableapps.
  • 12. Oracle Applications User Experience …………………………… Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page Types ……………………………
  • 13. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 13 Information Architecture Overview Pages in the simplified user interface are classified as either view or action. Whether a page is view or action determines the page type to use and the various activities, links, and elements that are allowed on a page. Figure 1. Relationships among page types
  • 14. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 14 View Page A view page enables a user to view a single main object or multiple related objects or tasks. A single main object is displayed on a single page. Multiple related objects or tasks are displayed on one single page or across a set of page tabs. A view page is not editable. A user opens a view page by:  Clicking a functional area icon button on the springboard.  Clicking a link on a landing page.  Selecting a tab from among a group of tabs on another view page. The page that opens displays a pointer at the top of the page frame to the functional area icon button that was clicked. From a view page, a user can:  Open an object overview or object details page in the simplified user interface  Open an action page in the simplified user interface  Open a page in the desktop user interface Examples of view pages include:  Landing page  Object overview page Elements All view pages include the following elements. To see the lists of elements for each type of view page, see the specific page type document. Element Name Description Page-level title The name of the page. A title is displayed in a header component. See the Header component section. (Optional) Section-level title The name of the sections within a page. A title is displayed in a header component. See the Header component section. 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
  • 15. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 15 Element Name Description edit a complete set of attributes or additional attributes. (Optional) Page tabs One or more navigation elements that are designated by an icon and are displayed on the left side, outside of the page frame, of a view page type or an action page type. Page tabs provide navigation among categories of content within the same functional area. See the Page Tab component section. Examples Figure 2. A view page that displays view-only information and a link Figure 4. A view page that displays view-only information and an icon text button with a punchout icon Figure 3. A view page that displays view-only information and a text button For examples of view pages in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 16. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 16 Action Page An action page is a modal page that enables a user to:  Add or edit a single main object on a single page.  Add or edit multiple related objects or sub-objects that are displayed across a set of page tabs.  Add one or more existing objects to a page. For more information about page tabs, see the Page Tab component section. A user accesses an action page from a view page or another action page. The action page partially or completely overlays the springboard or the underlying page. A user must commit a change or cancel the action to return to the preceding page.  Content that is displayed on an action page can be: Editable Example: A user can add a new object, edit an existing object, or search and select an existing object.  Not editable or that the user is not authorized to edit Examples: o System-defined attributes o Employee ID The action page provides access to no more than two secondary action pages. A secondary action page contains a supplementary task that is directly related to the action page from which it originated. A secondary action page is not a required part of the main task flow. Examples of action pages include:  Edit page  Add page  Search and Select page  Select and Add page Elements An action page contains the following elements. Element Name Description Page-level title The name of the page. A title is displayed in a header component. See the Header component section. (Optional) Section-level title The name of the sections within a page. A title is displayed in a header component. See the Header component section.
  • 17. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 17 Element Name Description One set of these buttons, dependent on the specific action page type:  Edit and Add pages: o Save and Close and Cancel buttons o Save and Close, Cancel, and Submit buttons  Select and Add page: Apply, OK, and Cancel buttons  Search and Select page: OK and Cancel buttons Specific action page types require specific sets of buttons.  Edit and Add pages: o Save and Close button: Commits a change and closes the page. o Cancel button: Closes the page without committing any changes or processing any action. Returns the user to the previous page. o Submit button: Commits a change and triggers a workflow process.  Select and Add page: o Apply button: Adds selected results to a field or table on the page without closing the page. o OK button: Applies any selected results, closes the page, and returns the user to the previous page. o Cancel button: Closes the page without committing any changes or processing any action. Returns the user to the previous page.  Search and Select page: o OK button: Applies any selected results, closes the page, and returns the user to the previous page. o Cancel button: Closes the page without committing any changes or processing any action. Returns the user to the previous page. (Optional) Link, button, or menu item that opens an action page in the simplified user interface or a page in the desktop user interface  A link or button that takes a user to an action page in the simplified user interface where the user can edit or perform another action on a larger set of object attributes.  A button or menu item that contains the punchout icon ( ) that takes the user to the desktop user interface where the user can view or edit a complete set of attributes or additional attributes.
  • 18. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 18 Examples Figure 5. Action page that overlays the springboard Figure 6. Secondary action page that overlays the action page from which it originates For examples of action pages in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 19. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 19 Landing Page A landing page represents a functional area. The focus of a landing page is on either a single object in a functional area or on a group of related objects or tasks in a functional area. When the focus is on a single object, the landing page has no page tabs. When the focus is on a group of related objects or tasks in a functional area, a set of vertically aligned page tabs is used, with each tab designating a separate landing page. For more information about page tabs and considerations for using page tabs, see the Page Tab component section. A landing page is displayed when a user clicks a functional area icon button on the springboard or when a user selects a tab from among a group of tabs on another landing page. Pattern Set Decision Table Consideration Landing Page without Tabs Landing Page with Tabs Does the user’s work revolve around a primary object or business process? Yes No Does the user need to perform small tasks across multiple, related objects or tasks? No Yes Can the information be logically grouped on one landing page? Yes No Elements The landing page contains the following elements. Element Name Description Page-level title The name of the page. A title is displayed in a header component. See the Header component section. (Optional) Section- level title The name of the sections within a page. A title is displayed in a header component. See the Header component section. (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.
  • 20. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 20 Element Name Description See the Page Tab component section. (Optional) Link, button, or menu item that opens a view or an action page in the simplified user interface or a page in the desktop user interface  A link that takes a user to an object overview page in the simplified user interface where the user can view a larger set of object attributes or to an object details page in the simplified user interface where the user can view or edit a larger set of object attributes.  A link or button that takes a user to an action page in the simplified user interface where the user can edit or perform another action on a larger set of object attributes.  A button or menu item that contains the punchout icon ( ) that takes the user to the desktop user interface where the user can view or edit a complete set of attributes or additional attributes. (Optional) Panel drawer A component anchored to the right side of a landing page that provides supplementary actions or content. See the Panel Drawer component section. (Optional) Footer A component that displays supplemental information related to page content that is helpful and of interest to a user but not central to the task at hand. See the Footer component section. Examples Figure 7. A landing page that focuses on a single object: opportunities Figure 8. A group of related objects or tasks within the Performance and Career functional area, each represented by a page tab. In this case, when you select the Career tab, the Career Planning landing page is displayed.
  • 21. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 21 Figure 9. Selecting the Goals tab from the group of tabs within the Performance and Career functional area displays the Goals landing page. For examples of landing pages in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 22. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 22 Object Overview Page An object overview page type is used when there is a lot of information about an object and you want to display only high-level summary information needed frequently by most users. The object overview page is displayed when a user selects an object from among a list of objects on a landing page. The object overview page displays only key information about that particular object but provides access to more details if needed and edit capabilities if the user has been granted edit permissions. Elements The object overview page contains the following elements. Element Name Description Page-level title The name of the page. A title is displayed in a header component. See the Header component section. (Optional) Section-level title The name of the sections within a page. A title is displayed in a header component. See the Header component section. 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.
  • 23. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 23 Examples Figure 10. Selecting an object on a landing page opens the object overview page, where a user can view key information about the selected object or click an Edit button to open to an action page and edit object details. Figure 11. The Directory page and one of its object overview pages For examples of object overview pages in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 24. Oracle Applications User Experience …………………………… Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Components ……………………………
  • 25. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 25 Footer A footer component displays supplemental information related to page content that is helpful and of interest to a user but not central to the task at hand. When this optional component is used, it is displayed only on landing and object overview pages. Elements The footer component does not have any required elements. All fields included must be noneditable, although links to relevant information may be included. The footer can be divided into sections. Footer Component Placement A footer component always spans the bottom of a landing or object overview page, taking up no more than 25 percent of the page. Footer content should not scroll. Footer Component Behavior When a footer component is used, the information in the footer can be:  Static: The information in the footer does not change.  Dynamic: The information in the footer changes based on a user’s selection in the page-level context switcher component. When a page-level context switcher component is used, the footer can:  Change its content to reflect the selected context  Retain its content across selected contexts  Display or hide, depending on the selected context
  • 26. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 26 Example Figure 12. A footer, displaying information about the currently selected content switcher view For an example of the footer component in Oracle Sales Cloud, see the Appendix.
  • 27. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 27 Header A header component is used to name pages and sections within pages. Headers appear at two levels: 1. Page level: Every page must contain a header. 2. Section level: If a page is divided into sections, each section must contain a noncollapsible header. However, if a section directly follows the page title and contains information applicable to the overall object, a header at that section level is not required. All page header titles:  Use headline case  Use header title truncation as needed Elements The header component can contain the following elements. The header title syntax is informed by the page type. Element Name Page Type Classification: Specific Page Type Header Title Description and Syntax Page-level title View page: landing page There are two syntax options:  If the landing page contains no tabs: <Functional Area Name> Example: Team Talent  If the landing page contains tabs: <Functional Area Object or Task Name> For example, in the Personal Information functional area, the tabs are named as follows: My Details Benefits Pay Compensation View page: object overview page There are two syntax options:  If the object of the object overview page is
  • 28. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 28 Element Name Page Type Classification: Specific Page Type Header Title Description and Syntax 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
  • 29. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 29 Element Name Page Type Classification: Specific Page Type Header Title Description and Syntax Section-level title  View page  Action page A section-level title should describe the content in the section. Examples:  Contact Points  Address Context switcher  View page  Action page A context switcher enables a user to view different subsets of one homogeneous set of information in a page header or section header. See the Context Switcher pattern section. Toolbar  View page  Action page  A toolbar that aligns with a page title is always displayed flush-right, opposite of the page title. This toolbar contains buttons that initiate section-level actions.  A toolbar that aligns with a section title is displayed to the right of the section title. This toolbar contains buttons that control the content in that section. Examples Figure 13. A view page that displays a page title and context switcher Figure 14. An action page the displays a page title with a toolbar and two section titles, each with its own toolbar For examples of the header component in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 30. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 30 Page Tab A page tab is a navigation element that is used to divide pages into multiple sections, categorize content, and provide navigation among categories of content. A page tab is designated by an icon and can be displayed on view and action page types. However, not all view or action pages require tabs even if their originating pages have tabs. Tab content should not be repeated across tabs in the same set of tabs. For more information about page types, see the Information Architecture Overview section. Elements A page tab contains the following elements. 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 Maximum Allowable Quantity of Tabs Page Tab Name Syntax Page Tab Tooltip Syntax View page Primary On the left, outside of the page frame 5 <Tab Name> <Tab Name> Example: Career Planning Action page Secondary On the left, inside of the page frame 10 <Action><Object Type>: <Object Name>: <Tab Name> <Tab Name> Edit Contact: Aaron Simpson: Leads
  • 31. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 31 Page Tab Order Order page tabs on both page types according to these guidelines:  Place tabs containing important information higher in stacked order.  Place a tab containing summary information or information that informs a decision that a user must make on the first tab in the stack.  Place tabs that contain frequently accessed information higher in the stack order.  Place tabs containing sensitive information, such as compensation information, lower in the tab order, even if the content is actionable or requires the user to make a decision.  Place tabs that contain content that is slow to load, lower in the stack order. The longer it takes for content on a tab to load, the lower the tab should be placed in stack order. If multiple considerations apply, determine which is more important for your use case. Examples Figure 15. Primary page tabs on a view page Figure 16. Secondary page tabs on an action page For examples of the page tab component in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 32. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 32 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. 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. 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. See the Header component section. Panel Drawer Component Behavior When a landing page contains both page tabs and a panel drawer, the panel drawer content can be contextual to each tab of the landing page or can apply to all tabs in the functional area. Panel Drawer Tabs A panel drawer can contain any of the following panel tabs, in this order. The panel tab order remains fixed even when fewer than three tabs are needed. Tab Name Icon Description Search The Search tab content comprises: 1. A search field When the search tab opens, the search results section should contain the following string: “No search conducted.” 2. A search button 3. A list of search results o Search results are displayed in a table below the search box.
  • 33. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 33 Tab Name Icon Description o If the search results include a search result found in the desktop user interface, the punchout icon ( ) should be displayed next to the link. Search results that take a user to the desktop user interface should occur infrequently. If search results that link to the desktop user interface are displayed frequently, consult your user experience team. If no search results are found, the following text string should be displayed in the results section: “No results found.” If additional descriptive text is needed for the use case, work with your user experience team to determine the appropriate message. Actions The Actions tab content comprises either one or both of the following sections, always in this order:  Actions  Related Links Each section can contain links to frequent transactions in the simplified user interface and the desktop user interface. The punchout icon ( ) should be displayed next to each external link to the desktop user interface.  The links that are displayed in the Actions section take the user to a location where the user is expected to perform an action.  The links that are displayed in the Related Links section take the user to a location where no action is assumed. The location might only contain information that the user views. The punchout icon ( ) should be displayed next to each external link to the desktop user interface. Analytics The Analytics tab content comprises no more than 10 data analytics (for example, graphs). If more than one data analytic is displayed, an affordance for switching among the figures is required.
  • 34. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 34 Examples Figure 17. A closed panel drawer Figure 19. An open Actions panel tab on a panel drawer Figure 18. An open Search panel tab on a panel drawer Figure 20. An open Analytics panel tab on a panel drawer For examples of the panel drawer component in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 35. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 35 Table A table is a component that is used to organize and display a large quantity of content. A table enables a user to view or to interact with content. A table contains one or more columns and rows. The simplified user interface supports the following table styles:  Standard table using a list layout  Standard table using a grid layout  Paragraph table Table Style Decision Table Consideration Standard Table Using a List Layout Standard Table Using a Grid Layout Paragraph Table Does the user need high- level details displayed in numerous rows and columns rather than extensive details about the content in each row? Yes No No Does the user need to view information about the one object in a row where the object’s related attributes are separated into columns? Yes No No Does the user need to be able to sort on each column? Yes No No Does the user need to view information about multiple related objects in single row? No Yes No Does the user need extensive contextual details about particular items in a table (even when it means displaying fewer rows) in order to increase the chance of the user finding the object he is seeking? No No Yes
  • 36. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 36 Consideration Standard Table Using a List Layout Standard Table Using a Grid Layout Paragraph Table Does the user need to be able to interact with the row, for example, to enter a quantity? No No Yes Table Characteristics The following table lists the general table characteristics that apply to each table style. Characteristics Standard Table Using a List Layout Standard Table Using a Grid Layout Paragraph Table One object per column and row Yes No No One or more objects per row No Yes Yes Table title No No No Column headers Yes No No List filter No Yes Yes View toggle buttons Provide list and grid views No Yes Yes Sort Cannot be case sensitive Yes Sorting can be enabled on columns and is designated by a down arrow icon button in the column header. Yes Sorting can be enabled at the row level and is designated by a choice list above the table. Yes Sorting can be enabled at the row level and is designated by a choice list above the table. Links Can be used in any column or row as needed. Links take the users to more details about the linked object. These object details may or may not be editable. Yes Yes Yes Additional row-level actions An icon, text button, or icon button is used to indicate that more row-specific actions are available. Yes Yes Yes Scroll bar Yes Yes Yes
  • 37. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 37 Characteristics Standard Table Using a List Layout Standard Table Using a Grid Layout Paragraph Table A vertical scroll bar in a table is allowed; a horizontal scroll bar in a table is not allowed. Personalization Only an administrator can can rearrange, show or hide, or add or delete columns. No No No Emphasis Two font sizes can be used in a table to emphasize content:  A larger font is used to identify a primary column that contains the most important content in the table.  A smaller font is used to identfiy secondary columns and support content. The content in any one of these secondary or supporting columns can be set apart from the other columns or emphasized by setting all of the content in that column in bold. Yes Yes Yes Interactions Limited to standard actions, such as view, create, and add. These actions are designated by links, text buttons, and icon buttons. Actions that affect the entire table appear above the table; actions that affect a particular row appear within that row. A user cannot right-click content in a row and take an action. Yes Yes Yes Truncation Should be set to “on” for all content in all columns so that if content exceeds the space alloted, the content will truncate and be followed by ellipsis points (three points, with one space between each point: . . . ). Full text should be displayed on hover. Yes Yes Yes
  • 38. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 38 Examples Figure 21. Standard table, using a list layout Figure 23. Paragraph table Figure 22. Standard table, using a grid layout For examples of the table component in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 39. Oracle Applications User Experience …………………………… Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Pattern Sets and Patterns ……………………………
  • 40. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 40 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. Pattern Set Decision Table Consideration Add a New Object Inline Add a New Object on a Separate Page Select and Add an Existing Object Does all of the information that is required to add a new object fit within one table row using the table columns in view? Yes No No Does all of the information that is required to add a new object result in more attributes than can appear in one table row using the table columns in view? No Yes No Does the object that you need to add to your table already exist? No No Yes
  • 41. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 41 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 Add a New Object Inline Use the Add a New Object Inline pattern to enable a user to add a new object to a table when all of the attributes that are required to create the component can fit in one table row using the columns in view. In this pattern, when the user clicks an Add button that appears above the table, a new blank row appears at the top of the table, where the user can enter information for the new object.
  • 42. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 42 Example Figure 24. Clicking the Add button on the Edit Opportunity page adds a new row at the top of the table, where the user can enter information about the newly added revenue item for this opportunity. For examples of the add a new object inline pattern in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix. Add a New Object on a Separate Page Use the Add a New Object on a Separate Page pattern to enable a user to add a new object to a table when the object’s attributes are too numerous to appear inline in one table row using the columns in view, or when additional editing capabilities are needed. In this pattern, the user clicks the Add button located above the table and a new page appears. The user completes the required fields on the new page, clicks the Save and Close button to close the new page. A new row appears as the top row of the initial table.
  • 43. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 43 Examples Figure 25. Clicking the Add Interaction button opens a new page, where the user can enter information about the newly added interaction. Figure 26. The Add Interaction page, where the user can enter a new interaction for this contact. For examples of the add a new object on a separate page pattern in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix. Select and Add an Existing Object Use the Select and Add an Existing Object pattern to enable a user to search for and select an existing object to add to the table. In this pattern, when the user clicks an Add button above the table, a new page appears on which the user can search for an existing object. When the user enters search criteria at the top of the page and clicks Search, one or more objects with matching attributes appear in the Search Results section below. The user must select an object and click Apply to add the object to the table on the previous page. If an object does not yet exist, a user can create an object by clicking the Create button in the Search Results header toolbar.
  • 44. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 44 Examples Figure 27. Clicking the Add Team Members button opens a new page, where the user can search for, select, and add one or more existing team members to this opportunity. Figure 28. The Add Team Members page, where a user can search for, select, and add one or more existing team members to this opportunity. For an example of the select and add an existing object pattern in Oracle Sales Cloud, see the Appendix.
  • 45. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 45 Change View Use the patterns in the Change View pattern set to enable a user to quickly change the content of a page or region without leaving the page or region. Patterns Contained in This Set Pattern Name Description Context Switcher Use to enable a user to change the context of a page or region. Each available option in a context switcher represents a different slice of a data set (for example, appointments for a specific day in a calendar or opportunities in a particular fiscal quarter). List Filter Use to enable a user to refine the information that is displayed in a list on a page or content region. List filters can be single select or multiselect. View Toggle Use to enable a user to alternate between different views of a content region. Pattern Set Decision Table Consideration Context Switcher List Filter View Toggle Do you want to present different slices of a data set? Yes No No Do you want to enable a user to refine what is displayed in a list? No Yes No Do you want to provide the user with the ability to quickly alternate between different views of a content region? No No Yes Do you want a user to be able to see all available view options at once on the page, without having to drill down or click for this information? No No Yes
  • 46. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 46 Context Switcher A context switcher enables a user to view different slices of one homogeneous set of information on a page without leaving the page. A context switcher is designated by a drop-down arrow icon button that always appears to the right of a page title or a section title. For example:  Appointments represent one homogeneous set of information. The context switcher provides a calendar that enables a user to view a slice of that information, for example, appointments for a specific day.  All opportunities for an organization represent one homogeneous set of information. The context switcher enables a user to view opportunities by fiscal quarter. Each fiscal quarter represents one view of that same information. Elements The context switcher contains the following elements. 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.
  • 47. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 47 Context Switcher Behavior The view that a user selects from the context switcher controls the set of information that is displayed on the page. When the context switcher is:  Open: A user can select from a set of mutually exclusive options.  Closed: A user views information on the page in context of the current selection. The context switcher affects only what appears on the page; it doesn’t affect the functions of the page tabs or what appears on those pages. For example, the search feature on a Search tab searches the information in all page contexts, not only the present view. Examples Figure 29. A context switcher before a user clicks the drop-down arrow icon button Figure 31. A context switcher that displays a menu after a user clicks the drop-down arrow icon button Figure 30. A context switcher that displays a calendar after a user clicks the drop-down arrow icon button For an example of the context switcher pattern in Oracle Sales Cloud, see the Appendix.
  • 48. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 48 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.
  • 49. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 49 Examples Figure 32. A single-select choice list displaying several options from which a user can select only one to filter by Figure 33. Filter tiles, including a list accessed by clicking an overflow icon button, displaying numerous options from which a user can select or remove from the list filter as many as needed For examples of the list filter pattern in Oracle Sales Cloud and Oracle HCM Cloud, see the Appendix.
  • 50. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 50 View Toggle A view toggle enables a user to alternate between different views of a content region. The view toggle provides different views of the same information or different views of distinct sets of information. Examples:  Team member details presented in either grid or list format (different views of the same information)  A day, week, or month view of a single calendar (different views of the same information)  Different data analytics, such as a headcount pie graph, workforce mobility bar graph, and workforce events bar graph (different views of distinct sets of information) A view toggle is designated by a series of buttons that are displayed side by side, adjacent to the affected region. Each button in a view toggle represents a different view. Elements The view toggle contains the following elements. Element Name Description View Toggle Label Syntax button A text button, icon button, or other clickable representation of the choices that enables a user to navigate to another view of information. Varies based on the view of the information tooltip A description that appears on a screen when a user hovers over an icon. Every icon button in a view toggle must contain a tooltip. View as a <View Type> Examples include:  View as a List  View as a Grid View Toggle Placement Place a view toggle directly adjacent to the content that it affects: above, below, or to the left or right. Ideally, all buttons in a view toggle are displayed on the page, without scrolling or an overflow option. If you have more toggle buttons than can be displayed on the page, consider using either a context switcher or list filter. Avoid using more than one view toggle on a given page because doing so can cause a user to lose context.
  • 51. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 51 View Toggle Behavior The available buttons in a view toggle control the information that is displayed in the content region that is associated with the view toggle. When a user opens a page, the information that is displayed in a content region that contains a view toggle should align with the toggle view most frequently requested for the use case. To change this view, a user clicks one of the other buttons in the view toggle. Examples Figure 34. My Team page that contains toggle buttons that enable the user to view team information in grid or list format Figure 35. Analytics panel content region that contains toggle buttons in the form of thumbnails that enable the user to view different data analytics For an example of the view toggle pattern in Oracle HCM Cloud, see the Appendix.
  • 52. Oracle Applications User Experience …………………………… Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Appendix: Examples ……………………………
  • 53. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 53 Examples View Page Figure 36. View page (Oracle Sales Cloud) Figure 37. View page (Oracle HCM Cloud) Action Page Figure 38. Action page (Oracle Sales Cloud) Figure 39. Action page (Oracle HCM Cloud)
  • 54. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 54 Landing Page Figure 40. Landing page (Oracle Sales Cloud) Figure 41. Landing page (Oracle HCM Cloud) Object Overview Page Figure 42. Object overview page (Oracle Sales Cloud) Figure 43. Object overview page (Oracle HCM Cloud)
  • 55. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 55 Footer Figure 44. Footer (Oracle Sales Cloud) Header Figure 45. Header (Oracle Sales Cloud) Figure 46. Header (Oracle HCM Cloud)
  • 56. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 56 Page Tab Figure 47. Page tab (Oracle Sales Cloud) Figure 48. Page tab (Oracle HCM Cloud) Panel Drawer Figure 49. Panel drawer (Oracle Sales Cloud) Figure 50. Panel drawer (Oracle HCM Cloud) Table Figure 51. Table, list layout (Oracle Sales Cloud) Figure 52. Table, grid layout (Oracle HCM Cloud)
  • 57. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 57 Add a New Object Inline Figure 53. Add a new object inline (Oracle Sales Cloud) Figure 54. Add a new object inline (Oracle HCM Cloud)
  • 58. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 58 Add a New Object on a Separate Page Figure 55. Add a new object on a separate page (Oracle Sales Cloud) Figure 56. Add a new object on a separate page (Oracle HCM Cloud) Select and Add an Existing Object Figure 57. Select and add an existing object (Oracle Sales Cloud)
  • 59. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 59 Context Switcher Figure 58. Context switcher (Oracle Sales Cloud) List Filter Figure 59. Single-select list filter (Oracle Sales Cloud) Figure 60. Multiselect list filter (Oracle HCM Cloud)
  • 60. Simplified User Experience Design Patterns for the Oracle Applications Cloud Service Page 60 View Toggle Figure 61. View toggle buttons (Oracle HCM Cloud)

×