Last Update: March 08, 2024
Platform: Web, Mobile
Designers: Sharosh Rajasekher, Dasha Kalacheva
Intro
The Attribute Card Container is a dedicated space for displaying a user's Attribute data( Skills, Competencies, and Custom Attributes). Each Attribute card within this container is designed with essential elements:
- Name: Name of the attribute.
- Type: Specifies the category or type of the attribute(Skill, Competency, Custom Attributes).
- Tags(Optional): Offers additional metadata or descriptors for organizations to differentiate the attribute currently supporting “Core” & “Critical”.
- Development Goal Indicator (Optional): Highlights whether the attribute is linked with the user's development goals, aiding in prioritization and focus.
- Heart Icon - Interactive: Users can mark attributes as favorites or express affinity, enhancing personalization and engagement.
- Proficiency Level Indicator: Visualizes the user's proficiency level in the attribute, enabling quick assessment and tracking progress.
- Action Button to Edit Proficiency: Provides a convenient way for users to modify and update their proficiency level, ensuring accuracy and relevance.
By integrating these elements into the Attribute Card Container, users can effectively manage and optimize their skill sets, competencies, and custom attributes, empowering them to pursue their professional and personal development goals with clarity and efficiency.
Attribute Card - View and Edit Mode
Attribute card as shown in Growth Portfolio
Usage
Use the attribute card if:
- You need to show a summary key info of the attribute data in your module.
- You need to show progressive data as a key data element in the container.
- In-place view and edit content.
Do not use the attribute card if:
- You need to show multiple data points ex: Proficiency details,
- You have many fields to show and no priority for the fields.
Types
- Attribute Card - Default
Attribute Card View and Edit Mode
2. Attribute Card without Proficiency Data
Screenshot 2024-04-05 at 3.57.07 PM
Structure & Components
Height is undefined
Depending on the slot filled by the module, the card height may be different from what’s shown on spec.
Whatever slot height is determined by the module will be the fixed height across all cards on the page in order to maintain a grid or carousel layout.
Behavior & Interaction
Lore Ipsum
Responsiveness & Adaptiveness
Lore Ipsum
Application-specific examples
Example: Swim lane of skill cards on a module landing page
UX Writing Guidance
When creating a title and content for a skill card:
- Keep the card title short and crisp, it can´t exceed one line in length.
- Use 3 lines of content maximum. Don´t overload the card with content.
- For more content use the functionality "Full Description"
- Don´t use abbreviations.
- Don't use synonyms.
- Write titles in headline style.
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
Slider for Skill Card:
- Before PL does not reach the level of expected Progress Bar stays blue.
- When PL reach the expected the progress bar color turns green.
- After Expected level the progress bar color stay always green.
Slider Journey
Components:
Foundation
Components used for a cards in read-only and edit mode.
Screen Reading
Reading Order for read-only and edit mode
Keyboard Support
Keyboard Support for read-only and edit mode
Visual Design : Text Resizing and Text Spacing
Should increase 200% of original font size:
- Font size 14 > 28
- Font size 16 > 32
- Icon size resized to 1.2x
Should be 0.12 times of font size:
- Font size 14 makes |A| 1.68 px
- Font size 16 makes |A| 1.92 px
Resources
Use this link to find more details about the skill card: https://www.figma.com/file/hvBFMT0PpUlahPAuKE2LhI/SF-Web-Stencils-V-1.51?type=design&node-id=33473-19286&mode=design&t=ks1NaQ0HtSzXhB3N-4
SF Web Stencils Horizon Template
Lore Ipsum