SAP Fiori for Android & iOS: An all-new user experience for enterprise-ready mobile applications

Introducing SAP’s new mobile experience and the latest software development kits (SDKs) of the SAP Business Technology Platform: SAP Fiori for Android and iOS with the new visual theme Horizon. As a part of our ongoing UX transformation, we’re bringing intelligent business processes to SAP’s mobile experience in a more elevated way than ever before. The latest SDKs feature a bold yet friendly new look and feel, an enhanced feature set, as well as more accessible and performant components.

Set%20of%20SAP%20Fiori%20Mobile%20Components

Examples of SAP Fiori Mobile Components

What is Horizon?

Horizon is SAP Fiori’s new visual theme across all platforms: SAP Fiori for Web, SAP Fiori for Android and SAP Fiori for iOS. Horizon was designed using inputs from user insights and inclusive design research. We started by listening to our users and customers, and we heard that they wanted their working experience to look, feel, and sound more approachable, friendly, easy to use, and modern. Which is why Horizon focuses on improving aesthetics—the first of four design pillars in SAP’s user-centered transformation.

One of the most notable features of Horizon is a true light and dark theme:

  • Morning Horizon has a clean, bright look and friendly appeal
  • Evening Horizon is easy on the eyes in a low-light environment

SAP%20Fiori%20for%20iOS%20Applications%20using%20the%20Morning%20and%20Evening%20Horizon%20themes

SAP Fiori for iOS Applications using the Morning and Evening Horizon themes

Let’s take a closer look at the new visual foundation of SAP’s mobile design system:

  • Typeface:
    The new theme features SAP’s own and bespoke typeface 72, which is optimized for screen use, increasing legibility, readability, and accessibility. Easing consume-ability, 72 black will be used for headings, while the use of bold will give increased emphasis to the most important actions.
  • Colors:
    The new color palette brings the screen to life, while focusing on what’s important. Vibrant, yet accessible colors on a subtle base ensure that the most valuable content stands out.
  • Enhanced use of shadows and contrast:
    Shadows provide a feeling of depth to ensure that actionable elements are easily identified and intuitive. By using diverse hues in a new tinted elevation system, the shadow serves as a reflective extension of the UI element and increases affordance of active states. UI elements provide enough contrast to allow for a pleasant working experience while also adhering to contrast requirements.
  • Shapes:
    To balance the bold typeface, the shapes and corners used in the new theme are rounded which brings an overall soft and friendly look and feel, also to business applications. Rounded corners bring focus to the inside of the elements and are more natural and welcoming compared to sharp edges.

Accessibility

Horizon also embraces our strong commitment to a more inclusive experience. All colors and their flexible combinations have been carefully tested to meet contrast ratios that comply with Accessibility standards.

Dynamic%20Font%20and%20Increased%20Contrast%20Theme%2C%20SAP%20Fiori%20for%20iOS

Dynamic Font and Increased Contrast Theme, SAP Fiori for iOS

Dynamic Type on iOS enables users to easily resize text without losing content or functionality. By introducing an increased contrast mode for iOS with darker colors, richer contrasts, and more defined components, the reading experience is more enjoyable for everyone. For people using assistive technologies, we are optimizing our components on SDKs for VoiceOver and TalkBack.

New Features

Besides the new visual themes, we are excited to announce new components and enhancements for SAP’s mobile SDKs. Internal & external feedback, emerging technologies and new features in iOS and Android are informing our priorities in continuously enhancing the mobile design system and SDKs.

New in SAP Fiori for Android 4.0:

Scatter%20Chart%20Component%2C%20SAP%20Fiori%20for%20Android

Scatter Chart Component, SAP Fiori for Android

Scatter chart: The scatter chart is a new chart type for SAP Fiori for Android analytics. It displays a collection of points where each point represents two values from two variables, and it shows the correlation between these two variables to convey a trend.

Privacy%20Notice%20Component%2C%20SAP%20Fiori%20for%20Android

Privacy Notice Pattern, SAP Fiori for Android

Privacy notice: Privacy notice is a new pattern which helps users understand and adjust privacy permissions. Content templates and illustrations are available and support various scenarios. For example, for access to location, photos, calendar, camera and notifications.

Onboarding%20Pattern%2C%20SAP%20Fiori%20for%20Android

Onboarding Pattern, SAP Fiori for Android

Onboarding: Onboarding is the entry point for users to start using an app. We’ve enhanced it for accessibility and convenience. If the QR code scan fails, there will be a dialog to communicate the error and to show the options to the user on next steps. In the passcode sign-in screen, users can enable fingerprint unlock.

