last Update: October 25, 2022

Platform: Web & Mobile

Designer: Hopkins, Paul

Intro

The Quick Card can be thought of as a mini people profile. It provides key information about an employee, such as contact information and summary-level job information. It also gives the user using it (providing the requisite permissions are in place) the ability to trigger actions related to the employee or to go to specific sections of the employee's profile.

These are two versions of the Quick Card from the SF Web Stencils library in Figma.

Usage

A typical use case is to show the Quick Card as a (non-modal) pop-up when the user hovers over the name of an employee elsewhere in the system, for example in a list report. One example is the Search function in the Shell Bar: if I hover over an entry in the results list after entering a search term, the Quick Card is displayed to the left or to the right of the entry. This will then help me to determine whether I have found the right "Thomas Müller" or "John Smith".

• You want to display a concise overview of an employee
• You want to provide information in a way other than displaying it in groups.
• You want to display complex information about an employee.

Structure & Components

The Quick Card is structured as follows, from top to bottom:

• avatar
• name (typically the General Display Name, sometimes also the username)
• pronouns (if maintained)
• contact telephone number
• contact eMail address
• ability to start MS Teams chat (coming with 2305)
• used for example if the employee is currently on leave of absence or out of office
• in most cases, there will only be one set of information here, relating to the current job:
  - job title
  - location
  - manager
• in GA/CE cases, host and home assignments / all current concurrent assignments are shown. The Object Status control is used to structure this section, calling out which sets of information relate to which employment.
• if the employee is a manager, the number of direct reports and/or the overall team size is shown, as is a link to the Org Chart
• As mentioned in the intro section, these buttons reveal a list of further options when pressed.
  - In the case of "Actions", the further options correspond to the "Take Action" entries from the People Profile header (for which the user is permissioned).
  - In the case of "Go To", the further actions correspond to the sections of the People Profile to which the user has access. Clicking a "Go To" link navigates to the appropriate section in the People Profile.

Behavior & Interaction

• The employee name is shown as a link, and if clicked, links to the employee's People Profile.
• The eMail address is clickable and if clicked, will open an empty mail window to create a new mail to the person shown.
• The manager's name is shown as a link, and if clicked, navigates to the manager's People Profile.
• The Org Chart icon is clickable and navigates to the Org Chart module.
• The "Actions" and "Go To" buttons are clickable and display a list of appropriate actions / destinations in a panel at the bottom of the card. The elements in this list are all links, and either lead to specific actions being triggered, or to the navigation away from the Quick Card to specific areas of the employee's People Profile.

Looging in to the SuccessFactors the system recognizes what is your roll in the organisation. Depending on that the system will give you certain view rights on the card. (employee view , manager view)

Responsiveness and Adaptiveness

The Quick Card behaves responsive and responds to different width requirements.

Types

Application-specific examples

The Quick Card can be and is used in all areas of the HXM suite.

One example is the display of the Quick Card when hovering over an entry in the results list after search for a person in the (people and action) search:

Another example is the use in the Org Chart:

or at the Employee Directory:

and many other examples. It is often used in lists, and often as a popup after clicking on a user presented in the User Preview.

Accessibility

There are a number of accessibility issues with the Quick Card:

• it is often activated on hover only. In order to be accessible, the trigger needs to be on activation (mouse click, tap, Enter). So if your application uses the Quick Card, please ensure that it is invoked via space / Enter, e.g. by enabling the user to focus on the name of the person and hit space / Enter.
• it does not have a Close button
• the colour contrast of white text against orange background for the "Critical Status" element is 3.29 and therefore below the requirement of 4.5:1 (for Normal Text)
• a popover should only be displaying a small amount of tertiary information

Given these issues, please get in touch with @Hopkins, Paul if you are planning to

use the Quick Card in your designs.

Abstract

Brief summary of employee data for use as a popover

Resources

SF Quick Card Component

https://www.figma.com/file/Hqh91BI6D43Ie4pVBBvrHN/SF-Web-Stencils---Horizon?node-id=2347%3A97028

Teams Entry on Quick Card (coming with 2305):

https://www.figma.com/file/HHfF0hIKf9xqK85BSwoIlv/Teams-Entry-on-Quick-Card?node-id=0%3A1

Quick Card in the Github:

https://github.wdf.sap.corp/pages/xweb/quickcard/iframe.html?id=quickcard-popover--basic&viewMode=story

https://github.wdf.sap.corp/pages/xweb/common-components/