Intro
Till b2205, different types of opportunities cards from Opportunity Market looks very different and are not possible to be displayed with mix categories within one section due to inconsistent card height. In order to harmonize the experience and support the new recommendation logic, we came up with the new card design.
The Opportunity Cards is a card to show the most important fields of a single opportunity, the opportunity includes mentoring program, assignment, job role, mentor and learning. It helps users to distingulish the opportunity type easily and shows the most critical info about the opportunities.
The card has 2 patterns and get developed in b2211 for both web and mob.
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
Pattern 1 is for opportunity type: Assignment, Learning, Mentoring Program and Job role while pattern 2 is design for mentor.
No Scrolling for Opportunity card.
Behavior & Interaction
Bookmaking
By clicking the bookmark button, users can bookmark/unbookmark an opportunity.
Navigation
User can click the card to go to Goal Detail page.
Color
Goal status colors are configured by admin/company
Screen Reader Support & Keyboard Support
Keyboard Interaction
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}.
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.
For more information 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.
The Value States are Goal Status, which is configured by admin/company. The default setting is as below:
Parameters
Responsiveness and Adaptiveness
Goal Card has no responsive differences. The buttons will switch to Cozy mode for responsive mobile screen.
Accessibilty
A11y Annotation and behavior can be found in Figma (Eng Spec)
Performance
- In Goals we are showing maxium 16 goal cards at default view. User can click show more to load more 16 goals cards each time.
- Currently Goal Card doesn’t support skeleton loading. We will consider to addopt skeleton loading when other UXR modules web UX start to adopt.
- We are using standard Fiori busy indicator for card loading: https://ux.wdf.sap.corp/fiori-design-web/busy-indicator/
Examples (Application-specific examples)
- Figma: 2211 eng spec- https://www.figma.com/file/ya8spcTpnJDE0rnGKLCc0V/OMP-2211?node-id=3%3A8