ORACLE CORPORATION PeopleSoft Fluid Icon Standards Fluid User Experience November 2015
PeopleSoft Fluid Icon Standards Copyright 2015, 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, then 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 about 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 unless otherwise set forth in an applicable agreement between you and Oracle. 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, except as set forth in an applicable agreement between you and Oracle. 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=acc&id=docacc. Access to Oracle Support Oracle customers that have purchased support 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. Disclaimer The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle s products remains at the sole discretion of Oracle. 2
Fluid Icon Standards 1 Overview 4 Icon Usage 4 Icons in a Banner 4 Icons in a Home Page Tile 5 Icons in a Navigation Bar 5 Icons in a Left Panel 6 Icons in Detailed Content 7 Content Area and Application Header 7 Icons on a Button 12 Icon Sizing 12 3
Overview Icons may be used in various places throughout fluid applications. This documentation discusses the use of icons and specifications for their use. Note that all fluid icons are created in the Scalable Vector Graphics (SVG) format. Icon Usage Whether or not an icon should be used will depend largely on where it will be used. Icons may be actionable (hotspots) clicking or tapping on such icons will perform some action, or may be purely visual for the purpose of drawing attention. The style, color, and size of an icon will depend on its use and the form factor on which it will be rendered. In some instances, a specific icon size may be used in a form factor, but the size will automatically scale up or down for different form factors. This section describes the use of icons in the following parts of a fluid application: Banner Home Page Tile Navigation Bar Left Panel Detailed Content Button Icons in a Banner The highlighted icons in the following example show the icons used in a banner. Banner icons are PeopleTools images and they are actionable buttons. Specifications Color: White Size: 25x25 pixels Type: Flat 4
Example Figure 1: Example of banner icons Icons in a Home Page Tile In general, Homepage tile icons are not hotspots. Use a single icon in a Homepage tile when there is minimal or no live data to be displayed. Refer to the Homepage Tiles Standards for details about when the icon can be a hotspot. Specifications If an icon is used in a Homepage tile, the following format should be used for the icon: Color: Multi-colored Size: 80x80 pixels for non-small form factor. It will be scaled to 48x48 pixels for the small form factor. (When requesting a new icon, request 80x80 pixels.) Type: Flat Example Figure 2: Example of Homepage tile icons Icons in a Navigation Bar Icons used in the navigation bar (NavBar) are not hotspots. The same icon used for the corresponding application tile should be used for the NavBar. Use the default static image for the tile when the tile itself does not show the image but displays live data. However, it should be a smaller size: 48x48 pixels. 5
Specifications Color: Multi-colored Size: 80x80 pixels (however, it will be scaled down to 48x48 pixels for the NavBar). (When requesting a new icon, request 80x80 pixels.) Type: Flat Example Figure 3: Example of NavBar icons Icons in a Left Panel Icons used in the left panel are not hotspots. For guidelines about using icons in the left panel, see the Panel Layout Standards, Left Panel Icons and Counts section. Specifications Color: Multi-colored Size: 24x24 pixels on small form factor. It will scale down to 20x20 pixels on non-small form factors because of padding in the left panel. (When requesting a new icon, request 24x24 pixels.) Type: Flat 6
Example Figure 4: Example of icons in the left panel Icons in Detailed Content This section discusses icons in the content area and application header as well as actionable icons and provides examples. Content Area and Application Header Important elements in a content area or an application header can be called out using icons. These icons are not hotspots. As a general rule, these icons should be followed with text that explains the meaning of the icon. Specifications Size: 16x16 pixels Color: Monotone gray unless the information is urgent or needs immediate user attention; in this case, use a colored icon. Type: Flat Actionable or hotspot icons may be used on a transaction page. Any icons that are not part of a button but are actionable or tappable should be colored and should have a 3D look. These icons do not need to be followed by text that explains the meaning of the icon. 7
Specifications Size: 16x16 pixels Color: Colored Type: 3D This example shows icons on a page: Figure 5: Example of icon with explanatory text (Pending) on a page This example shows icons in the content panel of a two-panel layout: 8
Figure 6: Example of icons in content panel of a page This example shows an icon in the application header: Figure 7: Example of icon in the application header of a page 9
This example shows a red warning icon on a detail content page that draws attention to urgent or important information: Figure 8: Example of warning icon on detail content page This example shows an actionable 3D icon for Related Actions: Figure 9: Example of an actionable icon for Related Actions This example shows NavBar icons and an actionable Related Actions icon: 10
Figure 10: Example of NavBar and Related Actions icons This example shows a hotspot (3D Information icon) that when tapped brings up a message box displaying more information: Figure 11: Example of a hotspot information icon This example shows the 3D hotspot Favorites icon that adds or removes the person from your favorites when tapped: 11
Figure 12: Example of hotspot Favorites icon Icons on a Button Buttons with an icon can have only an icon or can have an icon with text. Refer to the Button Standards for details. Specifications Size: 16x16 pixels Color: Monotone gray Type: Flat Examples This example shows image buttons (icon only): This example shows a button with both an icon and text: Icon Sizing This chart shows the scaling of icons: 12
Figure 13: Scaling of icons 13