Last Update: August 16, 2023
Platform: Web
Designer: Gregory March, Alex Mikhailov, Anton Fischer (Template Owner)
Intro
The SF landing page is the starting and overview page for SF modules to display and categorize all relevant information that can be assigned to a HXM modules, such as: Opportunity, Marketplace, Growth Portfolio or Learning and other modules. The general understanding is that the landing page is an entry page that should be designed simply and clearly.
Usage
The page is a top-level page that is reached directly from the module picker as a first entry point for orientation into the modules. All other pages of the module are direct or indirect sub-pages of it.
Types
Depending on the design of the use cases of the HXM modules, the landing page may contain certain elements such as filter elements, a search field in the header, a banner and different types of cards in different sizes. In general, the basic approach of the landing page should be consistent for all module types in order to make orientation on the pages easier.
Structure & Components
The structure of the page consists of a header and content area. Content includes an optional top section and map areas (swimming lanes/carousels).
-
Header
- Title
- Search
- Actions / Navigation to Subpages
-
Content
-
Banner
-
Sections
- Title
- Carousel / Grid
- Footer (View All) – Accessibility req. to add section name as invisible label to View All so it makes sense in link lists or when otherwise announce by screen reader etc.
-
Talk about child pages (drill-in)
- Breadcrumb navigation back to Landing
- more filtering/visualization options
- No carousels for main content, but grid views
Behavior & Interaction
The page comes as a scrolling scenario with 7 to 8 swim lanes maximum. Using the View All button provides the user the navigation to a sub page: Drill-in Page: https://www.figma.com/file/hvBFMT0PpUlahPAuKE2LhI/SF-Web-Stencils?type=design&node-id=7822-10363&mode=design&t=bVoxD8H31m6F0OLJ-4 The Drill-in Page uses sections to structure
the content logically. No Carousel controls are being used in this page. All items are displayed within this page type, using lazy loading to load more content on demand.
Responsiveness & Adaptiveness
The site behaves according to the responsiveness specifications
Application-specific examples
There are currently three examples of using landing pages in SF.
Opportunity Marketplace
Growth Portfolio
Learning
UX Writing Guidance
Search Field:
Recommendation: Search for people or features
Page Title:
Module Name (written in headline style)
Section Title:
Keep the title short and crisp.
Don´t use abbreviations.
Don't use synonyms.
Use active formulations.
The following link points to a chapters in the Frontify UX Guideline for additional information: About UX Writing
SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite
For questions, please use the following DL: mailto:DL_6463A20EA1D4B3D3F6DA72BB@global.corp.sap
Accessibility
The landing page was developed according to accessibility standards.
Resources
Confluence Page: https://confluence.successfactors.com/pages/viewpage.action?spaceKey=UX&title=Landing+Page
Link to Visual Core: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2697898120
Fiori for Web Design Guidelines: OverviewPage | SAP Fiori for Web Design Guidelines
SF Web Stencils Horizon Template