Mobile UX Consistency
Discover / Mobile UX Consistency
Intro
Consistent user experiences offer a range of benefits, including improved usability and ease of learning, along with reduced training, support, development, and maintenance costs. As a result, customers are increasingly demanding consistency as a fundamental aspect of mobile user experience.
SAP’s mobile design system and UI technologies are based on the Android and iOS/iPadOS platforms, adhering to the specific characteristics of each ecosystem. In contrast, Web applications follow the User Experience Consistency for Web Product Standard – a standard designed to maintain uniformity across products, regardless of technology or domain.
information
Mobile applications don’t follow a specific User Experience Consistency (UXC) Product Standard. However, our design guidelines are crafted to achieve consistent user experiences for mobile applications, especially when transitioning from web-based UXC principles, offering a proactive approach to developing consistent mobile user experiences.
Key Pillars
SAP's mobile applications achieve consistency through two essential pillars: the mobile app experience and platform ecosystem.
Mobile App Experience
Mobile app experience includes the design language as well as components and patterns.
Platform Specifics and Ecosystem
The platform ecosystem is specific to the Android and iOS platforms.
Mobile App Experience
For mobile platforms, we provide links to the SAP Fiori for Android and SAP Fiori for iOS design guidelines and the respective Google Material Design and Apple Human Interface guidelines to access content related to User Experience Consistency (UXC) for Web. This content is not intended to comprehensively address all aspects of the Web Product Standard; rather, it aims to assist in creating a more consistent application across different platforms.
<div> <div>Product Standard UX Consistency Web</div> <div>Related Mobile Design Guidelines</div> <div>Information</div> <div>Reference Links</div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-010">UXC-010-Colors</a></div> <div>Available</div> <div>The Horizon theme on mobile combines Google’s Material 3 tone-based surfaces with Horizon’s core colors.</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Ffoundations%2Fcolors%2Fhorizon-theme">Horizon Theme: Colors</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Ffoundations%2Fcolors">Colors</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-011">UXC-011-Theming Variables</a></div> <div>Available</div> <div>Design tokens are available for both mobile platforms which follow the platform tokens.</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Ffoundations%2Fdesign-tokens">Design Tokens</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Ffoundations%2Fdesign-tokens">Design Tokens</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-012">UXC-012-Typography</a></div> <div>Available</div> <div>SAP Fiori for Android type system maps SAP’s 72 typeface to Material Design’s type hierarchy. Similarly, SAP Fiori for iOS ensures the font styles are mapped one to one with SF font styles and support dynamic type.</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Ffoundations%2Ftypography">Typography</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Ffoundations%2Ftypography">Typography</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fv25-8%2Ffoundations%2Ficonography">UXC-013-Iconography</a></div> <div>Available</div> <div>All platforms use the SAP icon library. For SAP Fiori for iOS, all icons are available as SAP Fiori custom symbols within the SDK to support the same features as SF Symbols (weights and scales, color, animation).</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Ffoundations%2Ficonography">Iconography</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Ffoundations%2Ficonography">Iconography</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-014">UXC-014 Action Placement</a></div> <div>Available</div> <div>The action placement is based on the platform’s design system.</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fv25-8%2Fcomponents%2Fnavigation-and-search%2Ffooter%2F">Persistent Footer</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fcomponents%2Fm3-standard-components%2Ftop-app-bar%2F">SAP Design Guideline for M3 App Bar</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fcomponents%2Fm3-standard-components%2Fnavigation-bar%2F">SAP Guideline for M3 Navigation Bar</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Ftoolbar%2F">Toolbar</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Fnavigation-and-search%2Fnavigation-bar%2F">Navigation Bar</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fpatterns%2Fnavigation%2F">Navigation</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-015">UXC-015-Terminology</a></div> <div>Not Available</div> <div>There is no mobile guidance for terminology.</div> <div>-</div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-016">UXC-016-Shell</a></div> <div>Available</div> <div>Mobile guidance for using the standard Material Design and Apple components are available to integrate brand elements and profile.</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fv25-8%2Fcomponents%2Fm3-standard-components%2Ftop-app-bar%2F">App Bar</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fjoule%2Fpatterns%2Fjoule-entry-point">Joule Entry Point</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Fnavigation-and-search%2Fnavigation-bar%2F">Navigation Bar</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-017">UXC-017-Settings</a></div> <div>Available</div> <div>-</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Flayouts%2Flist-detail%2Fprofile-and-settings">Profile & Settings</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fpage-types%2Fprofile-settings">Profile & Settings</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-019">UXC-019-Icon Semantics</a></div> <div>Not Available</div> <div>All platforms use the SAP icon library. However, certain icon semantics are based on platform paradigms.</div> <div>-</div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-017">UX-020-User Menu</a></div> <div>Available</div> <div>-</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Flayouts%2Flist-detail%2Fprofile-and-settings">Profile & Settings</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fpage-types%2Fprofile-settings">Profile & Settings</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-021">UXC-021 Browser Integration</a></div> <div>Not Applicable</div> <div>There is no mobile guidance. For Web apps displayed on mobile applications, please refer to the Web Product Standard.</div> <div>-</div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-022">UXC-022-Button</a></div> <div>Available</div> <div>-</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fcomponents%2Fbuttons%2Fbutton%2F">Button</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fcomponents%2Fbuttons%2Ffab%2F">FAB</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Fbuttons%2F">Buttons</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-023">UXC-023-Message Handling</a></div> <div>Available</div> <div>-</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fcomponents%2Ffeedback%2Fbanner%2F">Banner</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fv25-8%2Fcomponents%2Ffeedback%2Fmulti-message-handling%2F">Multi-Message Handling</a></p> <p><a href="https%3A%2F%2Fm3.material.io%2Fcomponents%2Fsnackbar%2Foverview">M3Snackbar</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Ffeedback%2Fbanner%2F">Banner</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Ffeedback%2Fmulti-message-handling%2F">Multi-Message Handling</a>, <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Ffeedback%2Ftoast-message%2F">Toast Message</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-024">UXC-024-Notifications</a></div> <div>Partially Available</div> <div>Platforms offer guidance for push notifications. Currently, there are no design guidelines for in-app notifications.</div> <div> <p>Android: <a href="https%3A%2F%2Fm3.material.io%2Ffoundations%2Fcontent-design%2Fnotifications">M3 Notifications</a></p> <p>iOS: <a href="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Falerts">Alerts</a>, <a href="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Fmanaging-notifications">Managing Notifications</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-025">UXC-025-Shell Search</a></div> <div>Available</div> <div>-</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fcomponents%2Fm3-standard-components%2Fsearch%2F">M3 Search</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fpatterns%2Fsearch%2F">Search</a>, <a href="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Fsearching">Searching</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-026">UXC-026 Side Navigation</a></div> <div>Available</div> <div>-</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fcomponents%2Fm3-standard-components%2Fnavigation-rail%2F">M3 Navigation Rail</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Fnavigation-and-search%2Fsidebar%2F">Sidebar</a>, <a href="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Fsidebars%2F">Sidebars</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-027">UXC-027-Illustrations</a></div> <div>Available</div> <div>All platforms use the SAP illustration library.</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Fcomponents%2Ffeedback%2Fillustrated-message%2F">Illustrated Message</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Fcomponents%2Ffeedback%2Fillustrated-message%2F">Illustrated Message</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-028">UXC-028-Shadows</a></div> <div>Available</div> <div>SAP Fiori for Android inherits Material Design’s usage of shadows. It uses tonal colors to communicate elevation and rarely shadows. In addition to standard elevation levels, SAP Fiori for iOS incorporates Apple’s materials effect to create a layered, natural-looking depth in the interface, further supporting the sense of elevation.</div> <div> <p>Android: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-android%2Ffoundations%2Felevation">Elevation</a></p> <p>iOS: <a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-ios%2Ffoundations%2Felevation">Elevation</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-029">UXC-029-Metrics</a></div> <div>Available</div> <div> <p>Android touch target: 48x48dp</p> <p>iOS touch target: 44x44pt</p> </div> <div> <p>Android: <a href="https%3A%2F%2Fm3.material.io%2Ffoundations%2Foverview%2Fprinciples">M3 Accessibility</a></p> <p>iOS: <a href="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Faccessibility">Accessibility</a>, <a href="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Fdesigning-for-ios%2F">Designing for iOS</a>, <a href="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Fdesigning-for-ipados">Designing for iPadOS</a></p> </div> </div> <div> <div><a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%2Fdisplay%2Fuxc%2FUXC-030">UXC-030-Spacing</a></div> <div>Available</div> <div>The mobile platforms define spacing.</div> <div> <p>Android: <a href="https%3A%2F%2Fm3.material.io%2Ffoundations%2Flayout%2Funderstanding-layout%2Fspacing">M3 Layout Basics – Spacing</a></p> <p>iOS: <a href="https%3A%2F%2Fdeveloper.apple.com%2Fdesign%2Fhuman-interface-guidelines%2Flayout">Layout</a></p> </div> </div>
Platform Specifics and Ecosystem
Mobile platforms provide a rich ecosystem that can be leveraged. This list serves as a starting point for exploring areas that are essential for maintaining consistency on mobile.
Google Play Store/App Store Appearance
The appearance of SAP mobile apps in the Play/App Store conveys the purpose of SAP’s mobile experience and SAP Fiori brand voice, helping business users identify the app in both the Play/App Store app and on their screens. To ensure consistency, we adhere to the guidelines provided by Google and Apple when creating branded images.
Recommendation:
Use the SAP store images that follow the SAP store image style guide.
Google Product Icon/Apple App Icon
The product/app icon of mobile apps communicates the purpose of SAP’s mobile experience and supports business users in recognizing the app in the Play/App Store and on their home screens.
Recommendation:
Use the SAP product icons that follow the product icon style guide.
Onboarding
The SAP Fiori onboarding pattern provides a consistent, native-first user experience, allowing users to set up their account and get the app running. It features a sequence of optional, configurable flows that support custom pages, along with individual page patterns available within the SDK.
Android: Single User Onboarding, Multi-User Onboarding
iOS: Single-User Onboarding, Multi-User Onboarding
Recommendation:
Use the activation method of SAP Mobile Services as well as a splash screen that follows the splash screen guide.