Last Update: Jan 14, 2021

Platform: Web

Designer: Nedda Ren

Intro

The Goal Card is a card to show the most important fields of a single performance or development goal. It will show the goal name/due date/completion/status/linked information in an organized way of different priorities. User can easily get the current goal tracking information from goal card, and can easily focus on the on track/behind goals.

The Goal Card is designed based on b1911 CPM Activity Card. Because Goals and CPM are both Talent modules. We want to share the same experience. The Goal Card has different fields than Activity Cards, but we share the same pattern.

According to the alignment with CPM activity card, we decide to remove the status indicator bar on goal card from release b2111. The change has been updated to this document.

The Goal Card pattern has not yet been finalized. In B2105 there will be cascading information on the goal card. The current version has been released into ui5-web component library.

Usage

You need to show a summary key info with the most important fields of a business object like: Goal, Activity.
The fields/data have different priorities.
The Title/info are short and easy to read.
You need to show a list of info.
You have many fields to show and no priority for the fields.

Structure & Components

No Scrolling for goal card. The Goal Name (title) is limited to 2 lines and show “…”, with full name as tooltip.

Behavior & Interaction

Goal status colors are configured by admin/company

User can click the card to go to Goal Detail page.

For screen reader users, they can use Tab to select and focus on the Title + Sub Title, press Enter will go to Goal Detail page.

User can click Tab to select and focus on the Title + Sub Title, press Enter will go to Goal Detail Page.

User can click Tab to select and focus on the Action button, press Enter will show the Action Menu of goal actions popover.

User can click Tab to select and focus on the Goal Status, press Enter will show the status popover.

User can click Tab to select and focus on the completion progress, the screen reader will read the current completion: {x}.

User can click Tab to select and focus on the icon + numbers (Linked Information), the screen reader will read the linked information, for example: Achievement count: {x}; Activity count: {x}; Learning resource count: {x}; Competency count: {x}.

Please follow the Web Accessibility QuickGuide

The Goal Title and Due date are mandatory fields. For status/completion/linked information, if they are empty, will hide the elements.