Mobile users in various environments

The usage of mobile devices in the personal and business context is constantly growing, as user’s value the speed and simplicity of mobile devices and apps. At SAP, we are in the phase of reimagining how users are experiencing business software and how they get their job done, anywhere.

Designing for interruptions and direct access

Using apps on the go, while multitasking and in-between other activities requires apps to handle interruptions of workflows seamlessly. Quickly unlocking the phone, launching an app and starting a workflow, just before jumping to another app or quickly locking the phone, is a very frequent usage pattern of mobile apps. Therefore the mobile operating systems Apple iOS and Google Android offer robust features like caching, offline-mode and activity handling, ensuring continuity to user interactions and boosting efficiency.

Operating system integration

Having an app installed on a user’s phone doesn’t ensure a frequent usage or the user’s awareness of important updates, as the first interaction tier is the mobile operating system itself, not the app. To increase the proximity between the user and the app, mobile operating systems provide important central services like notifications, search, home screens, widgets and many more. Making best use of those features means bringing SAP content and workflows even closer to the user and increasing efficacy. SAP Mobile Start is a great example for leveraging native iOS and Android functionality to let users easily consume business content and workflows across products.

SAP mobile design and technology

To support our enterprise users with powerful mobile experiences, we are augmenting and extending the Apple iOS and Google Android capabilities, while maintaining the familiarity of each platform. Leveraging SAP Fiori for iOS and SAP Fiori for Android allows app designers and developers to focus on business needs, rather than investing into building custom UI components.

Qualities of SAP Fiori components

Components of SAP’s mobile design system and the software development kits are enterprise-ready out-of-the-box and provide crucial key qualities:

• Themeable
  Parameter based theming allows switching between light, dark and custom visual themes. Customers can also create their own themes to match their corporate identity.
• User Validated
  Usability validations with end-users are conducted early in the design process to incorporate feedback into design iterations. This ensures that components and interaction patterns are easy to use and do meet user expectations.
• Accessible
  All used colors and color-combinations meet contrast ratio requirements. Text sizes are reacting to global accessibility settings and assistive devices are supported.
• Extendable
  Components and patterns can be extended to cover additional features that are necessary to cover specific use-cases.
• Animated
  Animations and transitions are used to communicate UI states, behaviors and confirmations to the user.
• Consistent
  Building on the familiarity of iOS and Android, coherent visual treatments and UI interactions across all components ensure a high usability and predictable component behaviors.
• Adaptive
  Components are reacting to different screen sizes, orientation changes and supporting device types like phones and tablet.
• Updateproof
  Operating system updates, technology enhancements, as-well-as the introduction of new features interactions pattern are incorporated into the constant evolution of the components.

Latest enhancements to SAP Fiori for Android 5.1 and SAP Fiori for iOS 9.0

The latest release of the SAP Business Technology Platform SDKs for Android and iOS is providing even more components and features along the needs of our users. We constantly research and listen to the needs of our consumers and partners to understand the priorities and requirements towards the mobile design system and the SDKs.

New components and enhancements to SAP Fiori for Android and iOS

On Android, we are introducing new components like the Top App Bar, Navigation Bar and Data Table Card, while enhancing the existing Onboarding pattern.

On iOS, we are introducing new components like the Tab Bar, Navigation Bar, Stepper Form Cell and Range Slider Form Cell, while enhancing the existing Filter Form Cell, Segmented Control Form Cell, Switch Form Cell component, as-well-as the Onboarding and Sort& & Filter patterns.

Both platforms have also received numerous accessibility improvements to foster the creation of inclusive mobile experiences.

Another highlight of the latest release is the introduction of custom branding capabilities to both iOS and Android. This features enables customers and partners to re-use existing SAP UI Theme Designer based custom themes to now also define the look & feel of SAP mobile apps and SDK components.

Theming based custom branding capability

