Last Update: March 06, 2024
Platform: Web & Mobile
Designer: Koplunik, Ewgenij
Intro
The Orgchart offers you an overview of the hierarchical structures of your company. It shows all internal employees with the status active with basic information. Filters are available for the org chart and you can search for employees as well as navigate and zoom within the tree structure. You can also export the entire or a filtered version of the Orgchart in various formats.
Usage
Org Chart for Web and Org Chart for Mobile are used to represent the visualization of reporting structures within an organization.
Types
Orgchart for Web is available in two flavors: the Standard mode and the Focused mode.
The Standard mode is the traditional representation of a chart structure, also known as 'tree structure', where expanding cards are shown in a relationship with their connected counterparts, illustrated via a connection line. This view is more common for visualizing organizational charts.
An example of the Standard Mode
The Focused mode is a simplified and streamlined visualization of an org chart, where only one person at a time is in focus, and the org chart only displays people who this person reports to and who report to this person (thus, without showing any relationships outside this area). The Focused mode is reminiscent of the mobile and version of the Org Chart in that way.
Example of the Focuse Mode
Structure & Components
Org Chart consists of the chart structure (cards) and the element that has replaced the Quick Card previously used. This element is the Side Panel.
The side panel appears when the user clicks on the corresponding icon on the card. Side panel presents an extended portion of information about the selected person.
Cards and the side panel (open on the right).
The side panel also serves as a quick way to reach the selected user's Employee Spotlight or People Profile (PPX).
Behavior & Interaction
Clicking on cards, the user explores the Org Chart.
One additional benefit of the redesigned Org Chart is that the user can trigger the Side Panel for any person on the chart, without the need to clicking their card itself (and thus revealing the reporting line).
Responsiveness & Adaptiveness
Org Chart for Web support responsive layout. In addition, the user may choose to use one of the native applications (iOS and Android).
Application-specific examples
UX Writing Guidance
Please refer to UA on this topic (contact: Erik Yao).
OC Card:
- The card’s width is restricted to 344.
- Minimum height: 112.
- Strings for name and job title allow for max 2 lines (wrapped) before they are truncated.
The following links point to:
- a chapters in the Frontify UX Guideline for additional information: About UX Writing
- the page: SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite
For questions to the UA Team, please use the following DL:
Accessibility
Please find detail information about A11y annotations with the link below.
Resources
Link to specifications on Figma: https://www.figma.com/file/RIJ292XlWZjrCxnzAVTur0/OrgChart-2023---Specs-and-Mechanics?type=design&node-id=1%3A13130&mode=design&t=mCKcOLfwOXLWrbdm-1
Please keep in mind that this file is partly work in progress, since the OC project is still developing. Be mindful of interacting with the pages denoted as WiP.
SF Web Stencils Horizon Template