Sort%20by%20Multiple%20Criteria%20Component%2C%20SAP%20Fiori%20for%20Android

Sort by Multiple Criteria Pattern, SAP Fiori for Android

Sort by multiple criteria: This is an advanced sorting feature for power users which we enhanced in this release. It allows users to select multiple sorting criteria from a list of applicable options. Users can toggle the sorting order for each selected criteria independently and re-arrange the criteria through drag and drop to create the sorting sequence they want.

New in SAP Fiori for iOS 7.0:

Order%20Picker%20Form%20Cell%20Component%2C%20SAP%20Fiori%20for%20iOS

Order Picker Form Cell Component, SAP Fiori for iOS

Order picker form cell: A new advanced sorting feature for power users comparable to the “sort by multiple criteria component” for SAP Fiori for Android.

Analytical%20Data%20Table%20Card%20Component%2C%20SAP%20Fiori%20for%20iOS

Analytical Data Table Card Component, SAP Fiori for iOS

Analytical data table card: This new card displays analytical data as a table. It shows a list of values with optional time stamps. If the list of items exceeds the card, the user is indicated with the amount of total available values. The card is the starting point for navigating into the values in detail.

Hierarchy%20View%20Component%2C%20SAP%20Fiori%20for%20iOS

Hierarchy View Component, SAP Fiori for iOS

Hierarchy view: This powerful component displays items with multiple hierarchies. It was enhanced with the option to select an item deeper within the hierarchy to perform follow-up actions.

Which apps are already part of this journey?

As a frontrunner in delivering on SAP’s new mobile experience, SAP Mobile Start is a simple and elegant entry point to SAP’s app suite and provides persona-tailored content.

SAP%20Mobile%20Start%20App

SAP Mobile Start App

Another early adopter is the SAP Ariba Shopping mobile app, currently available in beta. As pioneers in the adoption of the new design direction, the mobile team was able to skillfully blend the new design language with native features such as augmented reality, resulting in a buying experience that rivals state-of-the-art consumer shopping apps.

SAP%20Ariba%20Intelligent%20Buying%20App

SAP Ariba Intelligent Buying App

These early implementations were created with close engagements and in collaboration across lines of business and central design, along with substantial inputs and feedback from customers and users. We are looking forward to charting the success of these new engagements and continuing to share these transformation stories as they develop.

Get started with the latest design toolkits, guidelines and SDKs

Leverage the power of SAP’s mobile design and technology for your own use cases and applications:

Figma%20Stencils%2C%20SAP%20Fiori%20for%20iOS

Figma Stencils, SAP Fiori for iOS

UI stencil kits: 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 – 4.0 StencilsSAP Fiori for iOS – 7.0 Stencils

SAP%20Fiori%20Mobile%20Design%20Guidelines%20for%20Android%20and%20iOS

SAP Fiori Mobile Design Guidelines for Android and iOS

Design guidelines: 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 via a vertical tab on each guideline article for designers and development to easily provide feedback to these updates.
SAP Fiori for Android Design GuidelinesSAP Fiori for iOS Design Guidelines

Development%20Environment%20and%20Simulators%2C%20SAP%20BTP%20SDKs%20for%20Android%20and%20iOS

Development Environment and Simulators, SAP BTP SDKs for Android and iOS

SAP Business Technology Platform SDKs: 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

What’s next?

With SAP Fiori for Android and iOS, we’re putting the intelligent enterprise at the fingertips of all users and we are enabling our partners & customers to build delightful & coherent mobile applications. The mobile design system and mobile technology is fully available and ready to serve as your robust foundation for highly efficient mobile application development. Within SAP, more and more teams and product areas are adopting the SDK and we are eager to evolve SAP Fiori mobile along stakeholder, partner, customer and end-user feedback.

Stay tuned for more on our collective transformation journey and SAP’s commitment to native mobile applications and technology. We are expecting to share more information in the middle of 2022, following up our next releases for SAP Fiori for Android and iOS.
To follow along this topic, make sure you give me a +Follow on SAP Community and in the meantime: Keep designing and coding!

Thank you and Kudos to the SAP Design – SAP Fiori Mobile teams, our partner teams in the SAP BTP, as-well as the SAP Mobile Experience and Engineering teams. It takes the strong collaboration and commitment of all our teams to deliver what our users deserve: A powerful, intuitive and delightful mobile experience.

Additional information
Learn more about the new approach to the SAP user experience