Customers and partners can now place their own logo in theming enabled SAP mobile apps. On top of this, key colors can be adjusted to meet corporate identity styleguides, for both light and dark mode.

SAP Mobile Start

SAP Mobile Start is a native app that serves as the mobile entry point to SAP’s business applications and content, embracing our new mobile experience. Thoughtfully predefined content for typical persona and industry roles allows users to execute mobile-enabled business processes faster than ever.

SAP Mobile Start App Icon

SAP Mobile Start also features SAP’s new App & Product Icon design direction. Within the next month and quarters, more and more SAP mobile experiences will receive various updates, including the adoption of the new App & Product Icon appearance. Users will benefit from being able to quickly identify apps that belong to SAP’s product family.

SAP Mobile Start in light and dark mode

SAP Mobile Start has been one of the frontrunner apps to adopt the Horizon visual design in light and dark mode. Besides the fresh visual appearance, the app offers easy access to many SAP mobile apps. Approvals and other work items are also ready to be processed in the “To Do” section. To monitor their business, users can integrate business data into their home screen by adding SAP Mobile Start widgets. Notifications pro-actively inform the user about updates that require attention. Additional extensions and customizations are available to admins and key users.

Start creating enterprise-ready mobile experiences for your users

To support app creators in building apps for specialized scenarios, we are providing our mobile design and technology assets directly to our partners and customers. We are offering enablement materials like e.g. the SAP Fiori Mobile design guidelines, SAP Fiori Mentor apps, Figma UI-Kits, Software Development Kits, API References and more.

Design Guidelines

SAP Fiori Mobile Design Guidelines for Android and iOS

A detailed documentation on component anatomy, behavior and interactions allows designers and developers to use components that fit best to their use case. Crosslinks to the Material Design Guidelines for Android and the Human Interface Guidelines for Apple, as well as to development documentation, help you easily navigate to these extended resources.
Additionally, a feedback function is available on each guideline article for designers and developers to easily provide feedback.

SAP Fiori for Android Design Guidelines | SAP Fiori for iOS Design Guidelines

Figma UI-Kits

SAP Fiori UI-Kit for Figma

With the new SAP Fiori for Android and iOS Figma stencils, it’s now easier than ever to use the new components and patterns in your mobile design. By using the stencils, you can quickly create a consistent user experience that enables app implementations at scale.

SAP Fiori for Android – 5.1 Stencils | SAP Fiori for iOS – 9.0 Stencils

Mentor App

The SAP Fiori Mentor app is an interactive playground for mobile designers and developers to explore the flexibility of mobile components and patterns that are available through the SAP BTP SDKs for Android and iOS. By adjusting component settings within the app, the behavior, interaction, and features of components can be previewed live. For developers, the code samples with the predefined settings can be exported into your preferred development tool. Designers can easily understand the scope of functionality for a specific component and specify their designs with applicable parameters, and hand over the respective code snippets to their development partners. To provide some tangible examples of the actual UI component usage in apps, the best practices section provides a selection of app design examples. By highlighting specific areas, each app design indicates which UI components are used, so you can directly deep dive into their additional features.

Apple App Store | Google Play Store

Software Development Kits

SAP BTP SDKs for Android and iOS

The SAP BTP SDK for iOS and SAP BTP SDK for Android include the SAP Fiori framework that contains user interface components. These frameworks are standalone and do not have a dependency on other parts of the SDK. These libraries make it easier to create applications that conform to SAP Fiori Design Language. On iOS the SAP BTP SDK offers “SAP Fiori framework“ and the “Fiori” controls extend Apple’s UIKit/SwiftUI. These controls can be used programmatically or through storyboard files. On Android the SAP BTP SDK the UI components are contained in the “Fiori” library and extend Material Design controls.

SAP BTP SDK for iOS | SAP BTP SDK for Android

Additional information

Learn more about our mission to overhaul the SAP mobile user experience in earlier blogs:

Discover additional updates on the SAP BTP SDsK for iOS and Android: